.org-member-info {
  flex: 1;
  min-width: 0;
}

.org-member-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.org-member-email {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Logo Upload Group */
.logo-upload-group {
  display: flex;
  gap: var(--space-xs);
}

.logo-upload-group .form-input {
  flex: 1;
}

.logo-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  flex-shrink: 0;
}

.logo-upload-btn:hover {
  background: var(--bg-surface);
  border-color: var(--astrovia-blue);
  color: var(--astrovia-blue);
}

.logo-upload-btn i {
  font-size: var(--font-size-xl);
}

/* Enhanced Modal Transitions - Exclude Orders Modal */
#exclude-orders-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--duration-normal) var(--ease-default), visibility var(--duration-normal);
}

#exclude-orders-modal:not(.hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#exclude-orders-modal.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Nexus Modal Enhanced Backdrop */
#nexus-states-modal.modal-overlay {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#nexus-states-modal .modal-card {
  transform: translateY(20px) scale(0.95);
  transition: transform var(--duration-slow) cubic-bezier(0.34, 1.56, 0.64, 1);
}

#nexus-states-modal:not(.hidden) .modal-card {
  transform: translateY(0) scale(1);
}

.modal-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  display: none;
}

.modal-overlay:not(.hidden) {
  display: flex !important;
  opacity: 1;
  visibility: visible;
}

.modal-content {
  transform: translateY(-10px) scale(0.98);
  transition: transform var(--duration-normal) var(--ease-default);
}

.modal-overlay:not(.hidden) .modal-content {
  transform: translateY(0) scale(1);
}

/* Enhanced Dropdown Transitions */
.form-select,
select {
  transition: border-color var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default), background-color var(--duration-normal) var(--ease-default);
}

.form-select:focus,
select:focus {
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}

/* Smooth Button Transitions */
.btn-primary,
.btn-secondary,
.c-btn-primary,
.c-btn-secondary,
.action-btn,
button {
  transition: all var(--duration-normal) var(--ease-default);
}

/* Smooth Card Hover */
.admin-card,
.card,
.market-card {
  transition: box-shadow var(--duration-normal) var(--ease-default), transform var(--duration-normal) var(--ease-default);
}

.admin-card:hover,
.card:hover {
  border-color: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover);
  /* NO background change - Single-Surface Card Law */
}

.org-member-role {
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.org-member-role.admin {
  background: var(--info-bg);
  color: var(--astrovia-blue);
}

.org-row,
.member-row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto 100px;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-lighter);
  transition: background var(--duration-fast) var(--ease-default);
}

.org-row:last-child,
.member-row:last-child {
  border-bottom: none;
}

.org-row:hover,
.member-row:hover {
  background: var(--bg-secondary);
}

.org-info,
.member-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.org-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--info-bg) 0%, rgba(59, 92, 232, 0.15) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.org-icon svg {
  color: var(--astrovia-blue);
}

.org-details,
.member-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.org-name,
.member-name {
  font-weight: 600;
  font-size: var(--font-size-md);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-shop,
.member-email {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-avatar,
.member-avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--info-gradient);
  border: 1px solid var(--avatar-border-photo, var(--neutral-200));
  box-shadow: var(--avatar-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--astrovia-blue);
  flex-shrink: 0;
  overflow: hidden;
}

.org-avatar img,
.member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.org-slug {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.role-badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.role-badge.owner {
  background: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-500) 100%);
  color: var(--text-on-brand);
}

.role-badge.admin {
  background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 100%);
  color: var(--text-on-brand);
}

.role-badge.member {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: none;
}

.org-member-count i {
  margin-right: 4px;
}

.org-created {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.org-meta,
.member-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.org-role-badge,
.member-role {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.role-owner {
  background: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-500) 100%);
  color: var(--text-on-brand);
}

.role-member {
  background: var(--success-gradient);
  color: var(--text-on-brand);
}

.org-member-count {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.member-auth-mode {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.org-actions,
.member-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.back-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.org-detail-info {
  display: flex;
  gap: var(--space-2xl);
  padding: var(--space-md) 0;
}

.org-info-item {
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
}

.org-info-label {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  font-weight: 500;
}

.org-info-value {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 600;
}

.no-orgs-message,
.no-members {
  padding: var(--space-3xl) var(--space-lg);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

/* ========================================
   ENHANCED UX COMPONENTS
   World-Class Empty States, Loading States, and Onboarding
   ======================================== */

/* Enhanced Empty State - Actionable & Clear */
.enhanced-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-default);
  min-height: 300px;
}

.enhanced-empty-state-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--empty-icon-bg);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-lg);
}

.enhanced-empty-state-icon svg {
  width: 36px;
  height: 36px;
  stroke: var(--empty-icon-color);
  opacity: 0.8;
}

.enhanced-empty-state-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--empty-title-color);
  margin: 0 0 var(--space-xs) 0;
}

.enhanced-empty-state-subtitle {
  font-size: var(--font-size-md);
  color: var(--empty-subtitle-color);
  margin: 0 0 var(--space-xl) 0;
  max-width: 360px;
  line-height: 1.5;
}

.enhanced-empty-state-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
  border-radius: var(--btn-radius);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  text-decoration: none;
}

.enhanced-empty-state-action:hover {
  background: var(--btn-primary-bg-hover);
  box-shadow: var(--shadow-btn-primary);
}

.enhanced-empty-state-secondary {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.enhanced-empty-state-secondary a {
  color: var(--text-brand);
  text-decoration: none;
}

.enhanced-empty-state-secondary a:hover {
  text-decoration: underline;
}

/* Enhanced Loading State - Smooth & Reassuring */
.enhanced-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) var(--space-xl);
  min-height: 200px;
}

.enhanced-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-default);
  border-top-color: var(--text-brand);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
  margin-bottom: var(--space-lg);
}

.enhanced-loading-text {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  text-align: center;
}

.enhanced-loading-subtext {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* Progress Loading Bar */
.enhanced-loading-bar {
  width: 200px;
  height: 4px;
  background: var(--border-light);
  border-radius: var(--radius-2xs);
  overflow: hidden;
  margin-bottom: 16px;
}

.enhanced-loading-bar-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--astrovia-blue), var(--astrovia-purple));
  border-radius: var(--radius-2xs);
  animation: enhanced-loading-progress 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes enhanced-loading-progress {
  0% { width: 0%; margin-left: 0; }
  50% { width: 60%; margin-left: 20%; }
  100% { width: 0%; margin-left: 100%; }
}

/* Welcome/Onboarding Card */
.onboarding-card {
  background: linear-gradient(135deg, var(--astrovia-blue-light-bg) 0%, var(--info-bg) 100%);
  border: 1px solid var(--astrovia-blue-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.onboarding-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--astrovia-blue-subtle) 0%, transparent 70%);
  pointer-events: none;
}

.onboarding-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.onboarding-card-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px 0;
}

.onboarding-card-subtitle {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin: 0;
}

.onboarding-dismiss {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-xs);
  transition: all var(--duration-fast) var(--ease-default);
}

.onboarding-dismiss:hover {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.05);
}

.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.onboarding-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--bg-white);
  border-radius: var(--radius-md);
  border: none;
  transition: all var(--duration-normal) var(--ease-default);
}

.onboarding-step:hover {
  border-color: var(--astrovia-blue);
  box-shadow: var(--shadow-subtle-hover);
}

.onboarding-step-number {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--astrovia-blue);
  color: var(--text-on-brand);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 700;
  flex-shrink: 0;
}

.onboarding-step.completed .onboarding-step-number {
  background: var(--success);
}

.onboarding-step-content h4 {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}

.onboarding-step-content p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* Improved Tooltips */
.help-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  cursor: help;
}

.help-tooltip-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-weight: 600;
}

.help-tooltip-content {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-primary);
  color: var(--text-inverse);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  width: max-content;
  max-width: 280px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--ease-default);
  z-index: 1000;
  box-shadow: var(--shadow-lg);
}

.help-tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--text-primary);
}

.help-tooltip:hover .help-tooltip-content {
  opacity: 1;
  visibility: visible;
}

/* Enhanced Error State */
.enhanced-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  background: var(--error-subtle);
  border: 1px solid var(--error-border-subtle);
  border-radius: var(--radius-lg);
}

.enhanced-error-state-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--error-tint);
  border-radius: var(--radius-full);
  margin-bottom: 16px;
}

.enhanced-error-state-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--error);
}

.enhanced-error-state-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.enhanced-error-state-message {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin: 0 0 20px 0;
  max-width: 360px;
}

.enhanced-error-state-retry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--error);
  color: var(--text-on-brand);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
}

.enhanced-error-state-retry:hover {
  background: var(--error-dark);
}

/* Friendly Labels - Simplifying Technical Terms */
.label-friendly {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.label-friendly-hint {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  font-weight: 400;
}

/* Success Toast/Notification */
.enhanced-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border-left: 4px solid var(--success);
  z-index: 10000;
  animation: toast-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.enhanced-toast-success {
  border-left-color: var(--success);
}

.enhanced-toast-error {
  border-left-color: var(--error);
}

.enhanced-toast-warning {
  border-left-color: var(--warning);
}

.enhanced-toast-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.enhanced-toast-content h4 {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 2px 0;
}

.enhanced-toast-content p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.enhanced-toast-close {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px;
  margin-left: 8px;
}

/* Breadcrumb Navigation */
.enhanced-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  font-size: var(--font-size-base);
}

.enhanced-breadcrumb-item {
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

.enhanced-breadcrumb-item:hover {
  color: var(--astrovia-blue);
}

.enhanced-breadcrumb-separator {
  color: var(--border-light);
}

.enhanced-breadcrumb-current {
  color: var(--text-primary);
  font-weight: 500;
}

/* Section Header with Subtitle */
.enhanced-section-header {
  margin-bottom: 24px;
}

.enhanced-section-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px 0;
}

.enhanced-section-subtitle {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Quick Stats Summary Cards */
.quick-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.quick-stat-card {
  background: var(--bg-white);
  border: none;
  border-radius: var(--radius-md);
  padding: 20px;
  transition: all var(--duration-normal) var(--ease-default);
}

.quick-stat-card:hover {
  border-color: var(--astrovia-blue-border);
  box-shadow: var(--shadow-subtle-hover);
}

.quick-stat-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.quick-stat-value {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.quick-stat-change {
  font-size: var(--font-size-sm);
  margin-top: 4px;
}

.quick-stat-change.positive {
  color: var(--success);
}

.quick-stat-change.negative {
  color: var(--error);
}

/* ========================================
   ADAPTIVE UX CLARITY SYSTEM
   Confidence indicators, tooltips, error intelligence
   ======================================== */

/* ===== CONFIDENCE INDICATORS ===== */
.confidence-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-lg);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  letter-spacing: 0.3px;
  transition: all var(--duration-normal) var(--ease-default);
  cursor: help;
}

.confidence-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* High confidence - live/verified data */
.confidence-badge.high {
  background: linear-gradient(135deg, var(--success-tint) 0%, var(--success-bg-solid) 100%);
  color: var(--success-dark);
  border: none;
}

.confidence-badge.high svg {
  color: var(--success);
}

/* Medium confidence - synced/cached data */
.confidence-badge.medium {
  background: linear-gradient(135deg, var(--warning-tint) 0%, var(--warning-bg) 100%);
  color: var(--warning-dark);
  border: none;
}

.confidence-badge.medium svg {
  color: var(--warning);
}

/* Low confidence - stale/estimated data */
.confidence-badge.low {
  background: linear-gradient(135deg, var(--error-tint) 0%, var(--error-bg-solid) 100%);
  color: var(--error-dark);
  border: none;
}

.confidence-badge.low svg {
  color: var(--error);
}

/* Data source indicator */
.data-source-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.data-source-indicator .source-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.data-source-indicator .source-dot.live {
  background: var(--success);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
  animation: pulse-live 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.data-source-indicator .source-dot.synced {
  background: var(--warning);
}

.data-source-indicator .source-dot.cached {
  background: var(--neutral-border);
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

.data-source-indicator .source-label {
  font-weight: 500;
}

.data-source-indicator .source-time {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

/* ===== CONTEXTUAL TOOLTIPS ===== */
.help-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  cursor: help;
  vertical-align: middle;
}

.help-tooltip-icon {
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
  transition: color var(--duration-normal) var(--ease-default);
}

.help-tooltip:hover .help-tooltip-icon {
  color: var(--astrovia-blue);
}

.help-tooltip-content {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  padding: 14px 16px;
  background: var(--text-primary);
  color: var(--text-inverse);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--ease-default);
  z-index: 1000;
  pointer-events: none;
}

.help-tooltip-content::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--text-primary);
}

.help-tooltip:hover .help-tooltip-content {
  opacity: 1;
  visibility: visible;
}

.help-tooltip-title {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: var(--font-size-base);
  color: var(--text-inverse);
}

.help-tooltip-body {
  color: rgba(255, 255, 255, 0.85);
}

.help-tooltip-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  color: var(--astrovia-blue-light);
  font-weight: 500;
  font-size: var(--font-size-sm);
  text-decoration: none;
}

/* Tooltip positions */
.help-tooltip-content.position-right {
  bottom: 50%;
  left: calc(100% + 10px);
  transform: translateY(50%);
}

.help-tooltip-content.position-right::before {
  top: 50%;
  left: -6px;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: var(--text-primary);
}

.help-tooltip-content.position-bottom {
  bottom: auto;
  top: calc(100% + 8px);
}

.help-tooltip-content.position-bottom::before {
  top: -12px;
  border: 6px solid transparent;
  border-bottom-color: var(--text-primary);
}

/* ===== ERROR INTELLIGENCE ===== */
.smart-error {
  background: linear-gradient(135deg, var(--red-50) 0%, var(--red-100) 100%);
  border: none;
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 16px 0;
}

.smart-error-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.smart-error-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--error);
}

.smart-error-title {
  font-weight: 600;
  color: var(--error-dark);
  font-size: var(--font-size-md);
  line-height: 1.4;
}

.smart-error-message {
  color: var(--error-text);
  font-size: var(--font-size-base);
  line-height: 1.5;
  margin-bottom: 12px;
  padding-left: 36px;
}

.smart-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-left: 36px;
}

.smart-error-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--error-dark);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  text-decoration: none;
}

.smart-error-action:hover {
  background: var(--error-tint);
  border-color: var(--error);
}

.smart-error-action svg {
  width: 14px;
  height: 14px;
}

.smart-error-action.primary {
  background: var(--error);
  color: var(--text-on-brand);
  border-color: var(--error);
}

.smart-error-action.primary:hover {
  background: var(--error-dark);
}

/* Smart Warning */
.smart-warning {
  background: var(--warning-bg);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0;
}

.smart-warning-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.smart-warning-icon {
  flex-shrink: 0;
  width: var(--space-lg);
  height: var(--space-lg);
  color: var(--warning);
}

.smart-warning-title {
  font-weight: 600;
  color: var(--warning-dark);
  font-size: var(--font-size-sm);
}

.smart-warning-message {
  color: var(--warning-dark);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  padding-left: var(--space-2xl);
}

/* Smart Info */
.smart-info {
  background: var(--info-bg);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0;
}

.smart-info-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.smart-info-icon {
  flex-shrink: 0;
  width: var(--space-lg);
  height: var(--space-lg);
  color: var(--astrovia-blue);
}

.smart-info-title {
  font-weight: 600;
  color: var(--astrovia-blue);
  font-size: var(--font-size-sm);
}

.smart-info-message {
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  padding-left: var(--space-2xl);
}

/* ===== INLINE TERM DEFINITIONS ===== */
.term-highlight {
  position: relative;
  color: var(--astrovia-blue);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: help;
  font-weight: 500;
}

.term-highlight:hover {
  text-decoration-style: solid;
}

/* ===== CALCULATION AUDIT TRAIL ===== */
.calc-audit-trail {
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: var(--font-size-sm);
  margin-top: 12px;
}

.calc-audit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.calc-audit-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.calc-audit-title svg {
  width: 12px;
  height: 12px;
}

.calc-audit-toggle {
  font-size: var(--font-size-sm);
  color: var(--astrovia-blue);
  cursor: pointer;
  font-weight: 500;
}

.calc-audit-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calc-audit-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-light);
}

.calc-audit-step:last-child {
  border-bottom: none;
}

.calc-audit-step-label {
  flex: 1;
  color: var(--text-secondary);
}

.calc-audit-step-formula {
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.calc-audit-step-result {
  font-weight: 600;
  color: var(--text-primary);
  min-width: 80px;
  text-align: right;
}

/* ===== PROGRESS INDICATORS ===== */
.sync-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--astrovia-blue-light-bg);
  border: 1px solid var(--astrovia-blue-border);
  border-radius: var(--radius-sm);
}

.sync-progress-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--astrovia-blue-light);
  border-top-color: var(--astrovia-blue);
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
}

.sync-progress-text {
  font-size: var(--font-size-sm);
  color: var(--astrovia-blue);
  font-weight: 500;
}

/* ===== VARIANCE INDICATORS ===== */
.variance-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.variance-indicator.positive {
  background: var(--success-tint);
  color: var(--success-dark);
}

.variance-indicator.negative {
  background: var(--error-tint);
  color: var(--error-dark);
}

.variance-indicator.neutral {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.variance-indicator svg {
  width: 12px;
  height: 12px;
}

/* ===== THRESHOLD PROXIMITY INDICATOR ===== */
.threshold-proximity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-white);
  border: none;
  border-radius: var(--radius-sm);
  margin: 12px 0;
}

.threshold-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-2xs);
  overflow: hidden;
  position: relative;
}

.threshold-bar-fill {
  height: 100%;
  border-radius: var(--radius-2xs);
  transition: width var(--duration-slow) var(--ease-default);
}

.threshold-bar-fill.safe {
  background: linear-gradient(90deg, var(--success) 0%, var(--success-light) 100%);
}

.threshold-bar-fill.warning {
  background: linear-gradient(90deg, var(--warning) 0%, var(--warning-light) 100%);
}

.threshold-bar-fill.danger {
  background: linear-gradient(90deg, var(--status-rose-text) 0%, var(--status-rose-border) 100%);
}

.threshold-marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--text-primary);
}

.threshold-label {
  display: flex;
  flex-direction: column;
  min-width: 100px;
}

.threshold-label-value {
  font-weight: 600;
  font-size: var(--font-size-md);
  color: var(--text-primary);
}

.threshold-label-name {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

/* ========================================
   UTILITY CLASSES - Design System Compliant
   Use these instead of inline styles
   ======================================== */

/* Info Banner */
.ds-info-banner,
.info-banner {
  background: var(--info-gradient);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
}

.info-banner--gradient {
  background: var(--astrovia-gradient);
  border: none;
}

/* Warning Banner */
.ds-warning-banner {
  background: var(--warning-bg-solid);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
}

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

/* Code Inline */
.ds-code-inline {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background: var(--bg-primary);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}

/* Card Section (for grouped content) */
.ds-card-section {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}

/* Upload Zone */
.ds-upload-zone {
  border: 2px dashed var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
  background: var(--bg-white);
  transition: all var(--duration-fast) var(--ease-default);
}

.ds-upload-zone:hover {
  border-color: var(--astrovia-blue);
  background: var(--astrovia-blue-subtle);
}

/* Info Card with Left Accent */
.ds-accent-card {
  background: var(--card-surface-solid);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  border: none;
  border-left: 4px solid var(--info-border-strong);
}

.ds-accent-card.neutral {
  border-left-color: var(--text-secondary);
}

/* Metric Box */
/* FIXED Dec 2025: Removed pill styling - transparent inside cards */
.ds-metric-box {
  padding: 10px 14px;
  background: transparent;
  border-radius: 0;
  border: none;
}

/* Priority Badge for Tables */
.priority-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.priority-badge.priority-critical {
  background: var(--error-tint);
  color: var(--error);
}

.priority-badge.priority-high {
  background: var(--warning-bg-solid);
  color: var(--warning);
}

.priority-badge.priority-medium {
  background: var(--info-bg);
  color: var(--astrovia-blue);
}

.priority-badge.priority-low {
  background: var(--neutral-bg);
  color: var(--text-secondary);
}

/* ========================================
   UTILITY CLASSES
   For replacing common inline styles
   ======================================== */

/* Icon size utilities */
.icon-sm {
  font-size: var(--font-size-sm);
}

.icon-md {
  font-size: var(--font-size-md);
}

/* Section header pattern */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
}

.section-header-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.section-header-actions {
  display: flex;
  gap: var(--space-sm);
}

/* Admin setup card pattern */
.admin-setup-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.admin-setup-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--credit-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-setup-content {
  flex: 1;
}

.admin-setup-title {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--font-size-lg);
}

