/* ========================================
ASTROVIA OS DESIGN SYSTEM
v2.0.0 - Apple/Stripe/Linear Level
Single Source of Truth
======================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* ========================================
BRAND COLORS
======================================== */
--astrovia-blue: #4F6DF5;
--astrovia-blue-hover: #3D5BF0;
--astrovia-purple: #3535D8;
--astrovia-purple-subtle: rgba(124, 58, 237, 0.08);
--astrovia-purple-border: rgba(124, 58, 237, 0.2);
--astrovia-blue-light: #7FA8FF;
--astrovia-blue-light-bg: #EEF3FF;
--astrovia-blue-subtle: rgba(79, 109, 245, 0.06);
--astrovia-blue-border: rgba(79, 109, 245, 0.15);
/* Invoice/Current Data - Clean Pink for clear contrast with blue */
--invoice-rose: #FFB6C1;
--invoice-rose-light: #FFF0F3;
--invoice-rose-text: #E05A7A;
/* Status Rose - For general pending/warning states */
--status-rose-bg: #FFF0F3;
--status-rose-border: #FECDD3;
--status-rose-text: #BE185D;
/* Payment Due Amber - For payment reminders and due dates */
/* Using design tokens: amber/warning palette - no border per design system */
--status-payment-due-bg: #FEF3C7;
--status-payment-due-border: transparent;
--status-payment-due-text: #D97706;
/* Spreadsheet Green - For CSV/Excel Downloads */
--spreadsheet-green: #10B981;
--spreadsheet-green-bg: #ECFDF5;
--spreadsheet-green-border: #A7F3D0;
--spreadsheet-green-text: #065F46;
/* Document Red - For PDF Downloads */
--document-red: #DC2626;
--document-red-text: #B91C1C;
/* Nexus Map Status Colors - Apple-grade refined palette */
--nexus-no-exposure: #F4F6FA; /* Warm neutral grey - no activity */
--nexus-approaching: #B4C6F8; /* Soft blue - approaching threshold */
--nexus-approaching-text: #1E40AF; /* Dark blue text for contrast */
--nexus-approaching-border: rgba(79, 109, 245, 0.35); /* Subtle blue border */
--nexus-obligated: #FFE5EC; /* Soft pink - action required */
--nexus-obligated-border: rgba(236, 72, 153, 0.45); /* Pink border */
--nexus-registered: #D4F5E5; /* Soft mint green - success */
--nexus-registered-border: rgba(16, 185, 129, 0.35); /* Green border */
--nexus-no-sales-tax: #E2E5ED; /* Cool grey - distinguished from no-exposure */
--nexus-activated: #DCD7FE; /* Soft violet - activated markets */
/* ========================================
SURFACES
Note: Core semantic tokens (--bg-primary, --bg-surface, etc.)
are defined in tokens.core.css. These are legacy aliases.
======================================== */
--background-app: var(--bg-app);
--bg-white: var(--bg-surface);
--bg-secondary: var(--bg-surface-muted);
--bg-tertiary: var(--bg-surface-muted);
--bg-glass: rgba(255, 255, 255, 0.72);
--bg-glass-hover: rgba(255, 255, 255, 0.85);
/* ========================================
TYPOGRAPHY COLORS
Note: Core text tokens are in tokens.core.css
======================================== */
--text-note-info: #8A8FA3;
--text-diagnostic-red: #D64545;
/* ========================================
BORDERS
Note: Core border tokens are in tokens.core.css
======================================== */
--border-light: var(--border-subtle);
--border-lighter: var(--border-muted);
--border-medium: var(--border-strong);
--border-glass: rgba(255, 255, 255, 0.5);
--border-info: rgba(52, 120, 240, 0.25);
--border-danger: rgba(214, 69, 69, 0.25);
--border-success: transparent;
--shadow-panel: var(--shadow-1);
--shadow-icon-hover: 0 4px 12px rgba(79, 109, 245, 0.12);
/* ========================================
FOCUS RINGS
Note: Core focus ring is in tokens.core.css
======================================== */
--focus-ring-sm: 0 0 0 2px rgba(79, 109, 245, 0.08);
--focus-ring-md: var(--focus-ring);
--focus-ring-lg: 0 0 0 4px rgba(79, 109, 245, 0.15);
--focus-ring-input: var(--focus-ring);
/* ========================================
STATE COLORS
Note: Core status tokens are in tokens.core.css
These extend with gradient variants and legacy aliases
======================================== */
/* Success - Core tokens referenced from tokens.core.css */
--success: var(--success-icon);
--success-dark: #166534;
--success-bg-gradient: linear-gradient(135deg, #EEF2FF 0%, #F9FAFB 100%);
--success-bg-solid: var(--success-bg);
--success-border-strong: var(--success-icon);
--success-gradient-end: #E0E7FF;
--success-tint: var(--success-bg);
/* Error - Core tokens referenced from tokens.core.css */
--error: var(--error-icon);
--error-dark: #991B1B;
--error-bg-gradient: linear-gradient(135deg, #FFF5F5 0%, #FEF2F2 100%);
--error-bg-solid: var(--error-bg);
--error-tint: #FEE2E2;
--error-border-medium: var(--error-border);
--error-subtle: rgba(239, 68, 68, 0.06);
--error-border-subtle: rgba(239, 68, 68, 0.2);
/* Warning - Core tokens referenced from tokens.core.css */
--warning: var(--warning-icon);
--warning-dark: var(--warning-text);
--warning-bg-solid: var(--warning-bg);
--warning-tint: #FEF3C7;
/* Status tokens - semantic aliases for state colors */
--status-success-bg: var(--success-bg);
--status-success-border: var(--success-border);
--status-success-text: var(--success-text);
--status-warning-bg: var(--warning-bg);
--status-warning-border: var(--warning-border);
--status-warning-text: var(--warning-text);
--status-error-bg: var(--error-bg);
--status-error-border: var(--error-border);
--status-error-text: var(--error-text);
/* Info - Core tokens referenced from tokens.core.css */
--info-bg-solid: var(--info-bg);
--info-border-strong: var(--blue-500);
--info-bg-alt: var(--bg-surface-subtle);
--info-gradient: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
--info-gradient-start: #EEF2FF;
--info-gradient-end: #E0E7FF;
/* Neutral */
--neutral-bg: var(--bg-surface-subtle);
--neutral-border: var(--border-strong);
--neutral-border-strong: var(--neutral-500);
/* ========================================
BADGE DESIGN TOKENS
Unified pill badges with subtle fills + matching borders
Following Apple/Stripe/Shopify design patterns
======================================== */
/* Badge Base - Apple-level sizing for professional dashboards */
--badge-radius: 9999px;
--badge-height: 22px;
--badge-padding: 4px 10px;
--badge-font-size: var(--font-size-xs);
--badge-font-weight: 600;
--badge-letter-spacing: 0.04em;
--badge-line-height: 1.2;
--badge-border-width: 1px;
/* Badge Success - Connected, Filed, Active, Complete (unified green - matches pill-success tokens) */
--badge-success-bg: var(--pill-success-bg, #ECFDF5);
--badge-success-text: var(--pill-success-text, #059669);
--badge-success-border: transparent;
/* Badge Warning - Sandbox, Pending, Expiring, Review (Apple style, no border) */
--badge-warning-bg: #FEF3C7;
--badge-warning-text: #D97706;
--badge-warning-border: transparent;
/* Base warning tokens - defined in tokens.core.css (single source of truth) */
/* Badge Danger - Disconnected, Failed, Error, Overdue (Apple style, no border) */
--badge-danger-bg: #FEE2E2;
--badge-danger-text: #DC2626;
--badge-danger-border: transparent;
/* Badge Info - New, Info, Beta (Apple style, no border) */
--badge-info-bg: #DBEAFE;
--badge-info-text: var(--blue-600);
--badge-info-border: transparent;
/* Badge Neutral - Default, N/A, Inactive (Apple style, no border) */
--badge-neutral-bg: #F3F4F6;
--badge-neutral-text: #6B7280;
--badge-neutral-border: transparent;
/* Badge Secondary - Subtle emphasis (Apple style, no border) */
--badge-secondary-bg: #F9FAFB;
--badge-secondary-text: #6B7280;
--badge-secondary-border: transparent;
/* ========================================
TABLE TOKENS
======================================== */
--table-header-bg: var(--bg-surface-subtle);
--table-header-bg-end: var(--neutral-100);
--table-header-gradient: linear-gradient(135deg, var(--table-header-bg) 0%, var(--table-header-bg-end) 100%);
--table-row-even: var(--neutral-0);
--table-row-odd: var(--neutral-50);
--table-row-border: var(--neutral-100);
/* ========================================
LEGACY TOKENS (for compatibility)
======================================== */
--accent-light: #4F46E5;
--badge-bg: #ECFDF5;
--badge-border: transparent;
--credit-bg: #FEF3C7;
--credit-border: #FDE68A;
--credit-gradient: linear-gradient(135deg, #FDE68A 0%, #FEF3C7 100%);
/* ========================================
CHART & DATA VISUALIZATION COLORS
Semantic palette for charts, graphs, maps
======================================== */
--chart-blue: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 100%);
--chart-purple: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-500) 100%);
--chart-green: linear-gradient(135deg, #059669 0%, #10B981 100%);
--chart-cyan: linear-gradient(135deg, #0891B2 0%, #06B6D4 100%);
--chart-neutral: linear-gradient(135deg, #CBD5E1 0%, #94A3B8 100%);
--chart-muted: #95A1B4;
--chart-stroke: #64748B;
/* Progress/Status Gradients */
--progress-success: linear-gradient(180deg, #F0FDF4 0%, #ECFDF5 100%);
--progress-success-solid: linear-gradient(135deg, #10B981 0%, #059669 100%);
--progress-info: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
--progress-info-alt: linear-gradient(135deg, #EEF2FF 0%, #E8EDFF 100%);
/* Plan Badge Gradients */
--astrovia-gradient: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 100%);
--purple-gradient: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-500) 100%);
--success-gradient: linear-gradient(135deg, #059669 0%, #10B981 100%);
--cyan-gradient: linear-gradient(135deg, #0891B2 0%, #06B6D4 100%);
/* Feature Highlight Gradients */
--feature-success-gradient: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
--feature-success-border: #A7F3D0;
--feature-error-gradient: linear-gradient(135deg, var(--red-50) 0%, var(--red-100) 100%);
--feature-mint-gradient: linear-gradient(135deg, #E8FFF3 0%, #D1FAE5 100%);
--feature-blue-gradient: linear-gradient(135deg, #EEF2FF 0%, #F8FAFF 100%);
--feature-blue-border: #C7D7FE;
/* Panel/Section Gradients */
--panel-white-gradient: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
--panel-neutral-gradient: linear-gradient(135deg, var(--neutral-100) 0%, var(--bg-section) 100%);
--panel-blue-tint: #e8f0ff;
--panel-neutral-tint: #eef1f5;
/* Button Variants */
--btn-primary-solid: #1a44d0;
--btn-toggle-off: #6C7480;
/* Status Indicator */
--indicator-warning-text: #D97706;
--indicator-neutral-bg: #E5E7EB;
--indicator-section-border: var(--border-subtle);
--indicator-subtle-text: #4F6BCC;
--indicator-subtle-bg: var(--bg-surface-subtle);
/* ========================================
CARD SURFACE TOKENS
Apple-level consistency for ALL containers
Pure white cards pop against #F8FAFC background
Phase 1: Now uses --border-card tokens for stronger separation
======================================== */
--card-surface: var(--bg-surface);
--card-surface-hover: var(--bg-surface-subtle);
--card-surface-solid: var(--bg-surface-subtle);
--card-border: var(--border-card);
--card-border-hover: var(--border-card-hover);
--card-shadow: var(--shadow-card);
--card-shadow-hover: var(--shadow-card-hover);
/* Inputs float on card surfaces */
--input-surface: var(--bg-surface);
--input-border: var(--border-default);
--input-shadow: var(--shadow-card);
/* Form Input Canonical Tokens */
--input-bg: var(--bg-surface);
--input-bg-focus: var(--bg-surface);
--input-text: var(--text-primary);
--input-radius: var(--radius-sm);
--input-border-focus: var(--astrovia-blue);
--input-height: 44px;
--input-min-height: 44px;
--input-line-height: normal;
--input-padding-y: 0;
--input-padding-x: 14px;
/* ========================================
INTERACTIVE CARD TOKENS
Unified hover/focus system for clickable cards
======================================== */
--card-interactive-hover-bg: var(--info-bg);
--card-interactive-hover-border: var(--astrovia-blue);
--card-interactive-hover-shadow: 0 2px 8px rgba(79, 109, 245, 0.06);
/* ========================================
TYPOGRAPHY TOKENS
======================================== */
--label-size: 11px;
--label-tracking: 0.6px;
--font-size-xs: 11px;
--font-size-sm: 13px;
--font-size-base: 14px;
--font-size-md: 15px;
--font-size-lg: 16px;
--font-size-xl: 18px;
--font-size-2xl: 22px;
--font-size-3xl: 28px;
--font-size-4xl: 36px;
/* ========================================
MONO FONT FAMILY - For Formulas & Code
Clean, modern mono stack with wide support
======================================== */
--font-family-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'IBM Plex Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
/* Formula Block Tokens */
--formula-font-size: var(--font-size-sm); /* 13px - readable but compact */
--formula-line-height: 1.65;
--formula-letter-spacing: -0.01em;
--formula-font-weight: 500;
--formula-bg: var(--bg-secondary);
--formula-bg-highlight: rgba(79, 109, 245, 0.04);
--formula-border: var(--border-light);
--formula-border-accent: var(--info-border-strong);
/* ========================================
RADIUS TOKENS
Note: Base radius tokens defined in tokens.core.css
These extend with additional sizes
======================================== */
--radius-xl: 12px;
--radius-2xl: 16px;
/* ========================================
BREAKPOINT TOKENS
======================================== */
--bp-sm: 480px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
--bp-2xl: 1440px;
/* ========================================
LAYOUT TOKENS
======================================== */
--sidebar-width: 260px;
--page-padding-x: 48px;
--page-padding-y: 40px;
--page-max-width: 1280px;
--content-max-width: 1100px;
/* Component min-width tokens for responsive layouts */
--col-min-xs: 80px;
--col-min-sm: 100px;
--col-min-md: 120px;
--col-min-lg: 140px;
--col-min-xl: 180px;
--col-min-2xl: 200px;
--col-min-3xl: 220px;
--col-min-4xl: 280px;
/* Profitability calculator card tokens */
--prof-card-min-height: 520px;
/* User row layout tokens - 3-column structure */
--user-row-left-width: 320px;
--user-row-left-min: 240px;
--user-row-right-width: 220px;
--user-row-meta-min: 120px;
/* Avatar tokens */
--avatar-md: 57px;
--avatar-lg: 56px;
--avatar-border-color: var(--blue-200);
--avatar-border-photo: var(--neutral-200);
--avatar-border-width: 1px;
--avatar-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
/* Icon Chip tokens (KPI icons only) */
--icon-chip-bg: rgba(79, 109, 245, 0.06);
--icon-chip-border: rgba(79, 109, 245, 0.12);
/* ========================================
UNIFIED BADGE/PILL TOKENS - REFERENCE ONLY
Actual values defined at top of :root block
(--badge-padding: 6px 14px, --badge-font-size: var(--font-size-sm), --badge-height: 26px)
======================================== */
/* Badge color variants */
/* Badge colors now defined in unified tokens section above */
--badge-pending-bg: #FEF3C7;
--badge-pending-border: transparent;
--badge-pending-text: #D97706;
/* Legacy overrides removed - using unified Apple-style tokens from top of :root */
/* ========================================
UNIFIED FILTER CONTROL TOKENS
For all dashboard dropdowns and filter buttons
======================================== */
--filter-height: 32px;
--filter-padding: 6px 28px 6px 12px;
--filter-font-size: var(--font-size-xs);
--filter-font-weight: 500;
--filter-radius: var(--radius-md);
--filter-bg: var(--bg-white);
--filter-border: var(--border-light);
--filter-text: var(--text-secondary);
--filter-hover-border: var(--astrovia-blue);
--filter-hover-text: var(--astrovia-blue);
--filter-hover-bg: var(--astrovia-blue-subtle);
--filter-chevron-size: 12px;
--filter-chevron-color: %239CA3AF;
/* ========================================
TIMING TOKENS - Motion Standards
Note: Core motion tokens defined in tokens.core.css
These extend with additional durations
======================================== */
--duration-micro: var(--duration-instant);
--duration-standard: var(--duration-slow);
--duration-calm: 1.8s;
/* ========================================
ICON SIZE TOKENS
======================================== */
--icon-xs: 14px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 32px;
/* Icon Container Sizes */
--icon-container-sm: 40px;
--icon-container-md: 48px;
--step-badge-size: 36px;
/* ========================================
ICON COLOR TOKENS - Astrovia Blue System
Phase 2 Polish: High contrast for crisp, active icons
Brand-unified icon colors (no grey unless disabled)
======================================== */
--icon-primary: rgba(79, 109, 245, 0.95); /* Solid brand blue @ 95% - high contrast */
--icon-default: rgba(79, 109, 245, 0.88); /* Default icons @ 88% */
--icon-muted: rgba(79, 109, 245, 0.72); /* Default icons @ 72% - visible but subtle */
--icon-subtle: rgba(79, 109, 245, 0.55); /* Metadata only @ 55% */
--icon-hover: var(--blue-500); /* Full brand blue on hover */
--icon-active: var(--blue-500); /* Full brand blue when active */
--icon-disabled: rgba(107, 114, 128, 0.55); /* Grey @ 55% for disabled state only */
/* ========================================
BRAND COLORS - Third Party
======================================== */
--brand-shopify: #96BF48;
--brand-shopify-dark: #5E8E3E;
--brand-amber: #F59E0B;
--brand-amber-dark: #D97706;
--dm-success-gradient-dark: #059669;
/* ========================================
BORDER WIDTH TOKENS
======================================== */
--border-width-thick: 3px;
--border-width-accent: 4px;
/* ========================================
OVERLAY TOKENS
======================================== */
--overlay-white-95: rgba(255, 255, 255, 0.95);
--loading-overlay-bg: rgba(255, 255, 255, 0.7);
/* ========================================
COMPONENT SPECIFIC TOKENS
======================================== */
--table-max-height: 600px;
--text-2xs: 10px;
/* ========================================
SIDEBAR TOKENS
Unified brand row and navigation styling
======================================== */
--sidebar-logo-size: 34px; /* Logo icon size (~20% larger than nav icons) */
--sidebar-brand-size: 13px; /* Brand label font size */
--sidebar-brand-tracking: 0.08em; /* Premium letter-spacing for brand */
--sidebar-section-size: 11px; /* Section label font size */
--sidebar-section-tracking: 0.06em; /* Section label letter-spacing */
--sidebar-nav-icon-size: 32px; /* Navigation icon container size */
/* Sidebar tokens - OWNED by skin.os.css, do NOT redefine here */
}
/* ========================================
DARK MODE - COMPONENT-LEVEL OVERRIDES
Core tokens in tokens.core.css, skin tokens in skin.os.css
This block covers component-specific tokens not in the core layers
======================================== */
.theme-dark {
--icon-primary: rgba(123, 155, 242, 0.90);
--icon-default: rgba(123, 155, 242, 0.80);
--icon-muted: rgba(123, 155, 242, 0.60);
--icon-subtle: rgba(123, 155, 242, 0.45);
--icon-hover: #7B9BF2;
--icon-active: #7B9BF2;
--icon-disabled: rgba(142, 142, 147, 0.45);
--shadow-btn-primary: 0 2px 6px rgba(91, 127, 230, 0.18);
--shadow-btn-primary-hover: 0 3px 10px rgba(91, 127, 230, 0.22);
--shadow-btn-secondary: 0 1px 3px rgba(91, 127, 230, 0.15);
--shadow-icon-hover: 0 4px 12px rgba(91, 127, 230, 0.12);
--focus-ring-sm: 0 0 0 2px rgba(91, 127, 230, 0.08);
--focus-ring-lg: 0 0 0 4px rgba(91, 127, 230, 0.15);
--card-interactive-hover-shadow: 0 2px 6px rgba(91, 127, 230, 0.08);
--formula-bg-highlight: rgba(91, 127, 230, 0.04);
--icon-chip-bg: rgba(91, 127, 230, 0.06);
--icon-chip-border: rgba(91, 127, 230, 0.12);
--astrovia-blue: #5B7FE6;
--astrovia-blue-hover: #4F70D4;
--astrovia-blue-light: #7B9BF2;
--astrovia-blue-light-bg: rgba(91, 127, 230, 0.08);
--feature-mint-gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(52, 211, 153, 0.10) 100%);
--background-app: var(--bg-app);
--input-surface: var(--bg-input);
--input-border: var(--border-card);
--input-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
--table-header-gradient: linear-gradient(180deg, #1C1C1F 0%, #161618 100%);
--neutral-bg: var(--bg-surface);
--nexus-no-exposure: #2A2A2E;
--nexus-approaching: #1E3A6E;
--nexus-approaching-text: #7B9BF2;
--nexus-approaching-border: rgba(79, 109, 245, 0.4);
--nexus-obligated: #3D1F28;
--nexus-obligated-border: rgba(236, 72, 153, 0.35);
--nexus-registered: #1A3329;
--nexus-registered-border: rgba(16, 185, 129, 0.35);
--nexus-no-sales-tax: #232328;
--nexus-activated: #2D2548;
--nexus-hover: #333338;
--success-dark: #34D399;
--success-bg-solid: rgba(16, 185, 129, 0.10);
--error-dark: #F87171;
--error-bg-solid: rgba(239, 68, 68, 0.10);
--error-tint: rgba(239, 68, 68, 0.08);
--error-bg-gradient: linear-gradient(135deg, rgba(239, 68, 68, 0.06) 0%, rgba(239, 68, 68, 0.03) 100%);
--error-border-medium: rgba(239, 68, 68, 0.25);
--error-subtle: rgba(239, 68, 68, 0.06);
--error-border-subtle: rgba(239, 68, 68, 0.2);
--warning-dark: #E2B93B;
--warning-bg-solid: rgba(251, 191, 36, 0.06);
--warning-tint: rgba(251, 191, 36, 0.08);
--badge-success-bg: var(--pill-success-bg);
--badge-success-text: var(--pill-success-text);
--badge-success-border: transparent;
--badge-warning-bg: #3D2F1A;
--badge-warning-text: #FBBF24;
--badge-warning-border: transparent;
--badge-danger-bg: #3D1F1F;
--badge-danger-text: #F87171;
--badge-danger-border: transparent;
--badge-info-bg: rgba(91, 127, 230, 0.15);
--badge-info-text: #7B9BF2;
--badge-info-border: transparent;
--badge-neutral-bg: #2A2A2E;
--badge-neutral-text: #A1A1AA;
--badge-neutral-border: transparent;
--badge-secondary-bg: #222225;
--badge-secondary-text: #A1A1AA;
--badge-secondary-border: transparent;
--overlay-white-95: rgba(15, 15, 17, 0.92);
--loading-overlay-bg: rgba(15, 15, 17, 0.75);
--astrovia-purple: #A78BFA;
--astrovia-purple-subtle: rgba(167, 139, 250, 0.10);
--astrovia-purple-border: rgba(167, 139, 250, 0.20);
--invoice-rose: #FB7185;
--invoice-rose-light: rgba(251, 113, 133, 0.10);
--invoice-rose-text: #FB7185;
--status-rose-bg: rgba(251, 113, 133, 0.10);
--status-rose-border: rgba(251, 113, 133, 0.20);
--status-rose-text: #FB7185;
--status-payment-due-bg: rgba(251, 191, 36, 0.10);
--status-payment-due-text: #FBBF24;
--spreadsheet-green: #34D399;
--spreadsheet-green-bg: rgba(16, 185, 129, 0.10);
--spreadsheet-green-border: rgba(52, 211, 153, 0.20);
--spreadsheet-green-text: #34D399;
--document-red: #F87171;
--document-red-text: #F87171;
--text-note-info: #636366;
--text-diagnostic-red: #F87171;
--border-info: rgba(107, 150, 255, 0.25);
--border-danger: rgba(248, 113, 113, 0.25);
--success-bg-gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, var(--bg-section) 100%);
--success-gradient-end: rgba(16, 185, 129, 0.12);
--info-bg-alt: var(--bg-section);
--info-gradient: linear-gradient(135deg, rgba(107, 150, 255, 0.08) 0%, rgba(107, 150, 255, 0.04) 100%);
--info-gradient-start: rgba(107, 150, 255, 0.08);
--info-gradient-end: rgba(107, 150, 255, 0.04);
--table-header-bg-end: var(--bg-surface-subtle);
--table-row-even: var(--bg-surface);
--table-row-odd: var(--bg-section);
--accent-light: #818CF8;
--badge-bg: rgba(16, 185, 129, 0.10);
--credit-bg: rgba(251, 191, 36, 0.10);
--credit-border: rgba(251, 191, 36, 0.20);
--credit-gradient: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.08) 100%);
--chart-green: linear-gradient(135deg, #059669 0%, #34D399 100%);
--chart-cyan: linear-gradient(135deg, #0891B2 0%, #22D3EE 100%);
--chart-neutral: linear-gradient(135deg, #3E3E42 0%, #636366 100%);
--chart-muted: #636366;
--chart-stroke: #8E8E93;
--progress-success: linear-gradient(180deg, rgba(16, 185, 129, 0.10) 0%, rgba(16, 185, 129, 0.06) 100%);
--progress-success-solid: linear-gradient(135deg, #10B981 0%, #059669 100%);
--progress-info: linear-gradient(135deg, rgba(107, 150, 255, 0.08) 0%, rgba(107, 150, 255, 0.04) 100%);
--progress-info-alt: linear-gradient(135deg, rgba(107, 150, 255, 0.10) 0%, rgba(107, 150, 255, 0.06) 100%);
--purple-gradient: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-500) 100%);
--success-gradient: linear-gradient(135deg, #059669 0%, #34D399 100%);
--cyan-gradient: linear-gradient(135deg, #0891B2 0%, #22D3EE 100%);
--feature-success-gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.10) 0%, rgba(52, 211, 153, 0.06) 100%);
--feature-success-border: rgba(52, 211, 153, 0.20);
--feature-error-gradient: linear-gradient(135deg, var(--red-50) 0%, var(--red-100) 100%);
--feature-blue-gradient: linear-gradient(135deg, rgba(107, 150, 255, 0.08) 0%, rgba(107, 150, 255, 0.04) 100%);
--feature-blue-border: rgba(107, 150, 255, 0.20);
--panel-white-gradient: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-section) 100%);
--panel-blue-tint: rgba(107, 150, 255, 0.06);
--panel-neutral-tint: var(--bg-surface-muted);
--btn-primary-solid: var(--blue-600);
--btn-toggle-off: #636366;
--indicator-warning-text: #E2B93B;
--indicator-neutral-bg: #2A2A2E;
--indicator-section-border: var(--border-card);
--indicator-subtle-text: #7B9BF2;
--indicator-subtle-bg: rgba(91, 127, 230, 0.06);
--badge-pending-bg: rgba(251, 191, 36, 0.10);
--badge-pending-text: #FBBF24;
--chart-blue: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 100%);
--chart-purple: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-500) 100%);
--panel-neutral-gradient: linear-gradient(135deg, var(--bg-surface-muted) 0%, var(--bg-section) 100%);
--brand-shopify: #96BF48;
--brand-shopify-dark: #7AA838;
--brand-amber: #FBBF24;
--brand-amber-dark: #E2B93B;
--dm-success-gradient-dark: #34D399;
}
/* ========================================
DATA MAPPER - DARK MODE OVERRIDES
======================================== */
.theme-dark .dm-upload-card,
.theme-dark .dm-mapping-card,
.theme-dark .dm-carrier-card,
.theme-dark .dm-net-delivery-card,
.theme-dark .dm-results-table-section,
.theme-dark .dm-knowledge-card,
.theme-dark .dm-note-card,
.theme-dark .mapping-section,
.theme-dark .file-info {
background: var(--bg-surface);
border-color: var(--border-card);
box-shadow: var(--shadow-card);
}
.theme-dark .dm-knowledge-card .content-section {
background: var(--bg-surface);
}
.theme-dark .dm-knowledge-summary {
background: var(--bg-surface);
}
.theme-dark .dm-knowledge-summary:hover {
background: var(--bg-surface-muted);
}
.theme-dark .dm-knowledge-card .dm-code-block,
.theme-dark .dm-knowledge-callout {
background: var(--bg-surface-muted);
}
.theme-dark .dm-upload-card:hover,
.theme-dark .dm-mapping-card:hover,
.theme-dark .dm-carrier-card:hover,
.theme-dark .dm-net-delivery-card:hover,
.theme-dark .dm-knowledge-card:hover {
border-color: var(--border-accent);
}
.theme-dark .dm-carrier-card--blue {
background: var(--blue-50);
border-color: var(--blue-200);
}
.theme-dark .dm-carrier-card--light-blue {
background: var(--blue-50);
border-color: var(--blue-100);
}
.theme-dark .dm-carrier-card--success {
background: var(--green-50);
border-color: var(--green-200);
}
.theme-dark .dm-carrier-card--rose {
background: var(--red-50);
border-color: var(--red-200);
}
.theme-dark .dm-carrier-card--warning {
background: var(--amber-50);
border-color: var(--amber-200);
}
.theme-dark .dm-net-delivery-card--blue {
background: var(--blue-50) !important;
border-color: var(--blue-200) !important;
}
.theme-dark .dm-net-delivery-card__inner {
background: var(--bg-surface-muted);
border-color: var(--border-subtle);
}
.theme-dark .dm-net-delivery-card__breakdown,
.theme-dark .dm-net-delivery-card__breakdown--white {
background: var(--bg-surface-muted);
border-color: var(--border-subtle);
}
.theme-dark .dm-net-delivery-card--blue .dm-net-delivery-card__breakdown--white {
border-color: var(--blue-200);
}
.theme-dark .dm-note-card--neutral {
background: var(--bg-surface-muted);
border-color: var(--border-subtle);
}
.theme-dark .dm-note-card__icon {
background: var(--bg-surface);
}
.theme-dark .dm-info-note {
background: var(--blue-50);
}
.theme-dark .dm-info-note--subtle {
background: var(--bg-surface-muted);
}
.theme-dark .dm-info-note--white {
background: var(--bg-surface);
border-color: var(--blue-200);
}
.theme-dark .dm-info-note--rose {
background: var(--bg-surface);
border-color: var(--red-200);
}
.theme-dark .dm-privacy-callout {
background: var(--green-50);
}
.theme-dark .dm-integration-toggle {
background: var(--blue-50);
}
.theme-dark .dm-sync-status {
background: var(--bg-surface-muted);
}
.theme-dark .dm-file-info {
background: var(--green-50);
}
.theme-dark .dm-file-info.error {
background: var(--red-50);
}
.theme-dark .dm-loading-overlay {
background: var(--overlay-white-95);
}
.theme-dark .dm-results-table thead {
background: var(--bg-surface-muted);
}
.theme-dark .dm-results-table tbody tr:hover {
background: var(--bg-surface-muted);
}
.theme-dark .dm-optional-pill {
background: var(--bg-surface-muted);
}
.theme-dark .dm-field-select {
background: var(--bg-input);
color: var(--text-primary);
}
.theme-dark .dm-field-select:hover,
.theme-dark .dm-field-select:focus {
background-color: var(--bg-surface);
}
.theme-dark .dm-currency-select {
background-color: var(--bg-input);
color: var(--text-primary);
}
.theme-dark .dm-shopify-connected__radio-group {
background: var(--bg-surface-muted);
}
.theme-dark .dm-shopify-connected__radio:has(input:checked) {
background: var(--bg-surface);
}
.theme-dark .file-info.loaded {
background: var(--blue-50);
}
.theme-dark .file-remove-btn {
background: var(--bg-surface-muted);
border-color: var(--border-subtle);
}
.theme-dark .progress-bar-placeholder {
background: var(--border-subtle);
}
.theme-dark .c-upload-card {
background: var(--bg-surface);
border-color: var(--border-card);
}
.theme-dark .c-upload-card:hover {
background: var(--bg-surface-muted);
border-color: var(--border-accent);
}
.theme-dark .c-upload-card input[type="file"] {
background: var(--bg-input);
border-color: var(--border-card);
color: var(--text-secondary);
}
.theme-dark .c-currency-select {
background-color: var(--bg-input);
border-color: var(--border-card);
color: var(--text-primary);
}
.theme-dark .c-currency-note {
background: var(--blue-50);
}
.theme-dark .dm-knowledge-callout--error {
background: var(--red-50);
}
.theme-dark .dm-knowledge-callout--warning {
background: var(--amber-50);
}
.theme-dark .c-summary-card {
background: var(--bg-surface);
border-color: var(--border-card);
}
.theme-dark .c-summary-card.card-invoice,
.theme-dark .c-summary-card.card-applied,
.theme-dark .c-summary-card.card-analysis {
background: var(--bg-surface);
border-color: var(--border-card);
}
.theme-dark .c-summary-card.card-analysis-positive {
background: var(--green-50);
border-color: var(--green-200);
}
.theme-dark .c-summary-card.card-analysis-negative {
background: var(--red-50);
border-color: var(--red-200);
}
.theme-dark .rates-column-header {
background: var(--bg-surface);
border-color: var(--border-card);
}
.theme-dark .dm-analysis-section {
background: var(--bg-surface);
border-color: var(--border-card);
}
.theme-dark .dm-analysis-section--neutral {
background: var(--bg-surface);
border-color: var(--border-card);
}
.theme-dark .dm-analysis-section--rose {
background: var(--red-50);
border-color: var(--red-200);
}
.theme-dark .dm-analysis-section--success {
background: var(--green-50);
border-color: var(--green-200);
}
.theme-dark .dm-analysis-section--rose .c-summary-card {
background: var(--bg-surface);
border-color: var(--red-200);
}
.theme-dark .dm-analysis-section--success .c-summary-card {
background: var(--bg-surface);
border-color: var(--green-200);
}
.theme-dark .dm-analysis-section--neutral .c-summary-card {
background: var(--bg-surface);
}
.theme-dark .dm-breakdown-accordion {
background: var(--bg-surface);
border-color: var(--border-card);
}
.theme-dark .dm-breakdown-accordion summary {
background: var(--bg-surface);
border-bottom-color: var(--border-subtle);
}
.theme-dark .dm-breakdown-accordion summary:hover {
background: var(--bg-surface-muted);
}
.theme-dark .info-box {
background: var(--bg-surface-muted);
}
.theme-dark .info-box--success {
background: var(--green-50);
}
.theme-dark .info-box--accent {
background: var(--bg-surface-muted);
}
.theme-dark .dm-carrier-hero {
background: var(--green-50);
border-color: var(--green-200);
}
.theme-dark .dm-carrier-hero__right {
background: var(--bg-surface-muted);
border-color: var(--green-200);
}
.theme-dark .dm-carrier-hero__cost {
border-top-color: var(--green-200);
}
.theme-dark .dm-formula-block--error {
background: var(--error-tint);
border-left-color: var(--error-dark);
}
.theme-dark .c-card.step-section {
background: var(--bg-surface);
border-color: var(--border-card);
}
.theme-dark .c-summary-card__note-callout {
background: var(--bg-surface-muted);
border-color: var(--border-subtle);
}
.theme-dark .dm-breakdown-table th {
background: var(--bg-surface);
border-bottom-color: var(--border-card);
}
.theme-dark .dm-breakdown-table td {
border-bottom-color: var(--border-subtle);
}
.theme-dark .dm-breakdown-table__row--even {
background: var(--bg-surface-muted);
}
.theme-dark .dm-breakdown-table__footer-note {
background: var(--bg-surface-muted);
border-color: var(--border-subtle);
}
/* ========================================
TAX OS - DARK MODE OVERRIDES
======================================== */
.theme-dark .taxos-tabs-container {
background: var(--bg-surface-muted);
border-color: var(--border-card);
}
.theme-dark .taxos-tab.active {
background: var(--bg-surface);
color: var(--blue-500);
}
.theme-dark .taxos-content-card {
background: var(--bg-surface);
border-color: var(--border-card);
}
.theme-dark .taxos-content-header {
border-color: var(--border-card);
}
.theme-dark .taxos-form-section {
border-color: var(--border-card);
}
.theme-dark .taxos-calculation-details {
background: var(--bg-surface-muted);
}
.theme-dark .taxos-calculation-summary {
background: var(--bg-surface);
}
.theme-dark .taxos-calculation-summary:hover {
background: var(--bg-surface-muted);
}
.theme-dark .taxos-calculation-details[open] .taxos-calculation-summary {
border-color: var(--border-card);
}
.theme-dark .taxos-calc-card {
background: var(--bg-surface);
}
.theme-dark .threshold-card--eu,
.theme-dark .threshold-card--uk {
background: var(--blue-50);
}
.theme-dark .tax-os-tool-summary {
border-color: var(--border-card);
}
.theme-dark .tax-os-tool-summary:hover {
background: var(--bg-surface-muted);
}
.theme-dark .tax-os-tool-details[open] .tax-os-tool-summary {
border-color: var(--border-card);
}
.theme-dark .admin-form {
background: var(--bg-surface);
border-color: var(--border-card);
}
/* ========================================
INTEGRATIONS - DARK MODE OVERRIDES
======================================== */
.theme-dark .integrations-empty-state {
background: var(--bg-surface);
border-color: var(--border-card);
}
.theme-dark .integrations-empty-icon {
background: var(--bg-surface-muted);
}
.theme-dark .integrations-empty-btn {
background: var(--blue-600);
color: var(--text-on-brand);
}
.theme-dark .integrations-empty-btn:hover {
background: var(--blue-700);
}
.theme-dark .integ-org-icon-circle {
background: var(--blue-50);
color: var(--blue-500);
}
.theme-dark .integ-org-icon-circle--info {
background: var(--bg-surface-muted);
}
/* ========================================
USER MANAGEMENT - DARK MODE OVERRIDES
======================================== */
.theme-dark .account-tool-badge.admin-badge {
background: var(--blue-50);
color: var(--blue-500);
border-color: var(--blue-200);
}
.theme-dark .user-card.master-admin {
background: var(--blue-50);
}
.theme-dark .refresh-btn {
background: var(--bg-surface);
border-color: var(--border-card);
}
.theme-dark .refresh-btn:hover {
background: var(--bg-surface-muted);
border-color: var(--blue-500);
color: var(--blue-500);
}
/* ========================================
ACCOUNT / PROFILE - DARK MODE OVERRIDES
======================================== */
.theme-dark .account-card,
.theme-dark .admin-card {
background: var(--bg-surface);
border-color: var(--border-card);
}
.theme-dark .account-info-row {
border-color: var(--border-card);
}
.theme-dark .account-tool-badge {
background: var(--bg-surface-muted);
border-color: var(--border-card);
}
.theme-dark .profile-avatar {
background: var(--blue-50) !important;
}
.theme-dark .account-panel {
background: var(--bg-surface);
border-color: var(--border-card);
}
.theme-dark .account-panel-header {
border-color: var(--border-card);
}
.theme-dark .account-panel-header:hover {
background: var(--bg-surface-muted);
}
.theme-dark .account-panel-header.expanded {
border-color: var(--border-card);
}
/* ========================================
ASTRO-BTN - DARK MODE OVERRIDES
======================================== */
.theme-dark .astro-btn--primary {
background: var(--blue-600);
box-shadow: none;
}
.theme-dark .astro-btn--primary:hover:not(:disabled) {
background: var(--blue-700);
}
.theme-dark .astro-btn--secondary {
background: var(--bg-surface-muted);
color: var(--text-primary);
border: 1px solid var(--border-card);
}
.theme-dark .astro-btn--secondary:hover:not(:disabled) {
background: var(--bg-surface);
border-color: var(--border-default);
}
.theme-dark .astro-btn--ghost:hover:not(:disabled) {
background: var(--bg-surface-muted);
}
/* ========================================
DESIGN SYSTEM COMPONENT CLASSES
======================================== */
/* ========================================
SINGLE-SURFACE CARD LAW - SYSTEMIC GUARDRAIL
THE LAW: Every card is ONE surface. No nested backgrounds inside cards.
This guardrail enforces transparent backgrounds on inner elements
to prevent "pill disease" - washed-out, over-nested UI.
Allowed exceptions (have explicit backgrounds):
- .badge, .badge-* variants (status badges)
- .btn, .btn-* variants (buttons)
- .filter-chip, .chip, .tag (removable tags)
- .segmented-control, .segment (tab toggles)
- input, select, textarea (form controls)
- [data-card-exception] (explicit opt-out)
See docs/DESIGN_SYSTEM_SINGLE_SOURCE.md for full rules.
======================================== */
/* Explicit transparent enforcement for known card header patterns */
.card-header,
.panel-header,
.account-card-header,
.admin-panel-header,
.account-panel-header,
.market-card-header,
.taxos-content-header,
.duty-tax-result-header,
.duty-tax-total-header,
.duty-tax-notes-header,
.duty-tax-calculation-header {
background: transparent !important;
}
/* Card-scoped header enforcement (avoids global headers like app-shell-header) */
.card [class*="-header"]:not(.table-header):not(.modal-header),
.panel [class*="-header"]:not(.table-header):not(.modal-header),
[data-card] [class*="-header"]:not(.table-header):not(.modal-header) {
background: transparent !important;
}
/* Known icon containers that must be naked (explicit list, not blanket) */
.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 {
background: transparent !important;
}
/* Card-scoped icon enforcement (avoids global interactive icons) */
.card [class*="-icon"]:not(.btn-icon):not([class*="badge"]):not(.toggle-icon):not(.segment-icon),
.panel [class*="-icon"]:not(.btn-icon):not([class*="badge"]):not(.toggle-icon):not(.segment-icon),
[data-card] [class*="-icon"]:not(.btn-icon):not([class*="badge"]):not(.toggle-icon):not(.segment-icon) {
background: transparent !important;
}
/* Deprecated icon-pill classes - force transparent */
[class*="icon-pill"] {
background: transparent !important;
}
/* ========================================
CANONICAL INTERACTIVE CARD HOVER SYSTEM
Use .c-card--interactive for any clickable card.
Unified hover/focus behavior across KPI cards, country cards, etc.
======================================== */
.c-card--interactive {
cursor: pointer;
transition: all var(--duration-normal) var(--ease-default);
}
.c-card--interactive:hover {
border-color: var(--card-interactive-hover-border);
background: var(--card-interactive-hover-bg);
box-shadow: var(--card-interactive-hover-shadow);
}
.c-card--interactive:focus-visible {
outline: none;
border-color: var(--card-interactive-hover-border);
box-shadow: var(--focus-ring);
}
.c-card--interactive:active {
box-shadow: 0 1px 3px var(--astrovia-blue-subtle);
}
/* ========================================
SINGLE-SURFACE CARD LAW - INNER CONTAINER ENFORCEMENT
Prevents "pill disease" by forcing transparency on specific
utility classes when nested inside .card, .panel, or [data-card]:
- .ds-metric-box (metric containers)
- .stat-item:not(.c-summary-card) (nested stat cards)
- .card-row, .card-row-compact, .card-row-spaced (row containers)
- .metric-box, .data-box, .summary-box, .info-box (data containers)
- .market-metric-card (market widgets)
This uses EXPLICIT class targeting only - no broad wildcards.
Form controls, input boxes, checkboxes etc. are NOT affected.
======================================== */
/* Metric boxes inside cards - remove nested surface */
.card .ds-metric-box,
.panel .ds-metric-box,
[data-card] .ds-metric-box {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* Stat items inside cards - remove nested surface */
.card .stat-item:not(.c-summary-card),
.panel .stat-item:not(.c-summary-card),
[data-card] .stat-item:not(.c-summary-card) {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* Card-row variants inside cards - remove nested surface */
.card .card-row,
.card .card-row-compact,
.card .card-row-spaced,
.panel .card-row,
.panel .card-row-compact,
.panel .card-row-spaced,
[data-card] .card-row,
[data-card] .card-row-compact,
[data-card] .card-row-spaced {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* Additional specific metric/data containers inside cards */
.card .metric-box,
.card .data-box,
.card .summary-box,
.card .info-box,
.panel .metric-box,
.panel .data-box,
.panel .summary-box,
.panel .info-box,
[data-card] .metric-box,
[data-card] .data-box,
[data-card] .summary-box,
[data-card] .info-box {
background: transparent !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
}
/* Market metric cards - enforce single surface */
.card .market-metric-card,
.panel .market-metric-card,
[data-card] .market-metric-card {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* ----------------------------------------
BADGE COMPONENT
Usage: Active
---------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: 4px 10px;
font-size: var(--font-size-xs);
font-weight: 600;
letter-spacing: 0.02em;
border-radius: var(--radius-full);
white-space: nowrap;
transition: all var(--duration-fast) var(--ease-default);
}
.badge-success {
background: var(--badge-success-bg);
color: var(--badge-success-text);
border: none;
}
.badge-warning {
background: var(--badge-warning-bg);
color: var(--badge-warning-text);
border: none;
}
.badge-error {
background: var(--badge-danger-bg);
color: var(--badge-danger-text);
border: none;
}
.badge-info {
background: var(--badge-info-bg);
color: var(--badge-info-text);
border: none;
}
.badge-neutral {
background: var(--badge-neutral-bg);
color: var(--badge-neutral-text);
border: none;
}
.badge-pink {
background: var(--invoice-rose-light);
color: var(--invoice-rose-text);
border: none;
}
/* ----------------------------------------
USER MANAGEMENT BADGE VARIANTS
Unified badge system for user rows
---------------------------------------- */
/* Tool badges - subtle, light styling */
.badge--tool {
background: var(--bg-primary);
color: var(--text-secondary);
border: none;
font-weight: 500;
padding: 3px 8px;
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
}
/* Plan badges - soft tinted backgrounds */
.badge--plan {
padding: 4px 10px;
border-radius: var(--radius-sm);
font-size: var(--badge-font-size);
font-weight: var(--badge-font-weight);
letter-spacing: 0.3px;
}
.badge--plan-free {
background: var(--bg-tertiary);
color: var(--text-secondary);
border: none;
}
.badge--plan-starter {
background: var(--info-bg);
color: var(--astrovia-blue);
border: none;
}
.badge--plan-pro {
background: var(--success-tint);
color: var(--success);
border: none;
}
.badge--plan-enterprise {
background: var(--astrovia-purple-subtle);
color: var(--astrovia-purple);
border: none;
}
.badge--plan-admin {
background: var(--astrovia-gradient);
color: var(--text-on-brand);
border: none;
}
/* Role badges - neutral styling */
.badge--role {
background: var(--bg-secondary);
color: var(--text-secondary);
border: none;
padding: 3px 8px;
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
font-weight: 500;
}
/* Status indicator - compact with dot */
.status-indicator {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--font-size-sm);
color: var(--text-secondary);
white-space: nowrap;
}
.status-indicator::before {
content: '';
width: var(--space-sm);
height: var(--space-sm);
border-radius: var(--radius-full);
flex-shrink: 0;
}
.status-indicator--active::before {
background: var(--success);
}
.status-indicator--inactive::before {
background: var(--text-tertiary);
}
.status-indicator--pending::before {
background: var(--warning);
}
.status-indicator--suspended::before {
background: var(--error);
}
/* Icon button for actions menu */
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: var(--bg-white);
border: none;
border-radius: var(--radius-sm);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
}
.btn-icon:hover {
background: var(--bg-primary);
border-color: var(--border-medium);
color: var(--text-primary);
}
.btn-icon svg {
width: 16px;
height: 16px;
}
/* ----------------------------------------
UNIFIED DOWNLOAD BUTTON COMPONENT
Usage:
---------------------------------------- */
/* ----------------------------------------
DOWNLOAD BADGE COMPONENT (Unified)
Usage:
Usage:
---------------------------------------- */
.download-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 14px;
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 500;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-default);
text-decoration: none;
white-space: nowrap;
}
.download-badge svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* PDF Download Badge - Grey neutral style */
.download-badge--pdf {
background: var(--bg-secondary);
color: var(--text-secondary);
border: none;
}
.download-badge--pdf svg {
color: var(--text-tertiary);
}
.download-badge--pdf:hover {
border-color: var(--border-medium);
background: var(--bg-white);
color: var(--text-primary);
}
.download-badge--pdf:hover svg {
color: var(--text-secondary);
}
/* CSV/Excel Download Badge - Grey neutral style */
.download-badge--spreadsheet {
background: var(--bg-secondary);
color: var(--text-secondary);
border: none;
}
.download-badge--spreadsheet svg {
color: var(--text-tertiary);
}
.download-badge--spreadsheet:hover {
border-color: var(--border-medium);
background: var(--bg-white);
color: var(--text-primary);
}
.download-badge--spreadsheet:hover svg {
color: var(--text-secondary);
}
/* Receipt Download Badge - Green */
.download-badge--receipt {
background: var(--badge-success-bg);
color: var(--badge-success-text);
border: none;
}
.download-badge--receipt i {
color: var(--badge-success-text);
}
.download-badge--receipt:hover {
background: var(--success-100);
color: var(--success-700);
}
.download-badge--receipt:hover i {
color: var(--success-700);
}
/* Generic Download Badge - Neutral */
.download-badge--neutral {
background: var(--bg-secondary);
color: var(--text-primary);
border: none;
}
.download-badge--neutral svg {
color: var(--astrovia-blue);
}
.download-badge--neutral:hover {
border-color: var(--astrovia-blue);
background: var(--info-bg);
}
/* Focus state for keyboard accessibility */
.download-badge:focus {
outline: none;
box-shadow: 0 0 0 2px var(--bg-white), 0 0 0 4px var(--astrovia-blue);
}
.download-badge:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--bg-white), 0 0 0 4px var(--astrovia-blue);
}
/* Disabled state */
.download-badge:disabled,
.download-badge.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Missing file badge - Warning amber */
.download-badge--missing {
background: var(--status-warning-bg);
color: var(--status-warning-text);
border: none;
cursor: help;
font-size: var(--font-size-xs);
}
.download-badge--missing svg {
color: var(--status-warning-text);
}
/* ========================================
UNIFIED STATUS-PILL COMPONENT
Single source of truth for all status labels
Usage: Active
======================================== */
.status-pill {
display: inline-flex;
align-items: center;
justify-content: 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: 1px solid transparent;
transition: all var(--duration-fast) var(--ease-default);
}
/* ACTIVE status - Green/Success */
.status-pill--active {
background: var(--badge-success-bg) !important;
color: var(--badge-success-text) !important;
border: none !important;
}
/* PAYMENT DUE status - Amber (warning) - New design system */
.status-pill.status-pill--payment-due {
background: var(--badge-warning-bg) !important;
color: var(--badge-warning-text) !important;
border: none !important;
font-weight: 500 !important;
}
/* FILED status - Blue (completed/filed) */
.status-pill--filed {
background: var(--astrovia-blue-light-bg);
color: var(--astrovia-blue);
border-color: var(--astrovia-blue-border);
}
/* PENDING status - Warning/Amber */
.status-pill--pending {
background: var(--warning-bg-solid);
color: var(--warning-dark);
border: none;
}
/* OVERDUE status - Rose/Pink (alert) */
.status-pill--overdue {
background: var(--status-rose-bg);
color: var(--status-rose-text);
border: none;
}
/* URGENT OVERDUE - Apple-style red alert (for past 15th deadline) */
.status-pill.status-pill--urgent-overdue {
background: var(--error-bg) !important;
color: var(--error-text) !important;
border: 1px solid var(--error-border) !important;
font-weight: 600 !important;
animation: pulse-urgent 2s ease-in-out infinite;
}
@keyframes pulse-urgent {
0%, 100% { opacity: 1; }
50% { opacity: 0.85; }
}
/* Urgent reminder warning banner in admin */
.urgent-reminder-banner {
padding: 16px 20px;
background: var(--error-bg);
border: 1px solid var(--error-border);
border-radius: var(--radius-xl);
margin-bottom: 24px;
}
.urgent-reminder-banner-icon {
width: 36px;
height: 36px;
background: var(--error-bg-solid);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.urgent-reminder-banner-title {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--error-dark);
}
.urgent-reminder-banner-text {
font-size: var(--font-size-sm);
color: var(--error-text);
margin-top: 4px;
line-height: 1.5;
}
/* PROCESSING status - Info/Blue light */
.status-pill--processing {
background: var(--info-bg);
color: var(--astrovia-blue);
border: none;
}
/* NEUTRAL status - Gray */
.status-pill--neutral {
background: var(--bg-tertiary);
color: var(--text-secondary);
border: none;
}
/* PAID status - Green (same as active) */
.status-pill--paid {
background: var(--badge-success-bg);
color: var(--badge-success-text);
border: none;
}
/* AUTO-PAY badge - Purple accent (using Astrovia purple tones) */
.status-pill--auto-pay {
background: var(--astrovia-blue-light-bg);
color: var(--astrovia-purple);
border: none;
}
/* OBLIGATED status - Rose/Pink (nexus threshold exceeded) */
.status-pill--obligated {
background: var(--status-rose-bg);
color: var(--status-rose-text);
border: none;
}
/* APPROACHING status - Soft amber (nexus threshold nearing) */
.status-pill--approaching {
background: var(--warning-bg-solid);
color: var(--warning-dark);
border: none;
}
/* NO SALES TAX status - Muted blue-grey (AK/MT/NH/DE/OR) */
.status-pill--no-sales-tax,
.status-pill--no_sales_tax {
background: var(--info-bg-alt);
color: var(--text-secondary);
border: none;
}
/* NO EXPOSURE status - Neutral grey */
.status-pill--no-exposure {
background: var(--bg-tertiary);
color: var(--text-secondary);
border: none;
}
/* REGISTERED status - Success green */
.status-pill--registered {
background: var(--badge-success-bg);
color: var(--badge-success-text);
border: none;
}
/* SUCCESS status - Green (confidence scores, status indicators) */
.status-pill--success {
background: var(--badge-success-bg);
color: var(--badge-success-text);
border: none;
}
/* WARNING status - Amber (medium confidence, caution) */
.status-pill--warning {
background: var(--warning-bg-solid);
color: var(--warning-dark);
border: none;
}
/* ERROR status - Red/Rose (low confidence, critical) */
.status-pill--error {
background: var(--status-rose-bg);
color: var(--status-rose-text);
border: none;
}
/* ----------------------------------------
TABLE COMPONENT
Usage:
---------------------------------------- */
.ds-table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-sm);
}
.ds-table th {
background: var(--table-header-gradient);
padding: var(--space-sm) var(--space-md);
text-align: left;
font-weight: 600;
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
border-bottom: 1px solid var(--border-light);
}
.ds-table td {
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--border-lighter);
color: var(--text-primary);
vertical-align: middle;
}
.ds-table tbody tr {
transition: background var(--duration-fast) var(--ease-default);
}
.ds-table tbody tr:hover {
background: var(--bg-tertiary);
}
.ds-table tbody tr:last-child td {
border-bottom: none;
}
/* Compact variant */
.ds-table-compact th,
.ds-table-compact td {
padding: var(--space-xs) var(--space-sm);
}
/* Table alignment utilities */
.ds-table th.text-right,
.ds-table td.text-right {
text-align: right;
}
.ds-table th.text-center,
.ds-table td.text-center {
text-align: center;
}
/* Filter row utility - ensures consistent spacing between filters and buttons */
.filter-row {
display: flex;
align-items: center;
gap: var(--space-md);
flex-wrap: wrap;
}
.filter-row .form-select,
.filter-row select {
min-width: 140px;
}
/* Card header utility - flex row with space-between */
.c-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-md);
flex-wrap: wrap;
gap: var(--space-md);
}
/* Table responsive wrapper */
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Text alignment and color utilities */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-tertiary { color: var(--text-tertiary); }
/* Table empty/loading state */
.table-state-cell {
padding: var(--space-2xl) !important;
text-align: center;
color: var(--text-tertiary);
}
/* ----------------------------------------
TYPOGRAPHY UTILITIES
---------------------------------------- */
.text-page-title {
font-family: var(--font-heading);
font-size: var(--font-size-3xl);
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
line-height: 1.2;
}
.text-card-title {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.02em;
line-height: 1.3;
}
.text-section-title {
font-size: var(--font-size-md);
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.text-body {
font-size: var(--font-size-base);
font-weight: 400;
color: var(--text-primary);
line-height: 1.6;
}
.text-label {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-secondary);
}
.text-label-uppercase {
font-size: var(--font-size-xs);
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.text-meta {
font-size: var(--font-size-sm);
font-weight: 400;
color: var(--text-tertiary);
}
/* ----------------------------------------
STATE PATTERNS: EMPTY, LOADING, ERROR
Intentional, consistent state handling
---------------------------------------- */
/* Empty State */
.state-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-3xl) var(--space-xl);
text-align: center;
background: var(--bg-tertiary);
border-radius: var(--radius-lg);
border: 1px dashed var(--border-light);
}
.state-empty-icon {
width: var(--icon-xl);
height: var(--icon-xl);
margin-bottom: var(--space-md);
color: var(--text-tertiary);
opacity: 0.6;
}
.state-empty-title {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-xs);
}
.state-empty-description {
font-size: var(--font-size-sm);
color: var(--text-secondary);
max-width: 320px;
line-height: 1.5;
}
.state-empty-action {
margin-top: var(--space-lg);
}
/* Empty State Aliases (for consistency with other naming) */
.empty-state-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-3xl) var(--space-lg);
text-align: center;
color: var(--text-tertiary);
}
.empty-state-icon {
margin-bottom: var(--space-lg);
opacity: 0.4;
}
.empty-state-title {
margin: 0;
font-size: var(--font-size-md);
font-weight: 500;
color: var(--text-primary);
}
.empty-state-description {
margin: var(--space-sm) 0 0;
font-size: var(--font-size-sm);
color: var(--text-tertiary);
}
.empty-state-sm {
text-align: center;
padding: var(--space-2xl) var(--space-lg);
color: var(--text-tertiary);
}
/* Loading State */
.state-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-3xl) var(--space-xl);
text-align: center;
}
/* State loading - uses unified loading bar */
.state-loading-bar {
width: 120px;
height: 4px;
background: var(--border-light);
border-radius: var(--radius-full);
overflow: hidden;
}
.state-loading-bar-progress {
height: 100%;
width: 30%;
background: var(--astrovia-blue);
border-radius: var(--radius-full);
animation: loadingSlide 1s ease-in-out infinite;
}
/* Legacy state spinner - kept for compatibility */
.state-loading-spinner {
width: 32px;
height: 32px;
border: 3px solid var(--border-light);
border-top-color: var(--astrovia-blue);
border-radius: var(--radius-full);
animation: spin 0.8s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.state-loading-text {
margin-top: var(--space-md);
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
/* Error State */
.state-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-3xl) var(--space-xl);
text-align: center;
background: var(--error-bg-solid);
border-radius: var(--radius-lg);
border: none;
}
.state-error-icon {
width: var(--icon-xl);
height: var(--icon-xl);
margin-bottom: var(--space-md);
color: var(--error);
}
.state-error-title {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-xs);
}
.state-error-description {
font-size: var(--font-size-sm);
color: var(--text-secondary);
max-width: 360px;
line-height: 1.5;
}
.state-error-action {
margin-top: var(--space-lg);
}
/* ----------------------------------------
SKELETON LOADERS
Respects motion preferences
---------------------------------------- */
.skeleton {
background: linear-gradient(
90deg,
var(--bg-tertiary) 25%,
var(--border-lighter) 50%,
var(--bg-tertiary) 75%
);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.skeleton {
animation: none;
background: var(--bg-tertiary);
}
}
.skeleton-text {
height: 14px;
margin-bottom: var(--space-xs);
}
.skeleton-text-short {
width: 60%;
}
.skeleton-text-medium {
width: 80%;
}
.skeleton-heading {
height: 24px;
width: 40%;
margin-bottom: var(--space-md);
}
.skeleton-avatar {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
}
.skeleton-card {
height: 120px;
border-radius: var(--radius-lg);
}
.skeleton-table-row {
display: flex;
gap: var(--space-md);
padding: var(--space-sm) 0;
border-bottom: 1px solid var(--border-lighter);
}
.skeleton-table-cell {
height: 16px;
flex: 1;
}
/* ----------------------------------------
LARGE FILE NOTICE
UX guardrail for 25k+ row files
---------------------------------------- */
.large-file-notice {
display: flex;
align-items: flex-start;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
background: var(--amber-50);
border: 1px solid var(--amber-300);
border-radius: var(--radius-md);
margin-bottom: var(--space-md);
animation: notice-slide-in 0.3s ease-out;
}
@keyframes notice-slide-in {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.large-file-notice--complete {
animation: notice-slide-out 0.3s ease-out forwards;
}
@keyframes notice-slide-out {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-8px);
}
}
.large-file-notice__icon {
flex-shrink: 0;
color: var(--warning-text);
animation: spin 2s linear infinite;
}
.large-file-notice__content {
flex: 1;
}
.large-file-notice__title {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--warning-text);
margin-bottom: var(--space-xs);
}
.large-file-notice__tip {
font-size: var(--font-size-xs);
color: var(--warning-text);
opacity: 0.85;
}
.large-file-notice__progress {
flex-shrink: 0;
width: 80px;
height: 6px;
background: rgba(0, 0, 0, 0.1);
border-radius: var(--radius-full);
overflow: hidden;
align-self: center;
}
.large-file-notice__progress-bar {
height: 100%;
width: 0%;
background: var(--warning-text);
border-radius: var(--radius-full);
transition: width var(--duration-fast) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
.large-file-notice {
animation: none;
}
.large-file-notice--complete {
animation: none;
opacity: 0;
}
.large-file-notice__icon {
animation: none;
}
}
/* ----------------------------------------
ASTRO EMPTY STATE COMPONENT
Unified empty state pattern (Phase 1 Audit)
---------------------------------------- */
.astro-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-3xl);
min-height: 280px;
}
.astro-empty-state--compact {
padding: var(--space-xl);
min-height: 180px;
}
.astro-empty-state--card {
background: var(--bg-white);
border: 1px solid var(--border-lighter);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-subtle);
}
.astro-empty-state__icon-container {
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);
}
.astro-empty-state__icon-container .astro-empty-icon {
font-size: var(--font-size-3xl);
color: var(--empty-icon-color);
}
.astro-empty-state__title {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--text-primary);
margin: 0 0 var(--space-xs) 0;
}
.astro-empty-state__description {
font-size: var(--font-size-sm);
color: var(--text-secondary);
max-width: 320px;
line-height: 1.6;
margin: 0;
}
.astro-empty-cta {
margin-top: var(--space-lg);
}
/* Skeleton containers for AstroSkeletonLoader */
.skeleton-cards-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-lg);
padding: var(--space-md);
}
.skeleton-cards-container .skeleton-card {
padding: var(--space-lg);
background: var(--bg-white);
border: 1px solid var(--border-lighter);
border-radius: var(--radius-lg);
}
.skeleton-list {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.skeleton-list-item {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-sm);
}
.skeleton-list-item__content {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.skeleton-metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-md);
}
.skeleton-metric-card {
padding: var(--space-lg);
background: var(--bg-white);
border: 1px solid var(--border-lighter);
border-radius: var(--radius-md);
}
.skeleton-table {
width: 100%;
border-collapse: collapse;
}
.skeleton-table th,
.skeleton-table td {
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--border-lighter);
}
/* ----------------------------------------
ASTRO ERROR STATE
Unified error display pattern
Mirrors astro-empty-state architecture
---------------------------------------- */
.astro-error-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-12);
min-height: 200px;
}
.astro-error-state--compact {
padding: var(--space-6);
min-height: 120px;
}
.astro-error-state--card {
background: var(--bg-surface);
border: 1px solid var(--error-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.astro-error-state--inline {
flex-direction: row;
text-align: left;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
min-height: auto;
background: var(--error-bg);
border: 1px solid var(--error-border);
border-radius: var(--radius-md);
}
.astro-error-state__icon-container {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: var(--error-bg);
border-radius: var(--radius-full);
margin-bottom: var(--space-4);
flex-shrink: 0;
}
.astro-error-state--inline .astro-error-state__icon-container {
width: 40px;
height: 40px;
margin-bottom: 0;
}
.astro-error-state__icon-container .astro-error-icon {
font-size: var(--font-size-2xl);
color: var(--error-icon);
}
.astro-error-state--inline .astro-error-icon {
font-size: var(--font-size-lg);
}
.astro-error-state__title {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin: 0 0 var(--space-1) 0;
}
.astro-error-state__message {
font-size: var(--font-size-sm);
color: var(--text-secondary);
max-width: 360px;
line-height: var(--line-height-normal);
margin: 0;
}
.astro-error-state__retry {
margin-top: var(--space-4);
}
.astro-error-state--inline .astro-error-state__retry {
margin-top: var(--space-2);
}
/* ----------------------------------------
COMMAND PALETTE (CMD+K)
Keyboard-first navigation overlay
---------------------------------------- */
.command-palette-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
z-index: var(--z-modal);
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 15vh;
opacity: 0;
visibility: hidden;
transition: opacity var(--duration-fast) var(--ease-default),
visibility var(--duration-fast) var(--ease-default);
}
.command-palette-overlay.is-open {
opacity: 1;
visibility: visible;
}
.command-palette {
width: 560px;
max-width: 90vw;
max-height: 60vh;
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-modal);
display: flex;
flex-direction: column;
overflow: hidden;
transform: scale(0.96) translateY(-8px);
transition: transform var(--duration-normal) var(--ease-spring);
}
.command-palette-overlay.is-open .command-palette {
transform: scale(1) translateY(0);
}
.command-palette__search-wrapper {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--border-subtle);
}
.command-palette__search-icon {
color: var(--text-tertiary);
font-size: var(--font-size-xl);
flex-shrink: 0;
}
.command-palette__search-input {
flex: 1;
background: transparent;
border: none;
outline: none;
font-size: var(--font-size-md);
font-family: var(--font-family);
color: var(--text-primary);
padding: 0;
height: 32px;
}
.command-palette__search-input::placeholder {
color: var(--text-tertiary);
}
.command-palette__kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 var(--space-1);
background: var(--bg-surface-subtle);
border: 1px solid var(--border-default);
border-radius: var(--radius-xs);
font-family: var(--font-family);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-medium);
color: var(--text-tertiary);
line-height: 1;
flex-shrink: 0;
}
.command-palette__results {
flex: 1;
overflow-y: auto;
padding: var(--space-2);
scrollbar-width: thin;
}
.command-palette__group-label {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
padding: var(--space-2) var(--space-3);
margin-top: var(--space-1);
}
.command-palette__item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-default);
color: var(--text-primary);
font-size: var(--font-size-sm);
}
.command-palette__item:hover,
.command-palette__item.is-active {
background: var(--bg-surface-subtle);
}
.command-palette__item.is-active {
background: var(--blue-50);
}
.command-palette__item-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-surface-subtle);
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-size: var(--font-size-lg);
flex-shrink: 0;
}
.command-palette__item.is-active .command-palette__item-icon {
background: var(--blue-100);
color: var(--blue-600);
}
.command-palette__item-label {
flex: 1;
font-weight: var(--font-weight-medium);
}
.command-palette__item-shortcut {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.command-palette__empty {
text-align: center;
padding: var(--space-8) var(--space-4);
color: var(--text-tertiary);
font-size: var(--font-size-sm);
}
.command-palette__footer {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-2) var(--space-4);
border-top: 1px solid var(--border-subtle);
background: var(--bg-surface-subtle);
}
.command-palette__footer-hint {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: var(--font-size-xs);
color: var(--text-tertiary);
}
/* ----------------------------------------
ASTRO COMPONENT LIBRARY
Unified components for Phase 2 audit
---------------------------------------- */
/* AstroCard Component */
.astro-card {
background: var(--bg-white);
border: 1px solid var(--border-lighter);
border-radius: var(--radius-lg);
overflow: hidden;
transition: box-shadow var(--duration-normal) var(--ease-default), transform var(--duration-normal) var(--ease-default);
}
.astro-card--elevated {
box-shadow: var(--shadow-card);
}
.astro-card--outlined {
box-shadow: none;
}
.astro-card--interactive {
cursor: pointer;
}
.astro-card--interactive:hover {
box-shadow: var(--card-shadow-hover);
}
.astro-card--sm { padding: var(--space-md); }
.astro-card--md { padding: var(--space-lg); }
.astro-card--lg { padding: var(--space-xl); }
.astro-card__header {
display: flex;
align-items: flex-start;
gap: var(--space-md);
margin-bottom: var(--space-md);
}
.astro-card__icon {
font-size: var(--font-size-3xl);
color: var(--astrovia-blue);
flex-shrink: 0;
}
.astro-card__header-text {
flex: 1;
min-width: 0;
}
.astro-card__title {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--text-primary);
margin: 0;
display: flex;
align-items: center;
gap: var(--space-sm);
}
.astro-card__subtitle {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin: var(--space-xs) 0 0 0;
}
.astro-card__body {
color: var(--text-primary);
font-size: var(--font-size-base);
line-height: 1.6;
}
.astro-card__footer {
display: flex;
gap: var(--space-sm);
justify-content: flex-end;
margin-top: var(--space-lg);
padding-top: var(--space-md);
border-top: 1px solid var(--border-lighter);
}
.astro-card__badge {
font-size: var(--font-size-xs);
padding: 2px 8px;
border-radius: var(--radius-full);
font-weight: 500;
}
/* AstroMetric Component */
.astro-metric {
display: flex;
align-items: flex-start;
gap: var(--space-md);
padding: var(--space-lg);
background: var(--bg-white);
border: 1px solid var(--border-lighter);
border-radius: var(--radius-md);
}
.astro-metric__icon-container {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--astrovia-blue-subtle);
border-radius: var(--radius-md);
color: var(--astrovia-blue);
font-size: var(--font-size-2xl);
}
.astro-metric__content {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.astro-metric__label {
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.astro-metric__value {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--text-primary);
}
.astro-metric__trend {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--font-size-xs);
font-weight: 500;
}
.astro-metric__trend--up { color: var(--success); }
.astro-metric__trend--down { color: var(--error); }
.astro-metric__trend--neutral { color: var(--text-tertiary); }
/* AstroBadge Component */
.astro-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: var(--badge-padding);
border-radius: var(--badge-radius);
font-size: var(--badge-font-size);
font-weight: var(--badge-font-weight);
letter-spacing: var(--badge-letter-spacing);
line-height: var(--badge-line-height);
white-space: nowrap;
transition: all var(--duration-normal) var(--ease-default);
/* Default to neutral styling when no variant specified */
background: var(--badge-neutral-bg);
color: var(--badge-neutral-text);
border: var(--badge-border-width) solid var(--badge-neutral-border);
}
/* Badge Size Variants - Apple-level proportions */
.astro-badge--sm {
padding: 4px 10px;
font-size: var(--font-size-xs);
}
.astro-badge--md {
/* Medium is the default - uses base token values */
padding: var(--badge-padding);
font-size: var(--badge-font-size);
}
.astro-badge--lg {
padding: 8px 16px;
font-size: var(--font-size-base);
}
/* Badge Variants - Unified Apple/Stripe Style */
.astro-badge--default,
.astro-badge--neutral,
.badge-neutral {
background: var(--badge-neutral-bg);
color: var(--badge-neutral-text);
border: none;
}
.astro-badge--primary,
.astro-badge--info,
.badge-info {
background: var(--badge-info-bg);
color: var(--badge-info-text);
border: none;
}
.astro-badge--success,
.badge-success {
background: var(--badge-success-bg) !important;
color: var(--badge-success-text) !important;
border: none !important;
}
.astro-badge--warning,
.badge-warning {
background: var(--badge-warning-bg);
color: var(--badge-warning-text);
border: none;
}
.astro-badge--error,
.astro-badge--danger,
.badge-danger,
.badge-error {
background: var(--badge-danger-bg);
color: var(--badge-danger-text);
border: none;
}
.astro-badge--secondary,
.badge-secondary {
background: var(--badge-secondary-bg);
color: var(--badge-secondary-text);
border: none;
}
.astro-badge__dot {
width: 6px;
height: 6px;
border-radius: var(--radius-full);
background: currentColor;
}
.astro-badge__icon {
font-size: var(--font-size-xs);
}
.astro-badge__remove {
display: flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
padding: 0;
border: none;
background: transparent;
color: currentColor;
cursor: pointer;
opacity: 0.6;
transition: opacity var(--duration-normal);
margin-left: 2px;
}
.astro-badge__remove:hover {
opacity: 1;
}
.astro-badge--count {
min-width: 20px;
text-align: center;
padding: 2px 6px;
}
/* AstroButton Component */
.astro-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-lg);
border: none;
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: 600;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-default);
white-space: nowrap;
}
.astro-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.astro-btn--sm {
padding: var(--space-xs) var(--space-md);
font-size: var(--font-size-xs);
}
.astro-btn--lg {
padding: var(--space-md) var(--space-xl);
font-size: var(--font-size-base);
}
.astro-btn--primary {
background: var(--astrovia-blue);
color: white;
}
.astro-btn--primary:hover:not(:disabled) {
background: var(--astrovia-blue-hover);
}
.astro-btn--secondary {
background: var(--bg-tertiary);
color: var(--text-primary);
}
.astro-btn--secondary:hover:not(:disabled) {
background: var(--bg-secondary);
}
.astro-btn--ghost {
background: transparent;
color: var(--text-secondary);
}
.astro-btn--ghost:hover:not(:disabled) {
background: var(--bg-tertiary);
color: var(--text-primary);
}
.astro-btn--danger {
background: var(--error);
color: white;
}
.astro-btn--danger:hover:not(:disabled) {
background: var(--error-dark);
}
.astro-btn--success {
background: var(--success);
color: white;
}
.astro-btn--success:hover:not(:disabled) {
background: var(--success-dark);
}
.astro-btn--icon-only {
width: 36px;
height: 36px;
padding: 0;
}
.astro-btn--icon-only.astro-btn--sm {
width: 28px;
height: 28px;
}
.astro-btn--icon-only.astro-btn--lg {
width: 44px;
height: 44px;
}
.astro-btn--full-width {
width: 100%;
}
.astro-btn--loading .astro-btn__label {
opacity: 0.5;
}
.astro-btn__spinner {
width: 14px;
height: 14px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: var(--radius-full);
animation: spin 0.6s linear infinite;
}
.astro-btn-group {
display: inline-flex;
gap: var(--space-xs);
}
.astro-btn-group--vertical {
flex-direction: column;
}
/* ----------------------------------------
FOCUS STATES & ACCESSIBILITY
Visible focus rings for all interactive elements
---------------------------------------- */
/* Global focus-visible styling */
:focus-visible {
outline: none;
}
/* Buttons */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
button:focus-visible {
outline: none;
box-shadow: var(--focus-ring-lg), var(--shadow-btn-primary);
}
/* Form inputs */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-input:focus-visible {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-input);
}
/* Links */
a:focus-visible {
outline: 2px solid var(--astrovia-blue);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
/* Tab controls */
.taxos-tab:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px var(--astrovia-blue);
}
/* Table rows */
.ds-table tbody tr:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px var(--astrovia-blue);
}
/* Clickable cards */
.c-card:focus-visible,
[role="button"]:focus-visible {
outline: none;
box-shadow: var(--focus-ring-lg), var(--card-shadow);
}
/* Status pills, chips, and badges */
.status-pill:focus-visible,
.profile-chip:focus-visible,
.tax-market-item:focus-visible,
.download-badge:focus-visible {
outline: 2px solid var(--astrovia-blue);
outline-offset: 2px;
}
/* Dropdown items */
.dropdown-item:focus-visible {
outline: none;
background: var(--astrovia-blue-subtle);
}
/* Sidebar navigation */
.sidebar-nav-item:focus-visible {
outline: none;
background: var(--bg-tertiary);
box-shadow: inset 0 0 0 2px var(--astrovia-blue);
}
/* Markets segment controls */
.markets-segment:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px var(--astrovia-blue);
}
/* Icon-only buttons require visible focus */
.icon-btn:focus-visible,
.refresh-btn:focus-visible,
.sync-refresh-btn:focus-visible,
.nexus-drawer-close:focus-visible {
outline: 2px solid var(--astrovia-blue);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* Skip link for keyboard navigation */
.skip-link {
position: absolute;
top: -100px;
left: var(--space-md);
padding: var(--space-sm) var(--space-md);
background: var(--astrovia-blue);
color: var(--text-on-brand);
font-weight: 600;
border-radius: var(--radius-sm);
z-index: 10000;
transition: top var(--duration-fast) var(--ease-default);
}
.skip-link:focus {
top: var(--space-md);
}
/* Visually hidden but accessible to screen readers */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ----------------------------------------
PAGE LAYOUT TEMPLATES
---------------------------------------- */
/* ========================================
UNIFIED PAGE HEADER - Apple/Stripe Level
Single canonical pattern for ALL tool views
NO card wrapper - clean, minimal design
======================================== */
.page-header {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding-top: var(--space-6);
padding-bottom: var(--space-5);
margin-bottom: var(--space-6);
max-width: 1100px;
background: transparent;
border: none;
}
.page-header-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background: var(--blue-100);
border: none;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--blue-500);
transition: all var(--duration-fast) var(--ease-default);
}
.page-header-icon:hover {
background: var(--blue-200);
}
.page-header-icon i {
font-size: var(--font-size-3xl);
line-height: 1;
}
.page-header-icon svg {
width: 24px;
height: 24px;
}
.page-header-content {
flex: 1;
min-width: 0;
}
.page-title {
font-family: var(--font-heading);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin: 0 0 var(--space-1) 0;
letter-spacing: -0.02em;
line-height: var(--line-height-tight);
}
.page-description {
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
color: var(--text-secondary);
margin: 0;
line-height: var(--line-height-normal);
max-width: 600px;
}
.page-header-actions {
display: flex;
align-items: center;
gap: var(--space-3);
flex-shrink: 0;
margin-top: var(--space-1);
}
/* Mobile responsive: stack vertically */
@media (max-width: 640px) {
.page-header {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
padding-top: var(--space-5);
padding-bottom: var(--space-4);
}
.page-header-actions {
width: 100%;
margin-top: var(--space-2);
}
.page-title {
font-size: var(--font-size-xl);
}
}
.page-grid {
display: grid;
gap: var(--section-gap);
}
.page-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.page-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
.page-grid-2,
.page-grid-3 {
grid-template-columns: 1fr;
}
}
/* ----------------------------------------
BUTTON COMPONENTS
---------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: 12px 24px;
font-size: var(--font-size-base);
font-weight: 600;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
border: none;
text-decoration: none;
white-space: nowrap;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-primary {
background: var(--astrovia-blue);
color: var(--text-on-brand);
box-shadow: var(--shadow-btn-primary);
}
.btn-primary:hover:not(:disabled) {
background: var(--astrovia-blue-hover);
}
.btn-secondary {
background: var(--bg-white);
color: var(--astrovia-blue);
border: none;
}
.btn-secondary:hover:not(:disabled) {
border-color: var(--border-accent);
background: var(--bg-primary);
}
.btn-ghost {
background: transparent;
color: var(--text-secondary);
padding: 8px 16px;
}
.btn-ghost:hover:not(:disabled) {
background: var(--bg-tertiary);
color: var(--text-primary);
}
.btn-sm {
padding: 8px 16px;
font-size: var(--font-size-sm);
}
.btn-lg {
padding: 16px 32px;
font-size: var(--font-size-md);
}
/* ========================================
CANONICAL FORM INPUT COMPONENT
Single source of truth for all form inputs
======================================== */
.form-input {
width: 100%;
background: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: var(--input-radius);
padding: 0 var(--input-padding-x);
font-size: var(--font-size-base);
font-weight: 500;
color: var(--input-text);
height: var(--input-height);
line-height: var(--input-height);
font-family: inherit;
transition: all var(--duration-fast) var(--ease-default);
}
.form-input:hover {
border-color: var(--border-strong);
}
.form-input:focus {
outline: none;
background-color: var(--input-bg-focus);
border-color: var(--input-border-focus);
box-shadow: var(--focus-ring);
}
.form-input::placeholder {
color: var(--text-tertiary);
font-weight: 400;
}
/* ========================================
CANONICAL SELECT COMPONENT (c-select)
Dropdown with always-visible chevron
Note: SVG data URIs cannot use CSS variables, so chevron colors
use token-equivalent hex values:
- #6B7280 = --text-tertiary (default state)
- #4F6DF5 = --astrovia-blue (hover/focus state)
This is an approved exception to the "tokens only" rule.
======================================== */
select.form-input,
.c-select {
padding-right: 44px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* Chevron color: #6B7280 = --text-tertiary token equivalent */
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%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px 16px;
cursor: pointer;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
select.form-input:hover,
.c-select:hover {
border-color: var(--border-strong);
/* Chevron color: #4F6DF5 = --astrovia-blue token equivalent */
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='%231F51F6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px 16px;
}
select.form-input:focus,
.c-select:focus {
outline: none;
background-color: var(--input-bg-focus);
border-color: var(--input-border-focus);
box-shadow: var(--focus-ring);
/* Chevron color: #4F6DF5 = --astrovia-blue token equivalent */
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='%231F51F6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px 16px;
}
/* Style options inside select */
select.form-input option,
.c-select option {
font-family: inherit;
padding: var(--space-xs) var(--space-sm);
background: var(--bg-white);
color: var(--text-primary);
}
.form-label {
display: block;
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-secondary);
margin-bottom: var(--space-xs);
}
.form-group {
margin-bottom: var(--space-lg);
}
/* ----------------------------------------
SEGMENTED CONTROL TABS (MANDATORY)
Replaces deprecated .admin-tabs
---------------------------------------- */
.taxos-tabs-container {
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 4px;
display: inline-flex;
gap: 2px;
margin-bottom: var(--space-2xl);
box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.06);
}
.taxos-tab {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-lg);
border: none;
background: transparent;
color: var(--text-secondary);
font-size: var(--font-size-sm);
font-weight: 500;
cursor: pointer;
border-radius: var(--radius-sm);
transition: all var(--duration-normal) cubic-bezier(0.22,1,0.36,1);
white-space: nowrap;
min-height: 36px;
}
.taxos-tab:hover {
color: var(--text-primary);
background: var(--bg-surface-subtle);
}
.taxos-tab.active {
background: var(--bg-surface);
color: var(--astrovia-blue);
font-weight: 500;
box-shadow: var(--shadow-card);
}
.taxos-tab svg {
width: var(--icon-md);
height: var(--icon-md);
flex-shrink: 0;
}
.taxos-content-card {
background: var(--bg-surface);
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
margin-bottom: var(--space-xl);
}
.taxos-content-card:last-child {
margin-bottom: 0;
}
.taxos-content-header {
padding: var(--space-xl) var(--space-2xl);
border-bottom: 1px solid var(--border-lighter);
background: transparent;
}
.taxos-content-body {
padding: var(--space-2xl);
}
.taxos-form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
@media (max-width: 768px) {
.taxos-form-grid {
grid-template-columns: 1fr;
}
}
/* ----------------------------------------
EXPANDABLE CONTAINER (CSS Grid Pattern)
NEVER use display: none for animations
---------------------------------------- */
.expandable-container {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--duration-layout) var(--ease-default);
}
.expandable-container.expanded {
grid-template-rows: 1fr;
}
.expandable-content {
overflow: hidden;
}
html {
background: var(--background-app);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, sans-serif;
background: var(--background-app);
color: var(--text-primary);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: var(--font-size-lg);
}
/* Main Container */
.c-shell {
max-width: 1400px;
margin: 0 auto;
padding: clamp(40px, 5vw, 80px) clamp(24px, 4vw, 48px);
padding-bottom: clamp(80px, 10vw, 160px); /* Generous bottom padding for smooth scrolling */
min-height: 100vh; /* Ensure container fills viewport */
}
/* Dashboard Header - Apple-level glassmorphism */
.dashboard-header {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding: var(--space-sm) var(--space-lg);
background: var(--bg-glass);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border: 1px solid var(--border-glass);
border-radius: var(--radius-lg);
margin-bottom: var(--space-xl);
box-shadow: var(--shadow-glass);
}
.back-to-home {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
font-size: var(--font-size-xs);
font-weight: 500;
color: var(--text-tertiary);
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--ease-default);
letter-spacing: -0.01em;
}
.back-to-home:hover {
color: var(--astrovia-blue);
background: var(--astrovia-blue-subtle);
}
.back-to-home svg {
flex-shrink: 0;
opacity: 0.6;
transition: opacity var(--duration-fast) var(--ease-default);
}
.back-to-home:hover svg {
opacity: 1;
}
.dashboard-title {
display: flex;
align-items: center;
gap: var(--space-sm);
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.dashboard-logo-img {
height: 24px;
width: auto;
}
.dashboard-title-divider {
width: 1px;
height: 18px;
background: var(--border-light);
}
.dashboard-title-text {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-primary);
letter-spacing: -0.02em;
}
/* Legacy Header (kept for compatibility) */
.c-header {
text-align: center;
margin-bottom: clamp(60px, 8vw, 96px);
position: relative;
}
.c-logo {
height: 48px;
width: auto;
margin-bottom: var(--space-8);
display: inline-block;
}
.c-title {
font-size: clamp(2.25rem, 5vw, 3.5rem);
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-5);
letter-spacing: 0.01em;
line-height: 1.1;
}
.c-subtitle {
font-size: var(--font-size-2xl);
color: var(--text-secondary);
font-weight: 400;
line-height: 1.5;
}
/* Cards - Unified Apple-level Surface */
.c-card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
padding: var(--card-padding);
margin-bottom: var(--space-6);
box-shadow: var(--card-shadow);
transition: box-shadow var(--duration-slow) var(--ease-default);
}
.c-card:hover {
box-shadow: var(--card-shadow-hover);
}
/* Form inputs float on card surfaces */
.c-card .form-input {
background-color: var(--input-bg);
border: 1px solid var(--input-border);
}
.c-card .form-input:hover {
border-color: var(--border-strong);
}
.c-card .form-input:focus {
background-color: var(--input-bg-focus);
border-color: var(--input-border-focus);
box-shadow: var(--focus-ring);
}
/* Section Headers - Refined Dashboard Style */
.c-section-title {
font-size: var(--font-size-2xl);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-2xl);
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--card-border);
letter-spacing: -0.02em;
line-height: 1.3;
}
/* Data Mapper Privacy Callout - Security Green Theme */
.dm-privacy-callout {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--success-tint);
border: none;
border-radius: var(--radius-md);
margin-bottom: var(--space-lg);
font-size: var(--font-size-xs);
color: var(--text-primary);
}
.dm-privacy-callout svg,
.dm-privacy-callout i {
color: var(--success);
flex-shrink: 0;
font-size: var(--icon-sm);
}
/* Shopify Connected Container - Compact informational metadata */
.dm-shopify-connected {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: transparent;
border: 1px solid var(--card-border);
border-radius: var(--radius-md);
margin-bottom: var(--space-md);
}
.dm-shopify-connected__badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: var(--badge-height);
padding: var(--badge-padding);
background: var(--success-bg-solid);
border: none;
border-radius: var(--badge-radius);
font-size: var(--badge-font-size);
font-weight: var(--badge-font-weight);
letter-spacing: var(--badge-letter-spacing);
text-transform: uppercase;
color: var(--success-dark);
white-space: nowrap;
}
.dm-shopify-connected__badge i {
font-size: var(--badge-font-size);
}
.dm-shopify-connected__badge span {
font-size: var(--badge-font-size);
font-weight: var(--badge-font-weight);
letter-spacing: var(--badge-letter-spacing);
text-transform: uppercase;
}
/* Test store badge variant - matches enrolled badge exactly */
.dm-shopify-connected__badge:has(.connection-label--test),
.dm-shopify-connected__badge.badge--test {
background: var(--success-bg-solid);
border-color: var(--success-border);
color: var(--success-dark);
}
.connection-label--test {
color: var(--success-dark);
}
/* Live store badge variant - matches enrolled badge exactly */
.dm-shopify-connected__badge:has(.connection-label--live),
.dm-shopify-connected__badge.badge--live {
background: var(--success-bg-solid);
border-color: var(--success-border);
color: var(--success-dark);
}
.connection-label--live {
color: var(--success-dark);
}
.dm-shopify-connected__options {
display: flex;
align-items: center;
gap: var(--space-md);
}
.dm-shopify-connected__radio-group {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-xs);
background: var(--bg-secondary);
border-radius: var(--radius-md);
}
.dm-shopify-connected__radio {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--duration-normal) var(--ease-default);
}
.dm-shopify-connected__radio:has(input:checked) {
background: var(--bg-white);
color: var(--text-primary);
font-weight: 500;
box-shadow: var(--shadow-sm);
}
.dm-shopify-connected__radio input {
display: none;
}
/* ========================================
DATA MAPPER REDESIGN - Apple/Stripe Level
Premium upload cards, step headers, and layouts
======================================== */
/* Step Section Container */
.dm-step-section {
padding: var(--space-2xl);
}
@media (min-width: 768px) {
.dm-step-section {
padding: var(--space-3xl);
}
}
/* Step Header with Badge */
.dm-step-header {
display: flex;
align-items: flex-start;
gap: var(--space-md);
margin-bottom: var(--space-xl);
padding-bottom: var(--space-lg);
border-bottom: 1px solid var(--border-light);
}
.dm-step-badge {
display: flex;
align-items: center;
justify-content: center;
width: var(--step-badge-size);
height: var(--step-badge-size);
border-radius: var(--radius-full);
background: linear-gradient(135deg, var(--astrovia-blue) 0%, var(--astrovia-blue-hover) 100%);
color: var(--text-on-brand);
font-size: var(--font-size-base);
font-weight: 700;
flex-shrink: 0;
box-shadow: var(--shadow-btn-primary);
}
.dm-step-header-content {
flex: 1;
min-width: 0;
}
.dm-step-title {
font-size: var(--font-size-2xl);
font-weight: 600;
color: var(--text-primary);
margin: 0 0 var(--space-xs) 0;
letter-spacing: -0.02em;
line-height: 1.2;
}
.dm-step-subtitle {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin: 0;
line-height: 1.5;
}
/* Integration Toggle */
.dm-integration-toggle {
background: var(--info-bg);
border: none;
border-radius: var(--radius-lg);
padding: var(--space-md) var(--space-lg);
margin-bottom: var(--space-xl);
}
.dm-integration-content {
display: flex;
align-items: center;
gap: var(--space-lg);
flex-wrap: wrap;
}
.dm-integration-badge {
display: flex;
align-items: center;
gap: var(--space-sm);
font-weight: 600;
color: var(--astrovia-blue);
}
.dm-integration-badge i {
font-size: var(--icon-md);
}
.dm-integration-options {
display: flex;
align-items: center;
gap: var(--space-md);
}
.dm-radio-option {
display: flex;
align-items: center;
gap: var(--space-xs);
cursor: pointer;
}
.dm-radio-option input[type="radio"] {
accent-color: var(--astrovia-blue);
width: var(--space-md);
height: var(--space-md);
}
.dm-radio-label {
font-size: var(--font-size-sm);
color: var(--text-primary);
font-weight: 500;
}
.dm-sync-status {
margin-top: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--bg-surface);
border-radius: var(--radius-md);
font-size: var(--font-size-xs);
}
/* Premium Upload Grid */
.dm-upload-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
@media (min-width: 768px) {
.dm-upload-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Premium Upload Card */
.dm-upload-card {
display: flex;
flex-direction: column;
background: var(--bg-surface);
border: 1px solid var(--border-card);
border-radius: var(--radius-xl);
padding: var(--space-xl);
transition: all var(--duration-standard) var(--ease-default);
position: relative;
overflow: hidden;
box-shadow: var(--shadow-card);
}
.dm-upload-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--border-width-thick);
background: transparent;
transition: background var(--duration-fast) var(--ease-default);
}
.dm-upload-card:hover {
border-color: var(--border-accent);
box-shadow: var(--shadow-card-hover);
}
.dm-upload-card.has-file::before {
background: var(--success);
}
.dm-upload-card.has-file {
border-color: var(--success-border);
}
/* Upload Icon Tile */
.dm-upload-icon {
display: flex;
align-items: center;
justify-content: center;
width: var(--icon-container-md);
height: var(--icon-container-md);
border-radius: var(--radius-lg);
margin-bottom: var(--space-md);
transition: all var(--duration-fast) var(--ease-default);
}
.dm-upload-icon i {
font-size: var(--icon-lg);
transition: transform var(--duration-fast) var(--ease-default);
}
.dm-upload-card:hover .dm-upload-icon i {
transform: scale(1.1);
}
.dm-upload-icon--shopify {
background: transparent; /* FORBIDDEN: No icon pill backgrounds inside cards */
color: var(--brand-shopify);
}
.dm-upload-icon--tax {
background: transparent; /* FORBIDDEN: No icon pill backgrounds inside cards */
color: var(--astrovia-blue);
}
.dm-upload-icon--carrier {
background: transparent; /* FORBIDDEN: No icon pill backgrounds inside cards */
color: var(--brand-amber);
}
/* Upload Content */
.dm-upload-content {
flex: 1;
display: flex;
flex-direction: column;
}
.dm-upload-title {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
margin: 0 0 var(--space-xs) 0;
letter-spacing: -0.01em;
}
.dm-upload-desc {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
margin: 0 0 var(--space-md) 0;
line-height: 1.5;
}
/* File Input - Hidden but accessible */
.dm-file-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Custom File Label Button */
.dm-file-label {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-lg);
background: var(--astrovia-blue);
color: var(--text-on-brand);
font-size: var(--font-size-sm);
font-weight: 600;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
width: 100%;
}
.dm-file-label:hover {
background: var(--astrovia-blue-hover);
box-shadow: var(--shadow-btn-primary);
}
.dm-file-label i {
font-size: var(--icon-sm);
}
.dm-file-input:focus + .dm-file-label {
outline: none;
box-shadow: var(--focus-ring-lg), var(--shadow-btn-primary);
}
/* Upload Meta (currency + file info) */
.dm-upload-meta {
margin-top: var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.dm-currency-wrap {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.dm-currency-label {
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
.dm-currency-select {
flex: 1;
padding: var(--space-xs) var(--space-sm);
padding-right: var(--space-2xl);
background: var(--bg-secondary);
border: none;
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-primary);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
transition: all var(--duration-fast) var(--ease-default);
font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', -apple-system, BlinkMacSystemFont, sans-serif;
}
.dm-currency-select:hover {
border-color: var(--astrovia-blue);
}
.dm-currency-select:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-input);
}
/* File Info Display */
.dm-file-info {
font-size: var(--font-size-xs);
color: var(--text-secondary);
padding: var(--space-xs) var(--space-sm);
background: var(--success-bg-solid);
border: none;
border-radius: var(--radius-sm);
display: none;
}
.dm-file-info:not(:empty) {
display: block;
}
.dm-file-info.error {
background: var(--error-bg-solid);
border-color: var(--error-border);
color: var(--error-text);
}
/* ========================================
DATA MAPPER - STEP 2: MAPPING GRID
2-column layout with card-based sections
======================================== */
.dm-mapping-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
}
@media (min-width: 1024px) {
.dm-mapping-grid {
grid-template-columns: 1fr 1fr;
}
}
.dm-mapping-column {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
/* Mapping Card */
.dm-mapping-card {
background: var(--bg-surface);
border: 1px solid var(--border-card);
border-radius: var(--radius-xl);
padding: var(--space-xl);
transition: all var(--duration-standard) var(--ease-default);
box-shadow: var(--shadow-card);
}
.dm-mapping-card:hover {
border-color: var(--border-accent);
box-shadow: var(--shadow-subtle-hover);
}
.dm-mapping-card-header {
display: flex;
align-items: flex-start;
gap: var(--space-md);
margin-bottom: var(--space-lg);
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--border-light);
}
.dm-mapping-icon {
display: flex;
align-items: center;
justify-content: center;
width: var(--icon-container-sm);
height: var(--icon-container-sm);
border-radius: var(--radius-md);
flex-shrink: 0;
}
.dm-mapping-icon i {
font-size: var(--icon-md);
}
.dm-mapping-icon--shopify {
background: linear-gradient(135deg, var(--brand-shopify) 0%, var(--brand-shopify-dark) 100%);
color: var(--text-on-brand);
}
.dm-mapping-icon--tax {
background: linear-gradient(135deg, var(--astrovia-blue) 0%, var(--astrovia-blue-hover) 100%);
color: var(--text-on-brand);
}
.dm-mapping-icon--carrier {
background: linear-gradient(135deg, var(--brand-amber) 0%, var(--brand-amber-dark) 100%);
color: var(--text-on-brand);
}
.dm-mapping-icon--filter {
background: var(--info-bg);
color: var(--astrovia-blue);
}
.dm-mapping-header-content {
flex: 1;
min-width: 0;
}
.dm-mapping-title {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
margin: 0 0 var(--space-2xs) 0;
letter-spacing: -0.01em;
}
.dm-mapping-subtitle {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
margin: 0;
line-height: 1.4;
}
/* Mapping Fields */
.dm-mapping-fields {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.dm-field-group {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.dm-field-label {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-primary);
display: flex;
align-items: center;
gap: var(--space-xs);
flex-wrap: wrap;
}
.dm-field-hint {
font-size: var(--font-size-xs);
font-weight: 400;
color: var(--text-tertiary);
}
.dm-optional-pill {
display: inline-flex;
align-items: center;
padding: var(--space-2xs) var(--space-xs);
background: var(--bg-secondary);
border: none;
border-radius: var(--radius-full);
font-size: var(--text-2xs);
font-weight: 500;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.dm-field-select {
width: 100%;
padding: var(--space-sm) var(--space-md);
padding-right: calc(var(--space-2xl) + var(--space-2xs));
background: var(--bg-secondary);
border: none;
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
color: var(--text-primary);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
transition: all var(--duration-fast) var(--ease-default);
}
.dm-field-select:hover {
border-color: var(--astrovia-blue);
background-color: var(--bg-white);
}
.dm-field-select:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-input);
background-color: var(--bg-white);
}
/* Field Row - 2 columns */
.dm-field-row {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}
@media (min-width: 480px) {
.dm-field-row {
grid-template-columns: 1fr 1fr;
}
}
/* Field Subgroup */
.dm-field-subgroup {
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--border-light);
}
.dm-field-subgroup-title {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-md);
}
.dm-field-subgroup-title i {
font-size: var(--icon-xs);
color: var(--astrovia-blue);
}
/* Action Bar */
.dm-action-bar {
display: flex;
justify-content: center;
margin-top: var(--space-2xl);
padding-top: var(--space-xl);
border-top: 1px solid var(--border-light);
}
.dm-process-btn {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-2xl);
font-size: var(--font-size-base);
}
.dm-process-btn i {
font-size: var(--icon-md);
}
/* ========================================
DATA MAPPER - STEP 3: RESULTS
Summary metrics and table styling
======================================== */
/* Success Badge Variant */
.dm-step-badge--success {
background: linear-gradient(135deg, var(--success) 0%, var(--dm-success-gradient-dark) 100%);
}
.dm-step-badge--success i {
font-size: var(--icon-sm);
}
/* Loading Overlay */
.dm-loading-overlay {
position: absolute;
inset: 0;
background: var(--overlay-white-95);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
border-radius: var(--radius-xl);
}
.dm-loading-content {
text-align: center;
}
.dm-spinner {
width: var(--icon-container-md);
height: var(--icon-container-md);
border: var(--border-width-thick) solid var(--border-light);
border-top-color: var(--astrovia-blue);
border-radius: var(--radius-full);
animation: spin 0.8s linear infinite;
margin: 0 auto var(--space-md);
}
.dm-loading-text {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
margin: 0 0 var(--space-xs) 0;
}
.dm-loading-subtext {
font-size: var(--font-size-sm);
color: var(--text-tertiary);
margin: 0;
}
/* Section Titles */
.dm-section-title {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--text-primary);
margin: 0 0 var(--space-lg) 0;
letter-spacing: -0.01em;
}
/* Results section spacing */
.dm-results-section-spacing {
margin-top: var(--space-2xl);
}
.dm-section-title i {
color: var(--astrovia-blue);
font-size: var(--icon-md);
}
/* Results Summary */
.dm-results-summary {
margin-bottom: var(--space-2xl);
}
.dm-results-summary .dm-section-title {
margin-bottom: var(--space-lg);
}
/* Metrics Grid - CIE-style cards */
.dm-metrics-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
@media (min-width: 768px) {
.dm-metrics-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.dm-metrics-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* Results Table Section */
.dm-results-table-section {
background: var(--bg-surface);
border: 1px solid var(--border-card);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.dm-results-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-lg) var(--space-xl);
border-bottom: 1px solid var(--border-light);
flex-wrap: wrap;
}
.dm-results-actions {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-wrap: wrap;
}
.dm-reset-btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
}
.dm-reset-btn i {
font-size: var(--icon-sm);
}
/* Table Container */
.dm-table-container {
overflow-x: auto;
max-height: var(--table-max-height);
overflow-y: auto;
}
/* Premium Results Table */
.dm-results-table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-sm);
}
.dm-results-table thead {
position: sticky;
top: 0;
z-index: 10;
background: var(--bg-secondary);
}
.dm-results-table th {
padding: var(--space-sm) var(--space-md);
text-align: left;
font-weight: 600;
font-size: var(--font-size-xs);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.03em;
border-bottom: 1px solid var(--border-light);
white-space: nowrap;
}
.dm-results-table th:first-child {
padding-left: var(--space-xl);
}
.dm-results-table th:last-child {
padding-right: var(--space-xl);
}
.dm-results-table td {
padding: var(--space-sm) var(--space-md);
color: var(--text-primary);
border-bottom: 1px solid var(--border-light);
vertical-align: middle;
}
.dm-results-table td:first-child {
padding-left: var(--space-xl);
}
.dm-results-table td:last-child {
padding-right: var(--space-xl);
}
.dm-results-table tbody tr {
transition: background var(--duration-fast) var(--ease-default);
}
.dm-results-table tbody tr:hover {
background: var(--bg-secondary);
}
.dm-results-table tbody tr:last-child td {
border-bottom: none;
}
/* Numeric cells right-aligned */
.dm-results-table .numeric {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* ========================================
DATA MAPPER - KNOWLEDGE CARDS
Collapsible info accordions with design tokens
======================================== */
.dm-knowledge-card {
margin-bottom: var(--space-xl);
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
background: var(--bg-surface);
box-shadow: var(--shadow-card);
overflow: hidden;
transition: box-shadow var(--duration-slow) var(--ease-default),
border-color var(--duration-normal) var(--ease-default);
}
.dm-knowledge-card:hover {
border-color: var(--border-accent);
box-shadow: var(--shadow-subtle-hover);
}
.dm-knowledge-card[open] {
box-shadow: var(--shadow-card);
}
.dm-knowledge-summary {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
background: var(--card-surface);
cursor: pointer;
font-weight: 600;
color: var(--text-primary);
font-size: var(--font-size-sm);
user-select: none;
border-bottom: 1px solid transparent;
transition: all var(--duration-fast) var(--ease-default);
list-style: none;
}
.dm-knowledge-summary::-webkit-details-marker {
display: none;
}
.dm-knowledge-summary:hover {
background: var(--card-surface-hover);
}
.dm-knowledge-summary:focus-visible {
outline: none;
box-shadow: var(--focus-ring-lg);
}
.dm-knowledge-summary > i:first-child {
color: var(--astrovia-blue);
font-size: var(--icon-md);
flex-shrink: 0;
}
.dm-knowledge-summary > span {
flex: 1;
}
.dm-knowledge-caret {
color: var(--text-tertiary);
font-size: var(--icon-sm);
flex-shrink: 0;
transition: transform var(--duration-fast) var(--ease-default);
}
.dm-knowledge-card[open] .dm-knowledge-caret {
transform: rotate(180deg);
}
.dm-knowledge-card[open] .dm-knowledge-summary {
border-bottom-color: var(--border-light);
}
.dm-knowledge-card .content-section {
padding: var(--space-xl);
background: var(--bg-surface);
}
/* Knowledge card code blocks */
.dm-knowledge-card .dm-code-block {
background: var(--card-surface-solid);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
font-family: var(--font-mono);
font-size: var(--font-size-sm);
color: var(--text-primary);
border-left: var(--border-width-thick) solid var(--info-border-strong);
margin: var(--space-sm) 0;
}
.dm-knowledge-card .dm-code-block--highlight {
border: 2px solid var(--info-border-strong);
border-left-width: var(--border-width-thick);
font-weight: 700;
color: var(--info-border-strong);
}
.dm-knowledge-card .dm-code-block--error {
border-left-color: var(--error);
}
/* Knowledge card callouts */
.dm-knowledge-callout {
background: var(--card-surface-solid);
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-lg);
border-left: var(--border-width-accent) solid var(--info-border-strong);
margin-bottom: var(--space-xl);
}
.dm-knowledge-callout--error {
background: var(--error-tint);
border-left-color: var(--error);
}
.dm-knowledge-callout--warning {
background: var(--status-warning-bg);
border-left-color: var(--status-warning-border);
}
h1, h2, h3 {
font-family: var(--font-heading);
}
h3 {
font-size: var(--font-size-xl);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-lg);
letter-spacing: -0.02em;
}
/* Upload Grid */
.c-upload-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
width: 100%;
}
@media (min-width: 600px) {
.c-upload-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
}
}
@media (min-width: 1100px) {
.c-upload-grid {
gap: var(--space-lg);
}
}
/* Upload Cards - Apple-inspired neutral surfaces */
.c-upload-card {
background: var(--card-surface);
border: 1px solid var(--card-border);
border-radius: var(--radius-lg);
padding: var(--space-xl);
transition: all var(--duration-standard) var(--ease-default);
position: relative;
min-width: 0;
box-shadow: var(--card-shadow);
}
@media (min-width: 1100px) {
.c-upload-card {
padding: var(--space-2xl);
}
}
.c-upload-card:hover {
background: var(--card-surface-hover);
border-color: var(--border-accent);
box-shadow: var(--card-shadow-hover);
}
.c-upload-title {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-md);
display: block;
letter-spacing: -0.02em;
}
.c-upload-card input[type="file"] {
width: 100%;
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--card-border);
border-radius: var(--radius-md);
background: var(--input-surface);
color: var(--text-secondary);
cursor: pointer;
font-size: var(--font-size-sm);
transition: all var(--duration-fast) var(--ease-default);
font-weight: 500;
}
.c-upload-card input[type="file"]:hover {
border-color: var(--astrovia-blue);
}
.c-upload-card input[type="file"]::file-selector-button {
padding: var(--space-xs) var(--space-md);
border: none;
border-radius: var(--radius-md);
background: var(--astrovia-blue);
color: var(--text-on-brand);
font-weight: 600;
font-size: var(--font-size-sm);
cursor: pointer;
margin-right: var(--space-sm);
transition: all var(--duration-fast) var(--ease-default);
}
.c-upload-card input[type="file"]::file-selector-button:hover {
background: var(--astrovia-blue-hover);
box-shadow: var(--shadow-btn-primary);
}
.c-currency-select-wrap {
margin-top: var(--space-sm);
margin-bottom: var(--space-xs);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.c-currency-label {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
.c-currency-select {
width: auto;
max-width: 100px;
padding: var(--space-xs) var(--space-sm);
background: var(--input-surface);
border: 1px solid var(--card-border);
border-radius: var(--radius-md);
color: var(--text-primary);
font-size: var(--font-size-sm);
font-weight: 600;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 32px;
}
.c-currency-select:hover {
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-sm);
}
.c-currency-select:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-input);
}
/* Rates Mapper - Mapping Select Dropdowns (full width, no truncation) */
.mapping-select.c-currency-select {
width: 100%;
max-width: none;
min-width: 0;
text-overflow: clip;
overflow: visible;
white-space: normal;
padding: 10px 36px 10px 14px;
font-size: var(--font-size-sm);
line-height: 1.4;
}
.mapping-select.c-currency-select option {
white-space: normal;
word-wrap: break-word;
padding: 8px 12px;
}
/* Process & Compare Rates Button */
.process-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 32px;
background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 100%);
color: var(--text-on-brand);
font-size: var(--font-size-lg);
font-weight: 600;
letter-spacing: -0.01em;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
box-shadow: var(--shadow-btn-secondary);
transition: all var(--duration-normal) var(--ease-default);
}
.process-btn:hover:not(:disabled) {
box-shadow: var(--shadow-btn-primary-hover);
}
.process-btn:disabled {
opacity: 1;
cursor: not-allowed;
background: var(--chart-neutral);
color: var(--text-secondary);
}
.process-btn svg {
width: 18px;
height: 18px;
}
.file-info {
margin-top: var(--space-md);
padding: var(--space-md);
background: var(--bg-surface);
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
font-size: var(--font-size-sm);
color: var(--text-primary);
line-height: 1.5;
box-shadow: var(--shadow-card);
}
.file-info.loaded {
background: var(--info-bg);
border-color: var(--astrovia-blue);
position: relative;
box-shadow: var(--shadow-subtle);
}
.file-info-header {
display: flex;
justify-content: flex-end;
margin-bottom: var(--space-sm);
}
.file-info-row {
display: flex;
gap: var(--space-sm);
padding: var(--space-xs) 0;
border-bottom: 1px solid var(--border-lighter);
}
.file-info-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.file-info-row--columns {
flex-direction: column;
gap: var(--space-xs);
}
.file-info-label {
font-weight: 600;
color: var(--text-secondary);
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.03em;
min-width: var(--space-2xl);
}
.file-info-value {
color: var(--text-primary);
font-weight: 500;
word-break: break-word;
}
.file-info-count {
font-variant-numeric: tabular-nums;
color: var(--astrovia-blue);
font-weight: 600;
}
.file-info-more {
color: var(--text-tertiary);
font-style: italic;
font-weight: 400;
}
.file-remove-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
}
.file-remove-btn:hover {
background: var(--error-tint);
border-color: var(--error-border-medium);
color: var(--error-dark);
}
.file-remove-btn:active {
transform: scale(0.95);
}
/* Subtle placeholder bar under file input */
.progress-bar-placeholder {
height: var(--space-xs);
width: 100%;
border-radius: var(--radius-full);
background: var(--border-lighter);
margin-top: var(--space-md);
}
.c-currency-note {
margin-top: var(--space-lg);
padding: var(--space-md) var(--space-lg);
background: var(--info-bg);
border-left: 3px solid var(--astrovia-blue);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: 1.6;
}
.c-currency-note strong {
color: var(--text-primary);
font-weight: 700;
}
/* Mapping Section */
.mapping-section {
margin-bottom: var(--space-xl);
padding: var(--space-xl);
background: var(--bg-surface);
border: 1px solid var(--border-card);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-card);
}
.mapping-section h3 {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-lg);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--border-lighter);
letter-spacing: -0.02em;
}
.c-field-group {
margin-bottom: var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
@media (min-width: 768px) {
.c-field-group {
flex-direction: row;
align-items: flex-start;
gap: var(--space-lg);
}
}
.c-field-label {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-primary);
letter-spacing: -0.01em;
flex: 0 0 auto;
width: 100%;
max-width: 280px;
line-height: 1.5;
padding-top: var(--space-sm);
}
.c-field-hint {
display: block;
font-size: var(--font-size-xs);
font-weight: 400;
color: var(--text-tertiary);
margin-top: var(--space-xs);
letter-spacing: 0;
}
.c-field-select {
flex: 1;
padding: var(--space-sm) var(--space-md);
background: var(--bg-secondary);
border: none;
border-radius: var(--radius-md);
color: var(--text-primary);
font-size: var(--font-size-sm);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-md) center;
padding-right: var(--space-2xl);
font-weight: 500;
}
/* Landed Cost Tool - Fixed width dropdowns for consistent alignment */
#landed-cost-tool .c-field-select {
flex: 0 0 420px;
width: 420px;
max-width: 420px;
}
@media (max-width: 768px) {
.c-field-label {
max-width: 100%;
padding-top: 0;
}
.c-field-select,
#landed-cost-tool .c-field-select {
flex: 1 1 100%;
width: 100%;
max-width: 100%;
}
}
.c-field-select:hover {
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-md);
}
.c-field-select:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-lg);
}
/* Buttons - Unified calm tokens */
.c-btn-primary,
.c-btn-secondary {
padding: var(--space-3) var(--space-5);
border: none;
border-radius: var(--btn-radius);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
margin-right: var(--space-3);
display: inline-flex;
align-items: center;
gap: var(--space-2);
letter-spacing: -0.01em;
height: var(--btn-height);
}
.c-btn-primary {
background: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
.c-btn-primary:hover {
background: var(--btn-primary-bg-hover);
}
.c-btn-primary:focus {
box-shadow: var(--focus-ring);
outline: none;
}
.c-btn-primary:disabled,
.c-btn-secondary:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.c-btn-primary:disabled:hover,
.c-btn-secondary:disabled:hover {
transform: none;
}
/* Large Button Variant */
.c-btn-lg {
padding: var(--space-4) var(--space-8);
font-size: var(--font-size-md);
}
.c-btn-secondary {
background: var(--btn-secondary-bg);
color: var(--btn-secondary-text);
border: 1px solid var(--btn-secondary-border);
}
.c-btn-secondary:hover {
background: var(--btn-secondary-bg-hover);
}
.c-btn-secondary:focus {
box-shadow: var(--focus-ring);
outline: none;
}
.c-btn-secondary.active {
background: var(--blue-500);
color: var(--text-on-brand);
border-color: var(--blue-500);
}
.c-btn-secondary.active:hover {
background: var(--blue-600);
border-color: var(--blue-600);
}
/* Button Size Variants */
.c-btn-xs {
padding: var(--space-1) var(--space-2);
font-size: var(--font-size-xs);
height: auto;
}
.c-btn-sm {
padding: var(--space-2) var(--space-4);
font-size: var(--font-size-sm);
height: var(--btn-height-sm);
}
/* Button Color Variants */
.c-btn-success {
background: var(--success-icon);
color: var(--neutral-0);
border: none;
font-weight: var(--font-weight-medium);
}
.c-btn-success:hover {
background: var(--success-text);
}
.c-btn-success:focus {
box-shadow: var(--focus-ring);
outline: none;
}
/* PDF Preview Panel */
.pdf-preview-panel {
margin-bottom: var(--space-lg);
padding: var(--space-lg);
background: var(--bg-secondary);
border-radius: var(--radius-md);
border: none;
}
/* Warning Box */
.warning-box {
padding: var(--space-sm);
background: var(--warning-bg);
border: none;
border-radius: var(--radius-sm);
}
.warning-box-title {
font-weight: 500;
font-size: var(--font-size-sm);
color: var(--warning);
margin-bottom: var(--space-xs);
}
.warning-box-list {
margin: 0;
padding-left: var(--space-lg);
font-size: var(--font-size-xs);
color: var(--text-secondary);
}
/* Preview Titles */
.preview-title {
margin: 0;
font-size: var(--font-size-sm);
font-weight: 600;
}
.preview-title--success {
color: var(--success);
}
.preview-title--info {
color: var(--info-text);
}
/* Preview Scroll Box */
.preview-scroll-box {
max-height: 200px;
overflow-y: auto;
background: var(--bg-white);
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
}
/* Info Hint - Small contextual info box */
.info-hint {
padding: var(--space-xs) var(--space-sm);
background: var(--info-bg);
border: none;
border-radius: var(--radius-xs);
font-size: var(--font-size-xs);
color: var(--text-secondary);
}
/* Status Banner */
.status-banner {
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
border: 1px solid;
}
/* Column Mapping Cards */
.column-card {
padding: var(--space-md);
border-left: 3px solid;
}
.column-card--critical {
border-left-color: var(--error);
}
.column-card--comparison {
border-left-color: var(--astrovia-blue);
}
.column-card--optional {
border-left-color: var(--text-tertiary);
}
/* Status Tags */
.status-tag {
padding: 1px var(--space-xs);
border-radius: var(--radius-xs);
font-size: var(--font-size-xxs);
font-weight: 600;
color: white;
}
.status-tag--critical {
background: var(--error);
}
.status-tag--comparison {
background: var(--astrovia-blue);
}
.status-tag--optional {
background: var(--text-tertiary);
}
/* Status Dot */
.status-dot {
width: 8px;
height: 8px;
border-radius: var(--radius-full);
}
.status-dot--critical {
background: var(--error);
}
.status-dot--comparison {
background: var(--astrovia-blue);
}
.status-dot--optional {
background: var(--text-tertiary);
}
/* Column Hint Text */
.column-hint {
font-size: var(--font-size-xxs);
color: var(--text-tertiary);
margin-top: var(--space-xs);
}
/* Remove Button */
.c-btn-remove {
white-space: nowrap;
}
.c-btn-remove:hover {
background: var(--error-bg-solid);
border-color: var(--error);
color: var(--error);
}
/* Reset Button */
.c-btn-reset {
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-md);
display: flex;
align-items: center;
gap: var(--space-xs);
}
/* Processing Overlay */
.processing-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.processing-overlay.is-hidden {
display: none;
}
.processing-overlay-card {
background: var(--bg-white);
padding: var(--space-10) var(--space-12);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
text-align: center;
}
.processing-overlay-spinner {
width: 48px;
height: 48px;
border: 3px solid var(--border-light);
border-top-color: var(--astrovia-blue);
border-radius: var(--radius-full);
margin: 0 auto var(--space-md);
animation: spin 1s linear infinite;
}
.processing-overlay-title {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-1);
}
.processing-overlay-subtitle {
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
/* Modal Base */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
}
.modal-overlay.is-hidden {
display: none;
}
.modal-card {
background: var(--bg-white);
padding: var(--space-6) var(--space-10);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
min-width: 380px;
max-width: 420px;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-lg);
}
.modal-title {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.modal-close-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: transparent;
border: none;
border-radius: var(--radius-full);
cursor: pointer;
color: rgba(29, 29, 31, 0.72);
transition: all var(--duration-normal) var(--ease-default);
}
.modal-close-btn:hover {
background: rgba(29, 29, 31, 0.08);
color: var(--text-primary);
}
.modal-close-btn:focus-visible {
outline: 2px solid var(--astrovia-blue);
outline-offset: 2px;
}
/* Compact modal variant */
.modal-content--compact {
max-width: 420px;
}
.modal-content {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.modal-divider {
display: flex;
align-items: center;
gap: var(--space-sm);
margin: var(--space-1) 0;
}
.modal-divider-line {
flex: 1;
height: 1px;
background: var(--border-light);
}
.modal-divider-text {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
font-weight: 500;
}
.modal-actions {
display: flex;
gap: var(--space-sm);
margin-top: var(--space-xs);
}
.modal-actions > button {
flex: 1;
}
/* Form Field Label */
.field-label {
display: block;
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-secondary);
margin-bottom: var(--space-xs);
}
.field-label--caps {
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Filter Label - Inline form labels */
.filter-label {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-secondary);
}
/* Overflow Utilities */
.overflow-x-auto {
overflow-x: auto;
}
.overflow-y-auto {
overflow-y: auto;
}
/* Fixed Width Utilities */
.w-120 {
width: 120px;
}
.w-200 {
width: 200px;
}
/* Flex Wrap Utilities */
.flex-nowrap {
flex-wrap: nowrap;
}
/* Cursor Utilities */
.cursor-pointer {
cursor: pointer;
}
/* Radio Label Utilities */
.radio-label {
display: flex;
align-items: center;
gap: var(--space-xs);
cursor: pointer;
white-space: nowrap;
font-size: var(--font-size-sm);
}
/* Flex Column Utilities */
.flex-col {
display: flex;
flex-direction: column;
}
/* Justify Content Utilities */
.justify-between {
justify-content: space-between;
}
.justify-end {
justify-content: flex-end;
}
/* Align Items Utilities */
.items-start {
align-items: flex-start;
}
/* Table Cell Utilities */
.table-cell {
padding: var(--space-sm) var(--space-sm);
border-bottom: 1px solid var(--border-light);
}
.table-cell-header {
padding: var(--space-sm) var(--space-sm);
text-align: left;
border-bottom: 2px solid var(--border-light);
font-weight: 600;
}
.table-cell-center {
text-align: center;
}
/* Summary Card Utilities */
.summary-card {
padding: var(--space-md) var(--space-lg);
background: var(--card-surface);
border-radius: var(--radius-md);
margin-bottom: var(--space-lg);
}
/* Details Summary Utilities */
.details-summary {
padding: var(--space-md) var(--space-lg);
cursor: pointer;
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
gap: var(--space-sm);
background: var(--bg-secondary);
}
/* Input Utilities */
.input-sm {
padding: var(--space-xs) var(--space-sm);
border: none;
border-radius: var(--radius-sm);
font-size: var(--font-size-base);
}
/* Button Size Utilities */
.btn-sm {
padding: var(--space-xs) var(--space-md);
font-size: var(--font-size-base);
}
/* Table Header Uppercase */
.table-header-uppercase {
padding: 14px var(--space-md);
text-align: left;
font-weight: 600;
font-size: var(--font-size-sm);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Table Body Cells */
.table-body-cell {
padding: 14px var(--space-md);
font-size: var(--font-size-base);
color: var(--text-primary);
}
.table-body-cell--bold {
font-weight: 500;
}
/* White Box Utilities */
.white-box {
padding: var(--space-sm) var(--space-md);
background: var(--bg-surface);
border-radius: var(--radius-sm);
border: none;
}
/* List Utilities */
.list-indented {
margin: var(--space-sm) 0 var(--space-sm) var(--space-lg);
padding: 0;
color: var(--text-primary);
}
/* Content Section Utilities */
.content-section {
padding: var(--space-lg);
color: var(--text-primary);
line-height: 1.7;
font-size: var(--font-size-sm);
}
/* Info Box Utilities */
.info-box {
padding: var(--space-sm) var(--space-md);
background: var(--bg-surface-subtle);
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
}
.info-box--success {
background: var(--success-tint);
border-color: var(--success);
}
.info-box--accent {
border-left: 3px solid var(--info-border-strong);
margin-top: var(--space-sm);
}
/* Typography Utilities */
.heading-sm {
margin: 0;
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
}
.heading-md {
margin: 0;
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--text-primary);
}
.text-xs {
font-size: var(--font-size-sm);
}
.line-height-relaxed {
line-height: 1.6;
}
/* Margin Utilities */
.m-0 {
margin: 0;
}
.mt-xxs {
margin-top: 2px;
}
.ml-lg {
margin-left: var(--space-lg);
}
/* Padding Utilities */
.p-0 {
padding: 0;
}
/* Font Weight Utilities */
.font-medium {
font-weight: 500;
}
.font-semibold {
font-weight: 600;
}
/* Text Color Utilities */
.text-error {
color: var(--error-dark);
}
/* Tool Access Row */
.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;
}
/* Grid Auto-Fit Cards */
.grid-auto-fit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-lg);
}
/* Threshold Value Cell */
.threshold-value-cell {
padding: var(--space-md) 18px;
color: var(--text-primary);
font-weight: 700;
text-align: center;
font-size: var(--font-size-xl);
vertical-align: top;
}
/* Note Box */
.note-box {
margin-top: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--card-surface-solid);
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
color: var(--text-primary);
border-left: 3px solid var(--info-border-strong);
line-height: 1.6;
}
/* Tax Total Card */
.tax-total-card {
padding: var(--space-md) var(--space-lg);
background: var(--card-surface);
border-radius: var(--radius-md);
margin-bottom: var(--space-lg);
}
/* Info Trigger Button */
.info-trigger-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;
}
/* Centered Text Auto */
.text-center-auto {
margin: 0 auto;
text-align: center;
max-width: 400px;
color: var(--text-secondary);
}
/* Warning Note */
.warning-note {
margin: 0;
font-size: var(--font-size-sm);
color: var(--warning-text);
line-height: 1.5;
}
/* Info List */
.info-list {
margin: 0;
padding-left: var(--space-md);
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: 1.6;
}
/* Text Astrovia Blue */
.text-astrovia-blue {
color: var(--astrovia-blue);
}
/* Visibility Utilities */
.hidden {
display: none !important;
}
/* Text Align Utilities */
.text-center {
text-align: center;
}
/* Text Color Utilities */
.text-tertiary {
color: var(--text-tertiary);
}
/* Padding Top Utilities */
.pt-lg {
padding-top: var(--space-lg);
}
/* Margin Top XL */
.mt-xl {
margin-top: var(--space-xl);
}
/* Border Subtle */
.border-subtle {
border-color: var(--border-light);
}
.status-banner--success {
background: var(--success-bg);
border-color: var(--success-border);
}
.status-banner--error {
background: var(--error-bg-solid);
border-color: var(--error-border);
}
.status-banner--warning {
background: var(--warning-bg);
border-color: var(--warning-border);
}
/* Excel Download Button - Subtle secondary style */
.excel-download-btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-lg);
background: var(--bg-white);
color: var(--text-primary);
text-decoration: none;
border: none;
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: 500;
box-shadow: var(--shadow-sm);
transition: all var(--duration-normal) var(--ease-default);
white-space: nowrap;
}
.excel-download-btn:hover {
background: var(--blue-50);
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
box-shadow: var(--shadow-md);
}
/* Fuel Surcharge Input - Clean number input without dropdown arrow */
.fuel-surcharge-input {
width: 100%;
margin-top: 8px;
padding: 10px 14px;
font-size: var(--font-size-base);
font-weight: 600;
text-align: center;
background: var(--bg-white);
border: none;
border-radius: var(--radius-md);
color: var(--text-primary);
transition: all var(--duration-normal) var(--ease-default);
-moz-appearance: textfield;
}
.fuel-surcharge-input::-webkit-outer-spin-button,
.fuel-surcharge-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.fuel-surcharge-input:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: 0 0 0 3px var(--astrovia-blue-light);
}
.excel-download-btn svg {
flex-shrink: 0;
}
.excel-download-btn--secondary {
background: var(--bg-secondary);
color: var(--text-secondary);
border: none;
}
.excel-download-btn--secondary:hover {
background: var(--bg-primary);
color: var(--text-primary);
}
/* Rates Mapper Dropdowns - Full width without truncation */
.ratecard-select {
width: 100%;
max-width: none;
min-width: 0;
padding: 10px 36px 10px 14px;
font-size: var(--font-size-sm);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
background-position: right 12px center;
}
.ratecard-select option {
white-space: normal;
padding: 8px 12px;
}
/* Summary Section */
.summary-section {
margin-bottom: 40px;
}
/* Data Mapper Summary Cards - Clean 4-column grid */
.c-summary-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 20px;
}
@media (max-width: 900px) {
.c-summary-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.c-summary-grid {
grid-template-columns: 1fr;
}
}
/* Summary Card - Simple colored left border design */
.c-summary-card {
display: flex;
flex-direction: column;
padding: var(--space-lg);
background: var(--bg-surface);
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
transition: border-color var(--duration-normal) cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: var(--shadow-card);
position: relative;
overflow: hidden;
}
.c-summary-card:hover {
box-shadow: var(--shadow-subtle-hover);
border-color: var(--astrovia-blue);
}
/* Summary Card Variants - Clean Apple-style with left border strips */
.c-summary-card.card-invoice {
background: var(--bg-surface);
border-color: var(--border-card);
border-left: 4px solid var(--invoice-rose);
}
.c-summary-card.card-invoice .c-summary-label {
color: var(--invoice-rose-text);
}
.c-summary-card.card-applied {
background: var(--bg-surface);
border-color: var(--border-card);
border-left: 4px solid var(--astrovia-blue);
}
.c-summary-card.card-applied .c-summary-label {
color: var(--astrovia-blue);
}
.c-summary-card.card-analysis {
background: var(--bg-surface);
border-color: var(--border-card);
border-left: 4px solid var(--text-tertiary);
}
.c-summary-card.card-analysis .c-summary-label {
color: var(--text-secondary);
}
/* Analysis cards with dynamic coloring for savings/increases */
.c-summary-card.card-analysis-positive {
background: var(--green-50);
border-color: var(--green-200);
border-left: var(--border-width-accent) solid var(--success);
box-shadow: var(--shadow-card);
}
.c-summary-card.card-analysis-positive::before {
background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.15), transparent);
}
.c-summary-card.card-analysis-positive .c-summary-label {
color: var(--success);
}
.c-summary-card.card-analysis-positive .c-summary-value {
color: var(--success-dark);
}
.c-summary-card.card-analysis-negative {
background: var(--red-50);
border-color: var(--red-200);
border-left: var(--border-width-accent) solid var(--error);
box-shadow: var(--shadow-card);
}
.c-summary-card.card-analysis-negative::before {
background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.15), transparent);
}
.c-summary-card.card-analysis-negative .c-summary-label {
color: var(--error);
}
.c-summary-card.card-analysis-negative .c-summary-value {
color: var(--error-dark);
}
/* Column Headers for Rates Mapper - Clean minimal style */
.rates-column-header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
border-radius: var(--radius-md);
background: var(--bg-surface);
border: 1px solid var(--border-card);
transition: all var(--duration-normal) var(--ease-default);
}
.rates-column-header-label {
font-size: var(--font-size-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.rates-column-header.header-invoice {
border-left: 4px solid var(--invoice-rose);
}
.rates-column-header.header-invoice .rates-column-header-label {
color: var(--invoice-rose-text);
}
.rates-column-header.header-applied {
border-left: 4px solid var(--astrovia-blue);
}
.rates-column-header.header-applied .rates-column-header-label {
color: var(--astrovia-blue);
}
.rates-column-header.header-analysis {
border-left: 4px solid var(--text-tertiary);
}
.rates-column-header.header-analysis .rates-column-header-label {
color: var(--text-secondary);
}
.c-summary-card.warning {
grid-column: 1 / -1;
background: var(--warning-bg);
border: none;
border-left: var(--border-width-accent) solid var(--warning);
padding: var(--space-lg) var(--space-xl);
border-radius: var(--radius-lg);
box-shadow:
0 2px 8px rgba(245, 158, 11, 0.08),
0 4px 16px rgba(245, 158, 11, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.c-summary-card.warning::before {
background: linear-gradient(90deg, transparent, rgba(255, 251, 235, 0.9), transparent);
}
.c-summary-card.warning:hover {
transform: none;
box-shadow:
0 4px 12px rgba(245, 158, 11, 0.12),
0 8px 24px rgba(245, 158, 11, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* Override stat-item styles when used with c-summary-card */
.c-summary-card.stat-item {
padding: var(--space-lg);
min-height: 100px;
}
/* Enhanced stat item typography for Apple polish */
.c-summary-card.stat-item .c-summary-label {
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
margin-bottom: var(--space-sm);
}
.c-summary-card.stat-item .c-summary-value {
font-size: var(--font-size-2xl);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--text-primary);
line-height: 1.1;
margin-bottom: var(--space-xs);
}
.c-summary-card.stat-item .c-summary-hint {
font-size: var(--font-size-sm);
color: var(--text-tertiary);
line-height: 1.4;
}
/* Content area */
.c-summary-content {
display: flex;
flex-direction: column;
gap: var(--space-xs);
min-width: 0;
flex: 1;
}
.c-summary-label {
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.3;
}
.c-summary-value {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.c-summary-hint {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
line-height: 1.3;
margin-top: var(--space-2xs);
}
/* ========================================
SUMMARY CARD - UTILITY MODIFIERS
Apple-level polish utility classes
======================================== */
/* Full-width card spanning grid */
.c-summary-card--full-width {
grid-column: 1 / -1;
margin-top: var(--space-md);
}
/* Border accent variants */
.c-summary-card--border-primary {
border-left-color: var(--astrovia-blue);
}
.c-summary-card--border-success {
border-left-color: var(--success);
background: linear-gradient(135deg, rgba(16, 185, 129, 0.03) 0%, rgba(16, 185, 129, 0.06) 100%);
}
.c-summary-card--border-error {
border-left-color: var(--error);
background: linear-gradient(135deg, rgba(239, 68, 68, 0.03) 0%, rgba(239, 68, 68, 0.06) 100%);
}
.c-summary-card--border-warning {
border-left-color: var(--warning-border);
}
.c-summary-card--border-neutral {
border-left-color: var(--neutral-border);
}
/* Info banner variant */
.c-summary-card--info-banner {
background: linear-gradient(135deg, var(--info-bg) 0%, rgba(224, 242, 254, 0.8) 100%);
border-left-color: var(--info-border-strong);
padding: var(--space-md) var(--space-lg);
}
/* Three-column grid layout for audit cards */
.c-summary-card__grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--space-xl);
align-items: start;
}
/* Section within grid */
.c-summary-card__section-label {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--space-sm);
}
.c-summary-card__section-value {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-sm);
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.c-summary-card__section-detail {
font-size: var(--font-size-sm);
color: var(--text-tertiary);
line-height: 1.4;
}
.c-summary-card__section-note {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin-top: var(--space-xs);
line-height: 1.4;
}
/* Note callout within section */
.c-summary-card__note-callout {
font-size: var(--font-size-sm);
color: var(--text-primary);
margin-top: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--bg-surface-subtle);
border-radius: var(--radius-sm);
border: 1px solid var(--border-subtle);
border-left: var(--border-width-thick) solid var(--info-border-strong);
line-height: 1.5;
}
/* ========================================
CARRIER-ONLY MODE - SPECIAL CARD VARIANTS
Apple-level polish with token-compliant fills
======================================== */
/* Hero Success Card - Green filled like active status token */
.c-summary-card--hero-success {
grid-column: 1 / -1;
background: linear-gradient(135deg, var(--success-tint) 0%, rgba(16, 185, 129, 0.12) 100%);
border: 1px solid rgba(16, 185, 129, 0.25);
border-left: var(--border-width-accent) solid var(--success);
padding: var(--space-xl);
box-shadow:
0 2px 8px rgba(16, 185, 129, 0.08),
0 4px 16px rgba(16, 185, 129, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.c-summary-card--hero-success::before {
background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.15), transparent);
}
.c-summary-card--hero-success .c-summary-label {
color: var(--success-dark);
}
.c-summary-card--hero-success .c-summary-value {
color: var(--success-dark);
font-size: var(--font-size-3xl);
}
/* Hero card inner grid for embedded metrics */
.c-summary-card--hero-success .hero-metrics-row {
display: flex;
gap: var(--space-xl);
margin-top: var(--space-lg);
padding-top: var(--space-lg);
border-top: 1px solid rgba(16, 185, 129, 0.2);
}
.c-summary-card--hero-success .hero-metric {
flex: 1;
}
.c-summary-card--hero-success .hero-metric-label {
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--success-dark);
margin-bottom: var(--space-xs);
opacity: 0.8;
}
.c-summary-card--hero-success .hero-metric-value {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--success-dark);
font-variant-numeric: tabular-nums;
}
/* Rose/Pink Filled Card - Like payment pending token */
.c-summary-card--fill-rose {
background: linear-gradient(135deg, rgba(244, 63, 94, 0.06) 0%, rgba(244, 63, 94, 0.12) 100%);
border: 1px solid rgba(244, 63, 94, 0.2);
border-left: var(--border-width-accent) solid var(--invoice-rose);
box-shadow:
0 2px 8px rgba(244, 63, 94, 0.06),
0 4px 16px rgba(244, 63, 94, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.c-summary-card--fill-rose::before {
background: linear-gradient(90deg, transparent, rgba(244, 63, 94, 0.1), transparent);
}
.c-summary-card--fill-rose .section-title {
color: var(--invoice-rose-text);
}
/* Grey/Neutral Filled Card */
.c-summary-card--fill-neutral {
background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(241, 245, 249, 0.9) 100%);
border: none;
border-left: var(--border-width-accent) solid var(--text-tertiary);
box-shadow:
0 2px 8px rgba(100, 116, 139, 0.06),
0 4px 16px rgba(100, 116, 139, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.c-summary-card--fill-neutral::before {
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
}
/* Section container for Weight Analysis areas */
/* Carrier-only summary wrapper - ensures full-width stacking */
.dm-carrier-summary {
display: flex;
flex-direction: column;
width: 100%;
gap: var(--space-xl);
grid-column: 1 / -1;
}
.dm-analysis-section {
background: var(--bg-surface);
border: 1px solid var(--border-card);
border-radius: var(--radius-xl);
padding: var(--space-xl);
box-shadow: var(--shadow-card);
width: 100%;
}
.dm-analysis-section--rose {
background: var(--red-50);
border: 1px solid var(--red-200);
border-left: 3px solid var(--red-400);
}
.dm-analysis-section--success {
background: var(--green-50);
border: 1px solid var(--green-200);
border-left: var(--border-width-accent) solid var(--success);
}
.dm-analysis-section--neutral {
background: var(--bg-surface);
border-color: var(--border-card);
}
/* Inner cards in weight analysis sections - match parent container theme */
.dm-analysis-section .c-summary-card {
border: 1px solid var(--border-card);
}
/* Neutral section inner cards - consistent blue hover */
.dm-analysis-section--neutral .c-summary-card:hover {
border-color: var(--astrovia-blue);
}
/* Rose/error section inner cards - subtle risk theming */
.dm-analysis-section--rose .c-summary-card {
border: 1px solid var(--red-200);
background: var(--bg-surface);
}
.dm-analysis-section--rose .c-summary-card:hover {
border-color: var(--red-400);
}
/* Success section inner cards use success-themed borders for cohesion */
.dm-analysis-section--success .c-summary-card {
border: 1px solid var(--green-200);
background: var(--bg-surface);
}
.dm-analysis-section--success .c-summary-card:hover {
border-color: var(--success);
}
.dm-analysis-section__title {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-xs);
}
.dm-analysis-section__subtitle {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin-bottom: var(--space-lg);
line-height: 1.5;
}
.dm-analysis-section__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-md);
}
@media (max-width: 900px) {
.dm-analysis-section__grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Data Mapper Accordion Affordance */
.dm-breakdown-accordion {
margin-top: var(--space-lg);
background: var(--bg-surface);
border-radius: var(--radius-md);
border: 1px solid var(--border-card);
overflow: hidden;
}
.dm-breakdown-accordion summary {
padding: var(--space-md) var(--space-lg);
cursor: pointer;
font-weight: 600;
color: var(--text-primary);
font-size: var(--font-size-sm);
user-select: none;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-surface);
border-bottom: 1px solid var(--border-subtle);
transition: background-color var(--duration-fast) var(--ease-default);
}
.dm-breakdown-accordion summary:hover {
background: var(--bg-surface-subtle);
}
.dm-breakdown-accordion summary::-webkit-details-marker {
display: none;
}
.dm-breakdown-accordion summary .dm-accordion-chevron {
width: 20px;
height: 20px;
transition: transform var(--duration-fast) var(--ease-default);
color: var(--text-tertiary);
}
.dm-breakdown-accordion[open] summary .dm-accordion-chevron {
transform: rotate(180deg);
}
.dm-breakdown-accordion .dm-accordion-content {
padding: var(--space-lg);
overflow-x: auto;
}
/* Breakdown Table - Weight Over-Declaration & similar */
.dm-breakdown-table__subhead {
font-size: var(--font-size-xs);
color: var(--text-secondary);
font-weight: 500;
text-transform: none;
display: block;
margin-top: 2px;
}
.dm-breakdown-table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-sm);
}
.dm-breakdown-table th {
padding: var(--space-sm) var(--space-md);
font-weight: 600;
color: var(--text-primary);
border-bottom: 2px solid var(--border-card);
background: var(--bg-surface);
}
.dm-breakdown-table td {
padding: var(--space-sm) var(--space-md);
color: var(--text-primary);
border-bottom: 1px solid var(--border-subtle);
}
.dm-breakdown-table__row--even {
background: var(--bg-surface-subtle);
}
.dm-breakdown-table__ref {
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--astrovia-blue);
}
.dm-breakdown-table__type {
color: var(--text-secondary);
}
.dm-breakdown-table__footer-note {
margin-top: var(--space-md);
padding: var(--space-sm) var(--space-md);
background: var(--bg-surface-subtle);
border-radius: var(--radius-sm);
border: 1px solid var(--border-subtle);
font-size: var(--font-size-xs);
color: var(--text-secondary);
}
.dm-breakdown-table__actions {
margin-top: var(--space-lg);
display: flex;
justify-content: flex-end;
}
/* Weight Breakdown Grouping Labels */
.dm-weight-group-label {
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-tertiary);
margin-bottom: var(--space-xs);
font-weight: 500;
}
/* KPI Card Micro-Comparison Text */
.dm-kpi-delta {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
margin-top: var(--space-xs);
font-weight: 500;
}
.dm-kpi-delta--positive {
color: var(--success);
}
.dm-kpi-delta--negative {
color: var(--error);
}
/* Footer Action Button Hierarchy */
.dm-results-actions {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
align-items: center;
}
.dm-results-actions .c-btn-tertiary,
.dm-results-actions .dm-btn-ghost {
background: transparent;
border: none;
color: var(--text-secondary);
}
.dm-results-actions .dm-btn-ghost:hover {
background: var(--bg-secondary);
border-color: var(--border-medium);
}
/* Carrier-only metrics 3-column grid */
.dm-carrier-metrics-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
width: 100%;
}
@media (max-width: 900px) {
.dm-carrier-metrics-grid {
grid-template-columns: 1fr;
}
}
.dm-carrier-metrics-column {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
/* Carrier Hero Card - Apple-level polish */
.dm-carrier-hero {
background: var(--green-50);
border: 1px solid var(--green-200);
border-left: var(--border-width-accent) solid var(--success);
border-radius: var(--radius-xl);
padding: var(--space-xl);
width: 100%;
}
.dm-carrier-hero__split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
align-items: start;
}
@media (max-width: 768px) {
.dm-carrier-hero__split {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
}
.dm-carrier-hero__left {
display: flex;
flex-direction: column;
}
.dm-carrier-hero__label {
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--success-dark);
margin-bottom: var(--space-xs);
}
.dm-carrier-hero__value {
font-size: var(--font-size-3xl);
font-weight: 700;
color: var(--success-dark);
font-feature-settings: 'tnum';
line-height: 1.1;
}
.dm-carrier-hero__hint {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin-top: var(--space-xs);
}
.dm-carrier-hero__cost {
margin-top: var(--space-lg);
padding-top: var(--space-md);
border-top: 1px solid var(--green-200);
}
.dm-carrier-hero__cost-label {
font-size: var(--font-size-xs);
font-weight: 500;
color: var(--text-secondary);
margin-bottom: var(--space-xs);
}
.dm-carrier-hero__cost-value {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--success-dark);
font-feature-settings: 'tnum';
margin-bottom: var(--space-xs);
}
.dm-carrier-hero__cost-breakdown {
font-size: var(--font-size-xs);
color: var(--success-dark);
opacity: 0.75;
}
.dm-carrier-hero__right {
display: flex;
flex-direction: column;
background: var(--bg-surface);
border-radius: var(--radius-md);
padding: var(--space-md);
border: 1px solid var(--green-200);
}
.dm-carrier-hero__currency-title {
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--success-dark);
margin-bottom: var(--space-sm);
}
.dm-carrier-hero__currency-badge {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--success-dark);
margin-bottom: var(--space-xs);
}
.dm-carrier-hero__currency-detail {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin-bottom: var(--space-md);
}
.dm-carrier-hero__source {
padding-top: var(--space-sm);
margin-bottom: var(--space-sm);
}
.dm-carrier-hero__source-label {
font-size: var(--font-size-xs);
font-weight: 500;
color: var(--text-secondary);
margin-bottom: var(--space-xs);
}
.dm-carrier-hero__source-value {
font-size: var(--font-size-sm);
color: var(--success-dark);
font-weight: 500;
}
.dm-carrier-hero__rate-source {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
}
/* ========================================
FORMULA BLOCK - Mono-styled Formula Cards
Use for equations, pseudo-code, calculation steps
======================================== */
.dm-formula-block {
background: var(--formula-bg);
border: 1px solid var(--formula-border);
border-left: 3px solid var(--formula-border-accent);
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-lg);
margin-bottom: var(--space-sm);
font-family: var(--font-mono);
font-size: var(--formula-font-size);
font-weight: var(--formula-font-weight);
line-height: var(--formula-line-height);
letter-spacing: var(--formula-letter-spacing);
color: var(--text-primary);
}
.dm-formula-block--highlight {
background: var(--formula-bg-highlight);
border: 2px solid var(--formula-border-accent);
border-left: 3px solid var(--formula-border-accent);
font-weight: 600;
color: var(--info-border-strong);
}
.dm-formula-block--error {
background: var(--error-tint);
border: none;
border-left: 3px solid var(--error);
}
.dm-formula-step {
display: flex;
align-items: baseline;
gap: var(--space-sm);
}
.dm-formula-step__number {
color: var(--text-tertiary);
font-weight: 600;
min-width: var(--space-lg);
}
.dm-formula-step__content {
flex: 1;
}
.dm-formula-container {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
/* Inline code snippet - for formula inside text */
.dm-formula-inline,
code.dm-formula-inline {
background: var(--formula-bg);
padding: var(--space-2xs) var(--space-xs);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: var(--formula-font-size);
font-weight: var(--formula-font-weight);
letter-spacing: var(--formula-letter-spacing);
color: var(--text-primary);
border: 1px solid var(--formula-border);
}
/* Carrier Metrics Row Styling */
.dm-carrier-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
width: 100%;
}
@media (max-width: 900px) {
.dm-carrier-row {
grid-template-columns: 1fr;
}
}
/* First row - Blue tint */
.dm-carrier-row--primary {
/* No extra styles needed, cards handle their own backgrounds */
}
/* Second row - Lighter blue tint */
.dm-carrier-row--secondary {
/* No extra styles needed, cards handle their own backgrounds */
}
/* Carrier Metric Card with Icon - Equal sizing */
.dm-carrier-card {
display: flex;
flex-direction: column;
background: var(--bg-surface);
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
padding: var(--space-lg);
min-height: 140px;
transition: transform var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
box-shadow: var(--shadow-card);
}
.dm-carrier-card:hover {
box-shadow: var(--shadow-subtle);
}
/* Blue tint variant for first row */
.dm-carrier-card--blue {
background: var(--blue-50);
border-color: var(--blue-200);
border-left: var(--border-width-accent) solid var(--astrovia-blue);
}
/* Light blue tint variant for second row */
.dm-carrier-card--light-blue {
background: var(--blue-50);
border-color: var(--blue-100);
border-left: var(--border-width-accent) solid var(--blue-300);
}
/* Card header with icon */
.dm-carrier-card__header {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-sm);
}
.dm-carrier-card__icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: var(--astrovia-blue);
font-size: var(--font-size-2xl);
flex-shrink: 0;
}
.dm-carrier-card--light-blue .dm-carrier-card__icon {
color: var(--blue-400);
}
.dm-carrier-card__label {
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
line-height: 1.3;
}
.dm-carrier-card__value {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--text-primary);
font-feature-settings: 'tnum';
margin-top: auto;
padding-top: var(--space-sm);
}
.dm-carrier-card--blue .dm-carrier-card__value {
color: var(--blue-700);
}
.dm-carrier-card--light-blue .dm-carrier-card__value {
color: var(--text-primary);
}
.dm-carrier-card__hint {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
margin-top: var(--space-xs);
line-height: 1.4;
}
/* Success variant for positive metrics */
.dm-carrier-card--success {
background: var(--green-50);
border-color: var(--green-200);
border-left: var(--border-width-accent) solid var(--success);
}
.dm-carrier-card--success .dm-carrier-card__icon {
color: var(--success);
}
.dm-carrier-card--success .dm-carrier-card__value {
color: var(--success);
}
/* Rose variant for negative/error metrics */
.dm-carrier-card--rose {
background: var(--red-50);
border-color: var(--red-200);
border-left: var(--border-width-accent) solid var(--error);
}
.dm-carrier-card--rose .dm-carrier-card__icon {
color: var(--error);
}
.dm-carrier-card--rose .dm-carrier-card__value {
color: var(--error);
}
/* Warning variant for credits/warnings */
.dm-carrier-card--warning {
background: var(--amber-50);
border-color: var(--amber-200);
border-left: var(--border-width-accent) solid var(--warning);
}
.dm-carrier-card--warning .dm-carrier-card__icon {
color: var(--warning);
}
.dm-carrier-card--warning .dm-carrier-card__value {
color: var(--warning-text);
}
/* Two-Column Metrics Layout */
.dm-metrics-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
margin-bottom: var(--space-lg);
}
.dm-metrics-column {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.dm-metrics-column__header {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--border-light);
}
.dm-metrics-column__header i {
font-size: var(--font-size-md);
color: var(--astrovia-blue);
}
@media (max-width: 900px) {
.dm-metrics-columns {
grid-template-columns: 1fr;
}
}
/* Full-Width Net Delivery Cost Card */
.dm-net-delivery-card {
background: var(--bg-surface);
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
padding: var(--space-lg);
margin-bottom: var(--space-lg);
transition: all var(--duration-slow) cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: var(--shadow-card);
}
.dm-net-delivery-card:hover {
border-color: var(--border-medium);
box-shadow: var(--card-shadow-hover);
}
.dm-net-delivery-card__title {
font-size: var(--font-size-md);
font-weight: 600;
color: var(--text-primary);
}
.dm-net-delivery-card__value-row {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-md);
}
.dm-net-delivery-card__value {
font-size: var(--font-size-3xl);
font-weight: 700;
font-feature-settings: 'tnum';
color: var(--text-primary);
}
.dm-net-delivery-card__status {
font-size: var(--font-size-xs);
font-weight: 500;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
}
.dm-net-delivery-card__status--loss {
background: var(--error-tint);
color: var(--error);
}
.dm-net-delivery-card__status--profit {
background: var(--success-tint);
color: var(--success);
}
.dm-net-delivery-card__breakdown {
background: var(--bg-secondary);
border-radius: var(--radius-md);
padding: var(--space-sm) var(--space-md);
}
.dm-net-delivery-card__formula {
font-size: var(--font-size-sm);
color: var(--text-secondary);
font-feature-settings: 'tnum';
}
.dm-net-delivery-card__note {
margin-top: var(--space-sm);
font-size: var(--font-size-xs);
color: var(--text-tertiary);
}
.dm-net-delivery-card__note--subtle {
color: var(--text-tertiary);
font-style: italic;
font-size: var(--font-size-xs);
}
/* Header row - title/notes left, AOV right */
.dm-net-delivery-card__header-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-lg);
margin-bottom: var(--space-md);
}
/* Title block - title + context notes stacked tightly */
.dm-net-delivery-card__title-block {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
}
/* Context notes - compact inline under title */
.dm-net-delivery-card__context-notes {
display: flex;
flex-direction: column;
gap: 2px;
}
.dm-net-delivery-card__note-text {
font-size: var(--font-size-sm);
color: var(--text-primary);
line-height: 1.4;
}
.dm-net-delivery-card__note-text strong {
font-weight: 600;
color: var(--astrovia-blue);
}
/* Inner white card for hero metric + formula */
.dm-net-delivery-card__inner {
background: var(--bg-surface-subtle);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-md) var(--space-lg);
margin-bottom: var(--space-md);
}
.dm-net-delivery-card__inner .dm-net-delivery-card__value-row {
margin-bottom: var(--space-sm);
}
.dm-net-delivery-card__inner .dm-net-delivery-card__value {
font-size: var(--font-size-4xl);
font-weight: 700;
color: var(--text-primary);
}
.dm-net-delivery-card__inner .dm-net-delivery-card__formula {
font-size: var(--font-size-sm);
color: var(--text-secondary);
font-feature-settings: 'tnum';
padding-top: var(--space-sm);
border-top: 1px solid var(--border-light);
}
.dm-net-delivery-card__inner .dm-net-delivery-card__formula strong {
color: var(--text-primary);
font-weight: 600;
}
/* Blue variant - matches Avg Delivery Cost cards */
.dm-net-delivery-card--blue {
background: var(--blue-50) !important;
border: 1px solid var(--astrovia-blue) !important;
border-left: 3px solid var(--astrovia-blue) !important;
}
.dm-net-delivery-card--blue:hover {
border-color: var(--astrovia-blue-hover) !important;
box-shadow: var(--shadow-card-hover);
}
.dm-net-delivery-card--blue .dm-net-delivery-card__title {
color: var(--astrovia-blue);
}
/* Softer blue border for breakdown box inside blue card */
.dm-net-delivery-card--blue .dm-net-delivery-card__breakdown--white {
border: 1px solid var(--blue-200);
}
/* AOV display in header */
.dm-net-delivery-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: var(--space-sm);
}
.dm-net-delivery-card__aov {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-2xs);
}
.dm-net-delivery-card__aov-label {
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.dm-net-delivery-card__aov-value {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--astrovia-blue);
font-feature-settings: 'tnum';
}
.dm-net-delivery-card__aov-hint {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
}
/* White breakdown variant */
.dm-net-delivery-card__breakdown--white {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
}
/* Cost status badge (neutral grey) */
.dm-net-delivery-card__status--cost {
background: var(--bg-secondary);
color: var(--text-secondary);
border: none;
}
/* Carrier Card Breakdown - Inline with value */
.dm-carrier-card__breakdown {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
font-feature-settings: 'tnum';
font-weight: 400;
margin-left: var(--space-xs);
}
/* Grey Neutral Note Card */
.dm-note-card {
display: flex;
align-items: flex-start;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-lg);
margin-bottom: var(--space-lg);
}
.dm-note-card--neutral {
background: var(--bg-surface-subtle);
border: 1px solid var(--border-subtle);
}
.dm-note-card__icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-tertiary);
color: var(--text-secondary);
border-radius: var(--radius-md);
font-size: var(--font-size-md);
flex-shrink: 0;
}
.dm-note-card__content {
flex: 1;
}
.dm-note-card__label {
font-size: var(--font-size-xs);
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-xs);
}
.dm-note-card__text {
font-size: var(--font-size-sm);
color: var(--text-primary);
line-height: 1.6;
}
/* Info Note Style */
.dm-info-note {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
margin-top: var(--space-md);
padding: var(--space-sm) var(--space-md);
background: var(--info-bg);
border-radius: var(--radius-md);
font-size: var(--font-size-xs);
color: var(--text-primary);
border-left: 3px solid var(--astrovia-blue);
line-height: 1.5;
}
.dm-info-note i {
color: var(--astrovia-blue);
flex-shrink: 0;
margin-top: 2px;
}
.dm-info-note--subtle {
background: var(--bg-secondary);
border-left-color: var(--text-tertiary);
}
.dm-info-note--subtle i {
color: var(--text-tertiary);
}
.dm-info-note--white {
background: var(--bg-surface);
border: 1px solid var(--blue-200);
border-left: 3px solid var(--blue-400);
}
.dm-info-note--white i {
color: var(--astrovia-blue);
}
/* Rose/pink variant for Tax & Duty Audit section */
.dm-info-note--rose {
background: var(--bg-surface);
border: 1px solid var(--red-200);
border-left: 3px solid var(--red-400);
}
.dm-info-note--rose i {
color: var(--red-400);
}
/* Full-Width Grid for Analysis Sections */
.dm-analysis-section__grid--full {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
}
@media (max-width: 900px) {
.dm-analysis-section__grid--full {
grid-template-columns: 1fr;
}
}
/* Full-Width Summary Card */
.c-summary-card--full {
position: relative;
padding-left: var(--space-xl);
}
.c-summary-card__icon {
position: absolute;
top: var(--space-md);
left: var(--space-md);
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: var(--astrovia-blue);
font-size: var(--font-size-lg);
}
/* Loading Overlay */
.c-loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--overlay-white-95);
backdrop-filter: blur(4px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 100;
border-radius: var(--radius-lg);
opacity: 0;
transition: opacity var(--duration-slow) var(--ease-default);
}
.c-loading-overlay.active {
opacity: 1;
}
/* Unified Loading Bar - consistent across all loading states */
.c-loading-bar {
width: 180px;
height: 4px;
background: var(--border-light);
border-radius: var(--radius-full);
overflow: hidden;
}
.c-loading-bar-progress {
height: 100%;
width: 30%;
background: var(--astrovia-blue);
border-radius: var(--radius-full);
animation: loadingSlide 1s ease-in-out infinite;
}
@keyframes loadingSlide {
0% { transform: translateX(-100%); }
100% { transform: translateX(400%); }
}
/* Legacy spinner - kept for backwards compatibility */
.c-spinner {
width: 56px;
height: 56px;
border: 5px solid var(--border-light);
border-top-color: var(--astrovia-blue);
border-radius: var(--radius-full);
animation: spin 0.7s linear infinite;
box-shadow: var(--shadow-btn-secondary);
}
.c-loading-text {
margin-top: 16px;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text-secondary);
letter-spacing: 0.02em;
text-transform: uppercase;
}
#step3 {
position: relative;
}
#step3.processing {
pointer-events: none;
}
#step3.processing > *:not(.c-loading-overlay) {
opacity: 0.4;
transition: opacity var(--duration-slow) var(--ease-default);
}
/* Table */
.table-controls {
margin-bottom: var(--space-xl);
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
}
.c-table-wrap {
overflow-x: auto;
overflow-y: auto;
max-height: 70vh;
border: 1px solid var(--card-border);
border-radius: var(--radius-lg);
background: var(--card-surface-solid);
box-shadow: var(--card-shadow);
}
.c-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--font-size-sm);
}
.c-table thead {
position: sticky;
top: 0;
z-index: 10;
background: var(--bg-secondary);
}
.c-table thead.is-stuck {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.c-table th {
padding: var(--space-md) var(--space-lg);
text-align: left;
font-weight: 600;
color: var(--text-primary);
border-bottom: 1px solid var(--card-border);
cursor: pointer;
user-select: none;
transition: background var(--duration-fast) var(--ease-default);
white-space: nowrap;
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.05em;
position: sticky;
top: 0;
background: var(--card-surface-solid);
z-index: 5;
}
.c-table th:hover {
background: var(--bg-secondary);
}
.c-table tbody tr {
transition: all var(--duration-fast) var(--ease-default);
background: var(--input-surface);
}
/* Row divider lines on cells (borders don't work on tr elements) */
.c-table tbody td {
border-bottom: 1px solid var(--border-lighter);
}
.c-table tbody tr:hover {
background: var(--bg-secondary);
}
.c-table tbody tr:last-child td {
border-bottom: none;
}
/* Highlight rows with missing data */
.c-table tbody tr.c-row-missing-data {
background: var(--error-border);
}
.c-table tbody tr.c-row-missing-data:hover {
background: var(--error-border-medium);
box-shadow: var(--shadow-sm);
}
/* Highlight credit rows (Shopify credits/refunds) */
.c-table tbody tr.c-row-credit {
background: var(--credit-bg);
}
.c-table tbody tr.c-row-credit:hover {
background: var(--credit-border);
box-shadow: var(--shadow-sm);
}
/* Matched orders - white background with green border accents */
.c-table tbody tr.c-row-matched {
background: var(--bg-white);
}
/* Green dividers for matched rows to reinforce "mapped" status */
.c-table tbody tr.c-row-matched td {
border-bottom: 1px solid var(--success-border);
}
.c-table tbody tr.c-row-matched:hover {
background: var(--success-tint);
box-shadow: var(--shadow-sm);
}
/* Bold order number + left border accent on first column for matched rows */
.c-table tbody tr.c-row-matched td:first-child {
font-weight: 600;
color: var(--text-primary);
border-left: 3px solid var(--success);
}
/* Results filter legend with checkboxes */
.results-filter-legend {
display: flex;
gap: 20px;
margin-bottom: 16px;
padding: 14px 20px;
background: var(--bg-secondary);
border-radius: var(--radius-md);
border: 1px solid var(--border-lighter);
flex-wrap: wrap;
align-items: center;
}
.results-filter-item {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--font-size-base);
color: var(--text-primary);
cursor: pointer;
padding: 6px 12px;
border-radius: var(--radius-sm);
transition: background var(--duration-normal) var(--ease-default);
user-select: none;
}
.results-filter-item:hover {
background: var(--bg-tertiary);
}
.results-filter-item input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--astrovia-blue);
cursor: pointer;
margin: 0;
}
.results-filter-swatch {
width: 28px;
height: 18px;
border-radius: var(--radius-xs);
flex-shrink: 0;
}
.results-filter-swatch--matched {
background: var(--bg-white);
border: 2px solid var(--success);
}
.results-filter-swatch--credit {
background: var(--credit-bg);
border: 2px solid var(--credit-border);
}
.results-filter-swatch--missing {
background: var(--error-border);
border: 2px solid var(--error-border-medium);
}
/* Toggle button for unallocated charges */
.c-toggle-btn:hover {
background: var(--credit-gradient) !important;
box-shadow: var(--shadow-md);
}
.c-table td {
padding: var(--space-sm) var(--space-md);
color: var(--text-primary);
font-weight: 400;
font-size: var(--font-size-sm);
}
/* Comment cell - single line with ellipsis, expand on hover */
.c-table td.comment-cell {
max-width: 300px;
min-width: 180px;
padding: var(--space-sm) var(--space-md);
}
.c-table td.comment-cell .comment-text {
font-size: var(--font-size-sm);
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
color: var(--text-secondary);
}
.c-table td.comment-cell:hover .comment-text {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.c-table td.comment-cell:hover {
position: relative;
z-index: 10;
background: var(--bg-white);
box-shadow: var(--shadow-md);
}
.c-table .number-cell {
text-align: right;
font-variant-numeric: tabular-nums;
font-family: var(--font-mono);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-primary);
letter-spacing: -0.01em;
}
/* Number Colors */
.c-num-good {
color: var(--success) !important;
font-weight: 800 !important;
}
.c-num-bad {
color: var(--error) !important;
font-weight: 800 !important;
}
/* Responsive */
@media (max-width: 600px) {
.c-shell {
padding: var(--space-2xl) var(--space-lg);
}
.c-header {
margin-bottom: var(--space-3xl);
}
.c-logo {
height: 40px;
margin-bottom: var(--space-lg);
}
.c-card {
padding: var(--space-xl) var(--space-lg);
}
.c-summary-grid {
grid-template-columns: 1fr;
}
.c-field-group {
flex-direction: column;
align-items: flex-start;
}
.c-field-label {
min-width: auto;
}
.c-btn-primary,
.c-btn-secondary {
width: 100%;
justify-content: center;
margin-right: 0;
margin-bottom: var(--space-sm);
}
.c-summary-value {
font-size: var(--font-size-3xl);
}
}
/* Scrollbar Styling */
.c-table-wrap::-webkit-scrollbar {
height: 10px;
}
.c-table-wrap::-webkit-scrollbar-track {
background: var(--bg-secondary);
border-radius: var(--radius-sm);
}
.c-table-wrap::-webkit-scrollbar-thumb {
background: var(--border-light);
border-radius: var(--radius-sm);
}
.c-table-wrap::-webkit-scrollbar-thumb:hover {
background: var(--text-tertiary);
}
/* Legacy compatibility - Updated to match Dashboard v1.5 */
.container { max-width: 1400px; margin: 0 auto; }
.step-section {
margin-bottom: var(--space-xl);
background: var(--bg-surface);
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
padding: var(--space-lg);
box-shadow: var(--shadow-card);
}
.lc-shell { max-width: 1400px; margin: 0 auto; }
.lc-card { background: var(--card-surface); }
.lc-header { text-align: center; }
.lc-title { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 700; }
.lc-subtitle { color: var(--text-secondary); }
.lc-step-title { font-size: var(--font-size-3xl); font-weight: 700; letter-spacing: -0.02em; }
.lc-grid { display: grid; gap: 24px; }
.lc-upload-card { background: var(--card-surface); }
.lc-upload-title { font-weight: 700; }
.lc-field-group { display: flex; gap: 10px; }
.lc-field-label { color: var(--text-primary); }
.lc-field-select { background: var(--input-surface); }
.lc-summary-grid { display: grid; gap: 20px; }
.lc-summary-card {
background: var(--card-surface);
border: 1px solid var(--card-border);
border-radius: var(--radius-lg);
padding: 24px;
box-shadow: var(--card-shadow);
transition: all var(--duration-slow) var(--ease-default);
}
.lc-summary-card:hover {
border-color: var(--astrovia-blue);
box-shadow: var(--shadow-subtle);
}
.lc-summary-label { color: var(--text-secondary); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.lc-summary-value { font-weight: 700; font-size: var(--font-size-4xl); letter-spacing: -0.02em; }
.lc-table-wrap { overflow-x: auto; }
.lc-table { width: 100%; }
.lc-num-good { color: var(--success); font-weight: 700; }
.lc-num-bad { color: var(--error); font-weight: 700; }
/* .upload-group background removed - now inherits from .c-upload-card */
/* ========================================
ENHANCED UPLOAD ZONES - Rates Mapper
======================================== */
.upload-zone-enhanced {
position: relative;
padding: var(--space-lg);
border: 2px solid var(--border-light);
border-radius: var(--radius-lg);
background: var(--bg-white);
transition: all var(--duration-standard) var(--ease-default);
}
.upload-zone-enhanced:hover {
border-color: var(--astrovia-blue);
box-shadow: 0 4px 20px rgba(99, 102, 241, 0.1);
}
.upload-zone-enhanced.has-file {
border-color: var(--astrovia-blue);
background: linear-gradient(135deg, rgba(99, 102, 241, 0.02), rgba(139, 92, 246, 0.04));
}
.upload-zone-enhanced.dragover {
border-color: var(--astrovia-blue);
background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
transform: scale(1.01);
}
/* Info Step Number - Colored numbered badges */
.info-step-number {
width: 24px;
height: 24px;
background: var(--astrovia-blue);
color: var(--text-on-brand);
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-sm);
font-weight: 700;
flex-shrink: 0;
}
.info-step-number.step-1 { background: var(--astrovia-blue); }
.info-step-number.step-2 { background: var(--astrovia-purple); }
.info-step-number.step-3 { background: var(--success); }
.info-step-number.step-4 { background: var(--warning); }
/* Priority Badges - Semantic colored styling */
.priority-badge {
padding: 2px 8px;
border-radius: var(--radius-xs);
font-size: var(--badge-font-size);
font-weight: var(--badge-font-weight);
letter-spacing: 0.02em;
}
.priority-badge.priority-critical {
background: var(--error);
color: var(--text-on-brand);
}
.priority-badge.priority-high {
background: var(--astrovia-blue);
color: var(--text-on-brand);
}
.priority-badge.priority-medium {
background: var(--text-secondary);
color: var(--text-inverse);
}
.priority-badge.priority-low {
background: var(--bg-secondary);
color: var(--text-secondary);
border: none;
}
.upload-zone-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
}
.upload-zone-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.upload-zone-icon.excel-icon {
background: var(--success-bg);
border: none;
color: var(--success);
}
.upload-zone-icon.pdf-icon {
background: var(--error-bg);
border: none;
color: var(--error-dark);
}
.upload-zone-info {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.upload-zone-title {
font-size: var(--font-size-md);
font-weight: 600;
color: var(--text-primary);
}
.upload-zone-subtitle {
font-size: var(--font-size-sm);
color: var(--text-tertiary);
}
.upload-zone-droparea {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 24px 16px;
background: var(--bg-secondary);
border: 2px dashed var(--border-light);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--duration-normal) var(--ease-default);
}
.upload-zone-droparea:hover {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.03), rgba(139, 92, 246, 0.05));
border-color: var(--astrovia-blue);
}
.upload-zone-droparea:hover .upload-zone-arrow {
color: var(--astrovia-blue);
}
.upload-zone-arrow {
color: var(--text-tertiary);
transition: all var(--duration-slow) var(--ease-default);
}
.upload-zone-text {
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.upload-zone-link {
color: var(--astrovia-blue);
font-weight: 600;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 2px;
}
.upload-zone-file-info {
margin-top: 12px;
}
.upload-zone-file-info:empty {
display: none;
}
.upload-zone-file-info .file-uploaded {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--bg-secondary);
border: none;
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
color: var(--text-primary);
font-weight: 500;
}
/* Spin animation for loading states */
.spin-animation {
animation: spin 1s linear infinite;
}
/* Process button states */
.process-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
border-radius: var(--radius-md);
border: none;
background: linear-gradient(135deg, var(--astrovia-blue), var(--astrovia-purple));
color: var(--text-on-brand);
font-size: var(--font-size-md);
font-weight: 600;
cursor: pointer;
transition: all var(--duration-slow) var(--ease-default);
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}
.process-btn:not(:disabled):hover {
box-shadow: 0 6px 24px rgba(99, 102, 241, 0.4);
}
.process-btn:disabled {
opacity: 1;
cursor: not-allowed;
transform: none;
box-shadow: none;
background: var(--chart-neutral);
color: var(--text-secondary);
}
.process-btn:disabled svg {
stroke: var(--chart-stroke);
}
.process-btn.reprocess-mode {
background: linear-gradient(135deg, var(--astrovia-blue), var(--astrovia-purple));
box-shadow: var(--shadow-btn-primary);
}
.process-btn.reprocess-mode:not(:disabled):hover {
box-shadow: var(--shadow-btn-primary-hover);
}
.process-btn.processing {
pointer-events: none;
opacity: 0.85;
}
/* Rates Mapper Filter Styles */
.rates-filter-select {
padding: 6px 12px;
border-radius: var(--radius-sm);
border: none;
background: var(--bg-white);
font-size: var(--font-size-sm);
font-weight: 500;
cursor: pointer;
transition: border-color var(--duration-normal), box-shadow var(--duration-normal);
}
.rates-filter-select:hover {
border-color: var(--border-accent);
}
.rates-filter-select:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.rates-filter-input {
padding: 6px 10px;
border-radius: var(--radius-sm);
border: none;
background: var(--bg-white);
font-size: var(--font-size-sm);
font-weight: 500;
width: 130px;
transition: border-color var(--duration-normal), box-shadow var(--duration-normal);
}
.rates-filter-input:hover {
border-color: var(--border-accent);
}
.rates-filter-input:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.rates-filter-clear {
padding: 6px;
border-radius: var(--radius-sm);
border: none;
background: var(--bg-white);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--duration-normal);
color: var(--text-tertiary);
}
.rates-filter-clear:hover {
border-color: var(--border-accent);
color: var(--text-secondary);
background: var(--bg-secondary);
}
/* Weight Filter Dropdown */
.weight-dropdown-container {
position: relative;
display: inline-block;
}
.weight-dropdown-trigger {
display: flex;
align-items: center;
gap: 8px;
min-width: 140px;
justify-content: space-between;
}
.weight-dropdown-trigger svg {
flex-shrink: 0;
transition: transform var(--duration-normal);
}
.weight-dropdown-container.open .weight-dropdown-trigger svg {
transform: rotate(180deg);
}
.weight-dropdown-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 200px;
max-height: 320px;
background: var(--bg-white);
border: none;
border-radius: var(--radius-sm);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
z-index: 1000;
display: none;
overflow: hidden;
}
.weight-dropdown-container.open .weight-dropdown-menu {
display: block;
}
.weight-dropdown-actions {
display: flex;
gap: 8px;
padding: 10px 12px;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-light);
}
.weight-action-btn {
flex: 1;
padding: 6px 10px;
font-size: var(--font-size-sm);
font-weight: 500;
border: none;
border-radius: var(--radius-sm);
background: var(--bg-white);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--duration-fast);
}
.weight-action-btn:hover {
background: var(--astrovia-blue);
color: var(--text-on-brand);
border-color: var(--astrovia-blue);
}
.weight-dropdown-divider {
height: 1px;
background: var(--border-light);
}
.weight-dropdown-list {
max-height: 240px;
overflow-y: auto;
padding: 8px 0;
}
.weight-dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
cursor: pointer;
transition: background-color var(--duration-fast);
font-size: var(--font-size-sm);
color: var(--text-primary);
}
.weight-dropdown-item:hover {
background: var(--bg-secondary);
}
.weight-dropdown-item input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--astrovia-blue);
cursor: pointer;
flex-shrink: 0;
}
.weight-dropdown-item label {
flex: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
.weight-dropdown-item .weight-count {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
background: var(--bg-secondary);
padding: 2px 6px;
border-radius: var(--radius-xs);
}
.weight-dropdown-item.excluded {
opacity: 0.5;
}
.weight-dropdown-item.excluded label span:first-child {
text-decoration: line-through;
color: var(--text-tertiary);
}
/* Date Preset Buttons */
.date-preset-btn {
padding: 8px 12px;
border: none;
border-radius: var(--radius-sm);
background: var(--bg-white);
color: var(--text-secondary);
font-size: var(--font-size-sm);
font-weight: 500;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-default);
}
.date-preset-btn:hover {
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
background: var(--astrovia-blue-subtle);
}
.date-preset-btn:active {
transform: scale(0.98);
}
/* Date Range Chip */
.date-range-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px 4px 12px;
background: linear-gradient(135deg, var(--astrovia-blue-subtle) 0%, var(--astrovia-blue-subtle) 100%);
border: 1px solid var(--astrovia-blue-border);
border-radius: var(--radius-lg);
color: var(--astrovia-blue);
}
.date-chip-edit,
.date-chip-close {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: none;
border-radius: var(--radius-full);
background: transparent;
color: var(--astrovia-blue);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
}
.date-chip-edit:hover {
background: var(--astrovia-blue-border);
}
.date-chip-close:hover {
background: rgba(239, 68, 68, 0.15);
color: var(--error);
}
/* Weight Filter Styles */
.weight-chips-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.weight-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
border: none;
border-radius: var(--radius-lg);
background: var(--bg-white);
color: var(--text-primary);
font-size: var(--font-size-sm);
font-weight: 500;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-default);
}
.weight-chip:hover {
border-color: var(--astrovia-blue);
background: var(--astrovia-blue-subtle);
}
.weight-chip.excluded {
background: rgba(239, 68, 68, 0.08);
border-color: rgba(239, 68, 68, 0.3);
color: var(--text-tertiary);
text-decoration: line-through;
}
.weight-chip.excluded:hover {
background: rgba(16, 185, 129, 0.08);
border-color: rgba(16, 185, 129, 0.3);
color: var(--success);
text-decoration: none;
}
.weight-chip-value {
font-weight: 600;
}
.weight-chip-count {
font-size: var(--font-size-sm);
color: var(--text-tertiary);
}
.weight-chip.excluded .weight-chip-count {
color: var(--text-tertiary);
}
.weight-chip-excluded-icon {
font-size: var(--font-size-xs);
color: var(--error);
margin-left: 2px;
}
.weight-filter-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: none;
border-radius: var(--radius-sm);
background: var(--bg-white);
color: var(--text-secondary);
font-size: var(--font-size-sm);
font-weight: 500;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-default);
}
.weight-filter-btn:hover {
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
background: var(--astrovia-blue-subtle);
}
/* Reset button */
#rates-reset-btn {
display: none;
}
#rates-reset-btn:hover {
background: var(--bg-secondary);
border-color: var(--error);
color: var(--error);
}
#rates-reset-btn.visible {
display: flex;
}
.mapping-group {
display: flex;
gap: 16px;
align-items: center;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-light);
}
.mapping-group:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.stats-grid { display: grid; gap: 20px; }
/* stat-item is used standalone or with c-summary-card */
/* FIXED Dec 2025: Removed gradient background to prevent "pill disease" inside cards */
.stat-item:not(.c-summary-card) {
background: transparent;
border: none;
border-radius: 0;
padding: var(--space-xl);
box-shadow: none;
transition: all var(--duration-normal) var(--ease-default);
position: relative;
overflow: hidden;
}
/* DISABLED: ::before pseudo-element that created pill highlight */
.stat-item:not(.c-summary-card)::before {
display: none;
}
/* Hover state - no pill effect */
.stat-item:not(.c-summary-card):hover {
/* No border/shadow changes when nested */
}
.stat-label, .c-summary-label {
color: var(--text-secondary);
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
margin-bottom: var(--space-sm);
}
.stat-value, .c-summary-value {
font-variant-numeric: tabular-nums;
font-weight: 700;
font-size: var(--font-size-2xl);
letter-spacing: -0.025em;
color: var(--text-primary);
margin-bottom: var(--space-xs);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.c-summary-value-compact {
font-weight: 700;
font-size: var(--font-size-xl);
letter-spacing: -0.02em;
color: var(--text-primary);
margin-bottom: var(--space-xs);
font-variant-numeric: tabular-nums;
}
.c-summary-subvalue {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-xs);
font-variant-numeric: tabular-nums;
}
.c-summary-value-suffix {
font-size: var(--font-size-sm);
font-weight: 400;
color: var(--text-tertiary);
}
.c-summary-hint {
font-size: var(--font-size-sm);
color: var(--text-tertiary);
margin-top: var(--space-xs);
line-height: 1.4;
}
.table-wrapper { overflow-x: auto; }
.btn-primary {
background: var(--astrovia-blue);
color: var(--text-on-brand);
padding: var(--space-sm) var(--space-lg);
border: none;
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
font-weight: 600;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
}
.btn-primary:hover {
background: var(--astrovia-blue-hover);
box-shadow: var(--shadow-btn-primary-hover);
}
.btn-secondary {
background: var(--bg-white);
color: var(--text-secondary);
padding: 10px 20px;
border: none;
border-radius: var(--radius-sm);
font-size: var(--font-size-base);
font-weight: 500;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-default);
}
.btn-secondary:hover {
border-color: var(--text-tertiary);
color: var(--text-primary);
background: var(--bg-secondary);
}
.positive { color: var(--success); font-weight: 700; }
.negative { color: var(--error); font-weight: 700; }
/* ========================================
LOGIN SCREEN
======================================== */
.login-screen {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-height: 100vh;
display: none; /* Hidden by default - only shown on /login route */
align-items: center;
justify-content: center;
background: var(--bg-secondary);
padding: 20px;
z-index: 9999;
}
.login-container {
background: var(--bg-primary);
border: none;
border-radius: var(--radius-lg);
padding: 48px;
max-width: 420px;
width: 100%;
box-shadow: var(--shadow-xl);
text-align: center;
}
.login-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 24px;
}
.login-logo-img {
height: 36px;
width: auto;
}
.login-logo-divider {
width: 1px;
height: 24px;
background: var(--border-light);
}
.login-logo-text {
font-size: var(--font-size-xl);
font-weight: 600;
color: var(--text-tertiary);
letter-spacing: -0.01em;
}
.login-title {
font-size: var(--font-size-3xl);
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
letter-spacing: 0.01em;
}
.login-subtitle {
font-size: var(--font-size-lg);
color: var(--text-secondary);
margin-bottom: 32px;
}
.login-form {
text-align: left;
}
.login-field {
margin-bottom: 20px;
}
.login-field label {
display: block;
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.login-field input {
width: 100%;
padding: var(--space-md);
border: none;
border-radius: var(--radius-md);
font-size: var(--font-size-base);
color: var(--text-primary);
background: var(--bg-surface);
transition: all var(--duration-normal);
}
.login-field input:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-md);
}
.login-error {
background: var(--error-border);
color: var(--error-dark);
padding: 12px 16px;
border-radius: var(--radius-md);
font-size: var(--font-size-base);
margin-bottom: 20px;
text-align: center;
}
.login-btn {
width: 100%;
padding: 14px 24px;
background: var(--astrovia-blue);
color: var(--text-on-brand);
border: none;
border-radius: var(--radius-md);
font-size: var(--font-size-lg);
font-weight: 700;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-default);
}
.login-btn:hover {
background: var(--astrovia-blue-hover);
box-shadow: var(--shadow-lg);
}
.login-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Note: form-group, form-label, form-input, select.form-input
moved to canonical location at line ~2460 */
/* Flag-enhanced selects */
select.form-input--with-flag {
font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', -apple-system, BlinkMacSystemFont, sans-serif;
}
select.form-input--with-flag option {
font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
padding: var(--space-xs) var(--space-sm);
}
.login-spinner {
display: inline-flex;
align-items: center;
}
.spinner-icon {
animation: spin 1s linear infinite;
}
/* Logout Button */
.header-content {
text-align: center;
}
.logout-btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
background: transparent;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
color: var(--text-tertiary);
font-size: var(--font-size-xs);
font-weight: 500;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
white-space: nowrap;
letter-spacing: -0.01em;
}
.logout-btn:hover {
background: var(--error-subtle);
border-color: var(--error-border-subtle);
color: var(--error);
}
.logout-btn svg {
flex-shrink: 0;
opacity: 0.6;
transition: opacity var(--duration-fast) var(--ease-default);
}
.logout-btn:hover svg {
opacity: 1;
}
@media (max-width: 720px) {
.dashboard-header {
flex-wrap: wrap;
gap: var(--space-sm);
justify-content: center;
padding: var(--space-sm) var(--space-md);
}
.dashboard-title {
position: relative;
left: auto;
transform: none;
order: -1;
width: 100%;
justify-content: center;
}
.back-to-home,
.logout-btn {
font-size: var(--font-size-xs);
padding: var(--space-xs) var(--space-sm);
}
.dashboard-logo-img {
height: 20px;
}
.dashboard-title-divider {
height: 14px;
}
.dashboard-title-text {
font-size: var(--font-size-xs);
}
}
.login-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-secondary);
padding: 20px;
}
.login-card {
background: var(--bg-primary);
border: none;
border-radius: var(--radius-lg);
padding: 48px;
max-width: 460px;
width: 100%;
box-shadow: var(--shadow-xl);
}
.login-header {
text-align: center;
margin-bottom: 32px;
}
/* ========================================
TOOL SELECTOR BUTTONS
======================================== */
.tool-selector-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 48px;
}
@media (max-height: 700px) {
.tool-selector-grid {
margin-bottom: 32px;
}
.c-header {
margin-bottom: 48px !important;
}
.c-shell {
padding-top: 32px !important;
}
}
@media (min-width: 720px) {
.tool-selector-grid {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
}
.tool-selector-btn {
display: flex;
align-items: center;
gap: 24px;
padding: 32px 28px;
padding-top: 40px;
background: var(--bg-white);
border: 1px solid var(--border-lighter);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all var(--duration-slow) var(--ease-default);
box-shadow: 0 1px 3px var(--hover-overlay), 0 4px 12px rgba(0, 0, 0, 0.03);
text-align: left;
width: 100%;
position: relative;
overflow: hidden;
}
.tool-selector-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--info-gradient);
opacity: 0;
transition: opacity var(--duration-normal);
}
.tool-selector-btn:hover {
border-color: var(--astrovia-blue-border);
box-shadow: 0 8px 24px var(--astrovia-blue-subtle), 0 4px 12px rgba(0, 0, 0, 0.06);
}
.tool-selector-btn:hover::before {
opacity: 0.3;
}
.tool-selector-btn.active {
border-color: var(--border-accent);
background: var(--bg-white);
box-shadow: var(--shadow-btn-primary-hover);
}
.tool-selector-btn.active::before {
opacity: 0.4;
}
.tool-selector-btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring-lg), 0 4px 12px rgba(0, 0, 0, 0.06);
}
.tool-badge-corner {
position: absolute;
top: 14px;
right: 16px;
padding: 4px 10px;
font-size: var(--font-size-xs);
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
border-radius: var(--radius-full);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(236, 242, 255, 0.95));
color: var(--astrovia-blue);
border: 1px solid var(--icon-chip-border);
box-shadow: 0 2px 8px var(--astrovia-blue-subtle);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 2;
}
.tool-icon-badge {
width: 52px;
height: 52px;
min-width: 52px;
display: flex;
align-items: center;
justify-content: center;
background: var(--info-bg);
border-radius: var(--radius-md);
border: none;
box-shadow: 0 2px 8px var(--astrovia-blue-subtle);
transition: all var(--duration-slow) var(--ease-default);
}
.tool-selector-btn:hover .tool-icon-badge {
background: var(--icon-chip-border);
transform: scale(1.04);
box-shadow: 0 4px 16px var(--icon-chip-border);
}
.tool-icon {
width: 26px;
height: 26px;
color: var(--astrovia-blue);
opacity: 0.9;
transition: all var(--duration-normal) var(--ease-default);
}
.tool-selector-btn:hover .tool-icon {
transform: scale(1.05);
opacity: 1;
}
.tool-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
padding-right: 8px;
}
.tool-title {
font-size: var(--font-size-xl);
font-weight: 600;
color: rgba(29, 29, 31, 0.92);
letter-spacing: -0.01em;
line-height: 1.3;
}
.tool-audience-pill {
display: inline-flex;
align-items: center;
padding: 3px 10px;
font-size: var(--font-size-xs);
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
border-radius: var(--radius-full);
white-space: nowrap;
}
.tool-audience-astrovia-os {
background: var(--info-gradient);
color: var(--astrovia-blue);
border: none;
}
.tool-status-pill {
display: inline-flex;
align-items: center;
padding: 3px 10px;
font-size: var(--font-size-xs);
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
border-radius: var(--radius-full);
white-space: nowrap;
}
.tool-status-dev {
background: var(--warning-bg);
color: var(--warning);
border: none;
}
/* Privacy Banner */
.privacy-banner {
display: flex;
align-items: flex-start;
gap: 14px;
background: var(--info-bg);
border: none;
border-left: 3px solid var(--info-border-strong);
border-radius: var(--radius-md);
padding: 16px 20px;
margin-bottom: 32px;
}
.privacy-banner-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--astrovia-blue);
margin-top: 1px;
}
.privacy-banner-content {
display: flex;
flex-direction: column;
gap: 4px;
}
.privacy-banner-title {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.privacy-banner-text {
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: 1.6;
}
.tool-desc {
font-size: var(--font-size-sm);
color: rgba(107, 107, 112, 0.85);
line-height: 1.5;
font-weight: 400;
letter-spacing: 0.01em;
}
.tool-chevron {
width: 22px;
height: 22px;
min-width: 22px;
color: rgba(107, 107, 112, 0.5);
transition: all var(--duration-slow) var(--ease-default);
opacity: 0.7;
}
.tool-selector-btn:hover .tool-chevron {
color: var(--astrovia-blue);
transform: translateX(5px);
opacity: 1;
}
.tool-selector-btn.active .tool-chevron {
transform: rotate(90deg);
color: var(--astrovia-blue);
opacity: 1;
}
/* Tool Content Sections */
.tool-content {
animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.tool-header {
text-align: center;
margin-bottom: 40px;
padding-bottom: 32px;
border-bottom: 2px solid var(--border-light);
}
.tool-content-title {
font-size: var(--font-size-4xl);
font-weight: 700;
color: var(--text-primary);
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.tool-content-desc {
font-size: var(--font-size-xl);
color: var(--text-secondary);
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
}
/* ===================================
DUTY & TAX ESTIMATOR STYLES
=================================== */
.duty-tax-data-notice {
display: flex;
align-items: center;
gap: 10px;
background: var(--info-bg);
border: none;
border-left: 3px solid var(--info-border-strong);
border-radius: var(--radius-md);
padding: 14px 20px;
margin-bottom: 28px;
font-size: var(--font-size-base);
color: var(--text-secondary);
}
.duty-tax-data-notice svg {
flex-shrink: 0;
color: var(--astrovia-blue);
}
.duty-tax-input-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
}
@media (max-width: 900px) {
.duty-tax-input-grid {
grid-template-columns: 1fr;
}
}
.duty-tax-country-group {
grid-column: span 1;
}
.duty-tax-country-search-wrapper {
position: relative;
}
.duty-tax-country-input {
width: 100%;
}
.duty-tax-country-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: 280px;
overflow-y: auto;
background: var(--bg-white);
border: none;
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
z-index: 100;
margin-top: 4px;
}
.duty-tax-dropdown-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
cursor: pointer;
transition: background var(--duration-fast);
}
.duty-tax-dropdown-item:hover {
background: var(--bg-primary);
}
.duty-tax-dropdown-flag {
font-size: var(--font-size-2xl);
}
.duty-tax-dropdown-name {
flex: 1;
font-weight: 500;
color: var(--text-primary);
}
.duty-tax-dropdown-currency {
font-size: var(--font-size-sm);
color: var(--text-tertiary);
background: var(--badge-bg);
padding: 4px 8px;
border-radius: var(--radius-xs);
}
.duty-tax-dropdown-empty {
padding: 16px;
text-align: center;
color: var(--text-tertiary);
}
.duty-tax-selected-country {
margin-top: 10px;
}
.duty-tax-selected-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--badge-bg);
border: none;
border-radius: var(--radius-md);
padding: 10px 14px;
}
.duty-tax-selected-flag {
font-size: var(--font-size-2xl);
}
.duty-tax-selected-name {
font-weight: 600;
color: var(--text-primary);
}
.duty-tax-selected-currency {
font-size: var(--font-size-sm);
color: var(--astrovia-blue);
font-weight: 600;
}
.duty-tax-selected-remove {
background: none;
border: none;
font-size: var(--font-size-2xl);
color: var(--text-tertiary);
cursor: pointer;
padding: 0 4px;
line-height: 1;
transition: color var(--duration-fast);
}
.duty-tax-selected-remove:hover {
color: var(--error);
}
.duty-tax-toggle-group {
display: flex;
gap: 0;
border: none;
border-radius: var(--radius-md);
overflow: hidden;
}
.duty-tax-toggle-btn {
flex: 1;
padding: 12px 16px;
background: var(--bg-white);
border: none;
font-size: var(--font-size-md);
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: all var(--duration-normal);
}
.duty-tax-toggle-btn:first-child {
border-right: 1px solid var(--border-light);
}
.duty-tax-toggle-btn.active {
background: var(--astrovia-blue);
color: var(--text-on-brand);
}
.duty-tax-toggle-btn:hover:not(.active) {
background: var(--bg-primary);
}
/* Country Grid */
.duty-tax-country-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
.duty-tax-country-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 16px 12px;
background: var(--bg-white);
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--duration-normal);
}
.duty-tax-country-card:hover {
border-color: var(--astrovia-blue);
box-shadow: var(--shadow-sm);
}
.duty-tax-country-flag {
font-size: var(--font-size-3xl);
}
.duty-tax-country-name {
font-weight: 600;
font-size: var(--font-size-base);
color: var(--text-primary);
text-align: center;
}
.duty-tax-country-vat {
font-size: var(--font-size-sm);
color: var(--text-tertiary);
}
/* Results Styles */
.duty-tax-results-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-lighter);
}
.duty-tax-results-country {
display: flex;
align-items: center;
gap: 16px;
}
.duty-tax-results-flag {
font-size: var(--font-size-4xl);
}
.duty-tax-results-country-name {
margin: 0 0 4px 0;
font-size: var(--font-size-3xl);
font-weight: 700;
color: var(--text-primary);
}
.duty-tax-results-regime {
font-size: var(--font-size-sm);
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.duty-tax-results-order-value {
text-align: right;
}
.duty-tax-results-label {
display: block;
font-size: var(--font-size-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-tertiary);
margin-bottom: 4px;
}
.duty-tax-results-value {
display: block;
font-size: var(--font-size-3xl);
font-weight: 700;
color: var(--text-primary);
}
.duty-tax-results-aud {
display: block;
font-size: var(--font-size-base);
color: var(--text-secondary);
margin-top: 2px;
}
.duty-tax-threshold-info {
display: flex;
align-items: center;
gap: 10px;
background: var(--success-tint);
border: none;
border-radius: var(--radius-md);
padding: 14px 18px;
margin-bottom: 24px;
font-size: var(--font-size-md);
color: var(--text-primary);
}
.duty-tax-threshold-info svg {
color: var(--success);
flex-shrink: 0;
}
.duty-tax-results-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 24px;
}
@media (max-width: 600px) {
.duty-tax-results-grid {
grid-template-columns: 1fr;
}
}
.duty-tax-result-card {
background: var(--bg-white);
border: 2px solid var(--border-light);
border-radius: var(--radius-lg);
overflow: hidden;
}
.duty-tax-result-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: transparent; /* FORBIDDEN: No backgrounds inside cards */
border-bottom: 1px solid var(--border-lighter);
}
.duty-tax-result-title {
font-weight: 600;
font-size: var(--font-size-md);
color: var(--text-primary);
}
.duty-tax-result-status {
font-size: var(--font-size-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 4px 10px;
border-radius: var(--radius-xs);
}
.duty-tax-status-applies {
background: var(--error-tint);
color: var(--error-dark);
}
.duty-tax-status-exempt {
background: var(--success-tint);
color: var(--success);
}
.duty-tax-result-body {
padding: 20px;
text-align: center;
}
.duty-tax-result-rate {
font-size: var(--font-size-4xl);
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
}
.duty-tax-result-amount {
font-size: var(--font-size-xl);
font-weight: 600;
color: var(--astrovia-blue);
margin-bottom: 8px;
}
.duty-tax-result-note {
font-size: var(--font-size-sm);
color: var(--text-tertiary);
}
.duty-tax-total-card {
background: var(--success-bg);
border: 2px solid var(--success-border);
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: 24px;
}
.duty-tax-total-header {
padding: 16px 24px;
background: transparent; /* FORBIDDEN: No backgrounds inside cards */
border-bottom: 1px solid var(--success-border);
font-weight: 600;
color: var(--text-primary);
}
.duty-tax-total-body {
padding: 24px;
text-align: center;
}
.duty-tax-total-range {
font-size: var(--font-size-4xl);
font-weight: 700;
color: var(--text-primary);
margin-bottom: 12px;
}
.duty-tax-total-breakdown {
font-size: var(--font-size-md);
color: var(--text-secondary);
}
.duty-tax-notes-card {
background: var(--bg-secondary);
border: none;
border-radius: var(--radius-md);
overflow: hidden;
}
.duty-tax-notes-header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
background: transparent; /* FORBIDDEN: No backgrounds inside cards */
border-bottom: 1px solid var(--border-light);
font-weight: 600;
font-size: var(--font-size-base);
color: var(--text-primary);
}
.duty-tax-notes-header svg {
color: var(--astrovia-blue);
}
.duty-tax-notes-body {
padding: 16px 20px;
font-size: var(--font-size-md);
color: var(--text-secondary);
line-height: 1.6;
}
.duty-tax-currency-banner {
display: flex;
align-items: center;
gap: 10px;
background: var(--info-bg);
border: none;
border-left: 3px solid var(--info-border-strong);
border-radius: var(--radius-md);
padding: 14px 20px;
margin-bottom: 20px;
font-size: var(--font-size-base);
color: var(--text-secondary);
}
.duty-tax-currency-banner svg {
flex-shrink: 0;
color: var(--astrovia-blue);
}
/* Duty Tax Wizard - Apple-level Multi-Step UI */
.duty-tax-wizard-progress {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
padding: 24px 0;
margin-bottom: 24px;
}
.duty-tax-wizard-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
position: relative;
}
.duty-tax-wizard-step-number {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--bg-tertiary);
border: 2px solid var(--border-light);
font-weight: 600;
font-size: var(--font-size-md);
color: var(--text-tertiary);
transition: all var(--duration-slow) var(--ease-default);
}
.duty-tax-wizard-step.active .duty-tax-wizard-step-number,
.duty-tax-wizard-step.completed .duty-tax-wizard-step-number {
background: var(--astrovia-blue);
border-color: var(--astrovia-blue);
color: var(--text-on-brand);
}
.duty-tax-wizard-step.completed .duty-tax-wizard-step-number::after {
content: '\2713';
}
.duty-tax-wizard-step-label {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-tertiary);
transition: color var(--duration-slow) var(--ease-default);
}
.duty-tax-wizard-step.active .duty-tax-wizard-step-label,
.duty-tax-wizard-step.completed .duty-tax-wizard-step-label {
color: var(--astrovia-blue);
font-weight: 600;
}
.duty-tax-wizard-step-connector {
width: 60px;
height: 2px;
background: var(--border-light);
margin: 0 8px;
margin-bottom: 24px;
transition: background var(--duration-slow) var(--ease-default);
}
.duty-tax-wizard-step.completed + .duty-tax-wizard-step-connector {
background: var(--astrovia-blue);
}
@media (max-width: 600px) {
.duty-tax-wizard-step-connector {
width: 24px;
}
.duty-tax-wizard-step-label {
font-size: var(--font-size-xs);
}
.duty-tax-wizard-step-number {
width: 28px;
height: 28px;
font-size: var(--font-size-sm);
}
}
.duty-tax-wizard-panel {
display: none;
}
.duty-tax-wizard-panel.active {
display: block;
animation: dutyTaxFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes dutyTaxFadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.duty-tax-step-header {
margin-bottom: 24px;
}
.duty-tax-step-subtitle {
font-size: var(--font-size-md);
color: var(--text-tertiary);
margin: 8px 0 0 0;
}
.duty-tax-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.duty-tax-form-full {
grid-column: 1 / -1;
}
@media (max-width: 768px) {
.duty-tax-form-grid {
grid-template-columns: 1fr;
}
}
.duty-tax-step-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--border-lighter);
}
/* HS Code Input with Lookup Button */
.duty-tax-hs-input-wrapper {
display: flex;
gap: 8px;
}
.duty-tax-hs-input-wrapper .form-input {
flex: 1;
}
.duty-tax-hs-lookup-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--bg-secondary);
border: none;
border-radius: var(--radius-md);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--duration-normal) var(--ease-default);
}
.duty-tax-hs-lookup-btn:hover {
background: var(--astrovia-blue);
border-color: var(--astrovia-blue);
color: var(--text-on-brand);
}
.duty-tax-hs-result {
margin-top: 12px;
padding: 12px 16px;
background: var(--success-tint);
border: none;
border-radius: var(--radius-md);
font-size: var(--font-size-base);
}
/* Currency Input */
.duty-tax-currency-input {
display: flex;
align-items: stretch;
}
.duty-tax-currency-select {
padding: 10px 12px;
background: var(--bg-tertiary);
border: none;
border-right: none;
border-radius: var(--radius-md) 0 0 var(--radius-md);
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
cursor: pointer;
}
.duty-tax-currency-display {
display: flex;
align-items: center;
padding: 0 12px;
background: var(--bg-tertiary);
border: none;
border-right: none;
border-radius: var(--radius-md) 0 0 var(--radius-md);
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-secondary);
}
.duty-tax-currency-input .form-input {
border-radius: 0 var(--radius-md) var(--radius-md) 0;
flex: 1;
}
/* CIF Preview Card */
.duty-tax-cif-preview {
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
border: none;
border-radius: var(--radius-lg);
padding: 20px 24px;
}
.duty-tax-cif-title {
font-size: var(--font-size-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-tertiary);
margin-bottom: 16px;
}
.duty-tax-cif-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 768px) {
.duty-tax-cif-grid {
grid-template-columns: 1fr 1fr;
}
}
.duty-tax-cif-item {
text-align: center;
}
.duty-tax-cif-label {
display: block;
font-size: var(--font-size-sm);
color: var(--text-tertiary);
margin-bottom: 4px;
}
.duty-tax-cif-value {
display: block;
font-size: var(--font-size-xl);
font-weight: 600;
color: var(--text-primary);
}
.duty-tax-cif-total {
background: var(--bg-white);
border-radius: var(--radius-md);
padding: 12px;
margin: -8px;
}
.duty-tax-cif-total .duty-tax-cif-value {
color: var(--astrovia-blue);
font-size: var(--font-size-2xl);
}
.duty-tax-cif-note {
font-size: var(--font-size-sm);
color: var(--text-tertiary);
margin-top: 16px;
text-align: center;
font-style: italic;
}
/* Top Markets Quick Select */
.duty-tax-top-markets {
margin-bottom: 24px;
}
.duty-tax-top-markets-title {
font-size: var(--font-size-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-tertiary);
margin-bottom: 12px;
}
.duty-tax-top-markets-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
@media (max-width: 768px) {
.duty-tax-top-markets-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.duty-tax-market-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--bg-white);
border: 2px solid var(--border-light);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--duration-normal) var(--ease-default);
}
.duty-tax-market-btn:hover {
border-color: var(--astrovia-blue);
box-shadow: var(--shadow-sm);
}
.duty-tax-market-btn.active {
border-color: var(--astrovia-blue);
background: linear-gradient(135deg, rgba(79, 109, 245, 0.05) 0%, rgba(79, 109, 245, 0.1) 100%);
}
.duty-tax-market-flag {
font-size: var(--font-size-sm);
font-weight: 700;
color: var(--text-secondary);
background: var(--bg-tertiary);
padding: 4px 8px;
border-radius: var(--radius-xs);
}
.duty-tax-market-name {
font-size: var(--font-size-md);
font-weight: 500;
color: var(--text-primary);
}
/* Country Search Section */
.duty-tax-country-search-section {
margin-top: 24px;
}
.duty-tax-country-search-divider {
text-align: center;
margin-bottom: 16px;
position: relative;
}
.duty-tax-country-search-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: var(--border-light);
}
.duty-tax-country-search-divider span {
background: var(--bg-white);
padding: 0 16px;
font-size: var(--font-size-sm);
color: var(--text-tertiary);
position: relative;
}
.duty-tax-country-search-section .duty-tax-country-search-wrapper {
position: relative;
}
.duty-tax-search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--text-tertiary);
pointer-events: none;
z-index: 1;
}
.duty-tax-country-search-section .duty-tax-country-input {
padding-left: 44px;
}
/* Country Rules Preview */
.duty-tax-country-rules {
margin-top: 24px;
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
border: none;
border-radius: var(--radius-lg);
padding: 24px;
animation: dutyTaxFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.duty-tax-rules-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-light);
}
.duty-tax-rules-flag {
font-size: var(--font-size-4xl);
}
.duty-tax-rules-name {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--text-primary);
}
.duty-tax-rules-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 768px) {
.duty-tax-rules-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.duty-tax-rule-card {
background: var(--bg-white);
border-radius: var(--radius-md);
padding: 16px;
text-align: center;
}
.duty-tax-rule-label {
font-size: var(--font-size-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-tertiary);
margin-bottom: 8px;
}
.duty-tax-rule-value {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--astrovia-blue);
}
.duty-tax-rules-notes {
margin-top: 16px;
padding: 12px 16px;
background: var(--info-bg);
border-radius: var(--radius-md);
font-size: var(--font-size-base);
color: var(--text-secondary);
}
/* Reference Section Toggle */
.duty-tax-reference-section {
background: var(--bg-secondary);
border: none;
border-radius: var(--radius-md);
overflow: hidden;
}
.duty-tax-reference-toggle {
display: flex;
align-items: center;
gap: 8px;
padding: 16px 20px;
font-size: var(--font-size-md);
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
list-style: none;
transition: color var(--duration-normal) var(--ease-default);
}
.duty-tax-reference-toggle::-webkit-details-marker {
display: none;
}
.duty-tax-reference-toggle:hover {
color: var(--astrovia-blue);
}
.duty-tax-reference-toggle svg {
transition: transform var(--duration-normal) var(--ease-default);
}
.duty-tax-reference-section[open] .duty-tax-reference-toggle svg {
transform: rotate(180deg);
}
/* Results Step - Enhanced */
.duty-tax-result-summary {
background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 100%);
border-radius: var(--radius-lg);
padding: 32px;
color: var(--text-on-brand);
margin-bottom: 24px;
}
.duty-tax-result-summary-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
}
.duty-tax-result-country-info {
display: flex;
align-items: center;
gap: 16px;
}
.duty-tax-result-flag {
font-size: var(--font-size-4xl);
}
.duty-tax-result-country-name {
font-size: var(--font-size-3xl);
font-weight: 700;
margin: 0;
}
.duty-tax-result-country-subtitle {
font-size: var(--font-size-base);
opacity: 0.8;
margin-top: 4px;
}
.duty-tax-result-total {
text-align: right;
}
.duty-tax-result-total-label {
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.8;
margin-bottom: 4px;
}
.duty-tax-result-total-value {
font-size: var(--font-size-4xl);
font-weight: 800;
}
.duty-tax-result-breakdown-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 768px) {
.duty-tax-result-breakdown-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.duty-tax-result-breakdown-item {
background: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-md);
padding: 16px;
text-align: center;
}
.duty-tax-result-breakdown-label {
font-size: var(--font-size-sm);
opacity: 0.8;
margin-bottom: 4px;
}
.duty-tax-result-breakdown-value {
font-size: var(--font-size-2xl);
font-weight: 700;
}
/* Calculation Details Card */
.duty-tax-calculation-details {
background: var(--bg-white);
border: none;
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: 24px;
}
.duty-tax-calculation-header {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 24px;
background: transparent; /* FORBIDDEN: No backgrounds inside cards */
border-bottom: 1px solid var(--border-light);
font-weight: 600;
font-size: var(--font-size-md);
color: var(--text-primary);
}
.duty-tax-calculation-body {
padding: 24px;
}
.duty-tax-calculation-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--border-lighter);
}
.duty-tax-calculation-row:last-child {
border-bottom: none;
}
.duty-tax-calculation-label {
font-size: var(--font-size-md);
color: var(--text-secondary);
}
.duty-tax-calculation-value {
font-size: var(--font-size-md);
font-weight: 600;
color: var(--text-primary);
}
.duty-tax-calculation-row.total {
margin-top: 16px;
padding-top: 16px;
border-top: 2px solid var(--border-light);
border-bottom: none;
}
.duty-tax-calculation-row.total .duty-tax-calculation-label {
font-weight: 700;
color: var(--text-primary);
}
.duty-tax-calculation-row.total .duty-tax-calculation-value {
font-size: var(--font-size-2xl);
color: var(--astrovia-blue);
}
/* ========================================
ADMIN & ACCOUNT PANELS - Apple-level polish
======================================== */
.admin-panel,
.account-panel {
background: var(--bg-surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
border: 1px solid var(--border-card);
margin-bottom: var(--space-xl);
overflow: hidden;
}
.admin-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-lg) var(--space-xl);
background: transparent;
border-bottom: 1px solid transparent;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-default);
user-select: none;
position: relative;
}
.admin-panel-tagline {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.015em;
white-space: nowrap;
}
.admin-panel-controls {
display: flex;
align-items: center;
gap: 10px;
margin-left: auto;
}
.account-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-lg) var(--space-xl);
background: transparent;
border-bottom: 1px solid transparent;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-default);
user-select: none;
}
/* Hover state: subtle text/icon shift only, NO background change */
.admin-panel-header:hover,
.account-panel-header:hover {
background: transparent;
}
.admin-panel-header:hover .admin-panel-title,
.account-panel-header:hover .account-panel-title {
color: var(--astrovia-blue);
}
.admin-panel-header:hover .admin-toggle-btn,
.account-panel-header:hover .account-toggle-btn {
color: var(--astrovia-blue);
}
.admin-panel-header.expanded,
.account-panel-header.expanded {
border-bottom-color: var(--border-subtle);
}
.admin-panel-title {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.015em;
flex-wrap: wrap;
text-align: center;
}
.account-panel-title {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.01em;
}
.admin-panel-badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
font-size: var(--font-size-xs);
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
border-radius: var(--radius-full);
background: var(--info-gradient);
color: var(--astrovia-blue);
border: none;
white-space: nowrap;
}
.admin-panel-title svg,
.account-panel-title svg {
color: var(--astrovia-blue);
opacity: 0.85;
}
.admin-toggle-btn,
.account-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
padding: 6px;
border-radius: var(--radius-sm);
color: var(--text-tertiary);
transition: all var(--duration-normal) var(--ease-default);
}
.admin-toggle-btn svg,
.account-toggle-btn svg {
transition: transform var(--duration-normal) var(--ease-default);
}
.admin-toggle-btn:hover,
.account-toggle-btn:hover {
background: var(--bg-tertiary);
color: var(--text-secondary);
}
.admin-toggle-btn.expanded svg,
.account-toggle-btn.expanded svg {
transform: rotate(180deg);
}
.admin-panel-content,
.account-panel-content {
padding: var(--space-xl);
background: var(--bg-surface);
}
.admin-section {
margin-bottom: var(--space-2xl);
}
.admin-section:last-child {
margin-bottom: 0;
}
.admin-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-lg);
}
.admin-section-header h3 {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.admin-section-actions {
display: flex;
gap: var(--space-sm);
}
/* Admin User View Selector */
.admin-user-view-selector {
margin-bottom: var(--space-xl);
}
.user-view-selector-container {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
background: var(--info-bg);
border: none;
border-radius: var(--radius-md);
}
.user-view-selector-label {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--font-size-base);
font-weight: 500;
color: var(--astrovia-blue);
}
.user-view-selector-label svg {
stroke: var(--astrovia-blue);
}
.viewing-as-badge {
margin-left: auto;
font-size: var(--font-size-xs);
color: var(--text-secondary);
padding: var(--space-xs) var(--space-md);
background: var(--bg-surface);
border-radius: var(--radius-sm);
border: 1px solid var(--border-card);
}
.viewing-as-badge strong {
color: var(--astrovia-blue);
font-weight: 600;
}
/* Tax OS Tool Collapsible Sections */
.tax-os-tool-details {
width: 100%;
}
.tax-os-tool-summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
cursor: pointer;
list-style: none;
user-select: none;
border-bottom: 1px solid var(--border-lighter);
transition: background-color var(--duration-fast) var(--ease-default);
}
.tax-os-tool-summary::-webkit-details-marker {
display: none;
}
.tax-os-tool-summary:hover {
background-color: var(--info-bg);
}
.tax-os-tool-summary .chevron-icon {
transition: transform var(--duration-fast) var(--ease-default);
color: var(--text-tertiary);
}
.tax-os-tool-details[open] .tax-os-tool-summary {
border-bottom: 1px solid var(--border-lighter);
}
.tax-os-tool-details[open] .tax-os-tool-summary .chevron-icon {
transform: rotate(180deg);
}
.tax-os-tool-details:not([open]) .tax-os-tool-summary {
border-bottom: none;
}
.tax-os-tool-content {
animation: fadeSlideDown var(--duration-fast) var(--ease-default);
}
@keyframes fadeSlideDown {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.tax-os-tool-section {
margin-bottom: 16px;
}
.admin-form {
background: var(--bg-surface);
border: 1px solid var(--border-card);
border-radius: var(--radius-md);
padding: var(--space-xl);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
margin-bottom: var(--space-lg);
}
.form-field {
margin-bottom: var(--space-md);
}
.form-field:last-child {
margin-bottom: 0;
}
.tool-checkboxes {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-top: 8px;
}
.tool-checkbox {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
background: var(--bg-surface);
border: 1px solid var(--border-card);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--duration-normal) var(--ease-default);
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.tool-checkbox:hover {
border-color: var(--astrovia-blue);
background: var(--info-bg);
}
.tool-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--astrovia-blue);
cursor: pointer;
}
.tool-checkbox input[type="checkbox"]:checked + span {
color: var(--text-primary);
font-weight: 500;
}
.refresh-btn {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-md);
background: var(--bg-surface);
border: 1px solid var(--border-card);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: var(--font-size-xs);
color: var(--text-secondary);
transition: all var(--duration-normal) var(--ease-default);
}
.refresh-btn:hover {
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
background: var(--info-bg);
}
.users-list {
display: flex;
flex-direction: column;
/* Note: For accordion lists, use .ds-accordion-list wrapper instead */
}
/* Legacy user-card styles - overridden by newer card styles below */
.user-card.master-admin {
background: var(--info-bg);
}
.user-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.user-email {
font-weight: 600;
color: var(--text-primary);
font-size: var(--font-size-md);
}
.user-meta {
display: flex;
align-items: center;
gap: 12px;
font-size: var(--font-size-sm);
color: var(--text-tertiary);
}
.user-role-badge {
display: inline-flex;
padding: 2px 8px;
background: var(--astrovia-blue);
color: var(--text-on-brand);
border-radius: var(--radius-xs);
font-size: var(--badge-font-size);
font-weight: var(--badge-font-weight);
letter-spacing: 0.5px;
}
.user-role-badge.user {
background: var(--text-tertiary);
}
.user-tools {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.user-tool-pill {
display: inline-flex;
padding: 2px 8px;
background: var(--badge-bg);
border: none;
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
color: var(--astrovia-blue);
font-weight: 500;
}
.user-actions {
display: flex;
gap: 8px;
}
.user-action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--text-tertiary);
transition: all var(--duration-normal) var(--ease-default);
}
.user-action-btn:hover {
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
background: var(--info-bg);
}
.user-action-btn.danger:hover {
border-color: var(--error);
color: var(--error);
background: var(--error-bg-solid);
}
.user-result,
.password-result {
margin-top: var(--space-md);
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
}
.user-result.success,
.password-result.success {
background: var(--success-tint);
border: 1px solid var(--success);
color: var(--success);
}
.user-result.error,
.password-result.error {
background: var(--error-bg-solid);
border: 1px solid var(--error);
color: var(--error);
}
/* Security Settings */
.security-settings {
padding: 4px 0;
}
.security-setting-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
border-bottom: 1px solid var(--border-lighter);
}
.security-setting-row:last-child {
border-bottom: none;
}
.security-setting-info {
flex: 1;
padding-right: 24px;
}
.security-setting-label {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
font-size: var(--font-size-md);
}
.security-setting-description {
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: 1.5;
}
/* ========================================
CANONICAL TOGGLE SWITCH COMPONENT
Uses design system tokens - single source of truth
======================================== */
.toggle-switch {
position: relative;
display: inline-block;
width: var(--toggle-width);
height: var(--toggle-height);
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--toggle-bg-off);
transition: background-color var(--duration-fast) var(--ease-default);
border-radius: var(--radius-toggle);
}
.toggle-slider:before {
position: absolute;
content: "";
height: var(--toggle-knob-size);
width: var(--toggle-knob-size);
left: var(--toggle-knob-offset);
bottom: var(--toggle-knob-offset);
background-color: var(--neutral-0);
transition: transform var(--duration-fast) var(--ease-default);
border-radius: var(--radius-toggle);
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
input:checked + .toggle-slider {
background-color: var(--toggle-bg-on);
}
input:checked + .toggle-slider:before {
transform: translateX(calc(var(--toggle-width) - var(--toggle-knob-size) - var(--toggle-knob-offset) * 2));
}
.security-status {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: var(--success-tint);
border: 1px solid var(--success);
border-radius: var(--radius-sm);
color: var(--success);
font-size: var(--font-size-sm);
margin-top: 16px;
}
.security-status svg {
flex-shrink: 0;
}
/* Security Divider */
.security-divider {
height: 1px;
background: var(--border-lighter);
margin: 20px 0;
}
/* Data Protection Info */
.data-protection-info {
background: var(--info-bg);
border: none;
border-radius: var(--radius-md);
padding: 20px;
}
.data-protection-header {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
color: var(--astrovia-blue);
margin-bottom: 16px;
font-size: var(--font-size-md);
}
.data-protection-header svg {
flex-shrink: 0;
}
.data-protection-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.data-protection-item {
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: 1.6;
padding-left: 28px;
position: relative;
}