.admin-setup-description {
  color: var(--text-primary);
  margin: 0 0 var(--space-md) 0;
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.admin-setup-info-box {
  background: var(--bg-secondary);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: none;
}

.admin-setup-label {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-setup-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Form helper text */
.form-helper-text {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-xs);
}

/* Compact card subtitle */
.card-subtitle {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

/* ========================================
   SPACING UTILITIES - Design System Scale
   Use these instead of inline margin/padding
   Scale: 8/12/16/20/24/32/48
   ======================================== */

/* Margin-bottom utilities */
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }  /* 8px */
.mb-sm { margin-bottom: var(--space-sm); }  /* 12px */
.mb-md { margin-bottom: var(--space-md); }  /* 16px */
.mb-lg { margin-bottom: var(--space-lg); }  /* 20px */
.mb-xl { margin-bottom: var(--space-xl); }  /* 24px */
.mb-2xl { margin-bottom: var(--space-2xl); } /* 32px */
.mb-3xl { margin-bottom: var(--space-3xl); } /* 48px */

/* Margin-top utilities */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

/* Margin utilities */
.m-0 { margin: 0; }

/* ========================================
   FLEX/LAYOUT UTILITIES
   ======================================== */

/* Flex containers */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

/* Min-width utilities */
.min-w-320 { min-width: 320px; }

/* Gap utilities */
.gap-xs { gap: var(--space-xs); }  /* 8px */
.gap-sm { gap: var(--space-sm); }  /* 12px */
.gap-md { gap: var(--space-md); }  /* 16px */
.gap-lg { gap: var(--space-lg); }  /* 20px */
.gap-xl { gap: var(--space-xl); }  /* 24px */
.gap-2xl { gap: var(--space-2xl); } /* 32px */

/* Filter row layout */
.filter-controls {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

/* ========================================
   GRID UTILITIES
   ======================================== */

.grid-span-2 { grid-column: span 2; }
.grid-span-full { grid-column: 1 / -1; }

.grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

.grid-2-col-sm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.grid-2-col-md {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.grid-3-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.grid-3-col-sm {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
}

.grid-4-col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--col-min-2xl), 1fr));
  gap: var(--space-sm);
}

.grid-1-col {
  grid-template-columns: 1fr;
}

/* ========================================
   WIDTH UTILITIES - Form Controls
   ======================================== */

.w-full { width: 100%; }
.w-auto { width: auto; }
.form-select-xs { width: 100px; }
.form-select-sm { width: 120px; }
.form-select-md { width: 150px; }
.form-select-lg { width: 200px; }
.form-select-xl { width: 280px; }

/* ========================================
   TEXT UTILITIES
   ======================================== */

.text-center { text-align: center; }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-note-info { color: var(--text-note-info); }
.text-diagnostic-red { color: var(--text-diagnostic-red); }
.text-tertiary { color: var(--text-tertiary); }
.text-uppercase { text-transform: uppercase; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.lh-relaxed { line-height: 1.6; }

/* Background utilities */
.bg-secondary { background: var(--bg-secondary); }
.bg-white { background: var(--bg-white); }

/* Padding utilities */
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* Border radius utilities */
.radius-xs { border-radius: var(--radius-xs); }
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }

/* Width utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }
.max-w-sm { max-width: 320px; }
.max-w-md { max-width: 480px; }
.max-w-lg { max-width: 640px; }

/* ========================================
   ICON PATTERNS - Single-Surface Compliant
   FORBIDDEN: Do NOT use icon-pill-* inside cards.
   Icons inside cards must be transparent (no backgrounds).
   Only allowed for: interactive buttons, page-level headers.
   ======================================== */

/* Large icon (page headers only - 44x44) - NO background inside cards */
.icon-pill-lg {
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-muted);
  flex-shrink: 0;
}

/* Medium icon (cards - 36x36) - NO background, naked icon */
.icon-pill-md {
  width: 36px;
  height: 36px;
  border-radius: 0;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-muted);
  flex-shrink: 0;
}

/* DEPRECATED: Gradient icon pill - use .icon-btn-accent for interactive buttons only */
.icon-pill-gradient {
  width: 36px;
  height: 36px;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-muted);
  flex-shrink: 0;
}

/* DEPRECATED: Accent icon pill - use .icon-btn-accent for interactive buttons only */
.icon-pill-accent {
  width: 36px;
  height: 36px;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-muted);
  flex-shrink: 0;
}

/* DEPRECATED: Dark icon pill - NO background */
.icon-pill-dark {
  width: 36px;
  height: 36px;
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-muted);
  flex-shrink: 0;
}

/* DEPRECATED: Muted icon pill - NO background */
.icon-pill-muted {
  width: 36px;
  height: 36px;
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-muted);
  flex-shrink: 0;
}

/* ========================================
   PREVIEW/CARD SECTION PATTERNS
   ======================================== */

/* Preview label */
.preview-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Preview box (sidebar/logo preview) */
.preview-box {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
}

.preview-box-dark {
  background: var(--bg-tertiary);
}

.preview-box-light {
  background: var(--bg-white);
  border: none;
}

/* Preview logo image */
.preview-logo {
  height: 28px;
  object-fit: contain;
}

.preview-logo-lg {
  height: 32px;
  object-fit: contain;
}

/* Preview brand text */
.preview-brand-text {
  color: rgba(255,255,255,0.5);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.preview-brand-text-light {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0.7;
}

/* Upload status text */
.upload-status-text {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-sm);
  text-align: center;
}

/* ========================================
   TYPOGRAPHY COMBINATION CLASSES
   Design System compliant typography - all values use tokens
   ======================================== */
.text-body-secondary { font-size: var(--font-size-sm); color: var(--text-secondary); }
.text-body-primary { font-size: var(--font-size-sm); color: var(--text-primary); }
.text-label-sm { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-xs); }
.text-heading-base { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); }
.text-label-uppercase { font-size: var(--font-size-xs); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.text-title-accent { font-weight: 600; margin: 0 0 var(--space-sm) 0; font-size: var(--font-size-base); color: var(--astrovia-blue); }
.text-hint { font-weight: 400; color: var(--text-tertiary); display: block; margin-top: var(--space-xs); }

/* Card row patterns - uses token-based spacing */
/* FIXED Dec 2025: Removed pill styling - layout only, no background */
.card-row { padding: var(--space-sm) var(--space-md); background: transparent; border-radius: 0; border: none; }
.card-row-compact { padding: var(--space-sm); background: transparent; border-radius: 0; border: none; }
.card-row-spaced { padding: var(--space-sm) var(--space-md); background: transparent; border-radius: 0; border: none; margin-bottom: var(--space-xs); }

/* Table header cells - uses token-based spacing */
.th-standard { text-align: left; padding: var(--space-sm) var(--space-md); font-size: var(--font-size-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.td-standard { padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); color: var(--text-primary); }
.td-standard-medium { padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); font-weight: 500; color: var(--text-primary); }

/* Border patterns */
.border-top-light { border-top: 1px solid var(--border-light); }

/* Grid patterns - uses token-based spacing */
.grid-2col-gap-sm { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-bottom: var(--space-sm); }

/* ========================================
   INFO DROPDOWN PATTERNS
   ======================================== */
.info-dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: var(--space-xs) 0;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
}

.info-dropdown-title {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}

.info-dropdown-subtitle {
  margin: 4px 0 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.info-dropdown-chevron {
  transition: transform var(--duration-normal) var(--ease-default);
}

.info-dropdown-content {
  display: none;
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-light);
}

.info-dropdown-content.is-open {
  display: block;
}

/* ========================================
   INFO/HELP SECTION PATTERNS
   ======================================== */
.info-section-title {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.info-section-text {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  padding-left: var(--space-2xl);
}

.info-section-content {
  padding-left: var(--space-2xl);
}

.info-list-ordered {
  margin: 0;
  padding-left: var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.8;
}

.info-list-unordered {
  margin: 0;
  padding-left: var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.info-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.info-box {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
}

.info-box-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-xs);
}

/* Collapsible section button (no background, full width) */
.collapsible-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: var(--space-xs) 0;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
}

.collapsible-trigger:hover {
  opacity: 0.8;
}

/* Collapsible content */
.collapsible-content {
  display: none;
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-light);
}

.collapsible-content.is-open {
  display: block;
}

/* Info section title */
.info-section-title {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Info section body */
.info-section-body {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  padding-left: var(--space-2xl);
}

/* ========================================
   UPLOAD ZONE PATTERN
   ======================================== */

.upload-zone {
  border: 2px dashed var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
  background: var(--bg-white);
  transition: all var(--duration-fast) var(--ease-default);
  cursor: pointer;
}

.upload-zone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.upload-zone:hover {
  border-color: var(--astrovia-blue);
  background: var(--astrovia-blue-subtle);
}

.upload-zone-text {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.upload-zone-hint {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.upload-zone-btn {
  background: none;
  border: none;
  color: var(--astrovia-blue);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

/* ========================================
   ACTION BUTTON GROUPS
   ======================================== */

.action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

/* ========================================
   TOOL ACCESS ROW PATTERN
   ======================================== */

.tool-access-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}

.tool-access-row:last-child {
  margin-bottom: 0;
}

.tool-access-radios {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: nowrap;
}

.tool-access-radios label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
  white-space: nowrap;
  font-size: var(--font-size-sm);
}

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

.hidden { display: none; }
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* ========================================
   STYLED FILE UPLOAD INPUTS
   ======================================== */

.file-upload-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-white);
  min-height: 44px;
}

.file-upload-wrapper:hover {
  border-color: var(--border-default);
}

.file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.file-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.file-upload-btn:hover {
  background: var(--info-bg);
  border-color: var(--astrovia-blue);
  color: var(--astrovia-blue);
}

.file-upload-btn svg {
  flex-shrink: 0;
}

.file-name-display {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-name-display.has-file {
  color: var(--text-secondary);
  font-weight: 500;
}

/* ========================================
   NOTIFICATION TOAST
   Design-token compliant toast notifications
   ======================================== */

.notification-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 16px 24px;
  border-radius: var(--radius-md);
  color: white;
  font-weight: 500;
  z-index: 10000;
  box-shadow: var(--shadow-lg);
  animation: slideIn 0.3s ease;
}

.notification-toast--success {
  background: var(--success);
}

.notification-toast--error {
  background: var(--status-rose-text);
}

.notification-toast--info {
}

.notification-toast--warning {
  background: var(--status-warning);
  color: var(--text-primary);
}

.notification-toast--info {
  background: var(--astrovia-blue);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}

/* ========================================
   CREATE VAT REPORT TOOL
   ======================================== */

.vat-report-workspace {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-xl);
}

@media (max-width: 1024px) {
  .vat-report-workspace {
    grid-template-columns: 1fr;
  }
}

.vat-report-upload-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.vat-report-help-section {
  position: sticky;
  top: var(--space-lg);
  align-self: start;
}

/* Upload Dropzone */
.vat-upload-dropzone {
  border: 2px dashed var(--border-medium);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  background: var(--bg-secondary);
}

.vat-upload-dropzone:hover,
.vat-upload-dropzone.dragover {
  border-color: var(--astrovia-blue);
  background: var(--astrovia-blue-subtle);
}

.vat-dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.vat-dropzone-icon {
  font-size: var(--font-size-4xl);
  color: var(--text-tertiary);
  transition: color var(--duration-normal) var(--ease-default);
}

.vat-upload-dropzone:hover .vat-dropzone-icon {
  color: var(--astrovia-blue);
}

.vat-dropzone-text {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
}

.vat-dropzone-hint {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0;
}

.vat-file-selected {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-white);
  border: none;
  border-radius: var(--radius-md);
  margin-top: var(--space-md);
}

.vat-file-selected i.ph-file-csv {
  font-size: var(--font-size-3xl);
  color: var(--spreadsheet-green);
}

.vat-file-selected span {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.vat-file-remove {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease-default);
  margin-left: auto;
}

.vat-file-remove:hover {
  background: var(--error-bg);
  color: var(--error);
}

.vat-upload-actions {
  margin-top: var(--space-lg);
  display: flex;
  justify-content: flex-end;
}

/* Help Card */
.vat-help-card .c-card-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.vat-help-card .c-card-title i {
  color: var(--astrovia-blue);
}

.vat-help-section {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-light);
}

.vat-help-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.vat-help-section h4 {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin: 0 0 var(--space-xs) 0;
}

.vat-help-section p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.vat-help-section ul {
  margin: 0;
  padding-left: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.vat-rates-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.vat-rate-item {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

/* Processing Spinner */
.vat-processing-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border-light);
  border-top-color: var(--astrovia-blue);
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
  margin: 0 auto var(--space-md);
}

.vat-processing-text {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
}

.vat-processing-subtext {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: var(--space-xs) 0 0 0;
}

/* Summary Card */
.vat-summary-card {
  margin-bottom: var(--space-xl);
}

.vat-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 768px) {
  .vat-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.vat-summary-metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.vat-summary-label {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

.vat-summary-value {
  font-size: var(--font-size-3xl);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Country Summary */
.vat-country-summary {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-light);
}

.vat-country-summary h4 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-md) 0;
}

.vat-country-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-sm);
}

.vat-country-item {
  display: flex;
  flex-direction: column;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.vat-country-item-code {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
}

.vat-country-item-amount {
  font-size: var(--text-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* Preview Table */
.vat-table-container {
  max-height: 500px;
  overflow: auto;
}

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

.vat-preview-table thead {
  position: sticky;
  top: 0;
  background: var(--bg-white);
  z-index: 1;
}

.vat-preview-table th {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  border-bottom: 2px solid var(--border-medium);
  white-space: nowrap;
}

.vat-preview-table th.text-right {
  text-align: right;
}

.vat-preview-table td {
  padding: var(--space-sm) var(--space-md);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}

.vat-preview-table td.text-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.vat-preview-table tbody tr {
  transition: background var(--duration-fast) var(--ease-default);
}

.vat-preview-table tbody tr:hover {
  background: var(--bg-secondary);
}

.vat-preview-table tbody tr.refund-row {
  background: var(--status-rose-bg);
}

.vat-preview-table tbody tr.refund-row:hover {
  background: rgba(254, 205, 211, 0.5);
}

/* Excluded List */
.vat-excluded-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.vat-excluded-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--warning-bg-solid);
  border-radius: var(--radius-md);
  border: none;
}

.vat-excluded-item-info {
  display: flex;
  flex-direction: column;
}

.vat-excluded-item-invoice {
  font-weight: 500;
  color: var(--text-primary);
}

.vat-excluded-item-reason {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.vat-excluded-item-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--warning-dark);
}

/* Download Section */
.vat-download-section {
  text-align: center;
  padding: var(--space-2xl) 0;
}

.vat-download-hint {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: var(--space-sm) 0 0 0;
}

.btn-lg {
  padding: 16px 32px;
  font-size: var(--text-lg);
}

/* Animations */
#vat-results-section {
  animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* ========================================
   UI Error Boundary Styles
   Non-blocking inline error display with retry
   ======================================== */
.ui-error-boundary {
  display: flex;
  align-items: flex-start;
  padding: var(--space-lg);
  background: var(--error-bg);
  border: none;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  animation: errorSlideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.ui-error-boundary-content {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  flex-wrap: wrap;
}

.ui-error-boundary-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--error);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-error-boundary-icon svg {
  color: var(--text-on-brand);
  width: 20px;
  height: 20px;
}

.ui-error-boundary-message {
  flex: 1;
  min-width: 200px;
}

.ui-error-boundary-message h4 {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--error-dark);
}

.ui-error-boundary-message p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.ui-error-boundary-retry {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-white);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--error-dark);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  flex-shrink: 0;
}

.ui-error-boundary-retry:hover:not(:disabled) {
  background: var(--error-bg);
  border-color: var(--error);
}

.ui-error-boundary-retry:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.ui-error-boundary-retry svg {
  width: 16px;
  height: 16px;
}

.ui-error-spinner {
  animation: spin 1s linear infinite;
}

@media (max-width: 600px) {
  .ui-error-boundary-content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .ui-error-boundary-retry {
    width: 100%;
    justify-content: center;
  }
}

/* ========================================
   ASTRO ALERT CENTER - Error Recovery UI
   Apple/Stripe-level polish with full design token compliance
   ======================================== */

.astro-alert-container {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  z-index: 200001;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 420px;
  pointer-events: none;
}

.astro-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-white);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: astroAlertSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}

.astro-alert--warning {
  border-left: 4px solid var(--warning);
}

.astro-alert--error {
  border-left: 4px solid var(--error);
}

.astro-alert--info {
  border-left: 4px solid var(--astrovia-blue);
}

.astro-alert__content {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  min-width: 0;
}

.astro-alert__icon {
  font-size: var(--text-xl);
  flex-shrink: 0;
}

.astro-alert--warning .astro-alert__icon {
  color: var(--warning);
}

.astro-alert--error .astro-alert__icon {
  color: var(--error);
}

.astro-alert__message {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

.astro-alert__actions {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

@keyframes astroAlertSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Recovery Modal */
.astro-recovery-modal {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: astroModalFadeIn 0.2s ease-out;
}

.astro-recovery-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.astro-recovery-modal__dialog {
  position: relative;
  width: 90%;
  max-width: 440px;
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: astroModalSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.astro-recovery-modal__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xl);
  border-bottom: 1px solid var(--border-light);
}

.astro-recovery-modal__icon {
  font-size: var(--text-3xl);
  color: var(--warning);
}

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

.astro-recovery-modal__body {
  padding: var(--space-xl);
}

.astro-recovery-modal__message {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.astro-recovery-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-xl);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
}

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

@keyframes astroModalSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .astro-alert-container {
    top: var(--space-md);
    right: var(--space-md);
    left: var(--space-md);
    max-width: none;
  }
  
  .astro-alert {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
  
  .astro-alert__actions {
    justify-content: flex-end;
  }
  
  .astro-recovery-modal__dialog {
    width: 95%;
    margin: var(--space-md);
  }
}

/* ========================================
   US NEXUS STATES MODAL
   Apple/Stripe-level polish state selector
   ======================================== */

.nexus-states-modal-content {
  width: 90vw;
  max-width: 800px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--bg-white);
  border: 1px solid var(--card-border, var(--border-light));
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow), 0 16px 48px -12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.nexus-states-modal-content .modal-header {
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 0;
}

.nexus-states-modal-content .modal-title {
  display: flex;
  align-items: center;
  font-size: var(--font-size-lg);
  color: var(--astrovia-blue);
}

.nexus-states-modal-content .modal-title-icon {
  margin-right: var(--space-sm);
  flex-shrink: 0;
}

.nexus-states-modal-subheader {
  padding: var(--space-lg) var(--space-xl);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.nexus-states-modal-subheader > p {
  margin: 0 0 var(--space-xs) 0;
}

.nexus-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.nexus-states-modal-subheader p {
  margin: 0;
  flex: 1;
  min-width: 180px;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  line-height: 1.5;
}

.nexus-states-search {
  position: relative;
  flex: 0 0 220px;
}

.nexus-states-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
}

.nexus-states-search .form-input {
  padding-left: 36px;
  width: 100%;
}

.nexus-states-quick-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.nexus-states-quick-actions .btn-ghost {
  background: var(--bg-white);
  border: none;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.nexus-states-quick-actions .btn-ghost:hover {
  background: var(--bg-secondary);
  border-color: var(--border-medium);
}

.nexus-states-quick-actions .btn-ghost:focus-visible {
  outline: 2px solid var(--text-brand);
  outline-offset: 2px;
}

.nexus-states-quick-actions .btn-ghost:active {
  transform: scale(0.98);
  color: var(--text-primary);
}

/* Nexus Undo Button */
#undo-nexus-states-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-instant) var(--ease-default);
}

#undo-nexus-states-btn:hover {
  background: var(--warning-bg);
  border-color: var(--status-warning);
  color: var(--status-warning);
}

#undo-nexus-states-btn:focus-visible {
  outline: 2px solid var(--status-warning);
  outline-offset: 2px;
}

#undo-nexus-states-btn i {
  font-size: var(--font-size-base);
}

.nexus-states-divider {
  width: 1px;
  height: 16px;
  background: var(--border-light);
  margin: 0 var(--space-2xs);
}

.nexus-states-count {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-weight: var(--font-weight-medium);
  padding-left: var(--space-xs);
}

.nexus-states-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg) var(--space-xl);
  background: var(--bg-secondary);
}

.nexus-empty-state-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-lg);
}

.nexus-empty-state-banner.hidden {
  display: none;
}

.nexus-empty-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-500);
  border-radius: var(--radius-sm);
  color: white;
}

.nexus-empty-icon svg {
  width: 20px;
  height: 20px;
}

.nexus-empty-content h4 {
  margin: 0 0 var(--space-2xs) 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.nexus-empty-content p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.nexus-empty-content .text-warning {
  color: var(--status-warning);
  font-weight: var(--font-weight-medium);
}

.nexus-empty-content .text-danger {
  color: var(--status-error);
  font-weight: var(--font-weight-medium);
}

/* Save button highlight animation for registration flow */
.nexus-save-highlight {
  animation: nexusSavePulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
}

@keyframes nexusSavePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    transform: scale(1);
  }
}

.nexus-states-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

.nexus-state-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--card-surface, var(--bg-white));
  border: 1px solid var(--card-border, var(--border-light));
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-instant) var(--ease-default);
  user-select: none;
  box-shadow: var(--card-shadow, var(--shadow-sm, 0 1px 2px var(--hover-overlay)));
  outline: none;
}

.nexus-state-chip:hover {
  border-color: var(--text-brand);
  background: var(--bg-white);
  box-shadow: var(--shadow-blue-md);
}

.nexus-state-chip:focus-visible {
  outline: 2px solid var(--text-brand);
  outline-offset: 2px;
  box-shadow: var(--focus-ring-blue);
}

.nexus-state-chip.selected {
  border-color: var(--text-brand);
  background: var(--astrovia-blue-light);
  box-shadow: var(--shadow-blue-sm);
}

.nexus-state-chip.selected:hover {
  background: var(--astrovia-blue-hover);
  box-shadow: var(--shadow-blue-md);
}

.nexus-state-chip:active {
  transition: transform 60ms ease;
}

.nexus-state-chip.selected .nexus-state-checkbox {
  background: var(--astrovia-blue);
  border-color: var(--astrovia-blue);
  box-shadow: 0 2px 4px var(--astrovia-blue-border);
}

.nexus-state-chip.selected .nexus-state-checkbox svg {
  opacity: 1;
  transform: scale(1);
}

.nexus-state-checkbox {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border-medium);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-normal) var(--ease-default);
  flex-shrink: 0;
  background: var(--bg-white);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.nexus-state-checkbox svg {
  width: 12px;
  height: 12px;
  color: var(--text-on-brand);
  opacity: 0;
  transform: scale(0.8);
  transition: all var(--duration-normal) var(--ease-default);
}

.nexus-state-info {
  flex: 1;
  min-width: 0;
}

.nexus-state-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nexus-state-code {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.nexus-state-chip.no-sales-tax {
  opacity: 0.6;
}

.nexus-state-chip.no-sales-tax .nexus-state-badge {
  display: inline-block;
}

.nexus-state-badge {
  display: none;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--warning-tint);
  color: var(--warning);
  border: none;
}

.nexus-states-modal-footer {
  padding: var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--border-light);
  background: var(--bg-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}

.nexus-footer-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.nexus-footer-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.nexus-states-modal-footer .btn-secondary {
  background: var(--bg-white);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  transition: all var(--duration-instant) var(--ease-default);
  outline: none;
}

.nexus-states-modal-footer .btn-secondary:hover {
  border-color: var(--text-brand);
  background: var(--astrovia-blue-light);
  color: var(--text-brand);
}

.nexus-states-modal-footer .btn-secondary:focus-visible {
  outline: 2px solid var(--text-brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

.nexus-states-modal-footer .btn-secondary:active {
  transform: scale(0.98);
  transition: transform 60ms ease;
}

.nexus-states-modal-footer .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--text-brand);
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-weight: var(--font-weight-medium);
  color: white;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  transition: all var(--duration-instant) var(--ease-default);
  outline: none;
}

.nexus-states-modal-footer .btn-primary:hover {
  background: var(--blue-700);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.nexus-states-modal-footer .btn-primary:focus-visible {
  outline: 2px solid var(--text-brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.nexus-states-modal-footer .btn-primary:active {
  transition: transform 60ms ease;
}

.nexus-states-modal-footer .btn-primary:disabled {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.nexus-states-modal-footer .btn-primary i {
  margin-right: 0;
  font-size: var(--font-size-lg);
}

/* Nexus Modal Footer Layout */
.nexus-states-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nexus-footer-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.nexus-footer-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Nexus Export Dropdown */
.nexus-export-dropdown {
  position: relative;
}

.nexus-export-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: var(--space-xs);
  background: var(--card-surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  min-width: 140px;
  z-index: 1000;
  overflow: hidden;
}

.nexus-export-menu button {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--duration-standard) var(--ease-default);
}

.nexus-export-menu button:hover {
  background: var(--bg-tertiary);
}

.nexus-export-menu button i {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
}

/* Nexus States Toolbar */
.nexus-states-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* Nexus Legend - Segmented Control Style */
.nexus-states-legend {
  display: flex;
  gap: var(--space-2xs);
  flex-wrap: wrap;
  margin-top: var(--space-md);
  padding: var(--space-2xs);
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  border: none;
}

.nexus-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  cursor: default;
  transition: all var(--duration-standard) var(--ease-default);
  background: transparent;
}

.nexus-legend-item:hover {
  background: var(--bg-white);
  box-shadow: var(--shadow-sm);
}

.nexus-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.nexus-legend-dot.registered {
  background: var(--status-success);
}

.nexus-legend-dot.obligated {
  background: var(--status-error);
}

.nexus-legend-dot.approaching {
  background: var(--status-warning);
}

.nexus-legend-dot.monitoring {
  background: var(--text-brand);
}

.nexus-legend-dot.no-tax {
  background: var(--text-muted);
}

/* Nexus State Chip Enhanced */
.nexus-state-chip {
  position: relative;
}

.nexus-state-meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: 2px;
}

.nexus-state-rate {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
}

.nexus-state-reg-date {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.nexus-state-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-left: auto;
}

/* Status Badges - AstroBadge Aligned */
.nexus-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  transition: all var(--duration-instant) var(--ease-default);
  white-space: nowrap;
}

.nexus-status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.nexus-status-badge.registered {
  background: var(--success-tint);
  color: var(--status-success);
}

.nexus-status-badge.registered::before {
  background: var(--status-success);
}

.nexus-status-badge.obligated {
  background: var(--error-bg);
  color: var(--status-error);
}

.nexus-status-badge.obligated::before {
  background: var(--status-error);
  animation: pulse-dot 1.5s ease-in-out infinite;
}

.nexus-status-badge.approaching {
  background: var(--warning-bg);
  color: var(--status-warning);
}

.nexus-status-badge.approaching::before {
  background: var(--status-warning);
}

.nexus-status-badge.monitoring {
  background: var(--info-bg);
  color: var(--blue-600);
}

.nexus-status-badge.monitoring::before {
  background: var(--blue-500);
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}

/* Threshold Progress Bar - Gradient Enhanced */
.nexus-threshold-bar {
  width: 48px;
  height: 5px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-2xs);
  overflow: hidden;
  position: relative;
}

.nexus-threshold-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
  animation: shimmer-bar 2s ease-in-out infinite;
  opacity: 0;
}

.nexus-threshold-bar:hover::after {
  opacity: 1;
}

@keyframes shimmer-bar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.nexus-threshold-fill {
  height: 100%;
  border-radius: var(--radius-2xs);
  transition: width var(--duration-layout) cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.nexus-threshold-fill.registered {
  background: linear-gradient(90deg, var(--status-success), var(--status-success));
}

.nexus-threshold-fill.obligated {
  background: linear-gradient(90deg, var(--status-error), var(--status-error));
  animation: pulse-bar 1.5s ease-in-out infinite;
}

@keyframes pulse-bar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.nexus-threshold-fill.approaching {
  background: linear-gradient(90deg, var(--status-warning), var(--status-warning));
}

.nexus-threshold-fill.monitoring {
  background: linear-gradient(90deg, var(--blue-300), var(--blue-400));
}

.nexus-threshold-fill.no-exposure {
  background: var(--text-muted);
}

/* No Sales Tax Badge */
.nexus-badge-no-tax {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

/* Nexus Tooltip - Light Theme (positioned below chip to avoid overflow clipping) */
.nexus-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-fast) var(--ease-default);
  z-index: 1000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
  border: none;
  pointer-events: none;
}

.nexus-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--bg-surface);
  filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.03));
}

.nexus-state-chip:hover .nexus-tooltip,
.nexus-state-chip:focus .nexus-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
}

.nexus-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.nexus-tooltip-label {
  color: var(--text-tertiary);
}

.nexus-tooltip-value {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

/* Save Success Animation */
.nexus-save-success {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 80px;
  height: 80px;
  background: var(--status-success);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
}

.nexus-save-success.show {
  animation: save-success-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.nexus-save-success svg {
  width: 40px;
  height: 40px;
  stroke: white;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.nexus-save-success svg path {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
}

.nexus-save-success.show svg path {
  animation: checkmark-draw 0.4s 0.2s ease forwards;
}

@keyframes save-success-pop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes checkmark-draw {
  to { stroke-dashoffset: 0; }
}

/* Count Animation */
.nexus-count-animate {
  display: inline-block;
  transition: transform var(--duration-slow) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nexus-count-animate.bump {
  animation: count-bump 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes count-bump {
  0% { transform: scale(1); }
  30% { transform: scale(1.3); color: var(--astrovia-blue); }
  100% { transform: scale(1); }
}

/* Bulk Action Feedback */
.nexus-bulk-feedback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--text-brand);
  color: white;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  padding: 12px 24px;
  border-radius: var(--radius-lg);
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
}

.nexus-bulk-feedback.show {
  animation: bulk-feedback 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes bulk-feedback {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  40% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(0.95); }
}

/* Nexus Skeleton Loaders */
.nexus-grid-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--spacing-sm);
}

.nexus-chip-skeleton {
  height: 72px;
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: skeleton-shimmer 1.5s infinite;
}

.nexus-loading-overlay {
  position: absolute;
  inset: 0;
  background: var(--loading-overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: var(--radius-md);
  backdrop-filter: blur(2px);
}

.nexus-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-light);
  border-top-color: var(--text-brand);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

/* Nexus Comparison Widget */
.nexus-comparison-loading {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  color: var(--text-secondary);
}

.nexus-comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.nexus-comparison-card {
  background: var(--card-surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  transition: all var(--duration-instant) var(--ease-default);
  outline: none;
}

.nexus-comparison-card:hover {
  border-color: var(--text-brand);
  box-shadow: var(--shadow-md);
}

.nexus-comparison-card:focus-visible {
  outline: 2px solid var(--text-brand);
  outline-offset: 2px;
}

.nexus-comparison-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.nexus-comparison-org {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.nexus-comparison-count {
  font-size: var(--font-size-sm);
  color: var(--astrovia-blue);
  font-weight: var(--font-weight-medium);
}

.nexus-comparison-states {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.nexus-mini-badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 2px 6px;
  background: var(--info-bg);
  color: var(--astrovia-blue);
  border-radius: var(--radius-sm);
}

.nexus-mini-more {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  padding: 2px 4px;
}

/* Nexus Org Comparison Details */
.nexus-org-comparison-details {
  margin-top: var(--space-sm);
  border-top: 1px solid var(--border-light);
  padding-top: var(--space-sm);
}

.nexus-org-comparison-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-xs) 0;
  transition: color var(--duration-standard) var(--ease-default);
}

.nexus-org-comparison-toggle:hover {
  color: var(--astrovia-blue);
}

.nexus-org-comparison-toggle i {
  font-size: var(--font-size-lg);
}

.nexus-comparison-container {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

/* Nexus Filing Reminders & History - Polished Pill Buttons */
.nexus-filing-reminders-details,
.nexus-history-details {
  margin-top: var(--space-sm);
  border-top: none;
  padding-top: 0;
}

.nexus-org-comparison-details,
.nexus-filing-reminders-details,
.nexus-history-details {
  display: inline-block;
  margin-right: var(--space-sm);
}

.nexus-filing-reminders-toggle,
.nexus-history-toggle,
.nexus-org-comparison-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-brand, var(--blue-500));
  cursor: pointer;
  padding: 8px 14px;
  background: var(--bg-interactive, var(--blue-50));
  border: 1px solid var(--border-accent, var(--astrovia-blue-border));
  border-radius: var(--radius-full);
  transition: all var(--duration-standard) var(--ease-default);
  list-style: none;
}

.nexus-filing-reminders-toggle::-webkit-details-marker,
.nexus-history-toggle::-webkit-details-marker,
.nexus-org-comparison-toggle::-webkit-details-marker {
  display: none;
}

.nexus-filing-reminders-toggle:hover,
.nexus-history-toggle:hover,
.nexus-org-comparison-toggle:hover {
  background: var(--bg-interactive-hover, var(--blue-100));
  border-color: var(--border-focus, var(--blue-500));
  box-shadow: var(--shadow-sm);
}

.nexus-filing-reminders-toggle:focus-visible,
.nexus-history-toggle:focus-visible,
.nexus-org-comparison-toggle:focus-visible {
  outline: 2px solid var(--astrovia-blue);
  outline-offset: 2px;
}

.nexus-filing-reminders-toggle i,
.nexus-history-toggle i,
.nexus-org-comparison-toggle i {
  font-size: var(--font-size-base);
}

.nexus-reminder-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  background: var(--error);
  color: var(--text-on-brand);
  border-radius: var(--radius-full);
  margin-left: auto;
  animation: nexus-badge-pulse 2s ease-in-out infinite;
}

@keyframes nexus-badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.nexus-filing-reminders-container,
.nexus-user-history-container {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  max-height: 200px;
  overflow-y: auto;
}

/* Filing Reminder Item */
.nexus-reminder-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm);
  background: var(--white);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
  border-left: 3px solid var(--border-light);
  transition: all var(--duration-standard) var(--ease-default);
}

.nexus-reminder-item:last-child {
  margin-bottom: 0;
}

.nexus-reminder-item:hover {
  background: var(--bg-secondary);
}

.nexus-reminder-item.urgent {
  border-left-color: var(--error);
  background: rgba(239, 68, 68, 0.04);
}

.nexus-reminder-item.upcoming {
  border-left-color: var(--warning);
}

.nexus-reminder-item.scheduled {
  border-left-color: var(--success);
}

.nexus-reminder-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nexus-reminder-state {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.nexus-reminder-frequency {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  text-transform: capitalize;
}

.nexus-reminder-due {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.nexus-reminder-date {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.nexus-reminder-days {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.nexus-reminder-days.urgent {
  color: var(--error);
  font-weight: var(--font-weight-semibold);
}

/* History Item */
.nexus-history-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--white);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
  transition: background var(--duration-standard) var(--ease-default);
}

.nexus-history-item:last-child {
  margin-bottom: 0;
}

.nexus-history-item:hover {
  background: var(--bg-secondary);
}

.nexus-history-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nexus-history-icon.added {
  background: rgba(34, 197, 94, 0.12);
  color: var(--success);
}

.nexus-history-icon.removed {
  background: rgba(239, 68, 68, 0.12);
  color: var(--error);
}

.nexus-history-icon.updated {
  background: var(--icon-chip-border);
  color: var(--astrovia-blue);
}

.nexus-history-content {
  flex: 1;
  min-width: 0;
}

.nexus-history-action {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.nexus-history-action strong {
  font-weight: var(--font-weight-semibold);
}

.nexus-history-date {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.nexus-empty-state {
  text-align: center;
  padding: var(--space-md);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.nexus-empty-state i {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-xs);
  display: block;
}

@media (max-width: 600px) {
  .nexus-states-modal-content {
    width: 95vw;
    max-height: 90vh;
  }
  
  .nexus-states-modal-subheader {
    flex-direction: column;
    align-items: stretch;
  }
  
  .nexus-states-search {
    flex: 1;
  }
  
  .nexus-states-grid {
    grid-template-columns: 1fr;
  }
}

/* Manage Nexus States Button */
.nexus-manage-states-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.nexus-manage-states-btn svg {
  flex-shrink: 0;
}

/* Tax Filings Nexus Header Layout */
.nexus-filings-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* Market Enrollment Card Consistent Sizing */
.market-enrollment-card {
  min-height: 72px;
}

.market-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.market-desc {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.market-desc-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--primary-600);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 0;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  text-align: left;
}

.market-desc-link::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231f51f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform var(--transition-fast);
}

.market-desc-link:hover {
  color: var(--primary-700);
}

.market-desc-link:hover::after {
  transform: translateX(2px);
}

.market-desc-link.hidden {
  display: none;
}

/* Modal animations for Apple-style confirm dialog */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes scaleOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}

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

/* User org badge in user cards */
.user-org-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--neutral-500);
  background: var(--neutral-100);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  margin-top: 4px;
}

.user-org-badge svg {
  color: var(--neutral-400);
}

/* ========================================
   CANONICAL TOGGLE SWITCH COMPONENT
   Phase D: Astrovia OS Toggle System v1.0
   Single tokenized toggle for all binary controls
   ======================================== */

/* Switch toggle - Base (binary on/off) */
.c-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.c-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.c-switch-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  transition: all var(--duration-normal) var(--ease-default);
}

.c-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--bg-white);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-subtle);
  transition: transform var(--duration-normal) var(--ease-default);
}

/* Switch ON state */
.c-switch input:checked + .c-switch-track {
  background: var(--astrovia-blue);
  border-color: var(--astrovia-blue);
}

.c-switch input:checked + .c-switch-track .c-switch-thumb {
  transform: translateX(20px);
}

/* Switch focus state */
.c-switch input:focus-visible + .c-switch-track {
  box-shadow: var(--focus-ring);
}

/* Switch disabled state */
.c-switch input:disabled + .c-switch-track {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Compact variant */
.c-switch--compact {
  width: 36px;
  height: 20px;
}

.c-switch--compact .c-switch-thumb {
  width: 14px;
  height: 14px;
}

.c-switch--compact input:checked + .c-switch-track .c-switch-thumb {
  transform: translateX(16px);
}

/* Label alongside switch */
.c-switch-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
}

.c-switch-label-text {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
}

/* ========================================
   CANONICAL ACCORDION COMPONENT
   Phase C: Unified expandable pattern for all tools
   ======================================== */

/* Container - wraps accordion items */
.c-accordion-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Accordion item wrapper */
.c-accordion {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  border: none;
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default);
}

.c-accordion:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-subtle-hover);
}

.c-accordion[open] {
  box-shadow: var(--shadow-card);
}

/* Accordion trigger (summary element) */
.c-accordion-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-weight: 600;
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  background: var(--card-surface);
  border-bottom: 1px solid transparent;
  transition: background var(--duration-fast) var(--ease-default);
}

.c-accordion-trigger::-webkit-details-marker {
  display: none;
}

.c-accordion-trigger:hover {
  background: var(--bg-surface-muted);
}

.c-accordion-trigger:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--astrovia-blue);
}

/* Chevron icon */
.c-accordion-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--text-tertiary);
  transition: transform var(--duration-normal) var(--ease-default);
  flex-shrink: 0;
  margin-left: auto;
}

.c-accordion-chevron svg {
  width: 16px;
  height: 16px;
}

.c-accordion[open] .c-accordion-chevron {
  transform: rotate(90deg);
  color: var(--astrovia-blue);
}

/* Left icon slot */
.c-accordion-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--icon-muted);
  flex-shrink: 0;
}

.c-accordion-icon svg {
  width: 18px;
  height: 18px;
}

/* Accordion panel content */
.c-accordion-panel {
  padding: var(--space-xl);
  background: var(--bg-surface-muted);
  border-top: 1px solid var(--border-light);
  color: var(--text-primary);
  line-height: 1.7;
  font-size: var(--font-size-md);
}

/* Info callout inside accordion */
.c-accordion-info-box {
  background: var(--info-bg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  border-left: 4px solid var(--astrovia-blue);
}

/* ========================================
   MARKET ENROLLMENT CARD TOGGLE UPDATE
   Phase D: Replace checkbox with refined switch
   ======================================== */

.market-enrollment-card input[type="checkbox"] {
  display: none;
}

.market-enrollment-card .c-switch {
  flex-shrink: 0;
}

/* Note: .market-enrollment-card.enrolled is defined at ~line 24659 */

.market-enrollment-card.enrolled .c-switch-track {
  background: var(--success);
  border-color: var(--success);
}

/* ========================================
   SINGLE-SURFACE CARD LAW - GUARANTEED ENFORCEMENT
   PLACED AT END OF FILE TO WIN CASCADE
   Dec 2025 Forensic Fix
   
   This block MUST remain at the end of style.css.
   It uses :where() for low specificity but !important to win.
   
   Allowed exceptions (have explicit backgrounds):
   - .badge, .badge-* (status badges)
   - .btn, .btn-* (buttons)
   - .chip, .filter-chip, .tag (removable tags)
   - .segmented-control, .segment (tab toggles)
   - input, select, textarea (form controls)
   - .toggle, .switch (toggles)
   - .dropdown-trigger (dropdown buttons)
   ======================================== */

/* Scoped card content reset - transparent for all display blocks inside cards */
:where(.card, .panel, .panel-card, .dashboard-card, [data-card], [data-card="true"]) 
  :where(div, section, header, article, span, p)
  :not(.badge):not([class*="badge-"]):not(.chip):not(.filter-chip):not(.tag)
  :not(.btn):not([class*="btn-"]):not(button):not(a)
  :not(input):not(select):not(textarea):not(label)
  :not(.dropdown-trigger):not(.toggle):not(.switch)
  :not(.segmented-control):not(.segment):not(.segment-btn)
  :not(.status-pill):not(.market-status-pill)
  :not(.c-summary-card):not(.astro-card):not([data-card-exception]) {
  background: transparent !important;
  box-shadow: none !important;
}

/* Explicit reset for known offender classes that may have earlier definitions */
.ds-metric-box,
.stat-item:not(.c-summary-card),
.card-row,
.card-row-compact,
.card-row-spaced,
.metric-box,
.data-box,
.summary-box,
.info-box,
.market-metric-card,
.market-live-card-metrics,
.market-live-metric,
.kpi-metric,
.kpi-value-wrapper,
.metric-row {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Disable ::before pseudo-elements that create pill highlights */
.stat-item:not(.c-summary-card)::before,
.ds-metric-box::before,
.card-row::before,
.card-row-compact::before,
.card-row-spaced::before {
  display: none !important;
}

/* Card and panel headers - NO background */
.card-header,
.panel-header,
.account-card-header,
.admin-panel-header,
.account-panel-header,
.market-card-header,
.market-live-card-header,
.market-live-card-footer,
.taxos-content-header,
.duty-tax-result-header,
.duty-tax-total-header,
.duty-tax-notes-header,
.duty-tax-calculation-header {
  background: transparent !important;
}

/* Icon containers inside cards - naked icons only */
.card-icon,
.account-card-icon,
.profile-icon-v2,
.security-icon-v2,
.analytics-metric-icon,
.dm-upload-icon--shopify,
.dm-upload-icon--tax,
.dm-upload-icon--carrier,
[class*="icon-pill"] {
  background: transparent !important;
}

/* Single-Surface Card Law - Enforcement Complete (Dec 2025) */

/* ========================================
   PILL DETECTOR V2 DEBUG MODE
   Enable with: document.body.dataset.debugPills = "true"
   Or add data-debug-pills="true" to <body>
   Severity levels: high (red), medium (orange), low (yellow)
   ======================================== */
body[data-debug-pills="true"] [data-pill-offender="high"] {
  outline: 3px solid #ff0000 !important;
  outline-offset: 2px;
}

body[data-debug-pills="true"] [data-pill-offender="medium"] {
  outline: 3px solid #ff8800 !important;
  outline-offset: 2px;
}

body[data-debug-pills="true"] [data-pill-offender="low"] {
  outline: 2px dashed #ffcc00 !important;
  outline-offset: 2px;
}

body[data-debug-pills="true"] [data-pill-pseudo] {
  outline: 2px dotted #ff00ff !important;
  outline-offset: 1px;
}

/* ========================================
   CONTACT SALES MODAL
   ======================================== */
.contact-sales-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200001;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal), visibility var(--duration-normal);
}

.contact-sales-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.contact-sales-modal {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: 28px;
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  transform: scale(0.95);
  transition: transform var(--duration-normal);
}

.contact-sales-modal-backdrop.active .contact-sales-modal {
  transform: scale(1);
}

.contact-sales-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.contact-sales-modal-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}

.contact-sales-modal-subtitle {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
}

.contact-sales-modal-close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast), color var(--duration-fast);
}

.contact-sales-modal-close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.contact-sales-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-sales-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-sales-field label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.contact-sales-field input,
.contact-sales-field select,
.contact-sales-field textarea {
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background: var(--bg-white);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.contact-sales-field input:focus,
.contact-sales-field select:focus,
.contact-sales-field textarea:focus {
  outline: none;
  border-color: var(--astrovia-blue);
  box-shadow: 0 0 0 3px rgba(59, 91, 247, 0.1);
}

.contact-sales-field textarea {
  resize: vertical;
  min-height: 100px;
}

.contact-sales-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.contact-sales-cancel-btn {
  flex: 1;
  padding: 12px 16px;
  background: var(--surface-elevated);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--duration-fast);
}

.contact-sales-cancel-btn:hover {
  background: var(--surface-hover);
}

.contact-sales-submit-btn {
  flex: 1;
  padding: 12px 16px;
  background: var(--astrovia-blue);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: background var(--duration-fast), transform var(--duration-instant);
}

.contact-sales-submit-btn:hover {
  background: var(--blue-700);
}

.contact-sales-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.contact-sales-submit-btn .btn-loading {
  display: inline;
}

.contact-sales-submit-btn .btn-loading.hidden,
.contact-sales-submit-btn .btn-text.hidden {
  display: none;
}

/* ========================================
   TUTORIALS FEATURE
   ======================================== */
.tutorials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  padding: 24px 0;
}

.tutorial-card:hover .tutorial-play-overlay {
  opacity: 1 !important;
}

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

/* ========================================
   ENHANCED TUTORIAL MODAL
   ======================================== */
.tutorial-modal-enhanced {
  max-width: 640px !important;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.tutorial-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 24px 20px;
  background: linear-gradient(135deg, var(--info-bg) 0%, var(--bg-surface) 100%);
  border-bottom: 1px solid var(--border-subtle);
}

.tutorial-modal-header-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--astrovia-blue);
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.tutorial-modal-header-icon i {
  font-size: var(--font-size-3xl);
  color: white;
}

.tutorial-modal-header-text {
  flex: 1;
  min-width: 0;
}

.tutorial-modal-header-text .modal-title {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.tutorial-modal-subtitle {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
}

.tutorial-modal-body {
  padding: 24px;
  max-height: 60vh;
  overflow-y: auto;
}

.tutorial-form-section {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-subtle);
}

.tutorial-form-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.tutorial-form-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}

.tutorial-form-section-label i {
  font-size: var(--font-size-lg);
  color: var(--astrovia-blue);
}

.form-hint-text {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: 6px;
}

.tutorial-publish-toggle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-surface-subtle);
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.tutorial-publish-toggle .toggle-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  height: auto;
  cursor: pointer;
}

.tutorial-publish-toggle .toggle-slider {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
}

.tutorial-publish-toggle .toggle-slider:before {
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
}

.tutorial-publish-toggle input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

.tutorial-publish-toggle .toggle-label {
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1;
}

.tutorial-publish-toggle .form-hint-text {
  margin: 0;
  padding-left: 56px;
}

/* Video Type Grid */
.tutorial-video-type-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.tutorial-video-type-option {
  cursor: pointer;
}

.tutorial-video-type-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tutorial-video-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--bg-surface);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-default);
}

.tutorial-video-type-card i {
  font-size: var(--font-size-2xl);
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-default);
}

.tutorial-video-type-card span {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
}

.tutorial-video-type-option:hover .tutorial-video-type-card {
  border-color: var(--astrovia-blue);
  background: var(--astrovia-blue-subtle);
}

.tutorial-video-type-option input[type="radio"]:checked + .tutorial-video-type-card {
  border-color: var(--astrovia-blue);
  background: var(--astrovia-blue-subtle);
}

.tutorial-video-type-option input[type="radio"]:checked + .tutorial-video-type-card i {
  color: var(--astrovia-blue);
}

.tutorial-video-type-option input[type="radio"]:checked + .tutorial-video-type-card span {
  color: var(--astrovia-blue);
  font-weight: 600;
}

/* Upload Zone */
.tutorial-upload-zone {
  position: relative;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  background: var(--bg-surface-subtle);
  transition: all var(--duration-normal) var(--ease-default);
  cursor: pointer;
}

.tutorial-upload-zone:hover,
.tutorial-upload-zone.dragover {
  border-color: var(--astrovia-blue);
  background: var(--astrovia-blue-subtle);
}

.tutorial-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.tutorial-upload-content {
  pointer-events: none;
}

.tutorial-upload-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--astrovia-blue-subtle);
  border-radius: var(--radius-lg);
}

.tutorial-upload-icon i {
  font-size: var(--font-size-3xl);
  color: var(--astrovia-blue);
}

.tutorial-upload-text {
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.tutorial-upload-browse {
  color: var(--astrovia-blue);
  font-weight: 600;
}

.tutorial-upload-hint {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin: 0;
}

.tutorial-upload-preview {
  text-align: left;
}

.tutorial-upload-file-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.tutorial-upload-file-info > i {
  font-size: var(--font-size-3xl);
  color: var(--astrovia-blue);
}

.tutorial-upload-file-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tutorial-upload-filename {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tutorial-upload-filesize {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.tutorial-upload-remove {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.tutorial-upload-remove:hover {
  background: var(--error-bg);
  color: var(--error);
}

.tutorial-upload-progress {
  margin-top: 12px;
  height: 4px;
  background: var(--bg-surface-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.tutorial-upload-progress-bar {
  height: 100%;
  background: var(--astrovia-blue);
  border-radius: var(--radius-full);
  width: 0;
  transition: width var(--duration-slow) var(--ease-default);
}

/* Modal Footer */
.tutorial-modal-footer {
  padding: 16px 24px;
  background: var(--bg-surface-subtle);
  border-top: 1px solid var(--border-subtle);
}

.tutorial-modal-footer .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tutorial-modal-footer .btn-primary i {
  font-size: var(--font-size-lg);
}

@media (max-width: 600px) {
  .tutorial-video-type-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .tutorial-modal-header {
    flex-direction: column;
    text-align: center;
  }
  
  .tutorial-modal-header-icon {
    margin: 0 auto;
  }
}

/* Delete Confirmation Modal - Apple-level polish */
.modal-content--destructive {
  max-width: 420px;
}

.delete-confirmation-content {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
}

.delete-confirmation-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--surface-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
}

.delete-confirmation-icon i {
  font-size: var(--font-size-3xl);
  color: var(--text-secondary);
}

.delete-confirmation-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs);
  letter-spacing: -0.01em;
}

.delete-confirmation-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-lg);
}

.delete-confirmation-subtitle strong {
  color: var(--text-primary);
  font-weight: 500;
}

.delete-confirmation-details {
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: left;
}

.delete-confirmation-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0 0 var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.delete-confirmation-list {
  margin: 0;
  padding: 0 0 0 var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.delete-confirmation-list li {
  margin-bottom: var(--space-xs);
}

.delete-confirmation-list li:last-child {
  margin-bottom: 0;
}

/* Ghost Danger Button - subtle delete action */
.btn-ghost-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default);
}

.btn-ghost-danger:hover {
  color: var(--status-error);
  background: rgba(220, 38, 38, 0.08);
}

/* Modal Footer Layout */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.modal-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}

.modal-footer--centered {
  justify-content: center;
}

.modal-footer--centered .modal-footer-actions {
  margin-left: 0;
}

/* Danger button refinement */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  background: var(--status-error);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default), transform var(--duration-instant) var(--ease-default);
}

.btn-danger:hover {
  background: var(--status-error);
}

.btn-danger:active {
  transform: scale(0.98);
}

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

/* Email Template Cards */
.email-template-card {
  background: var(--bg-surface);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 20px;
  transition: all var(--duration-normal) var(--ease-default);
  cursor: pointer;
}

.email-template-card:hover {
  border-color: var(--blue-500);
  box-shadow: 0 4px 12px var(--astrovia-blue-subtle);
}

.email-template-card.selected {
  border-color: var(--blue-500);
  background: linear-gradient(to bottom, var(--astrovia-blue-subtle), transparent);
}

.email-template-preview {
  margin-bottom: 16px;
}

.email-template-info {
  margin-bottom: 16px;
}

.email-template-name {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.email-template-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.email-template-actions {
  display: flex;
  justify-content: flex-end;
}

.email-template-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.email-template-badge.active {
  background: var(--green-50);
  color: var(--status-success);
}

.email-template-badge.active i {
  font-size: var(--font-size-lg);
}

/* Skeleton Loading States */
.skeleton {
  background: linear-gradient(90deg, 
    var(--bg-surface-subtle) 25%, 
    var(--bg-surface) 50%, 
    var(--bg-surface-subtle) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

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

.skeleton-card {
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 20px;
}

.skeleton-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
}

.skeleton-title {
  height: 18px;
  width: 120px;
}

.skeleton-subtitle {
  height: 14px;
  width: 80px;
  margin-top: 6px;
}

.skeleton-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.skeleton-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.skeleton-label {
  height: 12px;
  width: 60px;
}

.skeleton-value {
  height: 16px;
  width: 80px;
}

.skeleton-badge {
  height: 24px;
  width: 60px;
  border-radius: var(--radius-sm);
}

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Market card skeleton */
.market-skeleton-card {
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 20px;
  min-height: 180px;
}

.market-skeleton-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}

.market-skeleton-flag {
  width: 40px;
  height: 30px;
  border-radius: var(--radius-xs);
}

.market-skeleton-title-group {
  flex: 1;
}

.market-skeleton-title {
  height: 18px;
  width: 140px;
  margin-bottom: 6px;
}

.market-skeleton-code {
  height: 12px;
  width: 40px;
}

.market-skeleton-status {
  height: 24px;
  width: 70px;
  border-radius: var(--radius-sm);
}

.market-skeleton-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.market-skeleton-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.market-skeleton-stat-label {
  height: 12px;
  width: 50px;
}

.market-skeleton-stat-value {
  height: 20px;
  width: 70px;
}

/* ===================================
   SECTION LOADING OVERLAY
   Frosted glass effect for data-heavy sections
   =================================== */

.section-loading {
  position: relative;
  min-height: 200px;
}

.section-loading > *:not(.section-loading-overlay) {
  opacity: 0.4;
  transition: opacity var(--duration-normal) var(--ease-default);
  pointer-events: none;
}

.section-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(248, 250, 252, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 32px var(--astrovia-blue-subtle), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  border-radius: var(--radius-lg);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
}

.theme-dark .section-loading-overlay {
  background: linear-gradient(135deg, rgba(15, 15, 17, 0.7) 0%, rgba(22, 22, 24, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.theme-dark .tool-badge-corner {
  background: linear-gradient(135deg, rgba(28, 28, 31, 0.85), rgba(22, 22, 24, 0.95));
  border-color: var(--border-card);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.theme-dark .world-clock-settings-btn-bordered:hover {
  background: var(--blue-50);
}

.section-loading-overlay.active {
  opacity: 1;
}

.section-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.section-loading-bar {
  width: 160px;
  height: 3px;
  background: var(--border-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.section-loading-bar-progress {
  height: 100%;
  width: 40%;
  background: var(--text-brand);
  border-radius: var(--radius-full);
  animation: sectionLoadingSlide 1.2s ease-in-out infinite;
}

@keyframes sectionLoadingSlide {
  0% { 
    transform: translateX(-100%); 
  }
  50% {
    transform: translateX(150%);
  }
  100% { 
    transform: translateX(350%); 
  }
}

.section-loading-text {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ===================================
   Apple-Style Avatar Placeholder
   =================================== */

/* Avatar placeholder with gradient background and white initial */
.avatar-placeholder {
  background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 50%, var(--blue-900) 100%);
  color: white !important;
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Sidebar avatar placeholder */
.sidebar-user-avatar.avatar-placeholder {
  background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 50%, var(--blue-900) 100%);
  color: white !important;
  font-size: var(--font-size-base);
  font-weight: 600;
}

/* Dashboard avatar placeholder */
#dashboard-avatar.avatar-placeholder {
  background: var(--blue-100);
  color: var(--blue-600) !important;
  font-size: var(--font-size-3xl);
  font-weight: 600;
  text-shadow: none;
  border: 1px solid var(--blue-200);
}

/* User avatar in lists - placeholder style */
.user-avatar.avatar-placeholder {
  background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 50%, var(--blue-900) 100%);
  color: white !important;
  border-color: transparent;
}

/* Profile image preview placeholder */
.profile-image-preview.avatar-placeholder {
  background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 50%, var(--blue-900) 100%);
  color: white !important;
  font-size: var(--font-size-4xl);
  font-weight: 600;
}

/* When avatar has an image, reset background */
.user-avatar:has(img),
.sidebar-user-avatar:has(img),
#dashboard-avatar:has(img) {
  background: transparent;
}

/* ===================================
   APPLE-STYLE MODAL DESIGN TOKENS
   =================================== */

:root {
  /* Modal Dimensions */
  --modal-width-sm: 400px;
  --modal-width-md: 520px;
  --modal-width-lg: 640px;
  --modal-width-xl: 800px;
  
  /* Modal Spacing */
  --modal-padding: 24px;
  --modal-padding-lg: 32px;
  --modal-gap: 20px;
  --modal-gap-sm: 12px;
  --modal-gap-lg: 28px;
  
  /* Modal Radius */
  --modal-radius: 16px;
  --modal-radius-inner: 12px;
  
  /* Modal Shadows */
  --modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --modal-shadow-lg: 0 32px 64px -16px rgba(0, 0, 0, 0.35);
  
  /* Modal Colors */
  --modal-bg: var(--bg-surface);
  --modal-overlay: rgba(0, 0, 0, 0.5);
  --modal-border: var(--border-card);
  --modal-divider: var(--border-subtle);
  
  /* Form Token Sizing */
  --input-height: 44px;
  --input-height-sm: 36px;
  --input-radius: var(--radius-md);
  --input-border: var(--border-default);
  --input-border-focus: var(--astrovia-blue);
  --input-bg: var(--bg-surface);
  --input-bg-disabled: var(--neutral-50);
  
  /* Button Tokens */
  --btn-height: 44px;
  --btn-height-sm: 36px;
  --btn-radius: var(--radius-md);
  --btn-font-weight: 500;
}

/* ===================================
   APPLE-STYLE MODAL BASE
   =================================== */

.astrovia-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--modal-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-default), visibility var(--duration-normal) var(--ease-default);
}

.astrovia-modal.active {
  opacity: 1;
  visibility: visible;
}

.astrovia-modal__content {
  background: var(--modal-bg);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  width: 100%;
  max-width: var(--modal-width-md);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.95) translateY(10px);
  transition: transform var(--duration-normal) cubic-bezier(0.32, 0.72, 0, 1);
}

.astrovia-modal.active .astrovia-modal__content {
  transform: scale(1) translateY(0);
}

.astrovia-modal__content--sm {
  max-width: var(--modal-width-sm);
}

.astrovia-modal__content--lg {
  max-width: var(--modal-width-lg);
}

.astrovia-modal__content--xl {
  max-width: var(--modal-width-xl);
}

/* Modal Header */
.astrovia-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--modal-padding);
  border-bottom: 1px solid var(--modal-divider);
  flex-shrink: 0;
}

.astrovia-modal__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.astrovia-modal__close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--neutral-100);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-default);
  flex-shrink: 0;
}

.astrovia-modal__close:hover {
  background: var(--neutral-200);
  color: var(--text-primary);
}

.astrovia-modal__close svg,
.astrovia-modal__close i {
  width: 16px;
  height: 16px;
  font-size: var(--font-size-lg);
}

/* Modal Body */
.astrovia-modal__body {
  padding: var(--modal-padding);
  overflow-y: auto;
  flex: 1;
}

/* Modal Footer */
.astrovia-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--modal-gap-sm);
  padding: var(--modal-padding);
  border-top: 1px solid var(--modal-divider);
  flex-shrink: 0;
}

.astrovia-modal__footer--spaced {
  justify-content: space-between;
}

/* ===================================
   APPLE-STYLE FORM INPUTS
   =================================== */

.astrovia-input {
  width: 100%;
  height: var(--input-height);
  padding: 0 14px;
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  transition: all var(--duration-fast) var(--ease-default);
  outline: none;
}

.astrovia-input:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--icon-chip-border);
}

.astrovia-input:disabled {
  background: var(--input-bg-disabled);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.astrovia-input::placeholder {
  color: var(--text-tertiary);
}

.astrovia-select {
  width: 100%;
  height: var(--input-height);
  padding: 0 36px 0 14px;
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-size: var(--font-size-md);
  color: var(--text-primary);
  transition: all var(--duration-fast) var(--ease-default);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.astrovia-select:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--icon-chip-border);
}

.astrovia-textarea {
  width: 100%;
  min-height: 100px;
  padding: 12px 14px;
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  resize: vertical;
  transition: all var(--duration-fast) var(--ease-default);
  outline: none;
  font-family: inherit;
}

.astrovia-textarea:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--icon-chip-border);
}

/* Form Groups */
.astrovia-form-group {
  margin-bottom: var(--modal-gap);
}

.astrovia-form-group:last-child {
  margin-bottom: 0;
}

.astrovia-form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

.astrovia-form-hint {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: 6px;
}

.astrovia-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* ===================================
   APPLE-STYLE BUTTONS
   =================================== */

.astrovia-btn {
  height: var(--btn-height);
  padding: 0 20px;
  border-radius: var(--btn-radius);
  font-size: var(--font-size-md);
  font-weight: var(--btn-font-weight);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--duration-fast) var(--ease-default);
  outline: none;
  white-space: nowrap;
}

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

.astrovia-btn--primary:hover {
  background: var(--astrovia-blue-hover);
}

.astrovia-btn--primary:active {
  transform: scale(0.98);
}

.astrovia-btn--secondary {
  background: var(--neutral-100);
  color: var(--text-primary);
  border: 1px solid var(--input-border);
}

.astrovia-btn--secondary:hover {
  background: var(--neutral-200);
}

.astrovia-btn--danger {
  background: var(--red-500);
  color: white;
}

.astrovia-btn--danger:hover {
  background: var(--red-600);
}

.astrovia-btn--text {
  background: transparent;
  color: var(--text-secondary);
  height: auto;
  padding: 8px 12px;
}

.astrovia-btn--text:hover {
  background: var(--neutral-100);
  color: var(--text-primary);
}

.astrovia-btn--text-danger {
  background: transparent;
  color: var(--red-500);
  height: auto;
  padding: 8px 12px;
}

.astrovia-btn--text-danger:hover {
  background: rgba(239, 68, 68, 0.08);
}

.astrovia-btn--sm {
  height: var(--btn-height-sm);
  padding: 0 14px;
  font-size: var(--font-size-base);
}

.astrovia-btn--icon {
  width: var(--btn-height);
  padding: 0;
}

/* ===================================
   APPLE-STYLE AVATAR UPLOAD SECTION
   =================================== */

.astrovia-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--modal-gap) 0 var(--modal-gap-lg);
  border-bottom: 1px solid var(--modal-divider);
  margin-bottom: var(--modal-gap);
}

.astrovia-avatar-wrapper {
  position: relative;
  width: 96px;
  height: 96px;
  margin-bottom: 16px;
}

.astrovia-avatar {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 50%, var(--blue-900) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 3px solid white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.astrovia-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.astrovia-avatar__initial {
  font-size: var(--font-size-4xl);
  font-weight: 600;
  color: white;
  text-transform: uppercase;
}

.astrovia-avatar__icon {
  color: white;
  font-size: var(--font-size-4xl);
}

.astrovia-avatar-actions {
  display: flex;
  gap: 8px;
}

/* ===================================
   APPLE-STYLE CHECKBOX/TOGGLE GRID
   =================================== */

.astrovia-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.astrovia-checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  background: var(--input-bg);
}

.astrovia-checkbox-item:hover {
  border-color: var(--astrovia-blue-light);
  background: var(--astrovia-blue-subtle);
}

.astrovia-checkbox-item:has(input:checked) {
  border-color: var(--astrovia-blue);
  background: var(--astrovia-blue-subtle);
}

.astrovia-checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--astrovia-blue);
  cursor: pointer;
  flex-shrink: 0;
}

.astrovia-checkbox-label {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  flex: 1;
}

/* ===================================
   APPLY TOKENS TO EDIT USER MODAL
   =================================== */

.edit-user-modal-v2 {
  max-width: var(--modal-width-md) !important;
  border-radius: var(--modal-radius) !important;
  box-shadow: var(--modal-shadow) !important;
  overflow: hidden;
}

.edit-user-modal-v2 .modal-header {
  padding: var(--modal-padding);
  border-bottom: 1px solid var(--modal-divider);
}

.edit-user-modal-v2 .modal-header .modal-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.edit-user-modal-v2 .modal-header .modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--neutral-100);
  border: none;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.edit-user-modal-v2 .modal-header .modal-close:hover {
  background: var(--neutral-200);
  color: var(--text-primary);
}

.edit-user-modal-body {
  padding: var(--modal-padding);
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.edit-user-profile-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: var(--modal-gap);
  border-bottom: 1px solid var(--modal-divider);
  margin-bottom: var(--modal-gap);
}

.profile-picture-upload-lg {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-picture-preview-lg {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 50%, var(--blue-900) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 3px solid white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  margin-bottom: 14px;
  color: white;
  font-size: var(--font-size-4xl);
}

.profile-picture-preview-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-picture-preview-lg i {
  font-size: var(--font-size-4xl);
  color: white;
}

.profile-picture-actions-lg {
  display: flex;
  gap: 8px;
}

.btn-text-sm {
  background: transparent;
  border: none;
  padding: 8px 14px;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--astrovia-blue);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--btn-radius);
  transition: all var(--duration-fast) var(--ease-default);
}

.btn-text-sm:hover {
  background: var(--astrovia-blue-subtle);
}

.btn-text-sm.btn-text-danger {
  color: var(--red-500);
}

.btn-text-sm.btn-text-danger:hover {
  background: rgba(239, 68, 68, 0.08);
}

.edit-user-form-grid {
  display: flex;
  flex-direction: column;
  gap: var(--modal-gap);
}

.edit-user-form-grid .form-group {
  margin-bottom: 0;
}

.edit-user-form-grid .form-input,
.edit-user-form-grid .form-select {
  height: var(--input-height);
  border-radius: var(--input-radius);
  border: 1px solid var(--input-border);
  font-size: var(--font-size-md);
  padding: 0 14px;
  transition: all var(--duration-fast) var(--ease-default);
}

.edit-user-form-grid .form-input:focus,
.edit-user-form-grid .form-select:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--icon-chip-border);
  outline: none;
}

.edit-user-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.edit-user-tool-section {
  margin-top: var(--modal-gap);
  padding-top: var(--modal-gap);
  border-top: 1px solid var(--modal-divider);
}

.edit-user-tool-section .form-label {
  margin-bottom: 12px;
}

.input-with-button {
  display: flex;
  gap: 8px;
}

.input-with-button .form-input {
  flex: 1;
}

.btn-input-append {
  height: var(--input-height);
  padding: 0 16px;
  background: var(--neutral-100);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  white-space: nowrap;
}

.btn-input-append:hover {
  background: var(--neutral-200);
}

/* Edit User Modal Footer */
.edit-user-modal-v2 .modal-footer {
  padding: var(--modal-padding);
  border-top: 1px solid var(--modal-divider);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ===================================
   APPLY TOKENS TO ORG MODAL
   =================================== */

#org-modal .modal-content {
  max-width: var(--modal-width-md) !important;
  border-radius: var(--modal-radius) !important;
  box-shadow: var(--modal-shadow) !important;
}

#org-modal .modal-header {
  padding: var(--modal-padding);
  border-bottom: 1px solid var(--modal-divider);
}

#org-modal .modal-header .modal-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

#org-modal .modal-header .modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--neutral-100);
  border: none;
  font-size: var(--font-size-xl);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  line-height: 1;
}

#org-modal .modal-header .modal-close:hover {
  background: var(--neutral-200);
  color: var(--text-primary);
}

#org-modal .modal-body {
  padding: var(--modal-padding);
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

#org-modal .form-group {
  margin-bottom: var(--modal-gap);
}

#org-modal .form-group:last-child {
  margin-bottom: 0;
}

#org-modal .form-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  display: block;
}

#org-modal .form-input,
#org-modal .form-select {
  height: var(--input-height);
  border-radius: var(--input-radius);
  border: 1px solid var(--input-border);
  font-size: var(--font-size-md);
  padding: 0 14px;
  width: 100%;
  transition: all var(--duration-fast) var(--ease-default);
}

#org-modal .form-input:focus,
#org-modal .form-select:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--icon-chip-border);
  outline: none;
}

#org-modal textarea.form-input {
  height: auto;
  min-height: 88px;
  padding: 12px 14px;
}

#org-modal .form-hint {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: 6px;
}

/* Org Avatar Section */
.org-avatar-upload-section {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: var(--modal-gap);
  border-bottom: 1px solid var(--modal-divider);
  margin-bottom: var(--modal-gap);
}

#org-modal-avatar-preview.org-avatar {
  width: 96px !important;
  height: 96px !important;
  border-radius: var(--radius-full) !important;
  background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 50%, var(--blue-900) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-4xl) !important;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  border: 3px solid white;
}

#org-modal-avatar-preview.org-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
}

#org-modal-avatar-preview.org-avatar i {
  color: white;
  font-size: var(--font-size-4xl);
}

.org-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.org-avatar-actions .astrovia-btn {
  min-width: 120px;
}
/* Org Markets Grid */
.org-markets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}

.org-market-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  background: var(--input-bg);
}

.org-market-checkbox:hover {
  border-color: var(--astrovia-blue-light);
  background: var(--astrovia-blue-subtle);
}

.org-market-checkbox:has(input:checked) {
  border-color: var(--astrovia-blue);
  background: var(--astrovia-blue-subtle);
}

.org-market-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--astrovia-blue);
  cursor: pointer;
}

.org-market-flag {
  font-size: var(--font-size-lg);
}

.org-market-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
}

#org-modal .modal-footer {
  padding: var(--modal-padding);
  border-top: 1px solid var(--modal-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

#org-modal .modal-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}

#org-modal .btn-secondary,
#org-modal .btn-primary,
#org-modal .btn-danger,
#org-modal .org-modal-delete-btn {
  height: var(--btn-height);
  padding: 0 20px;
  border-radius: var(--btn-radius);
  font-size: var(--font-size-md);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  line-height: 1;
}

/* Delete-organisation button: ghost-style destructive action,
   visually grouped on the left but baseline-aligned with the right-side buttons. */
#org-modal .org-modal-delete-btn {
  color: var(--status-error);
  background: transparent;
  border: 1px solid transparent;
  padding: 0 14px;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}

#org-modal .org-modal-delete-btn:hover {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.18);
  color: var(--status-error);
}

#org-modal .org-modal-delete-btn:focus-visible {
  outline: 2px solid rgba(220, 38, 38, 0.35);
  outline-offset: 2px;
}

#org-modal .org-modal-delete-btn:active {
  background: rgba(220, 38, 38, 0.14);
}

#org-modal .org-modal-delete-btn i {
  font-size: 16px;
  line-height: 1;
}

/* Mobile: stack the destructive action under the primary actions
   so the footer never feels cramped. */
@media (max-width: 540px) {
  #org-modal .modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--space-sm);
  }
  #org-modal .modal-footer-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }
  #org-modal .org-modal-delete-btn {
    align-self: flex-start;
    padding: 0 12px;
  }
}

/* Utility - Hide delete btn for new org */
#org-modal-delete.hidden {
  display: none !important;
}

/* ===================================
   IMAGE PREVIEW MODAL (Photo Confirm)
   =================================== */

.image-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 200001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--ease-default);
}

.image-preview-modal.active {
  opacity: 1;
  visibility: visible;
}

.image-preview-modal__content {
  background: var(--modal-bg);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow-lg);
  padding: var(--modal-padding-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--modal-gap);
  transform: scale(0.9);
  transition: transform var(--duration-normal) cubic-bezier(0.32, 0.72, 0, 1);
  max-width: 340px;
}

.image-preview-modal.active .image-preview-modal__content {
  transform: scale(1);
}

.image-preview-modal__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.image-preview-modal__avatar {
  width: 160px;
  height: 160px;
  border-radius: var(--radius-full);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border: 4px solid white;
}

.image-preview-modal__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview-modal__actions {
  display: flex;
  gap: 12px;
  width: 100%;
}

.image-preview-modal__actions .astrovia-btn {
  flex: 1;
}

@media (max-width: 600px) {
  .edit-user-row-2col {
    grid-template-columns: 1fr;
  }
  
  .astrovia-modal__content,
  .edit-user-modal-v2,
  #org-modal .modal-content {
    max-width: calc(100vw - 32px) !important;
    margin: 16px;
  }
  
  .org-markets-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Avatar Initial Styling */
.avatar-initial {
  font-size: var(--font-size-4xl);
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  line-height: 1;
}

.profile-picture-preview-lg.avatar-placeholder {
  background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 50%, var(--blue-900) 100%);
}

.profile-picture-preview-lg.avatar-placeholder .avatar-initial {
  font-size: var(--font-size-4xl);
}

/* Org avatar with initial */
.org-avatar.avatar-placeholder {
  background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 50%, var(--blue-900) 100%);
  color: white;
}

.org-avatar.avatar-placeholder .org-initial {
  font-size: var(--font-size-3xl);
  font-weight: 600;
  color: white;
}

/* Org avatar actions layout */
.org-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Image preview modal - make avatar rounded for orgs too */
.image-preview-modal__avatar--org {
  border-radius: var(--radius-lg);
}

/* ============================================
   FILING CARD WITH ORG BADGE - V10
   ============================================ */

.filing-card-single {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}

.filing-card-single:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-card-hover);
}

.filing-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.filing-card-region {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filing-card-flag {
  font-size: var(--font-size-3xl);
}

.filing-card-region-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.filing-card-region-name {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.filing-card-period {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.filing-card-amount {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
}

/* Organization badge */
.filing-card-org-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--neutral-100);
  color: var(--neutral-500);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-xs);
  font-weight: 500;
  margin-bottom: 8px;
}

.filing-card-org-badge i {
  font-size: var(--font-size-xs);
  color: var(--neutral-400);
}

/* Meta info */
.filing-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.filing-card-uploader,
.filing-card-date {
  display: flex;
  align-items: center;
  gap: 4px;
}

.filing-card-separator {
  color: var(--text-quaternary);
}

.filing-card-notes {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 12px;
  padding: 8px 10px;
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

/* Actions row */
.filing-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

.download-badge--delete {
  background: var(--status-rose-bg) !important;
  color: var(--status-rose-text) !important;
  border: 1px solid var(--status-rose-border) !important;
}

.download-badge--delete:hover {
  background: var(--status-rose-border) !important;
}

/* Payment Status Tabs */
.payment-status-tabs {
  display: flex;
  gap: 12px;
  padding: 8px;
  background: var(--bg-surface-subtle);
  border-radius: var(--radius-xl);
  margin-bottom: 16px;
}

.payment-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-secondary);
}

.payment-tab:hover {
  background: var(--surface-primary);
  box-shadow: var(--shadow-card);
}

.payment-tab.active {
  background: var(--surface-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-card-hover);
}

.payment-tab-icon {
  font-size: var(--font-size-xl);
}

.payment-tab-label {
  font-weight: 600;
}

.payment-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  background: var(--bg-surface-muted);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-secondary);
}

.payment-tab.active .payment-tab-count {
  background: var(--blue-500);
  color: white;
}

#payment-tab-due.active .payment-tab-count {
  background: var(--status-warning);
  color: white;
}

#payment-tab-paid.active .payment-tab-count {
  background: var(--status-success);
  color: white;
}

/* ========================================
   TAX OS STATUS TABS - Apple-level Design
   ======================================== */
.taxos-status-tabs {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-surface-muted);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.taxos-status-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  flex: 1;
  justify-content: center;
}

.taxos-status-tab:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}

.taxos-status-tab.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-1);
}

.taxos-tab-icon {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.taxos-status-tab.active .taxos-tab-icon {
  opacity: 1;
}

.taxos-tab-label {
  font-weight: 500;
}

.taxos-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-2);
  background: var(--bg-surface-muted);
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text-tertiary);
}

.taxos-status-tab.active .taxos-tab-count {
  background: var(--astrovia-blue-subtle);
  color: var(--astrovia-blue);
}

/* Payment Due tab - always shows amber color */
.taxos-status-tab#payment-tab-due {
  background: rgba(248, 178, 69, 0.08);
  border: 1px solid rgba(248, 178, 69, 0.25);
  color: var(--status-warning);
}

.taxos-status-tab#payment-tab-due .taxos-tab-icon {
  color: var(--status-warning);
  opacity: 0.8;
}

.taxos-status-tab#payment-tab-due .taxos-tab-count {
  background: rgba(248, 178, 69, 0.15);
  color: var(--status-warning);
}

.taxos-status-tab#payment-tab-due.active {
  background: var(--status-payment-due-bg);
  border-color: var(--status-payment-due-border);
  color: var(--status-payment-due-text);
  box-shadow: 0 2px 8px rgba(248, 178, 69, 0.15);
}

.taxos-status-tab#payment-tab-due.active .taxos-tab-icon {
  opacity: 1;
}

.taxos-status-tab#payment-tab-due.active .taxos-tab-count {
  background: rgba(248, 178, 69, 0.25);
  color: var(--status-payment-due-text);
}

/* Paid tab - always shows green color */
.taxos-status-tab#payment-tab-paid {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: var(--status-success);
}

.taxos-status-tab#payment-tab-paid .taxos-tab-icon {
  color: var(--status-success);
  opacity: 0.8;
}

.taxos-status-tab#payment-tab-paid .taxos-tab-count {
  background: rgba(34, 197, 94, 0.15);
  color: var(--status-success);
}

.taxos-status-tab#payment-tab-paid.active {
  background: var(--spreadsheet-green-bg);
  border-color: var(--spreadsheet-green-border);
  color: var(--spreadsheet-green-text);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
}

.taxos-status-tab#payment-tab-paid.active .taxos-tab-icon {
  opacity: 1;
}

.taxos-status-tab#payment-tab-paid.active .taxos-tab-count {
  background: rgba(34, 197, 94, 0.25);
  color: var(--spreadsheet-green-text);
}

/* ========================================
   TAX OS ACTIONS ROW - Payment Status Selector
   ======================================== */
.taxos-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-4);
}

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

.taxos-payment-label {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.taxos-payment-select {
  appearance: none;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-6) var(--space-2) var(--space-3);
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
}

.taxos-payment-select:hover {
  border-color: var(--border-strong);
}

.taxos-payment-select:focus {
  outline: none;
  border-color: var(--astrovia-blue);
  box-shadow: 0 0 0 3px var(--astrovia-blue-subtle);
}

/* ========================================
   TAX OS FILING CARD - Edit Button
   ======================================== */
.taxos-filing-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.taxos-filing-edit-btn:hover {
  background: var(--bg-surface-muted);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.taxos-filing-edit-btn svg {
  width: 12px;
  height: 12px;
}

/* Edit badge for tax filings */
.download-badge--edit {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.download-badge--edit:hover {
  background: var(--astrovia-blue-subtle);
  border-color: var(--astrovia-blue-border);
  color: var(--astrovia-blue);
}

/* Form row for modal */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* Modal medium size */
.modal-md {
  max-width: 480px;
}

/* Edit Modal - Large Size */
.modal-lg {
  max-width: 560px;
}

/* Edit Form Grid */
.edit-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (max-width: 540px) {
  .edit-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Period Display */
.edit-period-display {
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-weight: 500;
  color: var(--text-primary);
}

/* Input with Prefix */
.input-with-prefix {
  display: flex;
  align-items: stretch;
}

.input-prefix {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-subtle);
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  font-weight: 500;
  color: var(--text-secondary);
}

.input-with-prefix .form-input {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  flex: 1;
}

/* Form Textarea */
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-sm);
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  resize: vertical;
  min-height: 60px;
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}

.form-textarea:focus {
  outline: none;
  border-color: var(--astrovia-blue);
  box-shadow: 0 0 0 3px var(--astrovia-blue-subtle);
}

/* Edit Attachments Section */
.edit-attachments-section {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.edit-attachments-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

@media (max-width: 540px) {
  .edit-attachments-grid {
    grid-template-columns: 1fr;
  }
}

.edit-attachment-box {
  padding: var(--space-4);
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.edit-attachment-box.has-file {
  background: var(--spreadsheet-green-bg);
  border-color: var(--spreadsheet-green-border);
}

.edit-attachment-box.has-file.is-pdf {
  background: rgba(220, 38, 38, 0.05);
  border-color: rgba(220, 38, 38, 0.2);
}

.edit-attachment-current {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.edit-attachment-current i {
  font-size: var(--font-size-2xl);
  color: var(--text-tertiary);
}

.edit-attachment-box.has-file .edit-attachment-current i {
  color: var(--spreadsheet-green);
}

.edit-attachment-box.has-file.is-pdf .edit-attachment-current i {
  color: var(--document-red);
}

.edit-attachment-name {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.edit-attachment-box.has-file .edit-attachment-name {
  color: var(--text-primary);
  font-weight: 500;
}

.edit-attachment-actions {
  display: flex;
  gap: var(--space-2);
}

.edit-attachment-replace-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-xs);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.edit-attachment-replace-btn:hover {
  background: var(--bg-surface-muted);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* Filing Card Payment Status Badge */
.filing-card-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-xs);
  font-weight: 500;
  border-radius: var(--radius-sm);
}

.filing-card-status-badge.status-paid {
  background: var(--badge-success-bg);
  color: var(--badge-success-text);
  border: none;
}

.filing-card-status-badge.status-due {
  background: var(--badge-warning-bg) !important;
  color: var(--badge-warning-text) !important;
  border: none !important;
}

.filing-card-status-badge.status-prep {
  background: var(--warning-bg);
  color: var(--warning-text);
}

/* Revert to Preparation button */
.download-badge--prep {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
}

.download-badge--prep:hover {
  background: var(--warning-100);
  border-color: var(--warning-icon);
}

/* Finalize button */
.download-badge--finalize {
  background: var(--spreadsheet-green-bg);
  border: 1px solid var(--green-200);
  color: var(--spreadsheet-green-text);
}

.download-badge--finalize:hover {
  background: var(--green-200);
  border-color: var(--status-success);
}

/* Filing Card Amount Display */
.filing-card-amount-lg {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--text-primary);
}

/* Filing Card Header Right */
.filing-card-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

/* Filing Card Attachment Indicator */
.filing-card-attachment {
  color: var(--text-tertiary);
  font-size: var(--font-xs);
}

.filing-card-attachment i {
  font-size: var(--font-size-xs);
}

/* Spin animation for loading */
.spin-animation {
  animation: spin 1s linear infinite;
}

/* Upload Form - Edit Mode Banner */
.upload-edit-mode-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--astrovia-blue-subtle);
  border: 1px solid var(--astrovia-blue-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.edit-mode-content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--astrovia-blue);
  font-size: var(--font-sm);
}

.edit-mode-content i {
  font-size: var(--font-size-xl);
}

.edit-mode-cancel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-xs);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.edit-mode-cancel:hover {
  background: var(--bg-surface-muted);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* File attached status */
.file-name-display.has-file {
  color: var(--spreadsheet-green-text);
}

.file-name-display .file-attached {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.file-name-display .file-attached i {
  font-size: var(--font-size-base);
}

/* Update button edit mode */
#tax-report-upload-form button[type="submit"].edit-mode {
  background: var(--astrovia-blue);
}

/* ============================================
   TAX PAYMENTS STYLES
   ============================================ */

.tax-payments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.tax-payment-card {
  transition: box-shadow var(--duration-normal) var(--ease-default), transform var(--duration-normal) var(--ease-default);
}

.tax-payment-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.tax-payments-list .data-table {
  border-collapse: collapse;
  width: 100%;
}

.tax-payments-list .data-table th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
}

.tax-payments-list .data-table td {
  padding: 16px;
  border-bottom: 1px solid var(--border-light);
  font-size: var(--font-size-base);
}

.tax-payments-list .data-table tr:hover {
  background: var(--bg-hover);
}

.payment-status-tabs .c-btn.active {
  background: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
}

/* Badge colors for payment status */
.badge-yellow {
  background: var(--badge-warning-bg);
  color: var(--status-warning);
  border: 1px solid var(--amber-300);
}

.badge-green {
  background: var(--green-100);
  color: var(--status-success);
  border: 1px solid var(--green-200);
}

.badge-red {
  background: var(--red-100);
  color: var(--status-error);
  border: 1px solid var(--red-200);
}

.badge-blue {
  background: var(--blue-100);
  color: var(--blue-700);
  border: 1px solid var(--blue-200);
}

.badge-gray {
  background: var(--bg-section);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Warning subtle background */
:root {
  --bg-warning-subtle: #FFFBEB;
  --border-warning: #FCD34D;
  --text-warning: #92400E;
}

/* Toggle Switch Compact - For inline toggle with label */
.toggle-switch-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.toggle-switch-compact input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider-compact {
  position: relative;
  width: 36px;
  height: 20px;
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  transition: background-color var(--duration-normal);
  flex-shrink: 0;
}

.toggle-slider-compact:before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: var(--neutral-0);
  border-radius: var(--radius-full);
  transition: transform var(--duration-normal);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch-compact input:checked + .toggle-slider-compact {
  background-color: var(--accent-primary);
}

.toggle-switch-compact input:checked + .toggle-slider-compact:before {
  transform: translateX(16px);
}

.toggle-switch-compact .toggle-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Tax Payment Actions Container */
.tax-payment-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

/* Modal Overlay */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}

.modal-overlay.active {
  display: flex;
}

.modal-content {
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-light);
}

.modal-close-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-xs);
  transition: all var(--duration-fast);
}

.modal-close-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

/* ============================================
   Organization Modal
   ============================================ */

/* Organization Modal - Force Visibility Fix */
#org-modal:not(.hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

/* ========================================
   UPLOADED REPORTS - CLEAN LEFT-ALIGNED CARDS
   ======================================== */
.filing-card-single {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 12px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
}

.filing-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.filing-card-region {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filing-card-flag {
  font-size: var(--font-size-3xl);
  line-height: 1;
}

.filing-card-region-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.filing-card-region-name {
  font-weight: 600;
  font-size: var(--font-size-md);
  color: var(--text-primary);
}

.filing-card-period {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.filing-card-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filing-card-amount-lg {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
}

.filing-card-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.filing-card-status-badge.status-due {
  background: var(--badge-warning-bg) !important;
  color: var(--badge-warning-text) !important;
  border: none !important;
}

.filing-card-status-badge.status-paid {
  background: var(--badge-success-bg);
  color: var(--badge-success-text);
  border: none;
}

.filing-card-status-badge.status-prep {
  background: var(--amber-100);
  color: var(--status-warning);
}

.filing-card-org-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-section);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  width: fit-content;
  margin-bottom: 10px;
}

.filing-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: 12px;
  text-align: left;
}

.filing-card-separator {
  color: var(--text-quaternary);
}

.filing-card-uploader,
.filing-card-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.filing-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.download-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.download-badge--prep {
  background: var(--amber-100);
  color: var(--status-warning);
}

.download-badge--prep:hover {
  background: var(--amber-200);
}

.download-badge--finalize {
  background: var(--green-100);
  color: var(--status-success);
}

.download-badge--finalize:hover {
  background: var(--green-100);
}

.download-badge--pdf {
  background: var(--bg-surface-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.download-badge--pdf:hover {
  background: var(--bg-surface);
  border-color: var(--text-quaternary);
  color: var(--text-secondary);
}

.download-badge--spreadsheet {
  background: var(--bg-surface-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.download-badge--spreadsheet:hover {
  background: var(--bg-surface);
  border-color: var(--text-quaternary);
  color: var(--text-secondary);
}

.download-badge--delete {
  background: var(--bg-section);
  color: var(--text-tertiary);
  padding: 6px 8px;
}

.download-badge--delete:hover {
  background: var(--red-100);
  color: var(--status-error);
}

.download-badge--missing {
  background: var(--amber-100);
  color: var(--status-warning);
  cursor: default;
}

/* ========================================
   UPLOADED REPORTS - COMPACT LEFT-ALIGNED CARDS (Tax Filings Style)
   ======================================== */
.filing-card-compact {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 10px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
}

.filing-card-row-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.filing-card-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.filing-card-compact .filing-card-flag {
  font-size: var(--font-size-2xl);
  line-height: 1;
}

.filing-card-info {
  display: flex;
  flex-direction: column;
}

.filing-card-title {
  font-weight: 600;
  font-size: var(--font-size-md);
  color: var(--text-primary);
}

.filing-card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.filing-card-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filing-card-amount {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.filing-card-pay-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: var(--blue-700);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--duration-fast);
}

.filing-card-pay-btn:hover {
  background: var(--blue-700);
}

.filing-card-badge-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.filing-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.filing-status-badge.filing-status-due {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-text);
  border: none;
}

.filing-status-badge.filing-status-paid {
  background: var(--badge-success-bg);
  color: var(--badge-success-text);
  border: none;
}

.filing-status-badge.filing-status-prep {
  background: var(--amber-50);
  color: var(--status-warning);
  border: none;
}

.filing-card-org {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.filing-card-meta-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-bottom: 10px;
}

.filing-card-pdf-row {
  margin-bottom: 10px;
}

.filing-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--bg-surface-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: all var(--duration-fast);
}

.filing-pdf-btn:hover {
  background: var(--bg-section);
  border-color: var(--text-quaternary);
}

.filing-card-action-row {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.filing-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-fast);
}

.filing-action-btn.filing-action-revert {
  background: var(--bg-surface);
  color: var(--status-warning);
  border: 1px solid var(--amber-300);
}

.filing-action-btn.filing-action-revert:hover {
  background: var(--amber-50);
}

.filing-action-btn.filing-action-finalize {
  background: var(--green-100);
  color: var(--status-success);
  border: none;
}

.filing-action-btn.filing-action-finalize:hover {
  background: var(--green-100);
}

.filing-action-btn.filing-action-delete {
  background: var(--bg-surface);
  color: var(--text-tertiary);
  border: 1px solid var(--border-subtle);
  padding: 5px 8px;
}

.filing-action-btn.filing-action-delete:hover {
  background: var(--red-50);
  color: var(--status-error);
  border-color: var(--red-200);
}

/* ========================================
   UPLOADED REPORTS - CORRECT DESIGN TOKENS
   ======================================== */
.filing-status-badge.filing-status-due {
  background: var(--badge-warning-bg) !important;
  color: var(--badge-warning-text) !important;
  border: none !important;
}

.filing-status-badge.filing-status-paid {
  background: var(--badge-success-bg) !important;
  color: var(--badge-success-text) !important;
  border: none !important;
}

.filing-status-badge.filing-status-prep {
  background: var(--warning-bg) !important;
  color: var(--warning-text) !important;
  border: none !important;
}

.filing-action-btn.filing-action-revert {
  background: var(--warning-bg) !important;
  color: var(--warning-text) !important;
  border: none !important;
}

.filing-action-btn.filing-action-revert:hover {
  background: var(--warning-100) !important;
}

.filing-action-btn.filing-action-finalize {
  background: var(--success-bg) !important;
  color: var(--success-text) !important;
  border: none !important;
}

.filing-action-btn.filing-action-finalize:hover {
  background: var(--success-100) !important;
}

/* ========================================
   UPLOADED REPORTS - CLEAN LEFT-ALIGNED LAYOUT V2
   ======================================== */
.filing-card-compact {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 10px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
}

.filing-card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.filing-card-left-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.filing-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filing-card-compact .filing-card-flag {
  font-size: var(--font-size-2xl);
}

.filing-card-titles {
  display: flex;
  flex-direction: column;
}

.filing-card-compact .filing-card-title {
  font-weight: 600;
  font-size: var(--font-size-md);
  color: var(--text-primary);
}

.filing-card-compact .filing-card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.filing-card-amount-col {
  text-align: right;
}

.filing-card-compact .filing-card-amount {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.filing-card-badge-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filing-card-compact .filing-card-org {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 5px;
}

.filing-card-meta-left {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.filing-card-meta-left .meta-dot {
  color: var(--text-quaternary);
  margin: 0 2px;
}

.filing-card-pdf-row {
  margin-top: 10px;
}

.filing-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--bg-surface-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: all var(--duration-fast);
}

.filing-pdf-btn:hover {
  background: var(--bg-section);
  border-color: var(--border-hover);
}

.filing-card-action-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

/* Action Buttons */
.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-fast);
  border: none;
}

.btn-action-amber { /* UPDATED */
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.btn-action-amber:hover {
  background: var(--bg-surface-subtle);
  border-color: var(--border-hover);
}

.btn-action-green {
  background: var(--status-success);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.btn-action-green:hover {
  background: var(--status-success);
}

.btn-action-delete {
  background: var(--bg-section);
  color: var(--text-tertiary);
  padding: 7px 10px;
}

.btn-action-delete:hover {
  background: var(--red-50);
  color: var(--status-error);
}

/* Fix top Payment Due / Paid filter tabs - remove glow */
#tab-content-uploaded-reports .filings-filter-tabs,
.filings-filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

#tab-content-uploaded-reports .filings-filter-tab,
.filings-filter-tab {
  flex: 1;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-fast);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

.filings-filter-tab.active,
.filings-filter-tab--active {
  border-width: 2px;
}

.filings-filter-tab--due.active,
.filings-filter-tab--due.filings-filter-tab--active {
  background: var(--red-50);
  border-color: var(--red-200);
  color: var(--status-error);
}

.filings-filter-tab--paid.active,
.filings-filter-tab--paid.filings-filter-tab--active {
  background: var(--badge-success-bg);
  border: none;
  color: var(--badge-success-text);
}

/* ================================================
   MARKETS V2 - 4-METRIC CARD LAYOUT (CORRECT DESIGN)
   ================================================ */

.market-live-card-identity {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.market-flag {
  font-size: var(--font-size-3xl);
}

.market-name {
  font-weight: 600;
  font-size: var(--font-size-lg);
  color: var(--text-primary);
}

/* Duplicate badge definitions removed - see line ~30740 */

.market-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.market-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.market-metric-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
}

.market-metric-value {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.market-metric.highlight .market-metric-label {
  color: var(--blue-500);
}

.market-metric.highlight .market-metric-value.liability {
  color: var(--blue-500);
}

.market-card-footer {
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-subtle);
}

.autopay-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.autopay-status.on {
  color: var(--status-success);
}

.autopay-status.off {
  color: var(--text-tertiary);
}

.autopay-status i {
  font-size: var(--font-size-lg);
}

/* Duplicate removed - see canonical definition at line ~30694 */

/* Auto-pay status styling */
.autopay-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xs);
  font-weight: 500;
}

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

.autopay-status.off i {
  color: var(--text-tertiary);
}

.autopay-status.on {
  color: var(--status-success);
}

.autopay-status.on i {
  color: var(--status-success);
}

/* Market card header badges layout - matching production */
.market-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* DEMO badge - exact match with .market-status-badge */
.market-badge.demo {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  letter-spacing: 0.5px;
  border-radius: var(--radius-full);
  background: var(--bg-section);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  line-height: 1;
}

/* Market card header - fix layout for badges */
.market-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.market-card-identity {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.market-card-identity .market-flag {
  font-size: var(--font-size-2xl);
  line-height: 1;
}

.market-card-identity .market-name {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

/* Coming Soon styles moved to styles/cie-coming-soon.css */

.btn-action-edit {
  background: var(--astrovia-blue-subtle);
  color: var(--text-brand);
  border: none;
}

.btn-action-edit:hover {
  background: var(--text-brand);
  color: white;
}

/* Back to home link on auth pages */
.auth-back-link {
  position: absolute;
  top: 24px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  transition: all var(--duration-normal) var(--ease-default);
  z-index: 10;
}

.auth-back-link:hover {
  color: var(--text-secondary);
}

.auth-back-link svg {
  flex-shrink: 0;
}

/* Fix delete user modal visibility */
#delete-user-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-default), visibility var(--duration-normal) var(--ease-default);
}

#delete-user-modal:not(.hidden) {
  opacity: 1;
  visibility: visible;
}

#delete-user-modal.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ===================================================================
   APPLE-INSPIRED COMPACT DASHBOARD STATS (2025 Design Refresh)
   Tighter density, cleaner typography, refined visual hierarchy
   =================================================================== */

/* Override KPI Grid for compact layout */
.markets-kpi-grid.compact-stats {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
}

/* Compact KPI Card Variant */
.markets-kpi-card.compact {
  padding: 14px 16px;
  gap: 4px;
  min-height: auto;
  border-radius: var(--radius-md);
}

.markets-kpi-card.compact .markets-kpi-card-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.markets-kpi-card.compact .markets-kpi-card-value {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Primary/Highlighted Card Compact */
.markets-kpi-card.compact.primary {
  background: var(--bg-white);
  border-color: var(--border-subtle);
}

.markets-kpi-card.compact.primary .markets-kpi-card-label,
.markets-kpi-card.compact.primary .markets-kpi-card-value {
  color: var(--text-primary);
}

/* Icon in Compact Cards */
.markets-kpi-card.compact .kpi-icon {
  width: 28px;
  height: 28px;
  font-size: var(--font-size-sm);
  margin-bottom: 4px;
}

/* Dashboard Section Divider */
.dashboard-section-divider {
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-lg) 0;
  padding-top: var(--space-lg);
}

/* Compact Stats Row - 4 columns on desktop */
@media (min-width: 1200px) {
  .markets-kpi-grid.compact-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Tablet: 3 columns */
@media (max-width: 1199px) and (min-width: 769px) {
  .markets-kpi-grid.compact-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: 2 columns */
@media (max-width: 768px) {
  .markets-kpi-grid.compact-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .markets-kpi-card.compact {
    padding: 12px 14px;
  }
  .markets-kpi-card.compact .markets-kpi-card-value {
    font-size: var(--font-size-xl);
  }
}

/* Dashboard Welcome Header Compact */
.dashboard-welcome.compact {
  padding: var(--space-md) 0;
  margin-bottom: var(--space-sm);
}

.dashboard-welcome.compact .welcome-text h2 {
  font-size: var(--font-size-2xl);
  margin-bottom: 2px;
}

.dashboard-welcome.compact .welcome-text p {
  font-size: var(--font-size-sm);
}

/* World Clock Compact */
.world-clock-container.compact {
  gap: 12px;
}

.world-clock-container.compact .clock-item {
  padding: 8px 12px;
}

.world-clock-container.compact .clock-time {
  font-size: var(--font-size-md);
}

.world-clock-container.compact .clock-label {
  font-size: var(--font-size-xs);
}

/* Geographic Section Compact */
.geographic-section.compact {
  margin-top: var(--space-md);
}

.geographic-section.compact .section-header h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

/* Country Cards Compact Grid */
.country-breakdown-grid.compact {
  gap: 10px;
}

.country-card.compact {
  padding: 12px 14px;
}

.country-card.compact .country-name {
  font-size: var(--font-size-sm);
}

.country-card.compact .country-stats {
  font-size: var(--font-size-xs);
}

.country-card.compact .country-revenue {
  font-size: var(--font-size-md);
}

/* ===================================================================
   COMPACT ANALYTICS DASHBOARD CARDS (Apple-inspired 2025)
   Reduced density for more vertical content visibility
   =================================================================== */

/* Tighter grid gaps */
.analytics-metrics-row.compact {
  gap: 10px;
  margin-bottom: 10px;
}

.analytics-secondary-row.compact {
  margin-bottom: 16px;
}

/* Compact Card Variant */
.analytics-metric-card.compact {
  padding: 12px 16px;
  min-height: 64px;
  gap: var(--space-sm);
  border-radius: var(--radius-md);
}

.analytics-metric-card.compact .analytics-metric-icon {
  width: 28px;
  height: 28px;
}

.analytics-metric-card.compact .analytics-metric-icon svg,
.analytics-metric-card.compact .analytics-metric-icon i {
  width: 16px;
  height: 16px;
  font-size: var(--font-size-lg);
}

.analytics-metric-card.compact .analytics-metric-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.05em;
}

.analytics-metric-card.compact .analytics-metric-value {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

/* Responsive compact cards */
@media (max-width: 768px) {
  .analytics-metrics-row.compact {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .analytics-metric-card.compact {
    padding: 10px 12px;
    min-height: 56px;
  }
  .analytics-metric-card.compact .analytics-metric-value {
    font-size: var(--font-size-lg);
  }
}

/* World Clock Compact */
.world-clock-wrapper.compact {
  gap: 8px;
}

.world-clock-wrapper.compact .clock-city {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}

.world-clock-wrapper.compact .clock-time {
  font-size: var(--font-size-base);
}

.world-clock-wrapper.compact .clock-label {
  font-size: var(--font-size-xs);
}

/* Dashboard Welcome Compact */
.dashboard-welcome-banner.compact {
  padding: 12px 0;
  margin-bottom: 12px;
}

.dashboard-welcome-banner.compact .welcome-profile-info h2 {
  font-size: var(--font-size-2xl);
  margin-bottom: 0;
}

.dashboard-welcome-banner.compact .welcome-profile-info p {
  font-size: var(--font-size-xs);
}

/* Geographic Section Compact */
.geo-distribution-section.compact {
  margin-top: 12px;
}

.geo-distribution-section.compact .geo-section-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  margin-bottom: 12px;
}

/* Country Cards Compact */
.geo-country-grid.compact {
  gap: 8px;
}

.geo-country-card.compact {
  padding: 10px 12px;
}

.geo-country-card.compact .country-name {
  font-size: var(--font-size-xs);
}

.geo-country-card.compact .country-metrics {
  font-size: var(--font-size-xs);
}

.geo-country-card.compact .country-revenue {
  font-size: var(--font-size-base);
}

/* Ensure icons show in proper color */
.analytics-metric-card.compact .analytics-metric-icon {
  color: var(--astrovia-blue);
}

/* ===================================================================
   APPLE-LEVEL METRIC CARDS (Premium Refinement)
   Proper spacing, typography, and visual hierarchy
   ALL cards use identical surface treatment for consistency
   =================================================================== */

/* Override previous compact styles with premium version */
.analytics-metric-card.compact {
  padding: 16px 20px;
  min-height: 72px;
  gap: var(--space-sm);
  border-radius: var(--radius-lg);
  background: var(--card-surface);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.analytics-metric-card.compact:hover {
  box-shadow: var(--shadow-card-hover);
}

/* Content container with proper gap */
.analytics-metric-card.compact .analytics-metric-content {
  gap: 6px;
}

/* Label - Refined typography */
.analytics-metric-card.compact .analytics-metric-label {
  font-size: var(--font-size-xs); /* 11px - balanced density */
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: rgba(15, 23, 42, 0.65);
  text-transform: uppercase;
}

/* Value - Premium number display */
.analytics-metric-card.compact .analytics-metric-value {
  font-size: var(--font-size-3xl); /* 24px - clear and readable */
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* Icon refinement */
.analytics-metric-card.compact .analytics-metric-icon {
  width: 32px;
  height: 32px;
  color: var(--astrovia-blue);
  opacity: 0.85;
}

.analytics-metric-card.compact .analytics-metric-icon svg,
.analytics-metric-card.compact .analytics-metric-icon i {
  width: 18px;
  height: 18px;
  font-size: var(--font-size-xl);
}

/* Grid with refined spacing */
.analytics-metrics-row.compact {
  gap: 12px;
  margin-bottom: 12px;
}

.analytics-secondary-row.compact {
  margin-bottom: 20px;
}

/* Responsive refinements */
@media (max-width: 1200px) {
  .analytics-metric-card.compact .analytics-metric-value {
    font-size: var(--font-size-2xl);
  }
}

@media (max-width: 768px) {
  .analytics-metrics-row.compact {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .analytics-metric-card.compact {
    padding: 14px 16px;
    min-height: 64px;
  }
  .analytics-metric-card.compact .analytics-metric-value {
    font-size: var(--font-size-xl);
  }
  .analytics-metric-card.compact .analytics-metric-label {
    font-size: var(--font-size-xs);
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .analytics-metric-card.compact {
    background: var(--card-surface);
  }
  .analytics-metric-card.compact .analytics-metric-label {
    color: rgba(255, 255, 255, 0.65);
  }
}

/* FIX: Ensure label text is visible in light mode */
.analytics-metric-card.compact .analytics-metric-label {
  color: var(--text-secondary) !important; /* Slate-500 - visible on white */
}

.analytics-metric-card.compact .analytics-metric-value {
  color: var(--text-primary) !important; /* Slate-900 - dark and readable */
}

/* ===================================================================
   APPLE/STRIPE/LINEAR METRIC CARDS - Final Refinement
   Icons subordinate, numbers dominate, clean visual hierarchy
   =================================================================== */

/* Card Layout - Tighter vertical rhythm */
.analytics-metric-card.compact {
  padding: 14px 18px !important;
  min-height: auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

/* Label row with inline icon */
.analytics-metric-card.compact .analytics-metric-content {
  display: flex;
  flex-direction: column;
  gap: 4px !important;
  width: 100%;
}

/* Move icon to be inline with label - hide the separate icon container */
.analytics-metric-card.compact .analytics-metric-icon {
  display: none !important;
}

/* Label - 12px, medium weight, muted */
.analytics-metric-card.compact .analytics-metric-label {
  font-size: var(--font-size-xs) !important; /* 11px */
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  line-height: 1.3 !important;
  color: var(--text-secondary) !important; /* Slate-500 muted */
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Add icon before label using pseudo-element for supported cards */
.analytics-metric-card.compact .analytics-metric-label::before {
  font-family: 'Phosphor' !important;
  font-size: var(--font-size-sm) !important;
  opacity: 0.6 !important;
  line-height: 1;
}

/* Value - 28px, semibold, primary (THE HERO) */
.analytics-metric-card.compact .analytics-metric-value {
  font-size: var(--font-size-3xl) !important; /* 26px */
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  color: var(--text-primary) !important; /* Slate-900 - primary */
  margin-top: 2px !important;
}

/* Grid spacing - balanced */
.analytics-metrics-row.compact {
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.analytics-secondary-row.compact {
  margin-bottom: 16px !important;
}

/* Responsive - maintain hierarchy on smaller screens */
@media (max-width: 1200px) {
  .analytics-metric-card.compact .analytics-metric-value {
    font-size: var(--font-size-2xl) !important;
  }
}

@media (max-width: 768px) {
  .analytics-metrics-row.compact {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .analytics-metric-card.compact {
    padding: 12px 14px !important;
  }
  .analytics-metric-card.compact .analytics-metric-value {
    font-size: var(--font-size-2xl) !important;
  }
  .analytics-metric-card.compact .analytics-metric-label {
    font-size: var(--font-size-xs) !important;
  }
}

/* ===================================================================
   RESTORE ICONS - Inline with label, muted, subordinate
   Apple/Stripe/Linear restraint with semantic cues preserved
   =================================================================== */

/* Show icon container again but reposition */
.analytics-metric-card.compact .analytics-metric-icon {
  display: flex !important;
  position: absolute !important;
  top: 14px !important;
  left: 18px !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Icon styling - muted, small, subordinate */
.analytics-metric-card.compact .analytics-metric-icon svg,
.analytics-metric-card.compact .analytics-metric-icon i {
  width: 14px !important;
  height: 14px !important;
  font-size: var(--font-size-base) !important;
  color: var(--text-secondary) !important; /* Same as label - muted slate */
  opacity: 0.6 !important;
}

/* Card needs relative positioning for icon */
.analytics-metric-card.compact {
  position: relative !important;
}

/* Adjust content to make room for inline icon */
.analytics-metric-card.compact .analytics-metric-content {
  padding-left: 22px !important; /* Space for icon */
}

/* Label stays aligned with icon */
.analytics-metric-card.compact .analytics-metric-label {
  line-height: 14px !important; /* Match icon height for baseline alignment */
}

/* ===================================================================
   METRIC CARD ICONS - Final Fix
   Icons inline with label, muted, Apple/Stripe/Linear restraint
   =================================================================== */

/* Reset: Card layout - flex row with icon and content side by side */
.analytics-metric-card.compact {
  flex-direction: row !important;
  align-items: flex-start !important;
  position: relative !important;
  padding: 14px 18px !important;
}

/* Show icon inline, positioned to align with label */
.analytics-metric-card.compact .analytics-metric-icon {
  display: flex !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  align-items: flex-start !important;
  justify-content: center !important;
  margin-top: 1px !important; /* Fine-tune baseline alignment with label */
  margin-right: 6px !important; /* Gap between icon and content */
  flex-shrink: 0 !important;
}

/* Icon size and color - muted, subordinate */
.analytics-metric-card.compact .analytics-metric-icon svg,
.analytics-metric-card.compact .analytics-metric-icon i {
  width: 14px !important;
  height: 14px !important;
  font-size: var(--font-size-base) !important;
  color: var(--text-secondary) !important; /* Same as label - muted slate */
  opacity: 0.6 !important;
}

/* Content column - remove extra padding */
.analytics-metric-card.compact .analytics-metric-content {
  padding-left: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Label - stays muted, inline alignment with icon */
.analytics-metric-card.compact .analytics-metric-label {
  font-size: var(--font-size-xs) !important; /* 11px */
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase;
}

/* Value - THE HERO - unchanged */
.analytics-metric-card.compact .analytics-metric-value {
  font-size: var(--font-size-3xl) !important; /* 26px */
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  color: var(--text-primary) !important;
  margin-top: 2px !important;
}

/* ===================================================================
   METRIC CARD ICONS - Correct Inline Placement via CSS Grid
   Icon aligned with label row, not the entire card
   =================================================================== */

/* Card uses CSS Grid for precise icon+label alignment */
.analytics-metric-card.compact {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 0 !important;
  padding: 14px 18px !important;
  align-items: start !important;
}

/* Icon positioned in first column, first row (label row only) */
.analytics-metric-card.compact .analytics-metric-icon {
  display: flex !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 6px !important;
  margin-top: 0 !important;
  padding: 0 !important;
  align-self: center !important;
}

/* Icon styling */
.analytics-metric-card.compact .analytics-metric-icon svg,
.analytics-metric-card.compact .analytics-metric-icon i {
  width: 14px !important;
  height: 14px !important;
  font-size: var(--font-size-base) !important;
  color: var(--text-secondary) !important;
  opacity: 0.6 !important;
  line-height: 1 !important;
}

/* Content spans second column, both rows */
.analytics-metric-card.compact .analytics-metric-content {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding-left: 0 !important;
}

/* Label - first row content, inline with icon */
.analytics-metric-card.compact .analytics-metric-label {
  font-size: var(--font-size-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  line-height: 14px !important; /* Match icon height for baseline */
  color: var(--text-secondary) !important;
  text-transform: uppercase;
}

/* Value - second row, THE HERO */
.analytics-metric-card.compact .analytics-metric-value {
  font-size: var(--font-size-3xl) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  color: var(--text-primary) !important;
  margin-top: 2px !important;
}

/* ===================================================================
   METRIC CARD ICONS - Opacity Refinement
   Slightly more visible (65-70%), subtle hover enhancement
   =================================================================== */

/* Icon opacity increased from 60% to 68% */
.analytics-metric-card.compact .analytics-metric-icon svg,
.analytics-metric-card.compact .analytics-metric-icon i {
  opacity: 0.68 !important;
  transition: opacity var(--duration-fast) var(--ease-default) !important;
}

/* Subtle hover enhancement */
.analytics-metric-card.compact:hover .analytics-metric-icon svg,
.analytics-metric-card.compact:hover .analytics-metric-icon i {
  opacity: 0.82 !important;
}

/* ===================================================================
   UNIFIED VISUAL CONSISTENCY SYSTEM
   Apple / Stripe / Linear-level cohesion across entire dashboard
   =================================================================== */

/* === GLOBAL VISUAL TOKENS === */
:root {
  /* Unified Grey Scale */
  --unified-text-primary: #0f172a;     /* Slate-900 - Numbers, headlines */
  --unified-text-secondary: #64748b;   /* Slate-500 - Labels, icons */
  --unified-text-tertiary: #94a3b8;    /* Slate-400 - Meta, dates */
  
  /* Unified Typography */
  --unified-label-size: 0.6875rem;     /* 11px */
  --unified-label-weight: 500;
  --unified-label-spacing: 0.05em;
  
  --unified-meta-size: 0.625rem;       /* 10px */
  --unified-meta-weight: 500;
  
  --unified-value-size: 1.625rem;      /* 26px */
  --unified-value-weight: 600;
  
  /* Unified Icon */
  --unified-icon-size: 14px;
  --unified-icon-opacity: 0.68;
}

/* === SECTION 1: TOP HEADER CLOCKS === */

/* City name - matches card labels */
.world-clock-city {
  font-size: var(--unified-label-size) !important;
  font-weight: var(--unified-label-weight) !important;
  color: var(--unified-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--unified-label-spacing) !important;
}

/* Time - primary numeric emphasis */
.world-clock-time {
  font-size: var(--font-size-lg) !important; /* Slightly smaller than card values */
  font-weight: 600 !important;
  color: var(--unified-text-primary) !important;
  letter-spacing: -0.01em !important;
}

/* Date/meta line - tertiary styling */
.world-clock-meta {
  font-size: var(--unified-meta-size) !important;
  font-weight: var(--unified-meta-weight) !important;
  color: var(--unified-text-tertiary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

/* === SECTION 2: METRIC SUMMARY CARDS === */
/* (Already styled, ensure consistency) */

.analytics-metric-card.compact .analytics-metric-label {
  font-size: var(--unified-label-size) !important;
  font-weight: var(--unified-label-weight) !important;
  color: var(--unified-text-secondary) !important;
  letter-spacing: var(--unified-label-spacing) !important;
}

.analytics-metric-card.compact .analytics-metric-value {
  font-size: var(--unified-value-size) !important;
  font-weight: var(--unified-value-weight) !important;
  color: var(--unified-text-primary) !important;
}

.analytics-metric-card.compact .analytics-metric-icon svg,
.analytics-metric-card.compact .analytics-metric-icon i {
  width: var(--unified-icon-size) !important;
  height: var(--unified-icon-size) !important;
  font-size: var(--unified-icon-size) !important;
  color: var(--unified-text-secondary) !important;
  opacity: var(--unified-icon-opacity) !important;
}

/* === SECTION 3: COUNTRY BREAKDOWN CARDS === */

/* Country name - semibold, same as section headers */
.analytics-country-name-v2 {
  font-size: var(--font-size-base) !important; /* 14px */
  font-weight: 600 !important;
  color: var(--unified-text-primary) !important;
  margin-bottom: 2px !important;
  line-height: 1.3 !important;
}

/* Orders line - secondary muted */
.analytics-country-metrics-v2 {
  font-size: var(--font-size-xs) !important; /* 12px */
  font-weight: var(--unified-label-weight) !important;
  color: var(--unified-text-secondary) !important;
  gap: 4px !important;
}

/* Revenue line - primary metric */
.analytics-country-revenue-v2 {
  font-size: var(--font-size-md) !important; /* 15px */
  font-weight: 600 !important;
  color: var(--unified-text-primary) !important;
  letter-spacing: -0.01em !important;
}

/* Flag size consistent - 18px */
.analytics-country-flag-v2 {
  font-size: var(--font-size-xl) !important; /* 18px */
  line-height: 1 !important;
}

/* Card styling - unified radius/shadow */
.analytics-country-card-v2 {
  border-radius: var(--radius-lg) !important;
  padding: 12px 14px !important;
}

/* Hover - subtle, not jarring */
.analytics-country-card-v2:hover {
  border-color: var(--card-interactive-hover-border) !important;
  background: var(--card-interactive-hover-bg) !important;
  box-shadow: var(--card-interactive-hover-shadow) !important;
}

/* Grid consistency */
.analytics-countries-grid-v2 {
  gap: 10px !important;
}

/* === UNIFIED VISUAL SYSTEM - FIXES === */

/* Fix 1: Update HUD country cards */
.hud-country-name {
  font-size: var(--font-size-base) !important; /* 14px */
  font-weight: 600 !important;
  color: var(--unified-text-primary) !important;
}

.hud-country-revenue {
  font-size: var(--font-size-md) !important; /* 15px */
  font-weight: 600 !important;
  color: var(--unified-text-primary) !important;
}

/* Fix 2: Country card metric items */
.analytics-country-metrics-v2 .analytics-country-metric-item {
  color: var(--unified-text-secondary) !important;
}

.analytics-country-metrics-v2 .metric-value {
  font-weight: 600 !important;
  color: var(--unified-text-primary) !important;
}

/* Fix 3: Compact country cards */
.country-card.compact .country-name,
.geo-country-card.compact .country-name {
  font-size: var(--font-size-base) !important;
  font-weight: 600 !important;
  color: var(--unified-text-primary) !important;
}

.country-card.compact .country-stats,
.geo-country-card.compact .country-metrics {
  font-size: var(--font-size-xs) !important;
  color: var(--unified-text-secondary) !important;
}

.country-card.compact .country-revenue,
.geo-country-card.compact .country-revenue {
  font-weight: 600 !important;
  color: var(--unified-text-primary) !important;
}

/* Fix 4: Legacy analytics country cards */
.analytics-country-card .analytics-country-name {
  font-weight: 600 !important;
  color: var(--unified-text-primary) !important;
}

/* Fix 5: Restore responsive clock typography */
.world-clock-city {
  font-size: clamp(10px, 0.95vw, var(--unified-label-size) !important);
}

.world-clock-time {
  font-size: clamp(14px, 1.2vw, 16px) !important;
}

.world-clock-meta {
  font-size: clamp(9px, 0.85vw, var(--unified-meta-size) !important);
}

/* === UNIFIED VISUAL TOKENS - DARK MODE OVERRIDES === */
.theme-dark {
  /* Unified Grey Scale - Dark Mode */
  --unified-text-primary: #f1f5f9;     /* Slate-100 - Numbers, headlines */
  --unified-text-secondary: #94a3b8;   /* Slate-400 - Labels, icons */
  --unified-text-tertiary: #64748b;    /* Slate-500 - Meta, dates */
}

/* Ensure all unified components inherit dark mode properly */
.theme-dark .world-clock-city {
  color: var(--unified-text-secondary) !important;
}

.theme-dark .world-clock-time {
  color: var(--unified-text-primary) !important;
}

.theme-dark .world-clock-meta {
  color: var(--unified-text-tertiary) !important;
}

.theme-dark .analytics-metric-card.compact .analytics-metric-label {
  color: var(--unified-text-secondary) !important;
}

.theme-dark .analytics-metric-card.compact .analytics-metric-value {
  color: var(--unified-text-primary) !important;
}

.theme-dark .analytics-metric-card.compact .analytics-metric-icon svg,
.theme-dark .analytics-metric-card.compact .analytics-metric-icon i {
  color: var(--unified-text-secondary) !important;
}

.theme-dark .analytics-country-name-v2,
.theme-dark .hud-country-name,
.theme-dark .analytics-country-metrics-v2 .metric-value,
.theme-dark .hud-country-revenue,
.theme-dark .country-card.compact .country-name,
.theme-dark .geo-country-card.compact .country-name,
.theme-dark .country-card.compact .country-revenue,
.theme-dark .geo-country-card.compact .country-revenue,
.theme-dark .analytics-country-card .analytics-country-name {
  color: var(--unified-text-primary) !important;
}

.theme-dark .analytics-country-metrics-v2,
.theme-dark .analytics-country-metrics-v2 .analytics-country-metric-item,
.theme-dark .country-card.compact .country-stats,
.theme-dark .geo-country-card.compact .country-metrics {
  color: var(--unified-text-secondary) !important;
}

/* ===================================================================
   BREATHING ROOM & SCANABILITY REFINEMENTS
   Apple / Stripe / Linear-level polish - spacing only
   =================================================================== */

/*
VISUAL AUDIT SUMMARY:
- Metric cards: padding 12px 16px, radius-md, no shadow
- Country cards: padding 14px 16px, radius-lg, card-shadow
- Both use existing tokens (card-surface, card-border)
- Standardizing to radius-md for both (most common)
- No new colors, shadows, or borders introduced
*/

/* === PART 1: TOP METRIC CARDS - BREATHING ROOM === */

.analytics-metric-card.compact {
  padding: 14px 16px !important; /* Slightly more vertical breathing room */
}

/* Add space around the numeric value */
.analytics-metric-card.compact .analytics-metric-value {
  margin-top: 6px !important;   /* +6px breathing room above number */
  margin-bottom: 4px !important; /* +4px below number */
  line-height: 1.1 !important;
}

/* Ensure label+icon row has proper spacing from card edge */
.analytics-metric-card.compact .analytics-metric-header {
  margin-bottom: 2px !important;
}

/* === PART 2: COUNTRY BREAKDOWN CARDS - VERTICAL RHYTHM === */

/* Standardize to radius-md (most common) */
.analytics-country-card-v2 {
  border-radius: var(--radius-md) !important;
  padding: 14px 16px !important; /* Slightly more vertical padding */
}

/* Country info vertical spacing */
.analytics-country-info-v2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important; /* +4px between name and metrics */
}

/* Country name spacing */
.analytics-country-name-v2 {
  margin-bottom: 2px !important; /* Breathing room below name */
}

/* Orders/revenue metrics spacing */
.analytics-country-metrics-v2 {
  margin-top: 2px !important;
  gap: 8px !important; /* Space between metric items */
  line-height: 1.3 !important;
}

/* Metric items vertical alignment */
.analytics-country-metrics-v2 .analytics-country-metric-item {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 3px !important;
}

/* === PART 3: GRID CONSISTENCY === */

/* Ensure consistent gap between country cards */
.analytics-countries-grid-v2 {
  gap: 12px !important; /* Consistent with metric card grid */
}

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

@media (max-width: 768px) {
  .analytics-metric-card.compact {
    padding: 12px 14px !important;
  }
  
  .analytics-metric-card.compact .analytics-metric-value {
    margin-top: 4px !important;
    margin-bottom: 2px !important;
  }
  
  .analytics-country-card-v2 {
    padding: 12px 14px !important;
  }
}

/* === FIX: Organization badge should fit content, not stretch === */
.user-org-badge {
  width: fit-content !important;
  max-width: 100% !important;
  flex-shrink: 0 !important;
}

/* Clean Uploaded Reports Layout - Apple Design */
.uploaded-reports-header {
  margin-bottom: var(--space-lg);
}

.filter-row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
}

.filter-row .form-select {
  min-width: 140px;
  flex-shrink: 0;
}

.refresh-btn-minimal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--duration-normal) var(--ease-default);
}

.refresh-btn-minimal:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.uploaded-reports-list {
  min-height: 200px;
}

/* Sidebar Subgroup - More Tools Section (Apple-style) */
.sidebar-subgroup {
  margin-top: var(--space-xs);
}

.sidebar-subgroup-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: all var(--duration-normal) var(--ease-default);
}

.sidebar-subgroup-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.sidebar-subgroup-icon {
  font-size: var(--font-size-base);
}

.sidebar-subgroup-label {
  flex: 1;
  text-align: left;
}

.sidebar-subgroup-chevron {
  font-size: var(--font-size-xs);
  transition: transform var(--duration-normal) var(--ease-default);
}

.sidebar-subgroup:not(.collapsed) .sidebar-subgroup-chevron {
  transform: rotate(180deg);
}

.sidebar-subgroup-items {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--duration-normal) var(--ease-default), opacity var(--duration-normal) var(--ease-default);
}

.sidebar-subgroup:not(.collapsed) .sidebar-subgroup-items {
  max-height: 400px;
  opacity: 1;
}

.sidebar-subgroup-items .sidebar-nav-item {
  padding-left: 16px;
}

/* Feedback styles moved to styles/feedback.css */

/* ===================================
   NOTIFY CLIENT BUTTON & MODAL
   =================================== */

.filings-month-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 12px;
}

.notify-client-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--text-brand);
  color: var(--text-on-brand);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  white-space: nowrap;
}

.notify-client-btn:hover {
  background: var(--blue-700);
}

.notify-client-btn i {
  font-size: var(--font-size-lg);
}

/* Notify Client Modal */
.notify-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.2s ease;
}

.notify-modal {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
}

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

.notify-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.notify-modal-header h2 {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.notify-modal-header h2 i {
  color: var(--primary);
}

.notify-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all var(--duration-normal);
}

.notify-modal-close:hover {
  background: var(--error);
  color: white;
}

.notify-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.notify-modal-section {
  margin-bottom: 24px;
}

.notify-modal-section-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.notify-period-summary {
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.notify-period-icon {
  width: 48px;
  height: 48px;
  background: var(--blue-600);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-brand);
  font-size: var(--font-size-3xl);
}

.notify-period-info h3 {
  margin: 0 0 4px 0;
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
}

.notify-period-info p {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

.notify-org-select {
  margin-bottom: 16px;
}

.notify-org-select label {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.notify-org-select select {
  width: 100%;
  padding: 12px 40px 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-md);
  font-weight: 500;
  background: var(--bg-surface);
  color: var(--text-primary);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='%236B7280' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
}

.notify-org-select select:hover {
  border-color: var(--border-default);
}

.notify-org-select select:focus {
  outline: none;
  border-color: var(--text-brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.notify-user-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  max-height: 200px;
  overflow-y: auto;
}

.notify-user-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--duration-fast);
}

.notify-user-item:last-child {
  border-bottom: none;
}

.notify-user-item:hover {
  background: var(--bg-secondary);
}

.notify-user-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.notify-user-info {
  flex: 1;
}

.notify-user-name {
  font-weight: 500;
  color: var(--text-primary);
}

.notify-user-email {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.notify-user-role {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  background: var(--bg-secondary);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
}

.notify-email-preview {
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  padding: 16px;
}

.notify-email-subject {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.notify-email-body {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  line-height: 1.6;
}

.notify-email-body strong {
  color: var(--text-primary);
}

.notify-personal-note {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

.notify-confirm-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--amber-50);
  border-radius: var(--radius-xl);
  margin-bottom: 16px;
}

.notify-confirm-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--primary);
}

.notify-confirm-check label {
  font-size: var(--font-size-md);
  color: var(--text-primary);
  line-height: 1.5;
}

.notify-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
}

.notify-btn-cancel {
  padding: 10px 20px;
  border: 1px solid var(--border);
  background: var(--card-surface);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-normal);
}

.notify-btn-cancel:hover {
  background: var(--bg-secondary);
}

.notify-btn-send {
  padding: 10px 24px;
  border: none;
  background: var(--primary);
  color: white;
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all var(--duration-normal);
}

.notify-btn-send:hover:not(:disabled) {
  background: var(--blue-700);
}

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

/* Reminder Email Preview Card */
.reminder-body {
  padding: var(--space-2xl);
}

.reminder-selection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.reminder-field-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
  letter-spacing: 0.02em;
}

.reminder-field-label i {
  margin-right: var(--space-xs);
}

.reminder-select {
  width: 100%;
  height: 38px;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background-color: var(--bg-surface);
  padding: 0 var(--space-md);
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-default);
}

.reminder-select:focus {
  border-color: var(--border-focus);
  outline: none;
  box-shadow: var(--focus-ring);
}

.reminder-urgent-warning {
  margin-bottom: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: var(--radius-lg);
}

.reminder-urgent-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.reminder-urgent-icon {
  width: 36px;
  height: 36px;
  background: var(--error-icon);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reminder-urgent-icon i {
  font-size: var(--font-size-2xl);
  color: var(--text-on-brand);
}

.reminder-urgent-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--error-text);
}

.reminder-urgent-desc {
  font-size: var(--font-size-sm);
  color: var(--error-text);
  margin-top: var(--space-2xs);
  line-height: 1.5;
}

.reminder-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.reminder-section-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.reminder-section-icon {
  font-size: var(--font-size-xl);
  color: var(--text-brand);
}

.reminder-section-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.reminder-admin-options {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.reminder-option-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 14px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default);
}

.reminder-option-card:hover {
  border-color: var(--border-card-hover);
}

.reminder-option-warning {
  background: var(--warning-bg);
  border-color: var(--warning-border);
}

.reminder-option-success {
  background: var(--success-bg);
  border-color: var(--success-border-accent);
}

.reminder-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--astrovia-blue);
  cursor: pointer;
  flex-shrink: 0;
}

.reminder-option-warning .reminder-checkbox {
  accent-color: var(--warning-icon);
}

.reminder-option-success .reminder-checkbox {
  accent-color: var(--success-text);
}

.reminder-option-content {
  flex: 1;
}

.reminder-option-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.reminder-option-title i {
  margin-right: var(--space-xs);
  color: var(--text-secondary);
}

.reminder-option-title--warning {
  font-weight: var(--font-weight-semibold);
  color: var(--warning-text);
}

.reminder-option-title--warning i {
  color: var(--warning-icon);
}

.reminder-option-title--success {
  font-weight: var(--font-weight-semibold);
  color: var(--success-dark);
}

.reminder-option-title--success i {
  color: var(--success-text);
}

.reminder-option-desc {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}

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

.reminder-option-desc--success {
  color: var(--success-dark);
}

.reminder-preview-section {
  margin-top: var(--space-xl);
}

.reminder-note-section {
  margin-top: var(--space-lg);
}

.reminder-actions {
  margin-top: var(--space-lg);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
}

.reminder-status {
  margin-top: var(--space-xl);
}

.reminder-email-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.reminder-email-header {
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-section);
  border-bottom: 1px solid var(--border-card);
}

.reminder-email-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.reminder-email-subject {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-top: var(--space-2xs);
}

.reminder-email-body {
  padding: var(--space-lg);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: 1.6;
  max-height: 240px;
  overflow-y: auto;
}

.reminder-note-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.reminder-note-textarea {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  font-size: var(--font-size-sm);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  resize: vertical;
  font-family: inherit;
  transition: border-color var(--duration-fast) var(--ease-default);
  background: var(--bg-surface);
  color: var(--text-primary);
}

.reminder-note-textarea:focus {
  border-color: var(--border-focus);
  outline: none;
  box-shadow: var(--focus-ring);
}

.reminder-btn-secondary {
  height: 36px;
  padding: 0 var(--space-lg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default);
}

.reminder-btn-secondary:hover {
  border-color: var(--border-card-hover);
}

.reminder-btn-primary {
  height: 36px;
  padding: 0 var(--space-xl);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-on-brand);
  background: var(--blue-500);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

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

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

.reminder-history-section {
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--border-card);
}

.reminder-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xl);
}

.reminder-history-icon {
  font-size: var(--font-size-xl);
  color: var(--text-tertiary);
}

.reminder-history-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
}

.reminder-refresh-btn {
  font-size: var(--font-size-sm);
  color: var(--text-brand);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: var(--font-weight-medium);
}

.reminder-refresh-btn:hover {
  text-decoration: underline;
}

.reminder-history-empty {
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
  color: var(--text-tertiary);
}

.reminder-history-empty i {
  font-size: var(--font-size-4xl);
  opacity: 0.5;
}

.reminder-history-empty p {
  margin-top: var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.reminder-history-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-sm);
}

.reminder-history-table th {
  text-align: left;
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: var(--bg-surface-subtle);
  border-bottom: 1px solid var(--border-default);
}

.reminder-history-table th.text-center {
  text-align: center;
}

.reminder-history-table th:first-child {
  border-radius: var(--radius-md) 0 0 0;
}

.reminder-history-table th:last-child {
  border-radius: 0 var(--radius-md) 0 0;
}

.reminder-history-table td {
  padding: var(--space-sm) var(--space-lg);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.reminder-history-table td.text-center {
  text-align: center;
}

.reminder-history-table tbody tr:last-child td {
  border-bottom: none;
}

.reminder-history-table tbody tr:hover {
  background: var(--hover-overlay);
}

.reminder-td-date {
  white-space: nowrap;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.reminder-td-email {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.reminder-reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

@media (max-width: 768px) {
  .reminder-selection-grid {
    grid-template-columns: 1fr;
  }

  .reminder-reports-grid {
    grid-template-columns: 1fr;
  }
}

.reminder-report-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
}

.reminder-report-info {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.reminder-report-flag {
  font-size: var(--font-size-3xl);
}

.reminder-report-details h4 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}

.reminder-report-details p {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin: 2px 0 0;
}

.reminder-report-amount {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.reminder-report-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.reminder-report-status.payment-due {
  background: var(--status-payment-due-bg);
  color: var(--status-payment-due-text);
}

.reminder-report-status.paid {
  background: var(--badge-success-bg);
  color: var(--badge-success-text);
}

.reminder-users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-sm);
}

.reminder-user-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default);
}

.reminder-user-item:hover {
  border-color: var(--border-card-hover);
  background: var(--hover-overlay);
}

.reminder-user-item.selected {
  border-color: var(--border-focus);
  background: var(--blue-50);
}

.reminder-user-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--astrovia-blue);
}

.reminder-user-info h4 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}

.reminder-user-info p {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin: 2px 0 0;
}

.reminder-email-body p {
  margin: 0 0 var(--space-md);
}

.reminder-email-body p:last-child {
  margin-bottom: 0;
}

.reminder-email-body strong {
  color: var(--text-primary);
}

.reminder-total-summary {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: var(--bg-section);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.reminder-total-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2xs) 0;
  font-size: var(--font-size-sm);
}

.reminder-total-row.grand-total {
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--border-card);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
}

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

/* ========================================
   UNIFIED BADGE SYSTEM - Single Source of Truth
   All success badges use .badge.badge--success
   ======================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  border: none;
}

.badge--success,
.badge.badge--success {
  background-color: var(--badge-success-bg) !important;
  color: var(--badge-success-text) !important;
}

.badge--success i,
.badge.badge--success i,
.badge--success *,
.badge.badge--success * {
  color: var(--badge-success-text) !important;
}

/* Legacy class aliases - all map to unified success style */
span.filings-market-status,
span.market-status-badge.enrolled,
span.market-status-badge.paid,
span.status-pill.status-pill--active,
span.status-pill--active,
span.status-pill--paid,
span.status-pill--success,
span.status-pill--registered,
.filing-card-status-badge.status-paid,
.filing-status-badge.filing-status-paid,
.billing-status-badge.paid,
.astro-badge--success,
.badge-success {
  background-color: var(--badge-success-bg) !important;
  color: var(--badge-success-text) !important;
  border: none !important;
}

/* Force text color on ALL child elements */
span.filings-market-status *,
span.status-pill.status-pill--active *,
span.status-pill--active *,
.filing-card-badge-row .status-pill.status-pill--active * {
  color: var(--badge-success-text) !important;
}

/* Filing card border - ensure full border is visible */
.filing-detail-card,
.filing-card-single {
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
}

/* ================================================
   2FA MODALS - Apple/Stripe Level Design
   ================================================ */

.tfa-modal {
  max-width: 440px;
  width: 90vw;
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  position: relative;
}

.tfa-modal-compact {
  max-width: 400px;
}

.tfa-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.05);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  transition: all var(--duration-normal) var(--ease-default);
  z-index: 10;
}

.tfa-modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
}

.tfa-modal-body {
  padding: 40px 32px 24px;
  text-align: center;
}

.tfa-icon-wrapper {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.tfa-icon-blue {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);
  color: var(--text-brand);
}

.tfa-icon-danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
  color: var(--status-error);
}

.tfa-modal-title {
  font-size: var(--font-size-3xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
  letter-spacing: -0.5px;
}

.tfa-modal-subtitle {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin: 0 0 24px;
  line-height: 1.5;
}

/* Step Indicator */
.tfa-step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 24px;
}

.tfa-step {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--bg-section);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-slow) var(--ease-default);
}

.tfa-step.active {
  background: var(--blue-600);
  color: white;
}

.tfa-step-line {
  width: 40px;
  height: 2px;
  background: var(--neutral-150);
  margin: 0 8px;
}

/* QR Code Section */
.tfa-qr-section {
  margin-bottom: 20px;
}

.tfa-instruction {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.tfa-qr-container {
  display: flex;
  justify-content: center;
  padding: 16px;
}

.tfa-qr-container img {
  width: 180px;
  height: 180px;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.tfa-qr-placeholder {
  width: 180px;
  height: 180px;
  background: linear-gradient(135deg, var(--bg-surface-subtle) 0%, var(--bg-section) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tfa-qr-loading {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-subtle);
  border-top-color: var(--text-brand);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

/* Manual Key Section */
.tfa-manual-key-section {
  margin-bottom: 24px;
}

.tfa-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.tfa-divider::before,
.tfa-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--neutral-150);
}

.tfa-divider span {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tfa-key-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.tfa-key {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 2px;
}

.tfa-copy-btn {
  padding: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: all var(--duration-normal) var(--ease-default);
}

.tfa-copy-btn:hover {
  background: var(--neutral-150);
  color: var(--text-brand);
}

/* Verify Section */
.tfa-verify-section {
  text-align: left;
}

.tfa-input-label {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.tfa-code-input {
  width: 100%;
  padding: 16px 20px;
  padding-left: 32px;
  font-size: var(--font-size-3xl);
  font-weight: 600;
  letter-spacing: 12px;
  text-align: center;
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  color: var(--text-primary);
  transition: all var(--duration-normal) var(--ease-default);
  -webkit-appearance: none;
}

.tfa-code-input::placeholder {
  color: var(--text-quaternary);
  letter-spacing: 12px;
}

.tfa-code-input:focus {
  outline: none;
  border-color: var(--text-brand);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.tfa-input-hint {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin-top: 8px;
}

.tfa-error {
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: var(--radius-md);
  color: var(--status-error);
  font-size: var(--font-size-base);
  text-align: center;
}

/* Warning Banner */
.tfa-warning-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, rgba(245, 158, 11, 0.08) 100%);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  color: var(--status-warning);
  font-size: var(--font-size-base);
  font-weight: 500;
}

/* Success State */
.tfa-success-animation {
  margin-bottom: 24px;
}

.tfa-success-circle {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(22, 163, 74, 0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  color: var(--status-success);
  animation: tfa-success-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes tfa-success-pop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Backup Codes Section */
.tfa-backup-section {
  margin-top: 24px;
  text-align: left;
  padding: 20px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, rgba(245, 158, 11, 0.05) 100%);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--radius-xl);
}

.tfa-backup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--status-warning);
  margin-bottom: 8px;
}

.tfa-backup-warning {
  font-size: var(--font-size-sm);
  color: var(--status-warning);
  margin-bottom: 16px;
  line-height: 1.5;
}

.tfa-backup-codes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.tfa-backup-codes-grid div {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-sm);
  text-align: center;
  color: var(--text-primary);
}

/* Modal Footer */
.tfa-modal-footer {
  display: flex;
  gap: 12px;
  padding: 20px 32px 28px;
  background: var(--bg-section);
  border-top: 1px solid var(--border-subtle);
}

/* TFA Buttons */
.tfa-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  font-size: var(--font-size-md);
  font-weight: 600;
  border-radius: var(--radius-xl);
  border: none;
  cursor: pointer;
  transition: all var(--duration-normal) cubic-bezier(0.25, 0.1, 0.25, 1);
}

.tfa-btn-secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

.tfa-btn-secondary:hover {
  background: var(--bg-surface-subtle);
  border-color: var(--text-quaternary);
}

.tfa-btn-primary {
  background: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-700) 100%);
  color: var(--text-on-brand);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.tfa-btn-primary:hover {
  background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-800) 100%);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.tfa-btn-danger {
  background: linear-gradient(135deg, var(--status-error) 0%, var(--red-600) 100%);
  color: var(--text-on-brand);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.tfa-btn-danger:hover {
  background: linear-gradient(135deg, var(--red-600) 0%, var(--red-700) 100%);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* Spinner for buttons */
.tfa-btn .spinner-sm {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--text-on-brand);
  border-radius: var(--radius-full);
  animation: spin 0.6s linear infinite;
}

/* Improved Danger Text Button for Account Settings */
.btn-text-danger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--error);
  background: var(--error-tint);
  border: 1.5px solid var(--error-border-subtle);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
}

.btn-text-danger:hover {
  background: var(--error-bg-solid);
  border-color: var(--error-border-medium);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
}

/* EU VAT Rate Reference Section */
.eu-vat-reference-section {
  margin-top: var(--space-sm);
}

.eu-vat-reference-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--duration-normal) var(--ease-default);
}

.eu-vat-reference-trigger:hover {
  background: var(--bg-section);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.eu-vat-reference-trigger[aria-expanded="true"] {
  border-color: var(--text-brand);
  color: var(--text-primary);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.eu-vat-reference-chevron {
  transition: transform var(--duration-normal) var(--ease-default);
}

.eu-vat-reference-trigger[aria-expanded="true"] .eu-vat-reference-chevron {
  transform: rotate(180deg);
}

.eu-vat-updated-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-brand);
  background: rgba(0, 113, 227, 0.08);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.eu-vat-reference-content {
  border: 1px solid var(--border-subtle);
  border-top: none;
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  background: var(--bg-surface);
  padding: 16px;
  max-height: 400px;
  overflow-y: auto;
}

.eu-vat-reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.eu-vat-rate-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease-default);
}

.eu-vat-rate-card:hover {
  border-color: var(--border-default);
  background: var(--bg-section);
}

.eu-vat-rate-code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 24px;
  background: var(--text-brand);
  color: var(--text-on-brand);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

.eu-vat-rate-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.eu-vat-rate-country {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eu-vat-rate-value {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
}

.eu-vat-rate-percent {
  font-weight: 700;
  color: var(--text-brand);
  font-size: var(--font-size-sm);
}

.eu-vat-rate-reduced {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.eu-vat-reference-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.eu-vat-reference-footer-text {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-weight: 500;
}

.eu-vat-reference-footer-source {
  font-size: var(--font-size-xs);
  color: var(--text-brand);
  text-decoration: none;
  font-weight: 500;
}

.eu-vat-reference-footer-source:hover {
  text-decoration: underline;
}

/* ========================================
   MICRO-INTERACTIONS & POLISH LAYER
   Premium feel: scrollbar, focus, hover, transitions
   ======================================== */

/* Custom Scrollbar - Slim, refined, matching OS aesthetic */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

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

::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-400);
}

.theme-dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

.theme-dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

.sidebar ::-webkit-scrollbar {
  width: 4px;
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-300) transparent;
}

.theme-dark * {
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

/* Consistent Focus Ring - Accessible, brand-colored */
:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 2px;
}

.theme-dark :focus-visible {
  outline-color: rgba(107, 150, 255, 0.6);
}

/* Card Hover Effects - Subtle lift + shadow */
.stat-card,
.tool-selector-btn,
.eu-vat-rate-card,
.integration-card {
  transition: transform var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}

.stat-card:hover,
.tool-selector-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--card-shadow-hover);
}

/* Button Press Animation - Tactile feedback */
.btn-primary,
.btn-secondary,
[class*="btn-"] {
  transition: transform var(--duration-fast) var(--ease-default),
              background var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}

.btn-primary:active,
.btn-secondary:active,
[class*="btn-"]:active {
  transform: scale(0.98);
}

/* Page Section Fade-in - Smooth content reveal */
@keyframes astrovia-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.view-section:not(.hidden) {
  animation: astrovia-fade-in var(--duration-normal) var(--ease-default);
}

/* Sidebar nav item hover micro-interaction */
.sidebar-nav-item {
  transition: all var(--duration-fast) var(--ease-default),
              padding-left var(--duration-fast) var(--ease-default);
}

.sidebar-nav-item:hover {
  padding-left: calc(var(--space-3) + 2px);
}

.sidebar.is-collapsed .sidebar-nav-item:hover {
  padding-left: var(--space-2);
}

/* Table row hover transition */
table tbody tr {
  transition: background var(--duration-fast) var(--ease-default);
}

/* Badge pulse for attention items */
@keyframes subtle-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Input focus glow */
input:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(31, 81, 246, 0.08);
}

.theme-dark input:focus,
.theme-dark select:focus,
.theme-dark textarea:focus {
  box-shadow: 0 0 0 3px rgba(107, 150, 255, 0.1);
}

/* ========================================
   CONTAINER DEPTH ENFORCEMENT
   3-tier: Page (bg-app) > Section (bg-surface-subtle) > Card (bg-surface)
   ======================================== */

.main-content {
  transition: margin-left var(--duration-normal) var(--ease-default);
}

/* Section heading consistency */
.section-title,
.card-title,
h2.section-heading {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* Monospace utility - ensure tabular-nums everywhere */
.mono,
.font-mono,
[class*="amount"],
[class*="currency"],
[class*="price"],
[class*="total"],
[class*="value-display"],
.stat-value {
  font-variant-numeric: tabular-nums;
}