/* ========================================
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: #1F51F6;
--astrovia-blue-hover: #1a45d9;
--astrovia-purple: #3535D8;
--astrovia-blue-light: #7FA8FF;
--astrovia-blue-light-bg: #EEF3FF;
--astrovia-blue-subtle: rgba(31, 81, 246, 0.06);
--astrovia-blue-border: rgba(31, 81, 246, 0.15);
/* Invoice/Current Data - Clean Pink for clear contrast with blue */
--invoice-rose: #FFB6C1;
--invoice-rose-light: #FFF0F3;
--invoice-rose-text: #E05A7A;
/* ========================================
SURFACES
======================================== */
--background-app: #F6F7F9;
--bg-primary: #FAFAFA;
--bg-white: #FFFFFF;
--bg-secondary: #F6F7F9;
--bg-tertiary: #F2F3F7;
--bg-input: #F5F6FA;
--bg-glass: rgba(255, 255, 255, 0.72);
--bg-glass-hover: rgba(255, 255, 255, 0.85);
/* ========================================
TYPOGRAPHY COLORS
======================================== */
--text-primary: #1D1D1F;
--text-secondary: #6B7280;
--text-tertiary: #86868B;
--text-inverse: #FFFFFF;
--text-note-info: #8A8FA3;
--text-diagnostic-red: #D64545;
/* ========================================
BORDERS
======================================== */
--border-light: rgba(0, 0, 0, 0.06);
--border-lighter: #EEF1F5;
--border-medium: rgba(0, 0, 0, 0.12);
--border-subtle: rgba(0, 0, 0, 0.08);
--border-glass: rgba(255, 255, 255, 0.5);
--border-accent: rgba(31, 81, 246, 0.2);
--border-info: rgba(52, 120, 240, 0.25);
--border-danger: rgba(214, 69, 69, 0.25);
--border-success: rgba(16, 185, 129, 0.25);
/* ========================================
SHADOWS - Subtle Preferred
======================================== */
--shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
--shadow-subtle-hover: 0 6px 20px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(31, 81, 246, 0.04);
--shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02);
--shadow-sm: 0 8px 32px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(15, 23, 42, 0.08);
--shadow-md: 0 12px 40px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(15, 23, 42, 0.1);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(15, 23, 42, 0.12);
--shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(15, 23, 42, 0.15);
--shadow-glass: 0 4px 30px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
--shadow-btn-primary: 0 4px 12px rgba(31, 81, 246, 0.35);
--shadow-btn-primary-hover: 0 2px 8px rgba(31, 81, 246, 0.2);
--shadow-btn-secondary: 0 1px 3px rgba(31, 81, 246, 0.15);
--shadow-panel: 0 2px 12px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03);
--shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(31, 81, 246, 0.04);
--shadow-icon-hover: 0 4px 12px rgba(31, 81, 246, 0.12);
--shadow-modal: 0 25px 50px rgba(0, 0, 0, 0.15), 0 10px 20px rgba(0, 0, 0, 0.1);
/* ========================================
FOCUS RINGS
======================================== */
--focus-ring-sm: 0 0 0 2px rgba(31, 81, 246, 0.08);
--focus-ring-md: 0 0 0 3px rgba(31, 81, 246, 0.1);
--focus-ring-lg: 0 0 0 4px rgba(31, 81, 246, 0.15);
--focus-ring-input: 0 0 0 3px rgba(31, 81, 246, 0.12);
/* ========================================
STATE COLORS
======================================== */
/* Success */
--success: #10b981;
--success-dark: #166534;
--success-bg: linear-gradient(135deg, #EEF2FF 0%, #F9FAFB 100%);
--success-bg-solid: #F0FDF4;
--success-border: #A7F3D0;
--success-border-strong: #10B981;
--success-gradient-end: #E0E7FF;
--success-tint: #F0FDF4;
/* Error */
--error: #ef4444;
--error-dark: #991B1B;
--error-text: #7F1D1D;
--error-bg: linear-gradient(135deg, #FFF5F5 0%, #FEF2F2 100%);
--error-bg-solid: #FEF2F2;
--error-tint: #FEE2E2;
--error-border: #FEE2E2;
--error-border-medium: #FECACA;
--error-subtle: rgba(239, 68, 68, 0.06);
--error-border-subtle: rgba(239, 68, 68, 0.2);
/* Warning */
--warning: #f59e0b;
--warning-dark: #92400E;
--warning-bg: #FEF3C7;
--warning-bg-solid: #FFFBEB;
--warning-border: #FDE68A;
--warning-tint: #FEF3C7;
--warning-text: #7C2D12;
/* Info */
--info-bg: #EFF6FF;
--info-bg-solid: #EFF6FF;
--info-border: #C3D4FF;
--info-border-strong: #1F51F6;
--info-bg-alt: #F5F7FA;
--info-gradient: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
--info-gradient-start: #EEF2FF;
--info-gradient-end: #E0E7FF;
/* Neutral */
--neutral-bg: #FAFBFC;
--neutral-border: #D1D5DB;
--neutral-border-strong: #6B7280;
/* ========================================
LEGACY TOKENS (for compatibility)
======================================== */
--accent-light: #4F46E5;
--badge-bg: #DDE6FF;
--badge-border: #C3D4FF;
--table-header-gradient: linear-gradient(180deg, #F9FAFB 0%, #F3F4F6 100%);
--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, #1F51F6 0%, #3B5CE8 100%);
--chart-purple: linear-gradient(135deg, #7C3AED 0%, #A855F7 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(--astrovia-blue) 0%, #3B5CE8 100%);
--purple-gradient: linear-gradient(135deg, #7C3AED 0%, #A855F7 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, #FEF2F2 0%, #FEE2E2 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, #eef1f5 0%, #f3f5f7 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: #EAEDF2;
--indicator-subtle-text: #4F6BCC;
--indicator-subtle-bg: #FAFBFF;
/* ========================================
CARD SURFACE TOKENS
Apple-level consistency for ALL containers
Pure white cards pop against #F6F7F9 background
======================================== */
--card-surface: #FFFFFF;
--card-surface-hover: #FAFBFC;
--card-surface-solid: #FFFFFF;
--card-border: rgba(0, 0, 0, 0.06);
--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
--card-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.05), 0 8px 20px rgba(0, 0, 0, 0.04);
/* Inputs float on card surfaces with white background */
--input-surface: #FFFFFF;
--input-border: rgba(0, 0, 0, 0.08);
--input-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
/* ========================================
TYPOGRAPHY TOKENS
======================================== */
--label-size: 0.6875rem;
--label-tracking: 0.6px;
--font-size-xs: 0.6875rem; /* 11px */
--font-size-sm: 0.8125rem; /* 13px */
--font-size-base: 0.9375rem; /* 15px */
--font-size-md: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 1.75rem; /* 28px */
/* ========================================
RADIUS TOKENS
======================================== */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 24px;
--radius-2xl: 28px;
--radius-full: 9999px;
/* ========================================
SPACING TOKENS
======================================== */
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 20px;
--space-xl: 24px;
--space-2xl: 32px;
--space-3xl: 48px;
/* ========================================
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;
/* ========================================
TIMING TOKENS - Motion Standards
All transitions use cubic-bezier(0.4, 0, 0.2, 1)
======================================== */
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--duration-micro: 0.15s;
--duration-fast: 0.2s;
--duration-standard: 0.3s;
--duration-layout: 0.35s;
--duration-calm: 1.8s;
/* ========================================
ICON SIZE TOKENS
======================================== */
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 32px;
/* ========================================
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 */
}
/* ========================================
DARK MODE THEME HOOKS
Apply .theme-dark to or to activate
All components respect tokens for seamless theme switching
======================================== */
.theme-dark {
--background-app: #0F0F0F;
--bg-primary: #0F0F0F;
--bg-white: #1A1A1A;
--bg-secondary: #141414;
--bg-tertiary: #1F1F1F;
--bg-input: #252525;
--bg-glass: rgba(30, 30, 30, 0.72);
--bg-glass-hover: rgba(40, 40, 40, 0.85);
--text-primary: #F5F5F7;
--text-secondary: #A1A1A6;
--text-tertiary: #6E6E73;
--text-inverse: #1D1D1F;
--border-light: #2D2D2D;
--border-lighter: #252525;
--border-medium: rgba(255, 255, 255, 0.12);
--border-subtle: rgba(255, 255, 255, 0.08);
--border-glass: rgba(255, 255, 255, 0.1);
--card-surface: #1A1A1A;
--card-surface-hover: #1F1F1F;
--card-surface-solid: #1A1A1A;
--card-border: rgba(255, 255, 255, 0.06);
--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
--card-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.2);
--input-surface: #252525;
--input-border: rgba(255, 255, 255, 0.08);
--input-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
--table-header-gradient: linear-gradient(180deg, #1A1A1A 0%, #141414 100%);
--shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-glass: 0 4px 30px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.25);
--neutral-bg: #1A1A1A;
}
/* ========================================
DESIGN SYSTEM COMPONENT CLASSES
======================================== */
/* ----------------------------------------
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(--success-tint);
color: var(--success);
border: 1px solid var(--success-border-strong);
}
.badge-warning {
background: var(--warning-bg);
color: var(--warning);
border: 1px solid var(--warning-border);
}
.badge-error {
background: var(--error-tint);
color: var(--error);
border: 1px solid var(--error-border-medium);
}
.badge-info {
background: var(--info-bg);
color: var(--astrovia-blue);
border: 1px solid var(--info-border);
}
.badge-neutral {
background: var(--neutral-bg);
color: var(--text-secondary);
border: 1px solid var(--neutral-border);
}
/* ----------------------------------------
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-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-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 {
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: 1px solid var(--error-border);
}
.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;
}
/* ----------------------------------------
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);
}
/* 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-inverse);
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-lg);
padding-top: var(--space-2xl);
padding-bottom: var(--space-xl);
max-width: 1100px;
}
.page-header-icon {
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
background: var(--info-bg);
border: 1px solid var(--info-border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--astrovia-blue);
transition: all var(--duration-standard) var(--ease-default);
}
.page-header-icon:hover {
background: var(--astrovia-blue-subtle);
border-color: var(--astrovia-blue-border);
}
.page-header-icon i {
font-size: 24px;
line-height: 1;
}
.page-header-icon svg {
width: 24px;
height: 24px;
}
.page-header-content {
flex: 1;
min-width: 0;
}
.page-title {
font-size: var(--font-size-3xl);
font-weight: 700;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.02em;
line-height: 1.2;
}
.page-description {
font-size: var(--font-size-base);
font-weight: 400;
color: var(--text-secondary);
margin-top: var(--space-xs);
line-height: 1.5;
max-width: 600px;
}
.page-header-actions {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-shrink: 0;
margin-top: 4px;
}
/* Mobile responsive: stack vertically */
@media (max-width: 640px) {
.page-header {
flex-direction: column;
align-items: flex-start;
gap: var(--space-md);
padding-top: var(--space-xl);
padding-bottom: var(--space-lg);
}
.page-header-actions {
width: 100%;
margin-top: var(--space-sm);
}
.page-title {
font-size: var(--font-size-2xl);
}
}
.page-grid {
display: grid;
gap: var(--space-xl);
}
.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-inverse);
box-shadow: var(--shadow-btn-primary);
}
.btn-primary:hover:not(:disabled) {
background: var(--astrovia-blue-hover);
transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) {
transform: translateY(0);
}
.btn-secondary {
background: var(--bg-white);
color: var(--astrovia-blue);
border: 1px solid var(--border-light);
}
.btn-secondary:hover:not(:disabled) {
border-color: var(--border-accent);
background: var(--bg-primary);
transform: translateY(-1px);
}
.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);
}
/* ----------------------------------------
FORM INPUT COMPONENT
---------------------------------------- */
.form-input {
width: 100%;
background: var(--input-surface);
border: 1px solid var(--card-border);
border-radius: var(--radius-md);
padding: 14px 16px;
font-size: var(--font-size-base);
color: var(--text-primary);
transition: all var(--duration-fast) var(--ease-default);
}
.form-input:hover {
border-color: var(--border-medium);
}
.form-input:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-input);
}
.form-input::placeholder {
color: var(--text-tertiary);
}
.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-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);
padding: 6px;
display: inline-flex;
gap: 4px;
margin-bottom: var(--space-2xl);
box-shadow: var(--shadow-glass);
}
.taxos-tab {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: 10px 18px;
border: none;
background: transparent;
color: var(--text-secondary);
font-size: var(--font-size-sm);
font-weight: 500;
cursor: pointer;
border-radius: calc(var(--radius-lg) - 4px);
transition: all 0.25s var(--ease-default);
white-space: nowrap;
}
.taxos-tab:hover {
color: var(--text-primary);
background: rgba(0, 0, 0, 0.03);
}
.taxos-tab.active {
background: var(--bg-white);
color: var(--astrovia-blue);
font-weight: 600;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}
.taxos-tab svg {
width: var(--icon-md);
height: var(--icon-md);
flex-shrink: 0;
}
.taxos-content-card {
background: var(--card-surface);
border: 1px solid var(--card-border);
border-radius: var(--radius-xl);
box-shadow: var(--card-shadow);
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: linear-gradient(180deg, var(--bg-white) 0%, var(--bg-primary) 100%);
}
.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: 16px;
}
/* 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: 32px;
display: inline-block;
}
.c-title {
font-size: clamp(2.25rem, 5vw, 3.5rem);
font-weight: 700;
color: var(--text-primary);
margin-bottom: 20px;
letter-spacing: 0.01em;
line-height: 1.1;
}
.c-subtitle {
font-size: 1.25rem;
color: var(--text-secondary);
font-weight: 400;
line-height: 1.5;
}
/* Cards - Unified Apple-level Surface */
.c-card {
background: var(--card-surface);
border: 1px solid var(--card-border);
border-radius: var(--radius-lg);
padding: var(--space-2xl);
margin-bottom: var(--space-2xl);
box-shadow: var(--card-shadow);
transition: all var(--duration-standard) var(--ease-default);
}
.c-card:hover {
border-color: var(--border-accent);
box-shadow: var(--card-shadow-hover);
}
/* Form inputs float on card surfaces */
.c-card .form-input {
background: var(--input-surface);
border: 1px solid var(--input-border);
box-shadow: var(--input-shadow);
}
.c-card .form-input:hover {
border-color: rgba(0, 0, 0, 0.12);
}
.c-card .form-input:focus {
background: var(--input-surface);
border-color: var(--astrovia-blue);
box-shadow: 0 0 0 3px rgba(31, 81, 246, 0.1), var(--input-shadow);
}
/* 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 - Contextual */
.dm-privacy-callout {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--info-bg);
border: 1px solid var(--info-border);
border-radius: var(--radius-md);
margin-bottom: var(--space-lg);
font-size: var(--font-size-xs);
color: var(--text-secondary);
}
.dm-privacy-callout svg,
.dm-privacy-callout i {
color: var(--astrovia-blue);
flex-shrink: 0;
font-size: 16px;
}
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);
transform: translateY(-2px);
}
.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(--border-accent);
box-shadow: var(--focus-ring-input);
}
.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-inverse);
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);
transform: translateY(-1px);
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: 0.875rem;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
}
.c-currency-select {
width: auto;
max-width: 100px;
padding: 8px 12px;
background: var(--input-surface);
border: 1px solid var(--card-border);
border-radius: var(--radius-md);
color: var(--text-primary);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
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: 0.8125rem;
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(--astrovia-blue) 0%, #1a45d9 100%);
color: var(--text-inverse);
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.01em;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
box-shadow: var(--shadow-btn-secondary);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.process-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: var(--shadow-btn-primary-hover);
}
.process-btn:active:not(:disabled) {
transform: translateY(0);
}
.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: 14px;
padding: 12px 14px;
background: var(--badge-bg);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
font-size: 0.875rem;
color: var(--text-primary);
line-height: 1.6;
font-weight: 500;
}
.file-info.loaded {
background: var(--badge-bg);
border-color: var(--border-light);
position: relative;
}
.file-info-header {
display: flex;
justify-content: flex-end;
margin-bottom: 6px;
}
.file-remove-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.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: 6px;
width: 100%;
border-radius: var(--radius-sm);
background: var(--badge-bg);
border: 1px solid var(--border-light);
margin-top: 12px;
}
.c-currency-note {
margin-top: 20px;
padding: 16px 20px;
background: var(--info-bg);
border-left: 4px solid var(--astrovia-blue);
border-radius: var(--radius-md);
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.7;
}
.c-currency-note strong {
color: var(--text-primary);
font-weight: 700;
}
/* Mapping Section */
.mapping-section {
margin-bottom: 32px;
padding: 32px;
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
}
.mapping-section h3 {
font-size: 1.125rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 24px;
padding-bottom: 12px;
border-bottom: 2px solid var(--border-light);
letter-spacing: -0.02em;
}
.c-field-group {
margin-bottom: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
@media (min-width: 768px) {
.c-field-group {
flex-direction: row;
align-items: flex-start;
gap: 16px;
}
}
.c-field-label {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
flex: 0 0 auto;
width: 100%;
max-width: 320px;
line-height: 1.5;
padding-top: 12px;
}
.c-field-hint {
display: block;
font-size: 0.8125rem;
font-weight: 400;
color: var(--text-secondary);
margin-top: 4px;
letter-spacing: 0;
}
.c-field-select {
flex: 1;
padding: 12px 16px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
color: var(--text-primary);
font-size: 0.9375rem;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%236B7280' d='M7 10L2 5h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 42px;
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 */
.c-btn-primary,
.c-btn-secondary {
padding: 15px 32px;
border: none;
border-radius: var(--radius-md);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
margin-right: 14px;
display: inline-flex;
align-items: center;
gap: 10px;
letter-spacing: -0.01em;
}
.c-btn-primary {
background: linear-gradient(135deg, var(--astrovia-blue) 0%, #1a45d9 100%);
color: var(--text-inverse);
box-shadow: var(--shadow-btn-secondary);
}
.c-btn-primary:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-btn-primary-hover);
}
.c-btn-primary:active {
transform: translateY(0);
}
.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;
box-shadow: var(--shadow-btn-secondary);
}
/* Large Button Variant */
.c-btn-lg {
padding: 16px 36px;
font-size: 1rem;
}
.c-btn-secondary {
background: var(--bg-white);
color: var(--text-primary);
border: 1px solid var(--border-light);
box-shadow: var(--shadow-sm);
}
.c-btn-secondary:hover {
background: var(--bg-secondary);
border-color: var(--text-tertiary);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* Button Size Variants */
.c-btn-xs {
padding: var(--space-xs) var(--space-sm);
font-size: var(--font-size-xs);
}
.c-btn-sm {
padding: var(--space-sm) var(--space-md);
font-size: var(--font-size-sm);
}
/* Button Color Variants */
.c-btn-success {
background: var(--success);
color: white;
border: none;
font-weight: 500;
}
.c-btn-success:hover {
background: var(--success-text);
transform: translateY(-1px);
}
/* 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: 1px solid var(--border-light);
}
/* Warning Box */
.warning-box {
padding: var(--space-sm);
background: var(--warning-bg);
border: 1px solid var(--warning-border);
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: 1px solid var(--info-border);
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: 50%;
}
.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-xxl) var(--space-3xl);
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: 50%;
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-xxs);
}
.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: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.modal-overlay.is-hidden {
display: none;
}
.modal-card {
background: var(--bg-white);
padding: var(--space-xl) var(--space-xxl);
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 {
background: none;
border: none;
cursor: pointer;
color: var(--text-tertiary);
padding: var(--space-xxs);
}
.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-xxs) 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: 0.8125rem;
}
/* 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: 12px;
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: 1px solid var(--border-light);
border-radius: 8px;
font-size: 0.875rem;
}
/* Button Size Utilities */
.btn-sm {
padding: var(--space-xs) var(--space-md);
font-size: 0.875rem;
}
/* Table Header Uppercase */
.table-header-uppercase {
padding: 14px var(--space-md);
text-align: left;
font-weight: 600;
font-size: 0.8125rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Table Body Cells */
.table-body-cell {
padding: 14px var(--space-md);
font-size: 0.875rem;
color: var(--text-primary);
}
.table-body-cell--bold {
font-weight: 500;
}
/* White Box Utilities */
.white-box {
padding: var(--space-sm) var(--space-md);
background: white;
border-radius: 8px;
border: 1px solid var(--border-light);
}
/* 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: 0.9375rem;
}
/* Info Box Utilities */
.info-box {
padding: var(--space-sm) var(--space-md);
background: var(--card-surface-solid);
border-radius: 10px;
border: 1px solid var(--border-light);
}
.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: 0.9375rem;
font-weight: 600;
color: var(--text-primary);
}
.heading-md {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
}
.text-xs {
font-size: 0.8125rem;
}
.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: 1.125rem;
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: 8px;
font-size: 0.75rem;
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: 12px;
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: 0.75rem;
color: var(--warning-text);
line-height: 1.5;
}
/* Info List */
.info-list {
margin: 0;
padding-left: var(--space-md);
font-size: 0.8125rem;
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: 1px solid var(--border-light);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: 500;
box-shadow: var(--shadow-sm);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
}
.excel-download-btn:hover {
background: var(--astrovia-blue-light, #e8f4fc);
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
transform: translateY(-1px);
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: 0.875rem;
font-weight: 600;
text-align: center;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
color: var(--text-primary);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-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, rgba(59, 91, 219, 0.1));
}
.excel-download-btn:active {
transform: translateY(0);
}
.excel-download-btn svg {
flex-shrink: 0;
}
.excel-download-btn--secondary {
background: var(--bg-secondary);
color: var(--text-secondary);
border: 1px solid var(--border-light);
}
.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: 0.8125rem;
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: 20px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-left: 4px solid var(--astrovia-blue);
border-radius: var(--radius-md);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.c-summary-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
/* Summary Card Variants - Clean Apple-style with left border strips */
.c-summary-card.card-invoice {
background: var(--bg-white);
border-color: var(--border-light);
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-white);
border-color: var(--border-light);
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-white);
border-color: var(--border-light);
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: rgba(16, 185, 129, 0.04);
border-color: rgba(16, 185, 129, 0.15);
border-left: 4px solid var(--success);
}
.c-summary-card.card-analysis-positive .c-summary-label {
color: var(--success);
}
.c-summary-card.card-analysis-negative {
background: rgba(239, 68, 68, 0.04);
border-color: rgba(239, 68, 68, 0.15);
border-left: 4px solid var(--error);
}
.c-summary-card.card-analysis-negative .c-summary-label {
color: var(--error);
}
/* 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-white);
border: 1px solid var(--border-light);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.rates-column-header-label {
font-size: 0.6875rem;
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: 1px solid var(--warning-border);
border-left: 4px solid var(--warning);
padding: 20px;
}
.c-summary-card.warning:hover {
transform: none;
}
/* Override stat-item styles when used with c-summary-card */
.c-summary-card.stat-item {
padding: 20px;
}
/* Content area */
.c-summary-content {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
flex: 1;
}
.c-summary-label {
font-size: 0.6875rem;
font-weight: 500;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.3;
}
.c-summary-value {
font-size: 1.375rem;
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: 0.6875rem;
color: var(--text-tertiary);
line-height: 1.3;
margin-top: 2px;
}
/* Loading Overlay */
.c-loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.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 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.c-loading-overlay.active {
opacity: 1;
}
.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);
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.c-loading-text {
margin-top: 16px;
font-size: 1rem;
font-weight: 600;
color: var(--text-secondary);
letter-spacing: 0.02em;
}
#step3 {
position: relative;
}
#step3.processing {
pointer-events: none;
}
#step3.processing > *:not(.c-loading-overlay) {
opacity: 0.4;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Table */
.table-controls {
margin-bottom: var(--space-xl);
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
}
.c-table-wrap {
overflow-x: auto;
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 {
background: var(--bg-secondary);
}
.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 {
border-bottom: 1px solid var(--card-border);
transition: all var(--duration-fast) var(--ease-default);
background: var(--input-surface);
}
.c-table tbody tr:hover {
background: var(--bg-secondary);
}
.c-table tbody tr:last-child {
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);
}
/* Toggle button for unallocated charges */
.c-toggle-btn:hover {
background: var(--credit-gradient) !important;
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.c-toggle-btn:active {
transform: translateY(0);
}
.c-table td {
padding: var(--space-sm) var(--space-md);
color: var(--text-primary);
font-weight: 500;
font-size: var(--font-size-base);
}
/* Comment cell with 2-line display (cross-browser compatible) */
.c-table td.comment-cell {
max-width: 400px;
min-width: 250px;
padding: var(--space-sm) var(--space-md);
}
.c-table td.comment-cell .comment-text {
font-size: var(--font-size-sm);
line-height: 1.5;
max-height: 3em;
overflow: hidden;
word-wrap: break-word;
display: block;
}
.c-table td.comment-cell:hover .comment-text {
max-height: none;
overflow: visible;
}
.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: -apple-system, BlinkMacSystemFont, 'SF Mono', 'Menlo', Monaco, 'Courier New', monospace;
font-size: 1.0625rem;
font-weight: 700;
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: 32px; }
.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: 1.625rem; 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 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.lc-summary-card:hover {
border-color: var(--border-accent);
box-shadow: var(--card-shadow-hover);
transform: translateY(-2px);
}
.lc-summary-label { color: var(--text-secondary); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.lc-summary-value { font-weight: 700; font-size: 2rem; 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-inverse);
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
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: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.priority-badge.priority-critical {
background: var(--error);
color: var(--text-inverse);
}
.priority-badge.priority-high {
background: var(--astrovia-blue);
color: var(--text-inverse);
}
.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: 1px solid var(--border-light);
}
.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: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
border: 1px solid var(--success-border);
color: var(--success);
}
.upload-zone-icon.pdf-icon {
background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
border: 1px solid var(--error-border-medium);
color: var(--error-dark);
}
.upload-zone-info {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.upload-zone-title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary);
}
.upload-zone-subtitle {
font-size: 0.75rem;
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 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.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 {
transform: translateY(-3px);
color: var(--astrovia-blue);
}
.upload-zone-arrow {
color: var(--text-tertiary);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.upload-zone-text {
font-size: 0.8125rem;
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: 1px solid var(--border-light);
border-radius: var(--radius-md);
font-size: 0.8125rem;
color: var(--text-primary);
font-weight: 500;
}
/* Spin animation for loading states */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.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-inverse);
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}
.process-btn:not(:disabled):hover {
transform: translateY(-2px);
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: 1px solid var(--border-light);
background: var(--bg-white);
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
}
.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: 1px solid var(--border-light);
background: var(--bg-white);
font-size: 0.8125rem;
font-weight: 500;
width: 130px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.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: 1px solid var(--border-light);
background: var(--bg-white);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
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 0.2s;
}
.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: 1px solid var(--border-light);
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: 0.75rem;
font-weight: 500;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-white);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.15s;
}
.weight-action-btn:hover {
background: var(--astrovia-blue);
color: var(--text-inverse);
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 0.15s;
font-size: 0.8125rem;
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: 0.6875rem;
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: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-white);
color: var(--text-secondary);
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.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, rgba(31, 81, 246, 0.08) 0%, rgba(53, 53, 216, 0.08) 100%);
border: 1px solid rgba(31, 81, 246, 0.2);
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 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.date-chip-edit:hover {
background: rgba(31, 81, 246, 0.15);
}
.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: 1px solid var(--border-light);
border-radius: var(--radius-lg);
background: var(--bg-white);
color: var(--text-primary);
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.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: 0.75rem;
color: var(--text-tertiary);
}
.weight-chip.excluded .weight-chip-count {
color: var(--text-tertiary);
}
.weight-chip-excluded-icon {
font-size: 0.625rem;
color: var(--error);
margin-left: 2px;
}
.weight-filter-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-white);
color: var(--text-secondary);
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.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 */
.stat-item:not(.c-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 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.stat-item:not(.c-summary-card):hover {
border-color: var(--border-accent);
box-shadow: var(--card-shadow-hover);
transform: translateY(-2px);
}
.stat-label, .c-summary-label { color: var(--text-secondary); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 8px; }
.stat-value, .c-summary-value { font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.c-summary-value-compact { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.c-summary-subvalue { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.c-summary-value-suffix { font-size: 0.75rem; font-weight: 400; color: var(--text-tertiary); }
.c-summary-hint { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 4px; line-height: 1.4; }
.table-wrapper { overflow-x: auto; }
.btn-primary {
background: var(--astrovia-blue);
color: var(--text-inverse);
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-primary:active {
transform: translateY(1px);
}
.btn-secondary {
background: var(--bg-white);
color: var(--text-secondary);
padding: 10px 20px;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-secondary:hover {
border-color: var(--text-tertiary);
color: var(--text-primary);
background: var(--bg-secondary);
}
.btn-secondary:active {
transform: translateY(1px);
}
.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: 1px solid var(--border-light);
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: 1.125rem;
font-weight: 600;
color: var(--text-tertiary);
letter-spacing: -0.01em;
}
.login-title {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
letter-spacing: 0.01em;
}
.login-subtitle {
font-size: 1rem;
color: var(--text-secondary);
margin-bottom: 32px;
}
.login-form {
text-align: left;
}
.login-field {
margin-bottom: 20px;
}
.login-field label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.login-field input {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
font-size: 1rem;
color: var(--text-primary);
background: var(--bg-white);
transition: all 0.2s;
}
.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: 0.875rem;
margin-bottom: 20px;
text-align: center;
}
.login-btn {
width: 100%;
padding: 14px 24px;
background: var(--astrovia-blue);
color: var(--text-inverse);
border: none;
border-radius: var(--radius-md);
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.login-btn:hover {
background: var(--astrovia-blue-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.login-btn:active {
transform: translateY(0);
}
.login-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.form-input {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
font-size: 1rem;
color: var(--text-primary);
background: var(--bg-white);
transition: all 0.2s;
font-family: inherit;
}
select.form-input {
padding-right: 40px;
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 8L2 4h8z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
cursor: pointer;
}
.form-input:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-md);
}
.login-spinner {
display: inline-flex;
align-items: center;
}
.spinner-icon {
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 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: 1px solid var(--border-light);
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 0.28s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 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 0.25s;
}
.tool-selector-btn:hover {
border-color: var(--astrovia-blue-border);
box-shadow: 0 8px 24px rgba(31, 81, 246, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
transform: translateY(-3px);
}
.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: 0 0 0 4px rgba(31, 81, 246, 0.15), 0 4px 12px rgba(0, 0, 0, 0.06);
}
.tool-badge-corner {
position: absolute;
top: 14px;
right: 16px;
padding: 4px 10px;
font-size: 0.5625rem;
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 rgba(31, 81, 246, 0.12);
box-shadow: 0 2px 8px rgba(31, 81, 246, 0.08);
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: 1px solid var(--info-border);
box-shadow: 0 2px 8px rgba(31, 81, 246, 0.06);
transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.tool-selector-btn:hover .tool-icon-badge {
background: rgba(31, 81, 246, 0.12);
transform: scale(1.04);
box-shadow: 0 4px 16px rgba(31, 81, 246, 0.12);
}
.tool-icon {
width: 26px;
height: 26px;
color: var(--astrovia-blue);
opacity: 0.9;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.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: 1.125rem;
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: 0.625rem;
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: 1px solid var(--badge-border);
}
.tool-status-pill {
display: inline-flex;
align-items: center;
padding: 3px 10px;
font-size: 0.5625rem;
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: 1px solid var(--warning-border);
}
/* Privacy Banner */
.privacy-banner {
display: flex;
align-items: flex-start;
gap: 14px;
background: var(--info-bg);
border: 1px solid var(--info-border);
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: 0.875rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.privacy-banner-text {
font-size: 0.8125rem;
color: var(--text-secondary);
line-height: 1.6;
}
.tool-desc {
font-size: 0.8125rem;
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 0.28s cubic-bezier(0.4, 0, 0.2, 1);
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: 2.25rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.tool-content-desc {
font-size: 1.125rem;
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: 1px solid var(--info-border);
border-left: 3px solid var(--info-border-strong);
border-radius: var(--radius-md);
padding: 14px 20px;
margin-bottom: 28px;
font-size: 0.875rem;
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: 1px solid var(--border-light);
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 0.15s;
}
.duty-tax-dropdown-item:hover {
background: var(--bg-primary);
}
.duty-tax-dropdown-flag {
font-size: 1.25rem;
}
.duty-tax-dropdown-name {
flex: 1;
font-weight: 500;
color: var(--text-primary);
}
.duty-tax-dropdown-currency {
font-size: 0.8125rem;
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: 1px solid var(--badge-border);
border-radius: var(--radius-md);
padding: 10px 14px;
}
.duty-tax-selected-flag {
font-size: 1.25rem;
}
.duty-tax-selected-name {
font-weight: 600;
color: var(--text-primary);
}
.duty-tax-selected-currency {
font-size: 0.8125rem;
color: var(--astrovia-blue);
font-weight: 600;
}
.duty-tax-selected-remove {
background: none;
border: none;
font-size: 1.25rem;
color: var(--text-tertiary);
cursor: pointer;
padding: 0 4px;
line-height: 1;
transition: color 0.15s;
}
.duty-tax-selected-remove:hover {
color: var(--error);
}
.duty-tax-toggle-group {
display: flex;
gap: 0;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
overflow: hidden;
}
.duty-tax-toggle-btn {
flex: 1;
padding: 12px 16px;
background: var(--bg-white);
border: none;
font-size: 0.9375rem;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s;
}
.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-inverse);
}
.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: 1px solid var(--border-light);
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s;
}
.duty-tax-country-card:hover {
border-color: var(--astrovia-blue);
box-shadow: var(--shadow-sm);
transform: translateY(-2px);
}
.duty-tax-country-flag {
font-size: 1.75rem;
}
.duty-tax-country-name {
font-weight: 600;
font-size: 0.875rem;
color: var(--text-primary);
text-align: center;
}
.duty-tax-country-vat {
font-size: 0.75rem;
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: 3rem;
}
.duty-tax-results-country-name {
margin: 0 0 4px 0;
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
}
.duty-tax-results-regime {
font-size: 0.8125rem;
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: 0.75rem;
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: 1.75rem;
font-weight: 700;
color: var(--text-primary);
}
.duty-tax-results-aud {
display: block;
font-size: 0.875rem;
color: var(--text-secondary);
margin-top: 2px;
}
.duty-tax-threshold-info {
display: flex;
align-items: center;
gap: 10px;
background: var(--success-tint);
border: 1px solid var(--success-border);
border-radius: var(--radius-md);
padding: 14px 18px;
margin-bottom: 24px;
font-size: 0.9375rem;
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: var(--bg-secondary);
border-bottom: 1px solid var(--border-lighter);
}
.duty-tax-result-title {
font-weight: 600;
font-size: 0.9375rem;
color: var(--text-primary);
}
.duty-tax-result-status {
font-size: 0.6875rem;
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: 2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
}
.duty-tax-result-amount {
font-size: 1.125rem;
font-weight: 600;
color: var(--astrovia-blue);
margin-bottom: 8px;
}
.duty-tax-result-note {
font-size: 0.8125rem;
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: rgba(16, 185, 129, 0.08);
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: 2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 12px;
}
.duty-tax-total-breakdown {
font-size: 0.9375rem;
color: var(--text-secondary);
}
.duty-tax-notes-card {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
overflow: hidden;
}
.duty-tax-notes-header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
background: var(--bg-tertiary);
border-bottom: 1px solid var(--border-light);
font-weight: 600;
font-size: 0.875rem;
color: var(--text-primary);
}
.duty-tax-notes-header svg {
color: var(--astrovia-blue);
}
.duty-tax-notes-body {
padding: 16px 20px;
font-size: 0.9375rem;
color: var(--text-secondary);
line-height: 1.6;
}
.duty-tax-currency-banner {
display: flex;
align-items: center;
gap: 10px;
background: var(--info-bg);
border: 1px solid var(--info-border);
border-left: 3px solid var(--info-border-strong);
border-radius: var(--radius-md);
padding: 14px 20px;
margin-bottom: 20px;
font-size: 0.875rem;
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: 0.9375rem;
color: var(--text-tertiary);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.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-inverse);
}
.duty-tax-wizard-step.completed .duty-tax-wizard-step-number::after {
content: '\2713';
}
.duty-tax-wizard-step-label {
font-size: 0.8125rem;
font-weight: 500;
color: var(--text-tertiary);
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.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 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.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: 0.6875rem;
}
.duty-tax-wizard-step-number {
width: 28px;
height: 28px;
font-size: 0.8125rem;
}
}
.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: 0.9375rem;
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: 1px solid var(--border-light);
border-radius: var(--radius-md);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.duty-tax-hs-lookup-btn:hover {
background: var(--astrovia-blue);
border-color: var(--astrovia-blue);
color: var(--text-inverse);
}
.duty-tax-hs-result {
margin-top: 12px;
padding: 12px 16px;
background: var(--success-tint);
border: 1px solid var(--success-border);
border-radius: var(--radius-md);
font-size: 0.875rem;
}
/* Currency Input */
.duty-tax-currency-input {
display: flex;
align-items: stretch;
}
.duty-tax-currency-select {
padding: 10px 12px;
background: var(--bg-tertiary);
border: 1px solid var(--border-light);
border-right: none;
border-radius: var(--radius-md) 0 0 var(--radius-md);
font-size: 0.875rem;
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: 1px solid var(--border-light);
border-right: none;
border-radius: var(--radius-md) 0 0 var(--radius-md);
font-size: 0.875rem;
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: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 20px 24px;
}
.duty-tax-cif-title {
font-size: 0.8125rem;
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: 0.75rem;
color: var(--text-tertiary);
margin-bottom: 4px;
}
.duty-tax-cif-value {
display: block;
font-size: 1.125rem;
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: 1.25rem;
}
.duty-tax-cif-note {
font-size: 0.75rem;
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: 0.8125rem;
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 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.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(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.1) 100%);
}
.duty-tax-market-flag {
font-size: 0.75rem;
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: 0.9375rem;
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: 0.8125rem;
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: 1px solid var(--border-light);
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: 2.5rem;
}
.duty-tax-rules-name {
font-size: 1.25rem;
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: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-tertiary);
margin-bottom: 8px;
}
.duty-tax-rule-value {
font-size: 1.125rem;
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: 0.875rem;
color: var(--text-secondary);
}
/* Reference Section Toggle */
.duty-tax-reference-section {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
overflow: hidden;
}
.duty-tax-reference-toggle {
display: flex;
align-items: center;
gap: 8px;
padding: 16px 20px;
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
list-style: none;
transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.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 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.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(--astrovia-blue) 0%, #1d4ed8 100%);
border-radius: var(--radius-lg);
padding: 32px;
color: var(--text-inverse);
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: 3rem;
}
.duty-tax-result-country-name {
font-size: 1.5rem;
font-weight: 700;
margin: 0;
}
.duty-tax-result-country-subtitle {
font-size: 0.875rem;
opacity: 0.8;
margin-top: 4px;
}
.duty-tax-result-total {
text-align: right;
}
.duty-tax-result-total-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.8;
margin-bottom: 4px;
}
.duty-tax-result-total-value {
font-size: 2.5rem;
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: 0.75rem;
opacity: 0.8;
margin-bottom: 4px;
}
.duty-tax-result-breakdown-value {
font-size: 1.25rem;
font-weight: 700;
}
/* Calculation Details Card */
.duty-tax-calculation-details {
background: var(--bg-white);
border: 1px solid var(--border-light);
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: var(--bg-secondary);
border-bottom: 1px solid var(--border-light);
font-weight: 600;
font-size: 0.9375rem;
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: 0.9375rem;
color: var(--text-secondary);
}
.duty-tax-calculation-value {
font-size: 0.9375rem;
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: 1.25rem;
color: var(--astrovia-blue);
}
/* ========================================
ADMIN & ACCOUNT PANELS - Apple-level polish
======================================== */
.admin-panel,
.account-panel {
background: var(--bg-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-panel);
border: 1px solid var(--border-lighter);
margin-bottom: 28px;
overflow: hidden;
}
.admin-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-white) 100%);
border-bottom: 1px solid transparent;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
position: relative;
}
.admin-panel-tagline {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 1.0625rem;
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: 18px 24px;
background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-white) 100%);
border-bottom: 1px solid transparent;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
}
.admin-panel-header:hover,
.account-panel-header:hover {
background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}
.admin-panel-header.expanded,
.account-panel-header.expanded {
border-bottom-color: var(--border-lighter);
}
.admin-panel-title {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
font-size: 1.125rem;
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: 10px;
font-size: 1rem;
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: 0.625rem;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
border-radius: var(--radius-full);
background: var(--info-gradient);
color: var(--astrovia-blue);
border: 1px solid var(--badge-border);
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 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-toggle-btn svg,
.account-toggle-btn svg {
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.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: 24px;
background: var(--bg-white);
}
.admin-section {
margin-bottom: 32px;
}
.admin-section:last-child {
margin-bottom: 0;
}
.admin-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.admin-section-header h3 {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
/* Admin User View Selector */
.admin-user-view-selector {
margin-bottom: 24px;
}
.user-view-selector-container {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: var(--info-bg);
border: 1px solid var(--info-border);
border-radius: var(--radius-md);
}
.user-view-selector-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
font-weight: 500;
color: var(--astrovia-blue);
}
.user-view-selector-label svg {
stroke: var(--astrovia-blue);
}
.viewing-as-badge {
margin-left: auto;
font-size: 0.8125rem;
color: var(--text-secondary);
padding: 6px 12px;
background: var(--bg-white);
border-radius: var(--radius-sm);
border: 1px solid var(--border-light);
}
.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 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.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(--card-surface-solid);
border: 1px solid var(--card-border);
border-radius: var(--radius-md);
padding: 24px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.form-field {
margin-bottom: 16px;
}
.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: 10px;
padding: 12px 16px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 0.875rem;
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: 6px;
padding: 8px 14px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 0.8125rem;
color: var(--text-secondary);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.refresh-btn:hover {
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
background: var(--info-bg);
}
.users-list {
background: var(--bg-primary);
border: 1px solid var(--border-lighter);
border-radius: var(--radius-md);
overflow: hidden;
}
.user-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border-lighter);
transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.user-card:last-child {
border-bottom: none;
}
.user-card:hover {
background: var(--bg-white);
}
.user-card.master-admin {
background: linear-gradient(135deg, #EEF2FF 0%, #F8FAFF 100%);
}
.user-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.user-email {
font-weight: 600;
color: var(--text-primary);
font-size: 0.9375rem;
}
.user-meta {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.8125rem;
color: var(--text-tertiary);
}
.user-role-badge {
display: inline-flex;
padding: 2px 8px;
background: var(--astrovia-blue);
color: var(--text-inverse);
border-radius: var(--radius-xs);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
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: 1px solid var(--badge-border);
border-radius: var(--radius-sm);
font-size: 0.6875rem;
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-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--text-tertiary);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.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: 16px;
padding: 16px 20px;
border-radius: var(--radius-md);
font-size: 0.875rem;
}
.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: 0.9375rem;
}
.security-setting-description {
font-size: 0.8125rem;
color: var(--text-secondary);
line-height: 1.5;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 52px;
height: 28px;
}
.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(--neutral-border);
transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: var(--radius-2xl);
}
.toggle-slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
left: 3px;
bottom: 3px;
background-color: var(--text-inverse);
transition: 0.3s;
border-radius: var(--radius-full);
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
input:checked + .toggle-slider {
background: linear-gradient(135deg, var(--astrovia-blue), #42a5f5);
}
input:checked + .toggle-slider:before {
transform: translateX(24px);
}
.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: 0.8125rem;
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: 1px solid var(--info-border);
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: 0.9375rem;
}
.data-protection-header svg {
flex-shrink: 0;
}
.data-protection-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.data-protection-item {
font-size: 0.8125rem;
color: var(--text-secondary);
line-height: 1.6;
padding-left: 28px;
position: relative;
}
.data-protection-item::before {
content: '';
position: absolute;
left: 8px;
top: 8px;
width: 5px;
height: 5px;
background: var(--astrovia-blue);
border-radius: var(--radius-full);
opacity: 0.5;
}
.data-protection-item strong {
color: var(--text-primary);
font-weight: 600;
}
.user-result .credentials {
margin-top: 12px;
padding: 12px 16px;
background: var(--bg-white);
border: 1px dashed var(--success);
border-radius: var(--radius-sm);
}
.user-result .credentials-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.user-result .credentials-row:last-child {
margin-bottom: 0;
}
.user-result .credentials-label {
font-weight: 600;
color: var(--text-primary);
min-width: 80px;
}
.user-result .credentials-value {
font-family: 'SF Mono', Monaco, Consolas, monospace;
background: var(--bg-tertiary);
padding: 4px 10px;
border-radius: var(--radius-xs);
color: var(--text-primary);
}
.copy-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: var(--astrovia-blue);
color: var(--text-inverse);
border: none;
border-radius: var(--radius-xs);
font-size: 0.75rem;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.copy-btn:hover {
background: var(--astrovia-blue-hover);
}
/* Account Panel Specific */
.account-info {
background: var(--bg-primary);
border: 1px solid var(--border-lighter);
border-radius: var(--radius-md);
padding: 20px 24px;
margin-bottom: 24px;
}
.account-info-row {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid var(--border-lighter);
}
.account-info-row:last-child {
border-bottom: none;
}
.account-label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
min-width: 100px;
}
.account-value {
font-size: 0.9375rem;
color: var(--text-primary);
font-weight: 500;
}
.account-tools {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.account-tool-pill {
display: inline-flex;
padding: 4px 12px;
background: var(--badge-bg);
border: 1px solid var(--badge-border);
border-radius: var(--radius-md);
font-size: 0.8125rem;
color: var(--astrovia-blue);
font-weight: 500;
}
.account-section {
margin-top: 24px;
}
.account-section h3 {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 16px;
}
.password-form {
background: var(--bg-primary);
border: 1px solid var(--border-lighter);
border-radius: var(--radius-md);
padding: 24px;
}
/* Generate Test Data Button - Enhanced styling */
.generate-test-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
background: var(--bg-white);
border: 2px solid var(--astrovia-blue);
border-radius: var(--radius-md);
color: var(--astrovia-blue);
font-weight: 600;
font-size: 0.9375rem;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
margin-top: 0;
box-shadow: 0 2px 4px rgba(31, 81, 246, 0.1);
}
.generate-test-btn:hover {
background: var(--astrovia-blue);
color: var(--text-inverse);
border-color: var(--astrovia-blue);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(31, 81, 246, 0.25);
}
.generate-test-btn:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(31, 81, 246, 0.2);
}
.generate-test-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.generate-test-btn svg {
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.generate-test-btn:hover svg {
transform: scale(1.1);
}
/* Spin animation utility class */
.animate-spin {
animation: spin 1s linear infinite;
}
.loading-spinner {
padding: 40px;
text-align: center;
color: var(--text-tertiary);
font-size: 0.875rem;
}
/* Tool access radio button styles for user management */
.tool-access-list {
display: flex;
flex-direction: column;
gap: 0;
background: var(--bg-secondary);
border: 1px solid var(--border-lighter);
border-radius: var(--radius-md);
padding: 8px 16px;
margin-top: 8px;
}
.tool-access-item {
display: flex;
align-items: center;
gap: 20px;
padding: 14px 8px;
border-bottom: 1px solid var(--border-lighter);
}
.tool-access-item:last-child {
border-bottom: none;
}
.tool-access-name {
flex: 1;
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
min-width: 160px;
}
.tool-access-options {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.tool-access-option {
display: flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border-radius: var(--radius-sm);
background: var(--bg-white);
border: 1px solid var(--border-light);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 11px;
font-weight: 500;
color: var(--text-secondary);
white-space: nowrap;
}
.tool-access-option:hover {
border-color: var(--border-accent);
background: var(--bg-white);
}
.tool-access-option input[type="radio"] {
width: 12px;
height: 12px;
accent-color: var(--astrovia-blue);
cursor: pointer;
margin: 0;
}
.tool-access-option:has(input[value="full"]:checked) {
background: var(--info-gradient);
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
}
.tool-access-option.dev:has(input:checked),
.tool-access-option:has(input[value="dev"]:checked) {
background: var(--credit-gradient);
border-color: var(--warning);
color: var(--warning-text);
}
.tool-access-option:has(input[value="none"]:checked) {
background: var(--bg-tertiary);
border-color: var(--border-light);
color: var(--text-tertiary);
}
@media (max-width: 900px) {
.tool-access-item {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.tool-access-options {
width: 100%;
justify-content: flex-start;
}
}
/* Edit User Modal */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
}
.modal-content {
background: var(--bg-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--border-lighter);
}
.modal-header h3 {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.modal-close {
background: none;
border: none;
cursor: pointer;
padding: 8px;
border-radius: var(--radius-sm);
color: var(--text-tertiary);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-close:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
}
.modal-body {
padding: 24px;
}
.modal-footer {
display: flex;
gap: 12px;
justify-content: flex-end;
padding: 20px 24px;
border-top: 1px solid var(--border-lighter);
background: var(--bg-primary);
}
.btn-cancel {
padding: 10px 20px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-weight: 500;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-cancel:hover {
border-color: var(--text-tertiary);
color: var(--text-primary);
}
.btn-danger {
padding: 10px 20px;
background: var(--error);
border: none;
border-radius: var(--radius-sm);
color: var(--text-inverse);
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-danger:hover {
background: var(--error-dark);
}
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
}
.tool-checkboxes {
grid-template-columns: 1fr;
}
.user-card {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.user-actions {
width: 100%;
}
.user-action-btn {
flex: 1;
}
}
/* Responsive */
@media (max-width: 720px) {
.tool-selector-btn {
padding: 28px 24px;
padding-top: 36px;
gap: 18px;
}
.tool-badge-corner {
top: 12px;
right: 14px;
padding: 3px 8px;
font-size: 0.5rem;
}
.tool-icon-badge {
width: 48px;
height: 48px;
min-width: 48px;
}
.tool-icon {
width: 24px;
height: 24px;
}
.tool-title {
font-size: 1rem;
}
.tool-desc {
font-size: 0.75rem;
}
.tool-content-title {
font-size: 1.875rem;
}
.tool-content-desc {
font-size: 1rem;
}
.duty-tax-results-header {
flex-direction: column;
gap: 16px;
}
.duty-tax-results-order-value {
text-align: left;
}
}
/* Defensive rule: Hide any login-specific elements on main page */
.password-toggle,
#toggle-password,
#eye-icon,
#eye-off-icon {
display: none !important;
}
/* ========================================
New Sidebar & Auth Styles (Post-572d8c6)
Sidebar Layout System - Apple-level Design
======================================== */
.app-layout {
display: flex;
height: 100vh;
overflow: hidden;
}
/* Sidebar - Premium Apple/Stripe inspired */
.sidebar {
width: 280px;
min-width: 280px;
height: 100vh;
background: linear-gradient(180deg, var(--bg-white) 0%, var(--bg-primary) 100%);
border-right: 1px solid var(--card-border);
display: flex;
flex-direction: column;
position: relative;
z-index: 100;
}
/* ========================================
SIDEBAR BRAND ROW
Premium Apple-level brand anchor with tokens
======================================== */
.sidebar-header {
padding: var(--space-lg) var(--space-md);
padding-bottom: var(--space-2xl);
border-bottom: none;
}
.sidebar-logo-link {
display: flex;
align-items: center;
gap: var(--space-sm);
text-decoration: none;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-md);
transition: background var(--duration-fast) var(--ease-default);
}
.sidebar-logo-link:hover {
background: var(--bg-secondary);
}
.sidebar-logo-img {
width: var(--sidebar-logo-size);
height: var(--sidebar-logo-size);
object-fit: contain;
}
.sidebar-logo-subtitle {
font-size: var(--sidebar-brand-size);
font-weight: 600;
color: var(--text-secondary);
letter-spacing: var(--sidebar-brand-tracking);
text-transform: uppercase;
line-height: 1.2;
}
/* ========================================
SIDEBAR NAVIGATION
Consistent section and item styling
======================================== */
.sidebar-nav {
flex: 1;
overflow-y: auto;
padding: 0;
}
.sidebar-section {
padding: 0 var(--space-md);
margin-bottom: var(--space-xs);
}
/* First section (Dashboard) - no top margin needed */
.sidebar-section:first-child {
margin-top: 0;
}
/* Section labels - unified styling */
.sidebar-section-title {
font-size: var(--sidebar-section-size);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--sidebar-section-tracking);
color: var(--text-tertiary);
padding: var(--space-2xl) var(--space-sm) var(--space-sm);
margin-bottom: var(--space-xs);
}
/* Navigation items - fully tokenized */
.sidebar-nav-item {
display: flex;
align-items: center;
gap: var(--space-sm);
width: 100%;
padding: var(--space-xs) var(--space-sm);
border: none;
background: transparent;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
text-align: left;
font-family: inherit;
margin-bottom: 2px;
}
.sidebar-nav-item:hover {
background: var(--bg-tertiary);
}
.sidebar-nav-item.active {
background: var(--astrovia-blue-subtle);
}
.sidebar-nav-item.active .sidebar-nav-label {
color: var(--astrovia-blue);
font-weight: 600;
}
/* Navigation icon container - fully tokenized */
.sidebar-nav-icon {
display: flex;
align-items: center;
justify-content: center;
width: var(--sidebar-nav-icon-size);
height: var(--sidebar-nav-icon-size);
background: var(--info-bg);
border: 1px solid var(--info-border);
border-radius: var(--radius-sm);
color: var(--astrovia-blue);
flex-shrink: 0;
transition: all var(--duration-fast) var(--ease-default);
}
.sidebar-nav-icon i {
font-size: var(--icon-md);
line-height: 1;
}
.sidebar-nav-item:hover .sidebar-nav-icon {
background: var(--astrovia-blue-subtle);
border-color: var(--astrovia-blue-border);
color: var(--astrovia-blue);
}
.sidebar-nav-item.active .sidebar-nav-icon {
background: var(--astrovia-blue);
border-color: var(--astrovia-blue);
color: var(--text-inverse);
box-shadow: var(--shadow-subtle);
}
/* Navigation label - consistent typography */
.sidebar-nav-label {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-primary);
line-height: 1.3;
letter-spacing: -0.01em;
}
/* Sidebar Plan Section - tokenized */
.sidebar-plan-section {
padding: var(--space-xs) var(--space-md);
border-top: 1px solid var(--border-lighter);
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--space-xs);
background: transparent;
}
.plan-badge {
display: flex;
align-items: center;
gap: 6px;
padding: 0;
background: transparent;
border: none;
font-size: 0.6875rem;
font-weight: 500;
color: var(--text-tertiary);
box-shadow: none;
line-height: 1;
}
.plan-badge svg {
display: block;
flex-shrink: 0;
color: var(--text-tertiary);
width: 14px;
height: 14px;
}
.plan-badge.plan-pro {
color: var(--astrovia-blue);
}
.plan-badge.plan-pro svg {
color: var(--astrovia-blue);
}
.plan-badge.plan-enterprise {
color: var(--success);
}
.plan-badge.plan-enterprise svg {
color: var(--success);
}
.plan-badge.plan-admin {
color: var(--text-tertiary);
}
.plan-badge.plan-admin svg {
color: var(--text-tertiary);
}
.plan-name {
text-transform: uppercase;
letter-spacing: 0.3px;
font-size: 0.6875rem;
line-height: 1;
}
.plan-upgrade-btn {
padding: 5px var(--space-xs);
background: var(--astrovia-blue);
color: var(--text-inverse);
border: none;
border-radius: var(--radius-xs);
font-size: var(--font-size-xs);
font-weight: 500;
cursor: pointer;
transition: all var(--duration-micro) var(--ease-default);
line-height: 1;
margin-left: auto;
}
.plan-upgrade-btn:hover {
opacity: 0.9;
}
.plan-upgrade-btn.hidden {
display: none;
}
/* Sidebar Footer - tokenized */
.sidebar-footer {
padding: var(--space-sm) var(--space-md);
border-top: 1px solid var(--border-lighter);
display: flex;
align-items: center;
gap: var(--space-xs);
background: var(--bg-primary);
}
.sidebar-footer .sidebar-nav-item {
flex: 1;
}
.sidebar-user-icon {
background: var(--info-gradient);
}
.sidebar-user-name {
font-size: var(--font-size-sm);
}
.sidebar-signout-btn {
display: flex;
align-items: center;
justify-content: center;
width: var(--icon-xl);
height: var(--icon-xl);
border: none;
background: var(--bg-secondary);
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--text-tertiary);
transition: all var(--duration-micro) var(--ease-default);
flex-shrink: 0;
}
.sidebar-signout-btn:hover {
background: var(--error-tint);
color: var(--error);
}
/* Main Content Area */
.main-content {
flex: 1;
height: 100vh;
overflow-y: auto;
background: var(--background-app);
padding: 40px 48px;
padding-bottom: 120px;
}
/* Tool View Layout Override - Reset legacy .c-shell spacing inside sidebar layout */
.content-view .c-shell {
padding-top: 0;
padding-left: 0;
padding-right: 0;
margin: 0;
max-width: none;
min-height: auto;
}
/* Ensure first child of content-view has no top margin (prevents layout gap) */
.content-view > *:first-child {
margin-top: 0;
}
/* Content Views - Premium Dashboard Width */
.content-view {
max-width: 1280px;
margin: 0 auto;
width: 100%;
min-height: calc(100vh - 160px);
position: relative;
}
/* Tool Content Inner - Optimized for form-heavy views */
.tool-content-inner {
max-width: 1100px;
}
/* ========================================
DEPRECATED LEGACY HEADER STYLES
These patterns are deprecated - use .page-header instead
Kept for backwards compatibility only
======================================== */
.content-header {
margin-bottom: var(--space-xl);
max-width: 1100px;
}
/* @deprecated - Use .page-header instead */
.page-title-tab {
display: none; /* Hidden - use .page-header */
}
/* @deprecated - Use .page-header-icon instead */
.page-title-icon {
display: none; /* Hidden - use .page-header-icon */
}
/* Compatibility: .title-content still used in some cards */
.title-content {
flex: 1;
min-width: 0;
}
/* Compatibility: .content-title used in inline contexts */
.content-title {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.02em;
line-height: 1.3;
}
/* Compatibility: .content-subtitle used in inline contexts */
.content-subtitle {
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
letter-spacing: 0.01em;
}
/* Dashboard Welcome */
/* Unified Dashboard Header - Apple/Stripe/Linear Premium Level */
.dashboard-unified-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 20px 24px;
margin-bottom: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.dashboard-welcome-section {
display: flex;
align-items: center;
gap: 16px;
flex: 0 0 auto;
min-width: 0;
}
.dashboard-welcome-avatar {
width: 68px;
height: 68px;
border-radius: var(--radius-full);
background: var(--info-bg);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.375rem;
font-weight: 600;
color: var(--astrovia-blue);
flex-shrink: 0;
overflow: hidden;
border: 2px solid var(--info-border);
}
.dashboard-welcome-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.dashboard-welcome-content {
flex: 1;
min-width: 0;
}
.dashboard-welcome-title {
font-size: 1.0625rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
letter-spacing: -0.02em;
white-space: nowrap;
}
.dashboard-welcome-subtitle {
font-size: 0.6875rem;
color: var(--text-secondary);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.01em;
}
.dashboard-clocks-section {
display: flex;
align-items: center;
gap: 16px;
flex: 1;
justify-content: center;
}
/* Right Section - Connected Status + Settings */
.dashboard-header-right {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
/* Header Connection Status Badge */
.header-connection-status {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(255, 255, 255, 0.55);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 500;
color: var(--text-secondary);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.header-connection-status.connected {
color: var(--astrovia-blue);
border-color: var(--info-border);
background: var(--info-bg);
}
.header-status-dot {
width: 6px;
height: 6px;
border-radius: var(--radius-full);
background: var(--text-secondary);
}
.header-connection-status.connected .header-status-dot {
background: var(--astrovia-blue);
box-shadow: 0 0 0 3px rgba(31, 81, 246, 0.15);
}
/* Header Sync Timestamp */
.header-sync-timestamp {
font-size: 0.6875rem;
font-weight: 500;
color: var(--text-tertiary);
white-space: nowrap;
}
/* Header Sync Refresh Button */
.header-sync-refresh-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: rgba(255, 255, 255, 0.55);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
color: var(--text-tertiary);
cursor: pointer;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
box-shadow: var(--shadow-xs);
}
.header-sync-refresh-btn:hover {
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
background: var(--bg-white);
box-shadow: 0 2px 4px rgba(31, 81, 246, 0.08);
}
.header-sync-refresh-btn.refreshing svg {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Legacy - keeping for backwards compatibility */
.dashboard-welcome {
display: none;
}
/* World Clock Widget - Now part of unified header */
.world-clock-widget {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
margin-bottom: 0;
box-shadow: none;
position: relative;
}
.world-clock-header {
display: none;
}
.world-clock-settings-float {
display: none;
}
.world-clock-settings-float:hover {
background: var(--info-bg);
border-color: var(--info-border);
color: var(--astrovia-blue);
transform: rotate(45deg);
}
.world-clock-settings-float svg {
width: 14px;
height: 14px;
}
.world-clock-title {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text-primary);
}
.world-clock-settings-btn {
display: none;
}
.world-clock-settings-btn-bordered {
display: flex;
align-items: center;
justify-content: center;
width: var(--space-2xl);
height: var(--space-2xl);
background: rgba(255, 255, 255, 0.55);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
color: var(--text-tertiary);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
flex-shrink: 0;
box-shadow: var(--shadow-xs);
}
.world-clock-settings-btn-bordered:hover {
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
background: var(--bg-white);
box-shadow: 0 2px 4px rgba(31, 81, 246, 0.08);
}
.world-clock-grid {
display: flex;
gap: var(--space-lg);
align-items: center;
justify-content: center;
padding: 0;
}
/* Premium Pill-Shaped Clock Items - Sleek Apple-level Design */
.world-clock-item {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.6);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
padding: 10px 18px 10px 14px;
min-width: auto;
transition: all var(--duration-fast) var(--ease-default);
cursor: default;
box-shadow: var(--shadow-xs);
}
.world-clock-item:hover {
background: var(--bg-white);
border-color: var(--astrovia-blue);
box-shadow: 0 2px 4px rgba(31, 81, 246, 0.08);
}
.world-clock-item:hover .world-clock-time {
color: var(--astrovia-blue);
}
.world-clock-location {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.world-clock-flag {
font-size: 17px;
line-height: 1;
}
.world-clock-location-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.world-clock-city {
font-size: 11px;
font-weight: 600;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: 0.4px;
line-height: 1.2;
}
.world-clock-meta {
font-size: 10px;
font-weight: 500;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.2px;
line-height: 1.1;
}
.world-clock-time {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
white-space: nowrap;
transition: color var(--duration-fast) var(--ease-default);
line-height: 1;
}
/* Clock Settings Modal */
.clock-settings-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.clock-settings-modal.active {
opacity: 1;
visibility: visible;
}
.clock-settings-content {
background: var(--bg-white);
border-radius: var(--radius-lg);
width: 90%;
max-width: 480px;
max-height: 80vh;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
transform: scale(0.95);
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.clock-settings-modal.active .clock-settings-content {
transform: scale(1);
}
.clock-settings-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--border-lighter);
}
.clock-settings-header h3 {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.clock-settings-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: transparent;
border: none;
border-radius: var(--radius-sm);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.clock-settings-close:hover {
background: var(--bg-subtle);
color: var(--text-primary);
}
.clock-settings-body {
padding: 20px 24px;
max-height: 50vh;
overflow-y: auto;
}
.clock-timezone-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.clock-timezone-option {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--bg-subtle);
border: 1px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.clock-timezone-option:hover {
background: var(--info-bg);
border-color: var(--info-border);
}
.clock-timezone-option.selected {
background: var(--info-bg);
border-color: var(--astrovia-blue);
}
.clock-timezone-option input {
width: 18px;
height: 18px;
accent-color: var(--astrovia-blue);
}
.clock-timezone-info {
flex: 1;
}
.clock-timezone-name {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
}
.clock-timezone-desc {
font-size: 0.75rem;
color: var(--text-secondary);
}
.clock-settings-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 16px 24px;
border-top: 1px solid var(--border-lighter);
background: var(--bg-subtle);
}
.clock-settings-btn {
padding: 10px 20px;
border-radius: var(--radius-md);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.clock-settings-btn.secondary {
background: var(--bg-white);
border: 1px solid var(--border-light);
color: var(--text-secondary);
}
.clock-settings-btn.secondary:hover {
background: var(--bg-subtle);
border-color: var(--border-light);
}
.clock-settings-btn.primary {
background: var(--astrovia-blue);
border: 1px solid var(--astrovia-blue);
color: var(--text-inverse);
}
.clock-settings-btn.primary:hover {
background: var(--astrovia-blue-dark);
border-color: var(--astrovia-blue-dark);
}
@media (max-width: 768px) {
.world-clock-widget {
padding: 16px 18px;
}
.world-clock-item {
min-width: 120px;
padding: 12px 14px;
}
.world-clock-time {
font-size: 1.25rem;
}
}
/* Shopify Analytics Dashboard - Enhanced Design System */
.shopify-analytics-section {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 20px 24px;
margin-top: 20px;
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
/* Smooth layout transitions when country panel appears/disappears */
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Blue strip removed - neutral card design */
/* Analytics Header - Apple/Linear Premium with Strict Spacing */
.analytics-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 16px;
}
.analytics-header-left {
display: flex;
flex-direction: column;
gap: 4px;
}
.analytics-title {
display: flex;
align-items: center;
gap: 12px;
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.02em;
}
.analytics-title svg {
color: var(--astrovia-blue);
padding: 8px;
background: var(--info-bg);
border: 1px solid var(--info-border);
border-radius: var(--radius-md);
width: 36px;
height: 36px;
}
.analytics-subtitle {
font-size: 0.75rem;
color: var(--text-secondary);
padding-left: 48px;
}
.analytics-period-select {
padding: 8px 32px 8px 12px;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
font-size: 0.875rem;
color: var(--text-primary);
background: var(--bg-white);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
transition: all 0.2s;
}
.analytics-period-select:hover {
border-color: var(--astrovia-blue);
background: var(--info-bg);
box-shadow: 0 2px 6px rgba(31, 81, 246, 0.08);
}
.analytics-period-select:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: 0 0 0 3px rgba(31, 81, 246, 0.1);
}
.analytics-summary-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
}
@media (max-width: 900px) {
.analytics-summary-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 500px) {
.analytics-summary-grid {
grid-template-columns: 1fr;
}
}
.analytics-card {
background: var(--bg-secondary);
border-radius: var(--radius-md);
padding: 20px 24px;
border: 1px solid var(--border-lighter);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.analytics-card:hover {
border-color: var(--astrovia-blue);
background: var(--info-bg);
box-shadow: 0 2px 6px rgba(31, 81, 246, 0.08);
}
.analytics-card-label {
font-size: 0.6875rem;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 8px;
}
.analytics-card-value {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
}
.analytics-countries-section {
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid var(--border-lighter);
}
.analytics-countries-header {
margin-bottom: 18px;
}
.analytics-countries-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 6px 0;
}
.analytics-countries-subtitle {
font-size: 0.8125rem;
color: var(--text-tertiary);
}
.analytics-countries-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
.analytics-country-card {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: var(--bg-white);
border: 1px solid var(--border-lighter);
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.analytics-country-card:hover {
border-color: var(--astrovia-blue);
background: var(--info-bg);
box-shadow: 0 2px 6px rgba(31, 81, 246, 0.08);
}
.analytics-country-card.active {
border-color: var(--astrovia-blue);
background: var(--info-bg);
box-shadow: 0 4px 12px rgba(31, 81, 246, 0.1);
}
.analytics-country-flag {
font-size: 1.75rem;
line-height: 1;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.analytics-country-info {
flex: 1;
min-width: 0;
}
.analytics-country-name {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 2px;
}
.analytics-country-stats {
font-size: 0.8125rem;
color: var(--text-secondary);
}
.analytics-loading {
grid-column: 1 / -1;
text-align: center;
padding: 32px;
color: var(--text-tertiary);
font-size: 0.875rem;
background: var(--bg-secondary);
border-radius: var(--radius-md);
}
.country-tax-detail {
margin-top: 20px;
padding: 24px;
background: var(--info-bg);
border: 1px solid var(--info-border);
border-radius: var(--radius-lg);
}
.country-tax-detail-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.country-tax-detail-header h4 {
font-size: 1.125rem;
font-weight: 700;
color: var(--text-primary);
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
.country-tax-close {
background: var(--bg-white);
border: 1px solid var(--border-lighter);
padding: 8px;
cursor: pointer;
color: var(--text-tertiary);
border-radius: var(--radius-sm);
transition: all 0.2s;
}
.country-tax-close:hover {
background: var(--bg-secondary);
border-color: var(--border-light);
color: var(--text-primary);
}
.country-tax-detail-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 20px;
}
@media (max-width: 700px) {
.country-tax-detail-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.country-tax-item {
display: flex;
flex-direction: column;
gap: 6px;
background: var(--bg-white);
padding: 14px 16px;
border-radius: var(--radius-md);
border: 1px solid var(--border-lighter);
}
.country-tax-label {
font-size: 0.6875rem;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.country-tax-value {
font-size: 1.25rem;
font-weight: 700;
color: var(--astrovia-blue);
letter-spacing: -0.01em;
}
.country-tax-notes {
padding: 16px 18px;
background: var(--bg-white);
border-radius: var(--radius-md);
border: 1px solid var(--border-lighter);
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.6;
}
/* ============================================
PREMIUM ANALYTICS DASHBOARD V2
============================================ */
/* Clean Utility Bar - Minimal Header */
.analytics-utility-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
gap: 16px;
padding: 0 4px;
}
.analytics-status-left {
display: flex;
align-items: center;
gap: 8px;
}
.status-divider {
color: var(--text-tertiary);
font-size: 0.875rem;
opacity: 0.5;
}
.analytics-filters-right {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
/* Legacy support - keeping for any remaining references */
.analytics-hero-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
gap: 20px;
}
.analytics-header-left {
flex: 1;
min-width: 0;
}
.analytics-header-right {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
/* Analytics Title Row - Inline Layout */
.analytics-title-row {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.analytics-hero-title {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.375rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.025em;
}
.analytics-status-group {
display: flex;
align-items: center;
gap: 10px;
}
.connection-status-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px 5px 10px;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.01em;
transition: all 0.2s;
}
.connection-status-pill.connected {
background: var(--info-bg);
border: 1px solid var(--info-border);
color: var(--astrovia-blue);
}
.connection-status-pill.syncing {
background: var(--info-bg);
border: 1px solid var(--info-border);
color: var(--astrovia-blue);
}
.connection-status-pill.disconnected {
background: rgba(239, 68, 68, 0.08);
color: var(--error-dark);
}
.connection-status-pill.warning {
background: rgba(245, 158, 11, 0.08);
color: var(--warning);
}
.connection-status-pill.test_data {
background: linear-gradient(135deg, rgba(31, 81, 246, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
border: 1px solid rgba(31, 81, 246, 0.2);
color: var(--astrovia-blue);
}
.connection-status-pill.test_data .status-dot {
background: linear-gradient(135deg, var(--astrovia-blue) 0%, #8B5CF6 100%);
box-shadow: 0 0 5px rgba(31, 81, 246, 0.4);
}
.status-dot {
width: 7px;
height: 7px;
border-radius: var(--radius-full);
flex-shrink: 0;
}
.connection-status-pill.connected .status-dot {
background: var(--astrovia-blue);
box-shadow: 0 0 5px rgba(31, 81, 246, 0.5);
}
.connection-status-pill.syncing .status-dot {
background: var(--astrovia-blue);
animation: pulse 1.5s infinite;
}
.connection-status-pill.disconnected .status-dot {
background: var(--error);
box-shadow: 0 0 5px rgba(239, 68, 68, 0.4);
}
.connection-status-pill.warning .status-dot {
background: var(--warning);
box-shadow: 0 0 5px rgba(245, 158, 11, 0.4);
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.sync-timestamp {
font-size: 0.75rem;
color: var(--text-muted);
font-weight: 400;
opacity: 0.8;
}
.sync-refresh-btn {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.sync-refresh-btn:hover {
color: var(--astrovia-blue);
background: rgba(31, 81, 246, 0.08);
}
.sync-refresh-btn.refreshing svg {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Empty State Styles */
.chart-empty-state,
.empty-countries-message {
display: flex;
align-items: center;
justify-content: center;
min-height: 150px;
color: var(--text-muted);
font-size: 0.875rem;
font-weight: 500;
text-align: center;
padding: 24px;
background: var(--bg-light);
border-radius: var(--radius-md);
border: 1px dashed var(--border-light);
}
.analytics-hero-subtitle {
display: block;
font-size: 0.9375rem;
color: var(--text-secondary);
padding-left: 42px;
}
/* Pill-style Select - Unified Design */
/* Filter Selects - Apple/Linear Premium Pills with Strict Spacing */
.analytics-currency-select,
.analytics-period-select-premium {
padding: 8px 32px 8px 16px;
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
font-size: 0.8125rem;
font-weight: 500;
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.55);
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 24 24' fill='none' stroke='%2395A1B4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
min-width: 80px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.analytics-currency-select:hover,
.analytics-period-select-premium:hover {
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
background-color: var(--info-bg);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231F51F6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
box-shadow: 0 2px 6px rgba(31, 81, 246, 0.08);
}
.analytics-currency-select:focus,
.analytics-period-select-premium:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: 0 0 0 3px rgba(31, 81, 246, 0.08);
}
/* Metrics Rows - Strict 12-column Grid with Unified Spacing */
.analytics-metrics-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 16px;
}
.analytics-secondary-row {
margin-bottom: 24px;
}
/* ========================================
SALES BREAKDOWN - Collapsible Panel
======================================== */
.sales-breakdown-section {
margin-bottom: 28px;
}
.sales-breakdown-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 auto;
padding: 8px 16px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
font-family: inherit;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.sales-breakdown-toggle:hover {
background: var(--info-bg);
border-color: var(--astrovia-blue);
box-shadow: 0 2px 6px rgba(31, 81, 246, 0.08);
}
.sales-breakdown-toggle:hover .sales-breakdown-toggle-text,
.sales-breakdown-toggle:hover .sales-breakdown-chevron {
color: var(--astrovia-blue);
stroke: var(--astrovia-blue);
}
.sales-breakdown-toggle-text {
font-size: 0.75rem;
font-weight: 500;
color: var(--text-secondary);
transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.sales-breakdown-toggle-icon {
display: none;
}
.sales-breakdown-chevron {
stroke: var(--text-tertiary);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.sales-breakdown-section.expanded .sales-breakdown-chevron {
transform: rotate(180deg);
}
.sales-breakdown-section.expanded .sales-breakdown-toggle {
margin-bottom: 16px;
}
.sales-breakdown-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: var(--bg-white);
border: 1px solid var(--border-lighter);
border-radius: var(--radius-lg);
opacity: 0;
box-shadow: var(--shadow-sm);
}
.sales-breakdown-section.expanded .sales-breakdown-content {
max-height: 800px;
padding: 28px 32px 40px;
opacity: 1;
}
.sales-breakdown-grid {
display: grid;
grid-template-columns: 1fr 1px 1fr;
gap: 0;
}
.breakdown-column {
display: flex;
flex-direction: column;
padding: 0 24px;
}
.breakdown-column:first-child {
padding-left: 0;
}
.breakdown-column:last-child {
padding-right: 0;
}
.breakdown-separator {
background: var(--border-lighter);
margin: 0 8px;
}
.breakdown-column-title {
font-size: 0.6875rem;
font-weight: 700;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid var(--border-lighter);
}
.breakdown-items {
display: flex;
flex-direction: column;
gap: 4px;
}
.breakdown-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid transparent;
transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.breakdown-item {
margin: 0 -8px;
padding: 10px 8px;
border-radius: var(--radius-sm);
transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.breakdown-item:hover {
background: var(--bg-subtle);
}
.breakdown-item-label {
font-size: 0.875rem;
font-weight: 500;
color: var(--text-secondary);
}
.breakdown-item-value {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.breakdown-item-value.negative {
color: var(--error-dark);
}
.breakdown-item-value.highlight {
color: var(--astrovia-blue);
font-weight: 700;
}
.breakdown-item-value.total {
font-size: 1.125rem;
font-weight: 700;
color: var(--text-primary);
}
.breakdown-item-highlight {
background: var(--info-bg);
margin: 0 -12px;
padding: 12px !important;
border-radius: var(--radius-md);
border: 1px solid var(--info-border);
transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.breakdown-item-highlight:hover {
background: #e8f0ff;
}
.breakdown-item-total {
background: linear-gradient(135deg, var(--bg-subtle) 0%, #f8fafc 100%);
margin: 8px -12px 0;
padding: 14px 12px !important;
border-radius: var(--radius-md);
border: 1px solid var(--border-lighter);
}
.breakdown-item-total:hover {
background: linear-gradient(135deg, #eef1f5 0%, #f3f5f7 100%);
}
.breakdown-divider {
height: 1px;
background: var(--border-lighter);
margin: 8px 0;
}
.breakdown-add-row {
position: relative;
padding-left: 20px;
}
.breakdown-add-row::before {
content: '+';
position: absolute;
left: 0;
color: var(--text-tertiary);
font-weight: 600;
font-size: 0.875rem;
}
@media (max-width: 768px) {
.sales-breakdown-grid {
grid-template-columns: 1fr;
gap: 28px;
}
.breakdown-separator {
display: none;
}
.breakdown-column {
padding: 0;
}
.sales-breakdown-section.expanded .sales-breakdown-content {
padding: 24px 20px 36px;
max-height: 1000px;
}
}
/* ========================================
SHOPIFY-STYLE BREAKDOWN CARDS
Clean rows with label left, value right
======================================== */
.breakdown-card {
background: var(--bg-white);
border-radius: var(--radius-md);
margin-bottom: 20px;
overflow: visible;
}
.breakdown-card:last-child {
margin-bottom: 0;
padding-bottom: 8px;
}
.breakdown-card-title {
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 12px 0;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-lighter);
}
.breakdown-rows {
display: flex;
flex-direction: column;
padding-bottom: 4px;
}
.breakdown-row {
display: flex;
justify-content: space-between;
align-items: center;
border-left: 4px solid transparent;
padding: 12px 16px 12px 12px;
border-top: 1px solid var(--border-lighter);
transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.breakdown-row:first-child {
border-top: none;
}
/* Alternating row backgrounds - Shopify style */
.breakdown-row:nth-child(even) {
background: var(--bg-secondary, #F9FAFB);
}
.breakdown-row:hover {
background: var(--bg-subtle);
}
.breakdown-row-label {
font-size: 0.875rem;
font-weight: 400;
color: var(--astrovia-blue);
}
.breakdown-row-value {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.breakdown-row-value.negative {
color: var(--error-dark);
}
.breakdown-row-value.highlight {
color: var(--astrovia-blue);
}
.breakdown-row-value.total {
font-size: 0.875rem;
}
.breakdown-row-indent {
padding-left: 28px;
}
.breakdown-row-indent .breakdown-row-label {
color: var(--text-secondary);
font-weight: 400;
}
.breakdown-row-highlight {
background: var(--info-bg);
border-left: 4px solid var(--astrovia-blue);
border-top: 1px solid var(--border-lighter);
border-bottom: 1px solid var(--border-lighter);
margin: 0;
padding: 12px 16px 12px 12px;
}
.breakdown-row-highlight:hover {
background: #e8f0ff;
}
.breakdown-row-add {
position: relative;
padding-left: 24px;
border-top: 1px solid var(--border-lighter);
}
.breakdown-row-add::before {
content: '+';
position: absolute;
left: 12px;
color: var(--text-tertiary);
font-weight: 400;
font-size: 0.875rem;
}
.breakdown-row-add .breakdown-row-label {
color: var(--text-secondary);
font-weight: 400;
}
.breakdown-row-total {
background: var(--bg-subtle);
border-top: 1px solid var(--border-lighter);
margin: 0;
padding: 12px 16px 12px 12px;
border-left: 4px solid transparent;
}
.breakdown-row-total:hover {
background: #eef1f5;
}
.breakdown-row-total .breakdown-row-label {
font-weight: 600;
color: var(--text-primary);
}
/* ========================================
COUNTRY FILTER - Multi-select Dropdown
======================================== */
.country-filter-container {
position: relative;
}
.country-filter-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(255, 255, 255, 0.55);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
cursor: pointer;
font-family: inherit;
font-size: 0.8125rem;
font-weight: 500;
color: var(--text-secondary);
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.country-filter-btn:hover {
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
background-color: var(--info-bg);
box-shadow: 0 2px 6px rgba(31, 81, 246, 0.08);
}
.country-filter-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.country-filter-btn svg.filter-chevron {
width: 14px;
height: 14px;
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.country-filter-container.open .country-filter-btn svg.filter-chevron {
transform: rotate(180deg);
}
.country-filter-dropdown {
position: absolute;
top: 100%;
right: 0;
margin-top: 8px;
width: 320px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
max-height: 420px;
display: flex;
flex-direction: column;
}
.country-filter-container.open .country-filter-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.country-filter-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px;
border-bottom: 1px solid var(--border-lighter);
}
.country-filter-header span {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
}
.country-filter-clear {
font-size: 0.75rem;
font-weight: 500;
color: var(--astrovia-blue);
background: none;
border: none;
cursor: pointer;
padding: 4px 8px;
border-radius: var(--radius-xs);
transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.country-filter-clear:hover {
background: var(--info-bg);
}
.country-filter-search {
padding: 12px 16px;
border-bottom: 1px solid var(--border-lighter);
}
.country-filter-search input {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-family: inherit;
transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.country-filter-search input:focus {
outline: none;
border-color: var(--astrovia-blue);
}
.country-filter-search input::placeholder {
color: var(--text-tertiary);
}
.country-filter-list {
flex: 1;
overflow-y: auto;
padding: 8px 12px;
max-height: 240px;
}
.country-filter-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 8px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.country-filter-item:hover {
background: var(--bg-subtle);
}
.country-filter-item input[type="checkbox"] {
width: 16px;
height: 16px;
border-radius: var(--radius-xs);
cursor: pointer;
accent-color: var(--astrovia-blue);
}
.country-filter-item-flag {
font-size: 1.125rem;
}
.country-filter-item-name {
flex: 1;
font-size: 0.875rem;
font-weight: 500;
color: var(--text-primary);
}
.country-filter-item-count {
font-size: 0.75rem;
font-weight: 500;
color: var(--text-tertiary);
background: var(--bg-subtle);
padding: 2px 8px;
border-radius: var(--radius-md);
}
.country-filter-loading {
padding: 20px;
text-align: center;
color: var(--text-tertiary);
font-size: 0.875rem;
}
.country-filter-actions {
display: flex;
gap: 8px;
padding: 12px 16px;
border-top: 1px solid var(--border-lighter);
}
.country-filter-select-all {
flex: 1;
padding: 10px 16px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
font-size: 0.8125rem;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.country-filter-select-all:hover {
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
}
.country-filter-apply {
flex: 1;
padding: 10px 16px;
background: var(--astrovia-blue);
border: none;
border-radius: var(--radius-sm);
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-inverse);
cursor: pointer;
transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.country-filter-apply:hover {
background: var(--astrovia-blue-hover);
}
.country-filter-active {
background: var(--info-bg);
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
}
@media (max-width: 640px) {
.country-filter-dropdown {
width: 280px;
right: -40px;
}
}
@media (max-width: 900px) {
.analytics-metrics-row {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 500px) {
.analytics-metrics-row {
grid-template-columns: 1fr;
}
}
/* Metric Cards - Neutral Surface with Astrovia Blue Accents Only */
/* Analytics Metric Cards - Apple/Linear Premium Level with Strict Spacing */
.analytics-metric-card {
display: flex;
align-items: center;
gap: 20px;
padding: 24px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
min-height: 96px;
}
.analytics-metric-card:hover {
border-color: var(--astrovia-blue);
background: var(--info-bg);
box-shadow: 0 2px 6px rgba(31, 81, 246, 0.08);
}
/* ALL icons use unified Astrovia Blue tint - monochromatic palette */
.analytics-metric-icon {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
background: var(--info-bg);
border: 1px solid var(--info-border);
border-radius: var(--radius-lg);
color: var(--astrovia-blue);
flex-shrink: 0;
}
.analytics-metric-icon svg,
.analytics-metric-icon i {
width: 24px;
height: 24px;
font-size: 24px;
}
.analytics-metric-content {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.analytics-metric-label {
font-size: 0.6875rem;
font-weight: 500;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.2;
}
.analytics-metric-value {
font-size: 1.375rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.1;
}
/* ========================================
DESIGN SYSTEM METRIC CARDS
Standardized cards for CIE, Nexus, and all dashboards
Uses neutral surface with subtle state tints - NOT loud gradients
======================================== */
.ds-metric-card {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-lg);
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
box-shadow: var(--shadow-subtle);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
min-height: 90px;
}
.ds-metric-card:hover {
border-color: var(--astrovia-blue);
box-shadow: var(--shadow-card-hover);
}
.ds-metric-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--info-bg);
border: 1px solid var(--info-border);
border-radius: var(--radius-md);
color: var(--astrovia-blue);
flex-shrink: 0;
}
.ds-metric-icon svg {
width: 20px;
height: 20px;
}
.ds-metric-content {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
flex: 1;
}
.ds-metric-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
line-height: 1.1;
}
.ds-metric-label {
font-size: var(--font-size-xs);
font-weight: 500;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.3;
}
/* State Variants - Subtle tints, NOT loud gradient blocks */
.ds-metric-card--error {
border-left: 3px solid var(--error);
}
.ds-metric-card--error .ds-metric-icon {
background: var(--error-bg-solid);
border-color: var(--error-border);
color: var(--error);
}
.ds-metric-card--error .ds-metric-value {
color: var(--error-dark);
}
.ds-metric-card--warning {
border-left: 3px solid var(--warning);
}
.ds-metric-card--warning .ds-metric-icon {
background: var(--warning-bg-solid);
border-color: var(--warning-border);
color: var(--warning);
}
.ds-metric-card--warning .ds-metric-value {
color: var(--warning-text);
}
.ds-metric-card--success {
border-left: 3px solid var(--success);
}
.ds-metric-card--success .ds-metric-icon {
background: var(--success-tint);
border-color: var(--success-border-strong);
color: var(--success);
}
.ds-metric-card--success .ds-metric-value {
color: var(--success);
}
.ds-metric-card--neutral {
border-left: 3px solid var(--neutral-border-strong);
}
.ds-metric-card--neutral .ds-metric-icon {
background: var(--neutral-bg);
border-color: var(--neutral-border);
color: var(--text-secondary);
}
/* Metric Grid Layout */
.ds-metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--col-min-2xl), 1fr));
gap: var(--space-lg);
margin-bottom: var(--space-2xl);
}
@media (max-width: 768px) {
.ds-metric-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.ds-metric-grid {
grid-template-columns: 1fr;
}
}
/* ========================================
PAGE HEADER ICON PILL
Unified icon container for page titles (CIE, Nexus, etc.)
======================================== */
.ds-page-icon {
width: var(--space-3xl);
height: var(--space-3xl);
background: var(--info-bg);
border: 1px solid var(--info-border);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--astrovia-blue);
flex-shrink: 0;
}
.ds-page-icon svg {
width: var(--space-xl);
height: var(--space-xl);
}
/* ========================================
CIE/NEXUS STATS ROW
Standardized stats display within cards
======================================== */
.ds-stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--space-md);
padding-top: var(--space-lg);
margin-top: var(--space-lg);
border-top: 1px solid var(--border-light);
}
.ds-stat-item {
text-align: center;
padding: var(--space-md);
background: var(--bg-secondary);
border-radius: var(--radius-sm);
}
.ds-stat-value {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--astrovia-blue);
line-height: 1.2;
}
.ds-stat-label {
font-size: var(--font-size-xs);
color: var(--text-secondary);
margin-top: var(--space-xs);
}
/* ========================================
PENDING BADGE
Unified badge for pending counts
======================================== */
.ds-pending-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-xs);
background: var(--error);
color: var(--text-inverse);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 600;
min-width: var(--space-lg);
}
.ds-pending-badge:empty,
.ds-pending-badge[data-count="0"] {
display: none;
}
/* ========================================
METRIC STRIP
Compact horizontal metrics row for CIE/Nexus
Used instead of tall stacked cards
======================================== */
.metric-strip {
display: flex;
flex-wrap: wrap;
gap: var(--space-lg);
padding: var(--space-lg) 0;
margin-top: var(--space-md);
border-top: 1px solid var(--border-light);
}
.metric-strip-item {
display: flex;
flex-direction: column;
gap: var(--space-xs);
min-width: var(--col-min-sm);
}
.metric-strip-value {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
font-variant-numeric: tabular-nums;
}
.metric-strip-value.accent {
color: var(--astrovia-blue);
}
.metric-strip-label {
font-size: var(--font-size-xs);
color: var(--text-secondary);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.03em;
}
@media (max-width: 640px) {
.metric-strip {
gap: var(--space-md);
}
.metric-strip-item {
min-width: var(--col-min-xs);
flex: 1 1 calc(50% - var(--space-md));
}
}
/* ========================================
METRIC STAT CARDS
Used for CIE sync stats and similar grid layouts
======================================== */
.metric-stat-card {
text-align: center;
padding: var(--space-md);
background: var(--bg-secondary);
border-radius: var(--radius-md);
flex: 1;
min-width: var(--col-min-sm);
}
.metric-stat-value {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
font-variant-numeric: tabular-nums;
}
.metric-stat-value.accent {
color: var(--astrovia-blue);
}
.metric-stat-value.accent-purple {
color: var(--astrovia-purple);
}
.metric-stat-value.accent-warning {
color: var(--warning);
}
.metric-stat-value.accent-success {
color: var(--success);
}
.metric-stat-value.accent-info {
color: var(--info-text);
}
.metric-stat-value.text-sm {
font-size: var(--font-size-sm);
font-weight: 600;
}
.metric-stat-label {
font-size: var(--font-size-xs);
color: var(--text-secondary);
margin-top: var(--space-xs);
}
@media (max-width: 640px) {
.metric-stat-card {
flex: 1 1 calc(50% - var(--space-md));
min-width: var(--col-min-xs);
}
}
/* ========================================
FILTER GRID
Consistent filter bar layout for CIE/Nexus
Ensures labels never truncate
======================================== */
.filter-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--col-min-xl), 1fr));
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.filter-grid-item {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.filter-grid-label {
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.filter-grid-input,
.filter-grid-select {
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
background: var(--bg-white);
color: var(--text-primary);
width: 100%;
transition: all var(--duration-fast) var(--ease-default);
}
.filter-grid-input:hover,
.filter-grid-select:hover {
border-color: var(--border-dark);
}
.filter-grid-input:focus,
.filter-grid-select:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-input);
}
.filter-grid-actions {
display: flex;
align-items: flex-end;
}
/* 4-column layout for CIE filters */
.filter-grid-4 {
grid-template-columns: 1fr 1fr 1fr auto;
}
@media (max-width: 900px) {
.filter-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.filter-grid-actions {
grid-column: span 2;
}
}
@media (max-width: 640px) {
.filter-grid,
.filter-grid-4 {
grid-template-columns: 1fr;
}
.filter-grid-actions {
grid-column: span 1;
}
}
/* ========================================
SEARCH BAR PATTERN
Apple-style search input with icon
======================================== */
.search-bar-wrapper {
position: relative;
}
.search-bar-icon {
position: absolute;
left: var(--space-md);
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.search-bar-input {
width: 100%;
padding: var(--space-md) var(--space-md) var(--space-md) var(--space-3xl);
font-size: var(--font-size-md);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
background: var(--bg-white);
color: var(--text-primary);
outline: none;
transition: all var(--duration-fast) var(--ease-default);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.search-bar-input:focus {
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-input);
}
.search-bar-input::placeholder {
color: var(--text-tertiary);
}
/* CIE White Select Fields */
.cie-select-white {
background: var(--bg-white) !important;
}
/* CIE Info Panel Trigger */
.cie-info-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--space-lg) var(--space-xl);
background: var(--card-surface);
border: none;
border-radius: 0;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
}
.cie-info-trigger:hover {
background: var(--bg-secondary);
}
.cie-info-trigger .info-icon {
width: 40px;
height: 40px;
background: var(--info-bg);
border: 1px solid var(--info-border);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--astrovia-blue);
}
.cie-info-trigger .info-icon i {
font-size: 20px;
}
/* CIE Section Spacing */
.cie-section {
display: flex;
flex-direction: column;
gap: var(--space-xl);
}
.cie-section > .c-card {
margin-bottom: 0;
}
/* CIE Material Analysis Card */
.cie-material-card {
padding: var(--space-xl);
background: var(--card-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
}
.cie-material-header {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.cie-material-icon {
width: 40px;
height: 40px;
background: var(--info-bg);
border: 1px solid var(--info-border);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--astrovia-blue);
}
.cie-material-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-md);
}
@media (max-width: 768px) {
.cie-material-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.cie-material-item {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-lg);
text-align: center;
}
.cie-material-value {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-xs);
}
.cie-material-label {
font-size: 0.75rem;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.02em;
}
/* CIE Official Results Table */
.cie-results-table {
width: 100%;
border-collapse: collapse;
}
.cie-results-table th,
.cie-results-table td {
padding: var(--space-md) var(--space-lg);
text-align: left;
border-bottom: 1px solid var(--border-light);
}
.cie-results-table th {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.02em;
background: var(--bg-secondary);
}
.cie-results-table tr:hover td {
background: var(--bg-secondary);
}
.cie-results-table .code-cell {
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-primary);
}
.cie-results-table .desc-cell {
font-size: 0.8125rem;
color: var(--text-secondary);
line-height: 1.5;
max-width: 500px;
}
/* CIE HS Code Badges */
.hs-code-badge {
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
font-size: 0.875rem;
font-weight: 700;
color: var(--astrovia-blue);
background: var(--info-bg);
border: 1px solid var(--info-border);
padding: 6px 12px;
border-radius: var(--radius-md);
letter-spacing: 0.02em;
}
.hs-code-hs6 {
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
font-size: 0.75rem;
color: var(--text-tertiary);
padding: 2px 6px;
background: var(--bg-secondary);
border-radius: var(--radius-sm);
}
.hs-region-label {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--astrovia-blue);
background: rgba(31, 81, 246, 0.08);
padding: 3px 8px;
border-radius: var(--radius-sm);
}
.hs-duty-pill {
font-size: 0.75rem;
font-weight: 500;
color: var(--success);
background: var(--success-bg);
border: 1px solid var(--success-border);
padding: 4px 10px;
border-radius: var(--radius-full);
}
/* CIE Suggestion Cards */
.hs-suggestion-card {
background: var(--card-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: var(--space-lg);
margin-bottom: var(--space-md);
transition: all var(--duration-fast) var(--ease-default);
}
.hs-suggestion-card:hover {
border-color: var(--border-medium);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.hs-suggestion-card:last-child {
margin-bottom: 0;
}
/* CIE Official Results */
.hs-official-result {
display: flex;
align-items: center;
gap: var(--space-lg);
padding: var(--space-md) var(--space-lg);
background: var(--card-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
margin-bottom: var(--space-sm);
transition: all var(--duration-fast) var(--ease-default);
}
.hs-official-result:hover {
background: var(--bg-secondary);
}
.hs-official-result:last-child {
margin-bottom: 0;
}
.hs-code-mono {
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-primary);
background: var(--bg-secondary);
padding: 4px 10px;
border-radius: var(--radius-sm);
white-space: nowrap;
min-width: 140px;
}
.hs-result-description {
flex: 1;
font-size: 0.8125rem;
color: var(--text-secondary);
line-height: 1.4;
}
.hs-result-duty {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-primary);
background: var(--bg-tertiary);
padding: 4px 10px;
border-radius: var(--radius-sm);
white-space: nowrap;
}
.hs-result-duty.free {
color: var(--success);
background: var(--success-bg);
}
/* ========================================
FILTER CONTROLS ROW
Standardized layout for filter dropdowns
======================================== */
.ds-controls-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-lg);
flex-wrap: wrap;
gap: var(--space-md);
}
.ds-controls-group {
display: flex;
gap: var(--space-sm);
align-items: center;
flex-wrap: wrap;
}
.ds-filter-select {
padding: 10px 16px;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
background: var(--bg-white);
color: var(--text-primary);
cursor: pointer;
transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ds-filter-select:hover {
border-color: var(--astrovia-blue);
}
.ds-filter-select:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-input);
}
/* ========================================
TRADEMARK SUPERSCRIPT
======================================== */
.trademark-sup {
font-size: 0.5rem;
vertical-align: super;
color: var(--text-tertiary);
margin-left: 2px;
}
/* Content subtitle inline (smaller, under title) */
.content-subtitle-inline {
margin: 0;
font-size: var(--font-size-sm);
color: var(--text-secondary);
font-weight: 400;
}
/* ========================================
CIE/NEXUS CARD HEADER
Icon + title + button layout
======================================== */
.ds-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
}
.ds-card-header-left {
display: flex;
align-items: center;
gap: var(--space-md);
}
.ds-card-icon {
width: 44px;
height: 44px;
background: var(--info-bg);
border: 1px solid var(--info-border);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--astrovia-blue);
flex-shrink: 0;
}
.ds-card-icon svg {
width: 22px;
height: 22px;
}
.ds-card-icon i {
font-size: 22px;
}
.ds-card-title {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
}
.ds-card-meta {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-top: var(--space-xs);
}
/* Visual Section (Chart + Countries) - True 50/50 Layout */
.analytics-visual-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
margin-top: var(--space-lg);
}
@media (max-width: 900px) {
.analytics-visual-section {
grid-template-columns: 1fr;
}
}
/* Chart Container - Square */
.analytics-chart-container {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
display: flex;
flex-direction: column;
}
.analytics-section-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 16px 0;
letter-spacing: -0.01em;
}
.analytics-chart-wrapper {
position: relative;
width: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0;
}
/* Hide the donut chart - globe only design */
.analytics-chart-wrapper canvas#revenueDonutChart {
display: none !important;
}
/* Globe Container - Interactive 3D Earth (40% larger, centered) */
.globe-container {
position: relative;
width: 240px;
height: 240px;
min-width: 240px;
min-height: 240px;
max-width: 240px;
max-height: 240px;
aspect-ratio: 1 / 1;
z-index: 15;
pointer-events: auto;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
cursor: grab;
overflow: hidden;
}
/* Globe canvas - starts hidden, fades in smoothly */
.globe-container canvas {
width: 240px !important;
height: 240px !important;
min-width: 240px;
min-height: 240px;
aspect-ratio: 1 / 1;
position: absolute;
z-index: 2;
opacity: 0;
transform: scale(0.9);
transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1), transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
object-fit: contain;
}
.globe-container.globe-ready canvas {
opacity: 1;
transform: scale(1);
}
.globe-container:active {
cursor: grabbing;
}
/* Globe Texture Switcher - positioned below globe in container */
.globe-texture-switcher {
position: relative;
margin-top: 16px;
display: flex;
justify-content: center;
gap: 6px;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.95);
border-radius: var(--radius-xl);
border: 1px solid var(--border-lighter);
box-shadow: var(--shadow-sm);
z-index: 10;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.globe-texture-btn {
width: 32px;
height: 32px;
border-radius: var(--radius-lg);
border: 2px solid transparent;
background: var(--bg-subtle);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0;
}
.globe-texture-btn:hover {
background: var(--bg-muted);
transform: scale(1.08);
}
.globe-texture-btn.active {
border-color: var(--brand-primary);
background: rgba(31, 81, 246, 0.08);
box-shadow: 0 0 0 2px rgba(31, 81, 246, 0.15);
}
.globe-texture-btn .texture-icon {
font-size: 16px;
line-height: 1;
}
/* Globe fallback emoji */
.globe-fallback {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
/* Globe HUD Pill - Replaces title, shows revenue/country info */
.globe-hud-pill {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 8px;
background: var(--bg-subtle);
padding: 8px 16px;
border-radius: var(--radius-xl);
border: 1px solid var(--border-lighter);
margin-bottom: 16px;
min-height: 40px;
width: fit-content;
}
.hud-idle {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.hud-label {
font-size: 0.6875rem;
font-weight: 500;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.hud-value {
font-size: 1rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
}
.hud-country {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.hud-country-flag {
font-size: 1.25rem;
line-height: 1;
}
.hud-country-name {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
}
.hud-separator {
font-size: 0.875rem;
color: var(--text-tertiary);
font-weight: 400;
}
.hud-country-revenue {
font-size: 0.875rem;
font-weight: 700;
color: var(--astrovia-blue);
}
.hud-country-orders {
font-size: 0.75rem;
font-weight: 500;
color: var(--text-secondary);
}
/* Countries Container - Equal Height */
.analytics-countries-container {
background: var(--bg-white);
border: 1px solid var(--border-lighter);
border-radius: var(--radius-md);
padding: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
display: flex;
flex-direction: column;
}
.analytics-countries-header-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
/* Apple-style Disclosure Pill Button */
.analytics-expand-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
font-size: 0.75rem;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.analytics-expand-btn:hover {
background: var(--info-bg);
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
box-shadow: 0 2px 6px rgba(31, 81, 246, 0.08);
}
.analytics-expand-btn #expand-btn-icon {
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.analytics-expand-btn.expanded #expand-btn-icon {
transform: rotate(180deg);
}
/* Countries Grid V2 - 2 Columns Layout */
.analytics-countries-grid-v2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
flex: 1;
overflow: hidden;
align-content: start;
}
/* Smooth collapse animation for extra items - show only 6 (2×3) when collapsed */
.analytics-countries-grid-v2:not(.expanded) .analytics-country-card-v2:nth-child(n+7) {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: -10px; /* Offset the gap */
opacity: 0;
border-color: transparent;
overflow: hidden;
pointer-events: none;
}
.analytics-country-card-v2 {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--bg-secondary);
border: 1px solid var(--border-lighter);
border-radius: var(--radius-md);
cursor: pointer;
min-width: 0;
/* Smooth transition for expand/collapse */
max-height: 200px;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
margin 0.35s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.analytics-country-card-v2:hover {
border-color: var(--astrovia-blue);
background: var(--info-bg);
box-shadow: 0 2px 6px rgba(31, 81, 246, 0.08);
}
.analytics-country-card-v2.active {
background: var(--info-bg);
border-color: var(--astrovia-blue);
}
.analytics-country-flag-v2 {
font-size: 1.375rem;
line-height: 1;
flex-shrink: 0;
}
.analytics-country-info-v2 {
flex: 1;
min-width: 0;
}
.analytics-country-name-v2 {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
line-height: 1.2;
}
.analytics-country-metrics-v2 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-size: 0.8125rem;
color: var(--text-secondary);
}
.analytics-country-metric-item {
display: inline-flex;
align-items: center;
gap: 3px;
}
.analytics-country-metric-item .metric-value {
font-weight: 600;
color: var(--text-primary);
}
/* Responsive: 1 column on very small screens */
@media (max-width: 400px) {
.analytics-countries-grid-v2 {
grid-template-columns: 1fr;
}
}
.analytics-country-metric-item {
display: flex;
align-items: center;
gap: 3px;
}
.analytics-country-metric-item .metric-value {
font-weight: 600;
color: var(--text-primary);
}
/* Country Detail Panel Wrapper - Smooth Height Transitions */
.country-detail-wrapper {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
margin-top: 20px;
}
.country-detail-wrapper.expanded {
grid-template-rows: 1fr;
}
.country-detail-wrapper .country-tax-detail-v2 {
overflow: hidden;
}
/* Country Detail Panel V2 - Neutral Surface */
.country-tax-detail-v2 {
padding: 24px;
background: var(--card-surface);
border: 1px solid var(--card-border);
border-radius: var(--radius-lg);
box-shadow: var(--card-shadow);
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.country-detail-wrapper.expanded .country-tax-detail-v2 {
opacity: 1;
transform: translateY(0);
}
.country-tax-detail-header-v2 {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--info-border);
}
.country-tax-detail-header-v2 h4 {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
margin: 0;
}
.country-tax-close-v2 {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--bg-white);
border: 1px solid var(--border-lighter);
border-radius: var(--radius-md);
cursor: pointer;
color: var(--text-tertiary);
transition: all 0.2s;
}
.country-tax-close-v2:hover {
background: var(--bg-secondary);
border-color: var(--border-light);
color: var(--text-primary);
}
.country-tax-metrics-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 18px;
}
@media (max-width: 800px) {
.country-tax-metrics-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.country-tax-metric {
display: flex;
flex-direction: column;
gap: 6px;
background: var(--bg-white);
padding: 16px;
border-radius: var(--radius-md);
border: 1px solid var(--border-lighter);
}
.country-tax-metric-label {
font-size: 0.6875rem;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.country-tax-metric-value {
font-size: 1.125rem;
font-weight: 700;
color: var(--astrovia-blue);
letter-spacing: -0.01em;
}
.country-tax-notes-v2 {
padding: 16px 18px;
background: var(--bg-white);
border-radius: var(--radius-md);
border: 1px solid var(--border-lighter);
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.6;
}
/* Analytics Loading State - Premium Skeleton Shimmer */
.analytics-loading-state {
position: relative;
pointer-events: none;
}
.analytics-loading-state::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.6) 50%,
transparent 100%);
animation: shimmer 1.5s infinite;
border-radius: inherit;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.analytics-skeleton {
background: var(--bg-secondary);
border-radius: var(--radius-sm);
overflow: hidden;
position: relative;
}
.analytics-skeleton::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.4) 50%,
transparent 100%);
animation: shimmer 1.5s infinite;
}
.analytics-skeleton-value {
height: 32px;
width: 80%;
margin-top: 8px;
}
.analytics-skeleton-label {
height: 12px;
width: 60%;
}
/* Loading overlay for period changes */
.analytics-refreshing .analytics-metrics-row,
.analytics-refreshing .analytics-visual-section {
opacity: 0.5;
pointer-events: none;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.analytics-refresh-indicator {
display: none;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 20px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-xl);
font-size: 0.8125rem;
font-weight: 500;
color: var(--text-secondary);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.analytics-refreshing .analytics-refresh-indicator {
display: flex;
}
.refresh-spinner {
width: 16px;
height: 16px;
border: 2px solid var(--border-light);
border-top-color: var(--astrovia-blue);
border-radius: var(--radius-full);
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Connect Store Prompt - Uses unified card surface tokens */
.shopify-connect-prompt {
background: var(--card-surface);
border: 1px solid var(--card-border);
border-radius: var(--radius-lg);
padding: 48px 40px;
margin-top: 24px;
text-align: center;
box-shadow: var(--card-shadow);
position: relative;
overflow: hidden;
}
.connect-prompt-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 88px;
height: 88px;
background: var(--bg-white);
border-radius: var(--radius-xl);
margin-bottom: 24px;
color: var(--astrovia-blue);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.04);
}
.connect-prompt-title {
font-size: 1.375rem;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 12px 0;
letter-spacing: -0.02em;
}
.connect-prompt-text {
font-size: 0.9375rem;
color: var(--text-secondary);
margin: 0 auto 28px auto;
max-width: 420px;
line-height: 1.6;
}
.connect-prompt-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background: var(--astrovia-blue);
color: var(--text-inverse);
border: none;
border-radius: var(--radius-md);
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 14px rgba(31, 81, 246, 0.3);
}
.connect-prompt-btn:hover {
background: var(--astrovia-blue-hover);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(31, 81, 246, 0.35);
}
.connect-prompt-btn:active {
transform: translateY(0);
}
/* Dashboard Tools Grid */
.dashboard-tools-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 32px;
}
@media (max-width: 900px) {
.dashboard-tools-grid {
grid-template-columns: 1fr;
}
}
.dashboard-tool-card {
display: flex;
align-items: center;
gap: 20px;
padding: 24px;
background: var(--bg-white);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
text-align: left;
font-family: inherit;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.dashboard-tool-card:hover {
border-color: rgba(31, 81, 246, 0.2);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(31, 81, 246, 0.04);
transform: translateY(-1px);
}
.dashboard-tool-card:hover .dashboard-tool-chevron {
transform: translateX(4px);
color: var(--astrovia-blue);
}
.dashboard-tool-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: var(--info-bg);
border: 1px solid var(--info-border);
border-radius: var(--radius-md);
color: var(--astrovia-blue);
flex-shrink: 0;
}
.dashboard-tool-content {
flex: 1;
min-width: 0;
}
.dashboard-tool-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 6px;
}
.dashboard-tool-desc {
font-size: 0.8125rem;
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
}
.dashboard-tool-chevron {
color: var(--text-tertiary);
flex-shrink: 0;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Admin Card */
.admin-card {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 28px;
margin-bottom: 24px;
box-shadow: var(--shadow-xs);
}
/* Account Card */
.account-card {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 28px;
margin-bottom: 24px;
box-shadow: var(--shadow-xs);
}
.account-card-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 20px;
}
/* Account Info Styles */
.account-info {
margin-bottom: 0;
}
.account-info-row {
display: flex;
align-items: flex-start;
padding: 16px 0;
border-bottom: 1px solid var(--border-lighter);
}
.account-info-row:last-child {
border-bottom: none;
}
.account-label {
font-size: 0.8125rem;
font-weight: 500;
color: var(--text-secondary);
min-width: 120px;
}
.account-value {
font-size: 0.9375rem;
font-weight: 500;
color: var(--text-primary);
}
.account-tools {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.account-tool-badge {
display: inline-block;
padding: 6px 12px;
background: var(--info-gradient);
color: var(--astrovia-blue);
font-size: 0.75rem;
font-weight: 600;
border-radius: var(--radius-sm);
border: 1px solid var(--badge-border);
}
.account-tool-badge.admin-badge {
background: var(--info-gradient);
color: var(--astrovia-blue);
border-color: var(--info-border);
}
.account-tool-badge.no-tools {
background: var(--bg-secondary);
color: var(--text-tertiary);
border-color: var(--border-light);
}
/* Profile Section Styles */
.profile-section {
display: flex;
gap: 32px;
align-items: flex-start;
}
.profile-image-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
.profile-avatar {
width: 100px;
height: 100px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, var(--info-bg) 0%, rgba(31, 81, 246, 0.15) 100%);
color: var(--astrovia-blue);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 2rem;
border: 3px solid rgba(31, 81, 246, 0.15);
overflow: hidden;
}
.profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-image-actions {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.profile-upload-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 16px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
font-size: 0.8125rem;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.profile-upload-btn:hover {
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
background: var(--info-bg);
}
.profile-remove-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 12px;
background: transparent;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: 500;
color: var(--text-tertiary);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.profile-remove-btn:hover {
border-color: var(--error);
color: var(--error);
background: var(--error-tint);
}
.profile-details {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
}
.profile-email {
display: block;
padding: 10px 0;
color: var(--text-secondary);
}
@media (max-width: 600px) {
.profile-section {
flex-direction: column;
align-items: center;
}
.profile-details {
width: 100%;
}
}
/* ========================================
Account Page V2 - Modern Design System
======================================== */
.account-settings-grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: 24px;
max-width: 1100px;
}
@media (max-width: 900px) {
.account-settings-grid {
grid-template-columns: 1fr;
}
}
.account-main-column {
display: flex;
flex-direction: column;
gap: 24px;
}
.account-side-column {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Account Card V2 */
.account-card-v2 {
background: var(--card-surface-solid);
border: 1px solid var(--card-border);
border-radius: var(--radius-lg);
box-shadow: var(--card-shadow);
overflow: hidden;
}
.account-card-header {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 24px;
border-bottom: 1px solid var(--border-light);
background: var(--panel-white-gradient);
}
.account-card-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--info-bg) 0%, rgba(31, 81, 246, 0.12) 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--astrovia-blue);
flex-shrink: 0;
}
.account-card-icon.security-icon {
background: linear-gradient(135deg, #E8FFF3 0%, #D1FAE5 100%);
color: var(--success);
}
/* Security Card v2 */
.security-card-v2 {
border: 1px solid var(--border-light);
}
.security-icon-v2 {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, #E8FFF3 0%, #D1FAE5 100%);
border: 1px solid rgba(16, 185, 129, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: var(--success);
}
.security-icon-v2 i {
font-size: 20px;
}
.account-card-header-text {
flex: 1;
}
.account-card-title-v2 {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.01em;
}
.account-card-subtitle {
font-size: 0.8125rem;
color: var(--text-tertiary);
margin: 2px 0 0 0;
}
/* Profile Section V2 */
.profile-section-v2 {
display: flex;
gap: 32px;
padding: 24px;
align-items: flex-start;
}
.profile-avatar-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.profile-avatar-v2 {
width: 88px;
height: 88px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, var(--info-bg) 0%, rgba(31, 81, 246, 0.18) 100%);
color: var(--astrovia-blue);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.75rem;
border: 3px solid rgba(31, 81, 246, 0.12);
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.profile-avatar-v2:hover {
border-color: rgba(31, 81, 246, 0.25);
box-shadow: 0 4px 16px rgba(31, 81, 246, 0.15);
}
.profile-avatar-v2 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-avatar-actions {
display: flex;
gap: 6px;
}
.avatar-upload-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.avatar-upload-btn:hover {
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
background: var(--info-bg);
}
.avatar-remove-btn {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
color: var(--text-tertiary);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.avatar-remove-btn:hover {
border-color: var(--error);
color: var(--error);
background: var(--error-tint);
}
/* Hide native file inputs - use styled label buttons instead */
#profile-image-upload,
.profile-avatar-section input[type="file"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.profile-form-section {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
}
/* Form Elements V2 */
.form-group-v2 {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-label-v2 {
font-size: 0.8125rem;
font-weight: 500;
color: var(--text-secondary);
letter-spacing: 0.01em;
}
.form-input-v2 {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
font-size: 0.9375rem;
color: var(--text-primary);
background: var(--input-surface);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.form-input-v2:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-input);
}
.form-input-v2::placeholder {
color: var(--text-tertiary);
}
.form-static-value {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
font-size: 0.9375rem;
color: var(--text-secondary);
}
.form-static-value svg {
color: var(--text-tertiary);
flex-shrink: 0;
}
.form-row-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 600px) {
.form-row-2col {
grid-template-columns: 1fr;
}
.profile-section-v2 {
flex-direction: column;
align-items: center;
}
.profile-form-section {
width: 100%;
}
}
/* Account Card Footer */
.account-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 24px;
background: var(--bg-secondary);
border-top: 1px solid var(--border-light);
}
.account-card-footer .form-result {
flex: 1;
}
/* Buttons V2 - Apple-style */
.btn-primary-v2 {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: linear-gradient(135deg, var(--astrovia-blue) 0%, #3B5CE8 100%);
color: var(--text-inverse);
border: none;
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: transform 0.15s cubic-bezier(0.25, 0.1, 0.25, 1),
box-shadow 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
opacity 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
box-shadow: 0 2px 8px rgba(31, 81, 246, 0.25);
-webkit-tap-highlight-color: transparent;
}
.btn-primary-v2:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(31, 81, 246, 0.35);
}
.btn-primary-v2:active {
transform: scale(0.97) translateY(0);
opacity: 0.9;
transition: transform 0.06s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.btn-secondary-v2 {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: var(--bg-white);
color: var(--text-primary);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: transform 0.15s cubic-bezier(0.25, 0.1, 0.25, 1),
border-color 0.15s cubic-bezier(0.25, 0.1, 0.25, 1),
color 0.15s cubic-bezier(0.25, 0.1, 0.25, 1),
background-color 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
-webkit-tap-highlight-color: transparent;
}
.btn-secondary-v2:hover {
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
background: var(--info-bg);
}
.btn-secondary-v2:active {
transform: scale(0.97);
transition: transform 0.06s cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* Security Settings V2 */
.security-settings-v2 {
padding: 20px 24px;
}
.security-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.security-option-info {
flex: 1;
}
.security-option-label {
font-size: 0.9375rem;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 4px;
}
.security-option-desc {
font-size: 0.8125rem;
color: var(--text-tertiary);
line-height: 1.4;
}
/* Toggle Switch V2 - Apple-style */
.toggle-switch-v2 {
position: relative;
display: inline-block;
width: 46px;
height: 26px;
flex-shrink: 0;
}
.toggle-switch-v2 input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider-v2 {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--bg-tertiary);
transition: background-color var(--duration-normal) var(--ease-default);
border-radius: var(--radius-xl);
}
.toggle-slider-v2:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
left: 2px;
bottom: 2px;
background-color: var(--text-inverse);
/* Smooth transitions for ALL properties */
transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
width 0.15s cubic-bezier(0.25, 0.1, 0.25, 1),
box-shadow 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
border-radius: var(--radius-md);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15),
0 1px 1px rgba(0, 0, 0, 0.06);
}
/* Hover effect on track */
.toggle-switch-v2:hover .toggle-slider-v2:before {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18),
0 1px 2px rgba(0, 0, 0, 0.08);
}
/* Active press effect - expand thumb when unchecked */
.toggle-switch-v2:active .toggle-slider-v2:before {
width: 26px;
}
.toggle-switch-v2 input:checked + .toggle-slider-v2 {
background: linear-gradient(135deg, var(--astrovia-blue) 0%, #3B5CE8 100%);
}
.toggle-switch-v2 input:checked + .toggle-slider-v2:before {
transform: translateX(20px);
}
/* Active press effect when checked - expand and shift left to compensate */
.toggle-switch-v2:active input:checked + .toggle-slider-v2:before {
width: 26px;
transform: translateX(16px);
}
.security-status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 12px;
padding: 6px 12px;
background: linear-gradient(135deg, #E8FFF3 0%, #D1FAE5 100%);
color: var(--success);
font-size: 0.75rem;
font-weight: 500;
border-radius: var(--radius-lg);
}
.security-divider-v2 {
height: 1px;
background: var(--border-light);
margin: 0 24px;
}
/* Password Section */
.password-section {
padding: 20px 24px;
}
.password-section-title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 16px 0;
}
.password-form-v2 {
display: flex;
flex-direction: column;
gap: 14px;
}
/* Form Result */
.form-result {
padding: 10px 14px;
border-radius: var(--radius-sm);
font-size: 0.8125rem;
font-weight: 500;
}
.form-result .result-success {
color: var(--success);
background: linear-gradient(135deg, #E8FFF3 0%, #D1FAE5 100%);
padding: 10px 14px;
border-radius: var(--radius-sm);
}
.form-result .result-error {
color: var(--error-dark);
background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
padding: 10px 14px;
border-radius: var(--radius-sm);
}
/* Info Cards (Side Column) */
.account-info-card {
background: var(--card-surface-solid);
border: 1px solid var(--card-border);
border-radius: var(--radius-lg);
padding: 20px;
box-shadow: var(--card-shadow);
}
.info-card-header {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 14px;
}
.info-card-header svg {
color: var(--text-tertiary);
}
/* Tools Badge List */
.tools-badge-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tools-badge-list .account-tool-badge {
display: inline-flex;
align-items: center;
padding: 6px 12px;
background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
color: var(--astrovia-blue);
font-size: 0.75rem;
font-weight: 600;
border-radius: var(--radius-sm);
border: 1px solid rgba(31, 81, 246, 0.15);
}
.tools-badge-list .account-tool-badge.admin-badge {
background: linear-gradient(135deg, var(--astrovia-blue) 0%, #3B5CE8 100%);
color: var(--text-inverse);
border: none;
}
.tools-badge-list .account-tool-badge.no-tools {
background: var(--bg-secondary);
color: var(--text-tertiary);
border-color: var(--border-light);
}
/* Tax Markets Badge List */
.tax-markets-badge-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tax-markets-badge-list .no-markets {
font-size: 0.8125rem;
color: var(--text-tertiary);
font-style: italic;
}
.tax-market-item {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: linear-gradient(135deg, rgba(31, 81, 246, 0.08) 0%, rgba(31, 81, 246, 0.04) 100%);
border: 1px solid rgba(31, 81, 246, 0.12);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.tax-market-item:hover {
background: linear-gradient(135deg, rgba(31, 81, 246, 0.12) 0%, rgba(31, 81, 246, 0.08) 100%);
transform: translateY(-1px);
}
.tax-market-flag {
font-size: 1.125rem;
line-height: 1;
}
.tax-market-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-primary);
}
.auto-pay-indicator {
display: inline-flex;
padding: 2px 6px;
background: var(--success-gradient);
color: var(--text-inverse);
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: var(--radius-xs);
}
/* Subscription Status V2 */
.subscription-status-v2 {
min-height: 40px;
}
.loading-spinner-small {
font-size: 0.8125rem;
color: var(--text-tertiary);
}
/* Protection Card */
.protection-card {
background: linear-gradient(180deg, #F0FDF4 0%, #ECFDF5 100%);
border: 1px solid rgba(16, 185, 129, 0.2);
}
.protection-card .info-card-header svg,
.protection-card .info-card-header i {
font-size: 18px;
color: var(--success);
}
.protection-check i {
font-size: 12px;
font-weight: bold;
color: var(--text-inverse);
}
.protection-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.protection-item {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.8125rem;
color: var(--text-secondary);
line-height: 1.4;
}
.protection-check {
width: 18px;
height: 18px;
border-radius: var(--radius-full);
background: var(--success-gradient);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
.protection-check svg {
color: var(--text-inverse);
}
/* ========================================
Login & User Management Styles
(Note: Main .login-screen styles are defined earlier)
======================================== */
.login-field label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.login-field input {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
font-size: 1rem;
color: var(--text-primary);
background: var(--bg-white);
transition: all 0.2s;
}
.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: 0.875rem;
margin-bottom: 20px;
text-align: center;
}
.login-btn {
width: 100%;
padding: 14px 24px;
background: var(--astrovia-blue);
color: var(--text-inverse);
border: none;
border-radius: var(--radius-md);
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.login-btn:hover {
background: var(--astrovia-blue-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.login-btn:active {
transform: translateY(0);
}
.login-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.form-input {
width: 100%;
padding: 14px 16px;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
font-size: 0.9375rem;
font-weight: 500;
color: var(--text-primary);
background: var(--bg-white);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
font-family: inherit;
}
.form-input:hover {
border-color: var(--border-medium);
}
.form-input::placeholder {
color: var(--text-tertiary);
font-weight: 400;
}
select.form-input {
padding-right: 40px;
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 8L2 4h8z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
cursor: pointer;
}
.form-input:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-md);
}
/* Premium Input Section - DEPRECATED: Use .c-card which now has unified styling */
/* Kept for backwards compatibility, but .c-card now provides the same styling */
.premium-input-section {
/* Inherits from .c-card - no overrides needed */
}
/* ============================================================
PREMIUM CARD SYSTEM - Apple-level Aesthetics
============================================================ */
.premium-card {
background: var(--bg-white);
border: 2px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 28px 32px;
margin-bottom: 24px;
box-shadow: var(--shadow-sm);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.premium-card:hover {
border-color: var(--border-accent);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.card-title {
font-size: 1.125rem;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 24px 0;
letter-spacing: -0.02em;
display: flex;
align-items: center;
gap: 10px;
}
.card-title::before {
content: '';
width: 4px;
height: 20px;
background: var(--astrovia-blue);
border-radius: 2px;
}
/* Form Select (Premium Dropdown) */
.form-select {
width: 100%;
padding: var(--space-sm) var(--space-3xl) var(--space-sm) var(--space-md);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-primary);
background: var(--bg-white);
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 8L2 4h8z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-md) center;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
font-family: inherit;
}
.form-select:hover {
border-color: var(--border-medium);
}
.form-select:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-md);
}
/* Form hint text */
.form-hint {
display: block;
margin-top: var(--space-xs);
font-size: var(--font-size-xs);
color: var(--text-tertiary);
line-height: 1.4;
}
/* Text button (link-style) */
.c-btn-text {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 12px;
background: transparent;
border: none;
color: var(--astrovia-blue);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: var(--radius-sm);
}
.c-btn-text:hover {
background: var(--info-bg);
color: var(--astrovia-blue-hover);
}
/* Spin animation for loading states */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spin {
animation: spin 1s linear infinite;
}
/* Form sections with separator */
.taxos-form-section {
margin-top: var(--space-lg);
padding-top: var(--space-lg);
border-top: 1px solid var(--border-light);
}
.taxos-form-section-title {
margin: 0 0 var(--space-md) 0;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text-primary);
}
/* Threshold info grid */
.threshold-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-md);
}
/* Threshold info card */
.threshold-card {
padding: var(--space-lg);
border-radius: var(--radius-lg);
}
.threshold-card--eu {
background: var(--info-bg);
}
.threshold-card--uk {
background: var(--feature-blue-gradient);
}
.threshold-card-header {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-sm);
}
.threshold-card-icon {
font-size: var(--font-size-xl);
}
.threshold-card-title {
margin: 0;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text-primary);
}
.threshold-card-list {
margin: 0;
padding-left: var(--space-lg);
font-size: var(--font-size-xs);
color: var(--text-secondary);
line-height: 1.6;
}
/* VAT Calculation Expandable Section */
.taxos-calculation-details {
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
background: var(--bg-secondary);
overflow: hidden;
}
.taxos-calculation-summary {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
cursor: pointer;
font-weight: 500;
color: var(--text-primary);
background: var(--bg-primary);
transition: all var(--duration-fast) var(--ease-default);
}
.taxos-calculation-summary:hover {
background: var(--bg-secondary);
}
.taxos-calculation-summary svg {
color: var(--astrovia-blue);
flex-shrink: 0;
}
.taxos-calculation-details[open] .taxos-calculation-summary {
border-bottom: 1px solid var(--border-light);
}
.taxos-calculation-content {
padding: var(--space-lg);
}
.taxos-calculation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-md);
}
.taxos-calc-card {
padding: var(--space-md);
background: var(--bg-primary);
border-radius: var(--radius-md);
border: 1px solid var(--border-light);
}
.taxos-calc-card h5 {
margin: 0 0 var(--space-sm) 0;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text-primary);
}
.taxos-calc-card ol {
margin: 0;
padding-left: var(--space-lg);
font-size: var(--font-size-xs);
color: var(--text-secondary);
line-height: 1.8;
}
.taxos-calc-card ol li {
margin-bottom: var(--space-2xs);
}
/* Actions alignment */
.taxos-actions--right {
margin-top: var(--space-md);
text-align: right;
}
/* Accessible file input wrapper */
.file-input-group {
position: relative;
}
.file-input-group .form-input[type="file"] {
padding: var(--space-sm) var(--space-md);
font-size: var(--font-size-sm);
cursor: pointer;
}
.file-input-group .form-input[type="file"]::file-selector-button {
padding: var(--space-xs) var(--space-md);
margin-right: var(--space-sm);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-secondary);
color: var(--text-primary);
font-weight: 500;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
}
.file-input-group .form-input[type="file"]::file-selector-button:hover {
background: var(--bg-tertiary);
border-color: var(--border-medium);
}
/* Upload Zone (Premium Drag & Drop) */
.upload-zone {
border: 2px dashed var(--border-light);
border-radius: var(--radius-lg);
padding: var(--space-3xl) var(--space-2xl);
text-align: center;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-default);
background: var(--bg-secondary);
}
.upload-zone:hover {
border-color: var(--astrovia-blue);
background: var(--info-bg);
transform: translateY(-2px);
}
.upload-zone.dragover {
border-color: var(--astrovia-blue);
background: var(--info-bg);
border-style: solid;
}
.upload-zone svg {
color: var(--text-tertiary);
margin-bottom: var(--space-md);
transition: all var(--duration-fast) var(--ease-default);
}
.upload-zone:hover svg {
color: var(--astrovia-blue);
transform: translateY(-4px);
}
.upload-text {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
margin: 0 0 var(--space-xs) 0;
}
.upload-hint {
font-size: 0.875rem;
color: var(--text-tertiary);
margin: 0;
}
/* Action Row (Button Container) */
.action-row {
display: flex;
gap: 16px;
margin-top: 32px;
flex-wrap: wrap;
}
/* Content Header (Page Title) */
.content-header {
margin-bottom: 32px;
}
.content-title {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 8px 0;
letter-spacing: -0.03em;
}
.content-subtitle {
font-size: 1rem;
color: var(--text-secondary);
margin: 0;
line-height: 1.6;
}
/* Tool Content Container */
.tool-content-inner {
max-width: 1200px;
width: 100%;
}
/* Summary Cards (Results Grid) */
.summary-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
margin-bottom: 32px;
}
/* Filter Sections */
.filter-description {
font-size: 0.9375rem;
color: var(--text-secondary);
margin: 0 0 20px 0;
line-height: 1.6;
}
.filter-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.filter-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
}
.filter-select {
padding: 10px 36px 10px 14px;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
font-size: 0.9375rem;
font-weight: 500;
color: var(--text-primary);
background: var(--bg-white);
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 8L2 4h8z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 180px;
}
.filter-select:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-sm);
}
/* Carrier-Only Section */
.carrier-only-section {
margin-top: 24px;
}
/* Enhanced Input Styling */
.input-with-prefix,
.input-with-suffix {
background: var(--bg-white);
border: 2px solid var(--border-light);
border-radius: var(--radius-md);
overflow: hidden;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.input-with-prefix:hover,
.input-with-suffix:hover {
border-color: var(--border-medium);
}
.input-with-prefix:focus-within,
.input-with-suffix:focus-within {
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-md);
}
.input-prefix,
.input-suffix {
padding: 0 16px;
background: var(--bg-tertiary);
color: var(--text-secondary);
font-weight: 600;
font-size: 0.9375rem;
min-width: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.login-spinner {
display: inline-flex;
align-items: center;
}
.spinner-icon {
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 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;
}
/* ========================================
FOUC PREVENTION & APP READY STATE
======================================== */
body:not(.app-ready) .content-view {
display: none !important;
}
body.app-ready #dashboard-view {
display: block;
}
.title-admin-badge {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
margin-left: 12px;
padding: 5px 12px;
background: linear-gradient(135deg, var(--astrovia-blue) 0%, #3B5CE8 100%);
color: var(--text-inverse);
border-radius: var(--radius-sm);
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1;
}
.content-header .content-subtitle {
font-size: 0.9375rem;
color: var(--text-secondary);
line-height: 1.5;
margin-top: 10px;
max-width: 600px;
letter-spacing: -0.01em;
}
/* ========================================
USER MANAGEMENT - EXISTING USERS LIST
Premium card layout matching JS renderUsersList classes
======================================== */
.users-list {
display: flex;
flex-direction: column;
gap: 0;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-xs);
}
.users-list .user-row {
display: grid !important;
grid-template-columns: minmax(200px, 1fr) minmax(180px, auto) auto 140px !important;
align-items: center;
gap: 20px;
padding: 18px 24px;
border-bottom: 1px solid var(--border-lighter);
transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
text-align: left;
position: relative;
}
.user-row:last-child {
border-bottom: none;
}
.user-row:hover {
background: var(--bg-secondary);
}
.users-list .user-info {
display: flex;
flex-direction: row;
align-items: center;
gap: 14px;
min-width: 0;
}
.user-avatar {
width: 44px;
height: 44px;
border-radius: var(--radius-full);
background: var(--info-gradient);
border: 2px solid var(--border-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 600;
color: var(--astrovia-blue);
flex-shrink: 0;
overflow: hidden;
}
.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-full);
}
.user-details {
display: flex;
flex-direction: column;
gap: var(--space-xs);
min-width: 0;
}
.user-name {
font-weight: 600;
font-size: 0.9375rem;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.users-list .user-email {
font-size: 0.8125rem;
color: var(--text-secondary);
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-plan {
display: flex;
align-items: center;
justify-content: center;
min-width: 80px;
}
.user-plan .plan-badge {
position: static !important;
transform: none !important;
display: inline-flex;
padding: 4px 10px;
border-radius: var(--radius-md);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
}
.user-plan .plan-badge.admin {
background: var(--astrovia-gradient);
color: var(--text-inverse);
}
.user-plan .plan-badge.enterprise {
background: var(--purple-gradient);
color: var(--text-inverse);
}
.user-plan .plan-badge.pro {
background: var(--success-gradient);
color: var(--text-inverse);
}
.user-plan .plan-badge.essential {
background: var(--info-gradient);
color: var(--text-inverse);
}
.user-plan .plan-badge.free {
background: var(--bg-tertiary);
color: var(--text-secondary);
border: 1px solid var(--border-light);
}
.user-tools {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-start;
}
.tool-badge {
display: inline-flex;
padding: 4px 10px;
background: var(--badge-bg);
border: 1px solid var(--badge-border);
border-radius: var(--radius-md);
font-size: 0.6875rem;
font-weight: 500;
color: var(--astrovia-blue);
white-space: nowrap;
}
.tax-markets-separator {
display: inline-block;
width: 1px;
height: 20px;
background: var(--border-medium);
margin: 0 10px;
vertical-align: middle;
}
.tax-markets-group {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
background: var(--bg-secondary);
border-radius: var(--radius-sm);
}
.tax-market-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
line-height: 1;
cursor: default;
transition: transform var(--transition-fast);
}
.tax-market-badge:hover {
transform: scale(1.2);
}
.user-row .no-tools {
font-size: 0.8125rem;
color: var(--text-tertiary);
font-style: italic;
}
.users-list .user-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 6px;
font-size: 0.75rem;
color: var(--text-tertiary);
min-width: auto;
white-space: nowrap;
}
.user-meta-top {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
justify-content: flex-end;
flex-wrap: nowrap;
}
.user-meta-top .plan-badge {
position: static !important;
transform: none !important;
display: inline-flex;
padding: 5px 12px;
border-radius: var(--radius-sm);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
white-space: nowrap;
}
.user-meta-top .plan-badge.admin {
background: var(--astrovia-gradient);
color: var(--text-inverse);
}
.user-meta-top .plan-badge.enterprise {
background: var(--purple-gradient);
color: var(--text-inverse);
}
.user-meta-top .plan-badge.pro {
background: var(--success-gradient);
color: var(--text-inverse);
}
.user-meta-top .plan-badge.essential {
background: var(--info-gradient);
color: var(--text-inverse);
}
.user-meta-top .plan-badge.free {
background: var(--bg-tertiary);
color: var(--text-secondary);
border: 1px solid var(--border-light);
}
.user-status {
display: inline-flex;
padding: 3px 8px;
border-radius: var(--radius-sm);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.user-status.active {
background: var(--success-tint);
color: var(--success);
border: 1px solid var(--success-border);
}
.user-status.inactive {
background: var(--neutral-bg);
color: var(--text-tertiary);
border: 1px solid var(--neutral-border);
}
.user-last-login {
color: var(--text-tertiary);
}
.user-actions {
display: flex;
gap: 8px;
}
.action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--text-secondary);
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.action-btn:hover {
border-color: var(--border-accent);
color: var(--astrovia-blue);
background: var(--info-bg);
}
.action-btn.delete-btn:hover {
border-color: var(--error-border);
color: var(--error);
background: rgba(239, 68, 68, 0.05);
}
.action-btn.view-as-btn {
color: var(--astrovia-blue);
}
.action-btn.view-as-btn:hover {
background: var(--astrovia-blue);
color: var(--text-inverse);
border-color: var(--astrovia-blue);
}
/* ========================================
IMPERSONATION / VIEW AS CLIENT BANNER
======================================== */
.impersonation-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
color: #FFFFFF;
padding: 12px 24px;
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}
.impersonation-banner-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
max-width: 1400px;
width: 100%;
}
.impersonation-info {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
font-weight: 500;
}
.impersonation-info svg {
flex-shrink: 0;
}
.impersonation-label {
opacity: 0.9;
}
.impersonation-target {
font-weight: 600;
background: rgba(255, 255, 255, 0.15);
padding: 4px 12px;
border-radius: var(--radius-sm);
}
.impersonation-exit-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: var(--radius-sm);
color: #FFFFFF;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.impersonation-exit-btn:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.4);
transform: translateY(-1px);
}
.impersonation-exit-btn svg {
flex-shrink: 0;
}
/* Push down the main app when impersonation is active */
body.impersonation-active {
padding-top: 52px;
}
body.impersonation-active .sidebar {
top: 52px;
height: calc(100vh - 52px);
}
body.impersonation-active .header {
top: 52px;
}
@media (max-width: 768px) {
.impersonation-banner {
padding: 10px 16px;
}
.impersonation-banner-content {
flex-direction: column;
gap: 12px;
}
.impersonation-info {
font-size: 13px;
}
body.impersonation-active {
padding-top: 100px;
}
body.impersonation-active .sidebar {
top: 100px;
height: calc(100vh - 100px);
}
}
.user-actions .admin-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 14px;
background: linear-gradient(135deg, var(--astrovia-blue) 0%, #3B5CE8 100%);
color: var(--text-inverse);
border-radius: var(--radius-sm);
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
height: 36px;
box-sizing: border-box;
}
/* ========================================
TOOL VIEW LAYOUT FIX
Remove legacy spacing causing gap at top
======================================== */
#profitability-calc-view,
#duty-tax-view,
#landed-cost-view,
#vat-mapper-view {
padding-top: 0;
}
#profitability-calc-view .content-header,
#duty-tax-view .content-header,
#landed-cost-view .content-header,
#vat-mapper-view .content-header {
margin-top: 0;
padding-top: 0;
}
#profitability-calc-view .tool-content-inner,
#duty-tax-view .tool-content-inner,
#landed-cost-view .tool-content-inner,
#vat-mapper-view .tool-content-inner {
padding-top: 0;
margin-top: 0;
}
/* Remove min-height from tool wrappers inside content-view */
.content-view .c-shell,
.content-view .lc-shell {
min-height: auto;
padding-top: 0;
}
/* Reset first child margins in content views */
.content-view > *:first-child,
.content-view .content-header,
.content-view .tool-content-inner > *:first-child {
margin-top: 0;
}
/* ========================================
RESPONSIVE ADJUSTMENTS
======================================== */
@media (max-width: 900px) {
.user-row {
grid-template-columns: 1fr;
gap: 12px;
}
.user-tools {
justify-content: flex-start;
}
.user-meta {
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 12px;
}
.user-actions {
justify-content: flex-start;
}
}
/* ========================================
CRITICAL FIX: Tool View Top Gap Override
Target specific views with !important to ensure override
======================================== */
#profitability-calc-view,
#duty-tax-view,
#landed-cost-view,
#vat-mapper-view {
margin-top: 0 !important;
padding-top: 0 !important;
}
#profitability-calc-view > .content-header,
#duty-tax-view > .content-header,
#landed-cost-view > .content-header,
#vat-mapper-view > .content-header {
margin-top: 0 !important;
padding-top: 0 !important;
}
#profitability-calc-view .c-shell,
#duty-tax-view .c-shell,
#landed-cost-view .c-shell,
#vat-mapper-view .c-shell,
#profitability-calc-view .lc-shell,
#duty-tax-view .lc-shell,
#landed-cost-view .lc-shell,
#vat-mapper-view .lc-shell {
min-height: auto !important;
padding-top: 0 !important;
margin-top: 0 !important;
align-items: flex-start !important;
display: block !important;
}
/* Ensure tool content starts at top */
#profitability-calc-tool,
#duty-tax-tool,
.tool-content-inner {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Remove any vertical centering from main content */
.main-content {
display: block !important;
align-items: flex-start !important;
}
/* ========================================
PROFITABILITY CALCULATOR INPUT STYLES
======================================== */
/* Hide number input spinners for cleaner look */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
/* ========================================
SUBSCRIPTION SECTION STYLES
======================================== */
.subscription-status {
margin-bottom: 24px;
}
.subscription-active-badge {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: linear-gradient(135deg, #EEF2FF 0%, #E8EDFF 100%);
border: 1px solid var(--info-border);
border-radius: var(--radius-md);
}
.subscription-badge-icon {
width: 44px;
height: 44px;
border-radius: var(--radius-full);
background: var(--astrovia-gradient);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-inverse);
flex-shrink: 0;
}
.subscription-badge-icon.success {
background: var(--astrovia-gradient);
}
.subscription-badge-text {
display: flex;
flex-direction: column;
gap: var(--space-xs);
flex: 1;
}
.subscription-plan-name {
font-size: 1rem;
font-weight: 600;
color: var(--astrovia-blue);
}
.subscription-plan-status {
font-size: var(--font-size-sm);
color: var(--astrovia-blue);
}
.subscription-manage-btn {
flex-shrink: 0;
}
.subscription-inactive-notice {
padding: var(--space-md) var(--space-lg);
background: var(--indicator-subtle-bg);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
text-align: center;
}
.subscription-inactive-notice p {
margin: 0;
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.subscription-error {
padding: var(--space-md) var(--space-lg);
background: var(--error-bg-solid);
border: 1px solid var(--error-border);
border-radius: var(--radius-md);
text-align: center;
}
.subscription-error p {
margin: 0;
color: var(--error-dark);
font-size: var(--font-size-sm);
}
/* Subscription Plans Grid */
.plans-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.plan-card {
position: relative;
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 28px 24px;
display: flex;
flex-direction: column;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.plan-card:hover {
border-color: var(--astrovia-blue);
box-shadow: 0 8px 32px rgba(31, 59, 179, 0.08);
transform: translateY(-2px);
}
.plan-card.featured {
border: 2px solid var(--astrovia-blue);
background: linear-gradient(135deg, #FAFBFF 0%, #F5F7FF 100%);
}
.plan-card .plan-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--astrovia-blue) 0%, #3B5CE8 100%);
color: var(--text-inverse);
font-size: 0.75rem;
font-weight: 600;
padding: 6px 14px;
border-radius: var(--radius-lg);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Plan badges in store cards - inline positioning */
.shopify-stores-container .plan-badge,
.admin-card .plan-badge,
.users-list .plan-badge {
position: static;
transform: none;
display: inline-flex;
padding: 3px 8px;
font-size: 0.625rem;
border-radius: var(--radius-sm);
font-weight: 600;
letter-spacing: 0.3px;
}
/* Hyphenated badge variants for store cards */
.plan-badge-free,
.plan-badge.free {
background: var(--bg-tertiary);
color: var(--text-secondary);
border: 1px solid var(--border-light);
}
.plan-badge-pro,
.plan-badge.pro {
background: var(--success-gradient);
color: var(--text-inverse);
}
.plan-badge-active {
background: var(--info-bg);
color: var(--astrovia-blue);
border: 1px solid var(--info-border);
}
.plan-badge-enterprise,
.plan-badge.enterprise {
background: var(--purple-gradient);
color: var(--text-inverse);
}
.plan-badge-pending,
.plan-badge.pending {
background: var(--warning-bg);
color: var(--warning-dark);
border: 1px solid var(--warning-border);
}
.plan-name {
font-size: var(--font-size-xl);
font-weight: 600;
color: var(--text-primary);
margin: 0 0 var(--space-sm) 0;
text-align: center;
}
.plan-price {
text-align: center;
margin-bottom: 16px;
}
.plan-amount {
font-size: 2.5rem;
font-weight: 700;
color: var(--astrovia-blue);
}
.plan-interval {
font-size: 1rem;
color: var(--text-secondary);
}
.plan-description {
font-size: 0.875rem;
color: var(--text-secondary);
text-align: center;
margin: 0 0 20px 0;
line-height: 1.5;
}
.plan-features {
list-style: none;
padding: 0;
margin: 0 0 24px 0;
flex: 1;
}
.plan-features li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
font-size: 0.9375rem;
color: var(--text-primary);
}
.plan-features li svg {
color: var(--success);
flex-shrink: 0;
}
.plan-subscribe-btn {
width: 100%;
padding: 14px 24px;
font-size: 1rem;
font-weight: 600;
}
.plan-card.featured .plan-subscribe-btn {
background: linear-gradient(135deg, var(--astrovia-blue) 0%, #3B5CE8 100%);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.plans-grid {
grid-template-columns: 1fr;
}
.subscription-active-badge {
flex-direction: column;
text-align: center;
}
.subscription-badge-text {
align-items: center;
}
}
/* ========================================
LOCKED TOOL STATES
======================================== */
.sidebar-nav-item.locked-tool {
opacity: 0.65;
position: relative;
}
.sidebar-nav-item.locked-tool:hover {
opacity: 0.8;
}
.nav-lock-icon {
margin-left: auto;
color: var(--text-tertiary);
display: flex;
align-items: center;
}
.tool-selector-card.locked-tool {
opacity: 0.75;
}
.tool-selector-card.locked-tool:hover {
transform: translateY(-2px);
opacity: 0.85;
}
.card-lock-badge {
position: absolute;
top: 12px;
right: 12px;
background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
color: var(--text-secondary);
padding: 4px 10px;
border-radius: var(--radius-lg);
font-size: 0.6875rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 5px;
border: 1px solid rgba(0, 0, 0, 0.08);
z-index: 5;
}
.card-lock-badge svg {
flex-shrink: 0;
}
.locked-tool-overlay {
position: fixed;
top: 0;
left: 280px;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}
@media (max-width: 900px) {
.locked-tool-overlay {
left: 0;
}
}
.locked-tool-content {
text-align: center;
max-width: 400px;
padding: 40px;
}
.locked-tool-icon {
width: 88px;
height: 88px;
margin: 0 auto 24px;
background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
}
.locked-tool-content h2 {
font-size: 1.375rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.locked-tool-content p {
font-size: 0.9375rem;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 24px;
}
.upgrade-plan-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: linear-gradient(135deg, var(--astrovia-blue) 0%, #3B5CE8 100%);
color: var(--text-inverse);
border: none;
border-radius: var(--radius-md);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 4px 12px rgba(31, 81, 246, 0.3);
}
.upgrade-plan-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(31, 81, 246, 0.4);
}
.upgrade-plan-btn svg {
flex-shrink: 0;
}
.under-dev-overlay {
position: fixed;
top: 0;
left: 280px;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}
@media (max-width: 900px) {
.under-dev-overlay {
left: 0;
}
}
.under-dev-content {
text-align: center;
max-width: 400px;
padding: 40px;
}
.under-dev-icon {
width: 88px;
height: 88px;
margin: 0 auto 24px;
background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
color: var(--astrovia-blue);
animation: pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.under-dev-content h2 {
font-size: 1.375rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.under-dev-content p {
font-size: 0.9375rem;
color: var(--text-secondary);
line-height: 1.6;
}
/* ========================================
UPGRADE MODAL
======================================== */
.upgrade-modal-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.upgrade-modal-backdrop.active {
opacity: 1;
visibility: visible;
}
.upgrade-modal {
background: var(--bg-white);
border-radius: var(--radius-xl);
max-width: 900px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
padding: 32px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
transform: scale(0.95) translateY(20px);
transition: all 0.3s;
}
.upgrade-modal-backdrop.active .upgrade-modal {
transform: scale(1) translateY(0);
}
.upgrade-modal-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
}
.upgrade-modal-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
}
.upgrade-modal-subtitle {
font-size: 0.9375rem;
color: var(--text-secondary);
margin-top: 4px;
}
.upgrade-modal-close {
background: var(--bg-secondary);
border: none;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-secondary);
transition: all 0.2s;
}
.upgrade-modal-close:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
}
.upgrade-modal-plans {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
max-width: 600px;
margin: 0 auto;
}
@media (max-width: 768px) {
.upgrade-modal-plans {
grid-template-columns: 1fr;
}
}
.upgrade-plan-card {
background: var(--bg-white);
border: 2px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 28px;
transition: all 0.2s;
position: relative;
}
.upgrade-plan-card:hover {
border-color: var(--astrovia-blue);
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.upgrade-plan-card.current {
border-color: var(--success);
background: rgba(16, 185, 129, 0.04);
}
.upgrade-plan-card.recommended {
border-color: var(--astrovia-blue);
background: var(--info-bg);
}
.upgrade-plan-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--astrovia-blue);
color: var(--text-inverse);
font-size: 0.6875rem;
font-weight: 600;
padding: 6px 16px;
border-radius: var(--radius-full);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.upgrade-plan-name {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
letter-spacing: -0.02em;
}
.upgrade-plan-price {
display: flex;
align-items: baseline;
gap: 4px;
margin-bottom: 20px;
}
.upgrade-plan-amount {
font-size: 2rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
}
.upgrade-plan-period {
font-size: 0.9375rem;
color: var(--text-secondary);
}
.upgrade-plan-features {
list-style: none;
padding: 0;
margin: 0 0 24px 0;
}
.upgrade-plan-features li {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.9375rem;
color: var(--text-secondary);
padding: 10px 0;
border-bottom: 1px solid var(--border-lighter);
}
.upgrade-plan-features li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.upgrade-plan-features li:first-child {
padding-top: 0;
}
.upgrade-plan-features li svg {
flex-shrink: 0;
}
.upgrade-plan-card .upgrade-plan-btn {
width: 100%;
padding: 14px 20px;
background: var(--astrovia-blue);
color: var(--text-inverse);
border: none;
border-radius: var(--radius-md);
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.upgrade-plan-card .upgrade-plan-btn:hover {
background: var(--astrovia-blue-hover);
transform: translateY(-1px);
}
/* ========================================
DELETE USER MODAL - Design System Aligned
======================================== */
.delete-modal-content {
max-width: 420px;
border-radius: var(--radius-lg);
overflow: hidden;
}
.delete-modal-body {
text-align: center;
padding: 32px 32px 24px;
}
.delete-icon-circle {
width: 56px;
height: 56px;
margin: 0 auto 20px;
background: var(--error-subtle);
border: 1px solid var(--error-border-subtle);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
color: var(--error);
}
.delete-modal-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 8px 0;
}
.delete-modal-subtitle {
color: var(--text-secondary);
font-size: 0.9375rem;
margin: 0 0 4px 0;
line-height: 1.5;
}
.delete-modal-username {
font-weight: 600;
color: var(--text-primary);
font-size: 0.9375rem;
margin: 0 0 16px 0;
}
.delete-modal-warning {
color: var(--text-tertiary);
font-size: 0.8125rem;
margin: 0;
line-height: 1.5;
}
.delete-modal-footer {
display: flex;
justify-content: center;
gap: 12px;
padding: 20px 32px 28px;
background: var(--bg-primary);
border-top: 1px solid var(--border-lighter);
}
.delete-modal-btn-cancel {
padding: 12px 28px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
color: var(--text-secondary);
font-size: 0.9375rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.delete-modal-btn-cancel:hover {
border-color: var(--border-medium);
color: var(--text-primary);
background: var(--bg-secondary);
}
.delete-modal-btn-delete {
padding: 12px 28px;
background: var(--error);
border: none;
border-radius: var(--radius-md);
color: var(--text-inverse);
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px var(--error-border-subtle);
}
.delete-modal-btn-delete:hover {
background: var(--error-dark);
box-shadow: 0 4px 12px var(--error-border-subtle);
transform: translateY(-1px);
}
/* ========================================
USER ROW - Fixed Actions Column Alignment
======================================== */
.users-list .user-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
width: 140px;
min-width: 140px;
max-width: 140px;
align-items: center;
position: relative;
}
.user-actions .admin-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 14px;
background: linear-gradient(135deg, var(--astrovia-blue) 0%, #3B5CE8 100%);
color: var(--text-inverse);
border-radius: var(--radius-sm);
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
height: 36px;
box-sizing: border-box;
min-width: 72px;
}
/* ========================================
LOGOUT CONFIRMATION MODAL
======================================== */
.logout-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.5);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.logout-modal-backdrop.active {
opacity: 1;
visibility: visible;
}
.logout-modal {
background: var(--bg-white);
border-radius: var(--radius-xl);
padding: 32px;
max-width: 380px;
width: 90%;
text-align: center;
box-shadow: var(--shadow-xl);
transform: scale(0.95) translateY(10px);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.logout-modal-backdrop.active .logout-modal {
transform: scale(1) translateY(0);
}
.logout-modal-icon {
width: 64px;
height: 64px;
margin: 0 auto 20px;
background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: var(--error);
}
.logout-modal-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
letter-spacing: -0.02em;
}
.logout-modal-text {
font-size: 0.9375rem;
color: var(--text-secondary);
line-height: 1.5;
margin-bottom: 24px;
}
.logout-modal-actions {
display: flex;
gap: 12px;
justify-content: center;
}
.logout-modal-cancel {
padding: 12px 24px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
color: var(--text-secondary);
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.logout-modal-cancel:hover {
border-color: var(--border-medium);
color: var(--text-primary);
background: var(--bg-secondary);
}
.logout-modal-confirm {
padding: 12px 24px;
background: var(--error);
border: none;
border-radius: var(--radius-md);
color: var(--text-inverse);
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}
.logout-modal-confirm:hover {
background: var(--error-dark);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
transform: translateY(-1px);
}
.logout-modal-confirm:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
/* Action button spacer for admin row alignment */
.action-btn-spacer {
width: 36px;
height: 36px;
display: inline-block;
}
/* ========================================
SHOPIFY INTEGRATION - ANIMATIONS
======================================== */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideOut {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(100px);
}
}
.sync-notification {
animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.action-btn .spin-animation {
animation: spin 1s linear infinite;
}
/* Shopify integration badge */
.shopify-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: linear-gradient(135deg, #96BF48 0%, #7AB55C 100%);
color: var(--text-inverse);
border-radius: var(--radius-sm);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Data source toggle styles */
.data-source-toggle label:hover {
background: rgba(22, 163, 74, 0.1);
border-radius: var(--radius-sm);
padding: 4px 8px;
margin: -4px -8px;
}
/* ========================================
TAX OS STYLES
======================================== */
/* Region badges */
.region-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: var(--radius-sm);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.region-badge.region-uk {
background: linear-gradient(135deg, #1D4ED8 0%, #3B82F6 100%);
color: var(--text-inverse);
}
.region-badge.region-eu {
background: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
color: var(--text-inverse);
}
.region-badge.region-usa {
background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%);
color: var(--text-inverse);
}
/* Small button styles */
.c-btn-small {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 12px;
font-size: 0.75rem;
font-weight: 500;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
}
.c-btn-small.c-btn-primary {
background: linear-gradient(135deg, #1F51F6 0%, #3B5CE8 100%);
color: var(--text-inverse);
}
.c-btn-small.c-btn-primary:hover {
background: linear-gradient(135deg, #1A45D6 0%, #3350D1 100%);
transform: translateY(-1px);
}
.c-btn-small.c-btn-secondary {
background: var(--bg-secondary);
color: var(--text-primary);
border: 1px solid var(--border-light);
}
.c-btn-small.c-btn-secondary:hover {
background: var(--bg-hover);
border-color: var(--border-default);
}
.c-btn-small.c-btn-danger {
background: var(--error-tint);
color: var(--error);
border: 1px solid var(--error-border);
}
.c-btn-small.c-btn-danger:hover {
background: var(--error-bg);
border-color: var(--error-border);
}
/* Tax report item styling */
.tax-report-item {
border-bottom: 1px solid var(--border-light);
transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.tax-report-item:last-child {
border-bottom: none;
}
.tax-report-item:hover {
background: var(--bg-secondary);
}
/* Success message styling */
.success-message {
padding: var(--space-sm) var(--space-md);
background: var(--success-bg);
color: var(--success-dark);
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
border: 1px solid var(--success-border);
}
/* ========================================
DESIGN AESTHETICS STYLES
======================================== */
.design-icons-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 20px;
}
.design-icon-card {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 20px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.design-icon-card:hover {
border-color: var(--brand);
box-shadow: 0 4px 12px rgba(31, 81, 246, 0.1);
}
.design-icon-card.is-custom {
border-color: var(--success);
background: linear-gradient(135deg, #F0FDF4 0%, #FAFAFA 100%);
}
.design-icon-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
}
.design-icon-preview {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
border-radius: var(--radius-md);
color: var(--text-secondary);
}
.design-icon-preview svg {
width: 24px;
height: 24px;
}
.design-icon-info {
flex: 1;
}
.design-icon-name {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 2px;
}
.design-icon-tab {
font-size: 0.75rem;
color: var(--text-tertiary);
font-family: var(--font-mono);
}
.design-icon-status {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--radius-sm);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.design-icon-status.status-default {
background: var(--bg-secondary);
color: var(--text-secondary);
}
.design-icon-status.status-custom {
background: var(--success-bg);
color: var(--success-dark);
}
.design-icon-editor {
margin-top: 12px;
}
.design-icon-textarea {
width: 100%;
min-height: 80px;
padding: 12px;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
font-family: var(--font-mono);
font-size: 0.75rem;
line-height: 1.5;
resize: vertical;
transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
background: var(--bg-primary);
}
.design-icon-textarea:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(31, 81, 246, 0.1);
}
.design-icon-actions {
display: flex;
gap: 8px;
margin-top: 12px;
}
.design-icon-actions .c-btn-small {
flex: 1;
}
.design-icon-updated {
font-size: var(--font-size-2xs);
color: var(--text-tertiary);
margin-top: var(--space-sm);
display: flex;
align-items: center;
gap: var(--space-xs);
}
.design-icon-updated svg {
width: var(--space-sm);
height: var(--space-sm);
}
/* ========================================
SEGMENTED CONTROL TABS (Modern Tab Pattern)
Use .taxos-tabs-container and .taxos-tab for all tabbed interfaces
See DESIGN_SYSTEM.md for usage guidelines
======================================== */
/* Shopify logo styling for tab icons */
.tab-shopify-logo {
width: 16px;
height: 16px;
}
.tab-shopify-logo .shopify-bag-stroke {
stroke: currentColor;
transition: stroke var(--duration-fast) var(--ease-default);
}
.taxos-tabs-container {
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);
padding: var(--space-xs);
display: inline-flex;
gap: var(--space-xs);
margin-bottom: var(--space-xl);
box-shadow: var(--shadow-glass);
}
.taxos-tab {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-lg);
border: none;
background: transparent;
color: var(--text-secondary);
font-size: var(--font-size-xs);
font-weight: 500;
letter-spacing: 0.01em;
cursor: pointer;
border-radius: calc(var(--radius-lg) - 2px);
transition: color var(--duration-fast) var(--ease-default),
background-color var(--duration-fast) var(--ease-default),
box-shadow var(--duration-normal) var(--ease-default),
transform var(--duration-fast) var(--ease-default);
position: relative;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.taxos-tab:hover:not(.active) {
color: var(--text-primary);
background: rgba(0, 0, 0, 0.04);
}
/* Apple-style press feedback - only on non-active tabs */
.taxos-tab:not(.active):active {
transform: scale(0.97);
}
.taxos-tab.active {
background: var(--bg-white);
color: var(--astrovia-blue);
font-weight: 500;
text-shadow: 0 0 0.01px currentColor;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),
0 1px 2px rgba(0, 0, 0, 0.06),
inset 0 0 0 0.5px rgba(255, 255, 255, 0.95);
/* Active tabs don't need transform, so exclude from will-change */
transform: none;
}
.taxos-tab svg {
width: var(--space-md);
height: var(--space-md);
opacity: 0.5;
transition: opacity var(--duration-fast) var(--ease-default),
stroke var(--duration-fast) var(--ease-default);
flex-shrink: 0;
}
.taxos-tab:hover svg {
opacity: 0.7;
}
.taxos-tab.active svg {
opacity: 1;
stroke: var(--astrovia-blue);
}
.taxos-content-card {
background: var(--card-surface);
border: 1px solid var(--card-border);
border-radius: var(--radius-xl);
box-shadow: var(--card-shadow);
overflow: hidden;
margin-bottom: var(--space-xl);
}
.taxos-content-card:last-child {
margin-bottom: 0;
}
.taxos-content-header {
padding: var(--space-xl) var(--space-xl);
border-bottom: 1px solid var(--border-lighter);
background: var(--bg-primary);
}
.taxos-content-header p {
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: 1.6;
margin: 0;
}
.taxos-content-body {
padding: var(--space-xl);
}
.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-tabs-container {
flex-wrap: wrap;
width: 100%;
}
.taxos-tab {
flex: 1;
justify-content: center;
min-width: 140px;
}
.taxos-form-grid {
grid-template-columns: 1fr;
}
}
.taxos-form-field {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.taxos-form-field .form-label {
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--text-primary);
letter-spacing: 0.01em;
}
.taxos-form-field .form-select,
.taxos-form-field .form-input {
padding: var(--space-sm);
font-size: var(--font-size-sm);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
background: var(--bg-white);
color: var(--text-primary);
transition: all var(--duration-fast) var(--ease-default);
}
.taxos-form-field .form-select:hover,
.taxos-form-field .form-input:hover {
border-color: var(--border-medium);
}
.taxos-form-field .form-select:focus,
.taxos-form-field .form-input:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: 0 0 0 3px rgba(31, 81, 246, 0.1);
}
.taxos-actions {
display: flex;
gap: var(--space-sm);
padding-top: var(--space-xs);
}
.taxos-actions .c-btn-primary,
.taxos-actions .c-btn-secondary {
padding: 12px 24px;
font-size: 0.9375rem;
}
/* Market Enrollment Grid */
.market-enrollment-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
}
@media (max-width: 900px) {
.market-enrollment-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.market-enrollment-grid {
grid-template-columns: 1fr;
}
}
.market-enrollment-card {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md);
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
transition: all 0.2s ease;
}
.market-enrollment-card:hover {
border-color: var(--border-medium);
background: var(--bg-tertiary);
}
.market-enrollment-card.enrolled {
border-color: var(--success-border);
background: var(--success-tint);
}
.market-enrollment-card .market-flag {
font-size: 1.5rem;
line-height: 1;
}
.market-enrollment-card .market-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.market-enrollment-card .market-name {
font-weight: 600;
font-size: 0.875rem;
color: var(--text-primary);
}
.market-enrollment-card .market-desc {
font-size: 0.75rem;
color: var(--text-tertiary);
}
.market-flag-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 6px;
background: var(--bg-tertiary);
border-radius: var(--radius-sm);
font-size: 1rem;
}
/* ========================================
HS CODE CLASSIFIER STYLES
Quick search pills and result cards
======================================== */
.quick-search-pill {
padding: 8px 16px;
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
font-size: 0.8125rem;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.quick-search-pill:hover {
background: linear-gradient(135deg, rgba(31,81,246,0.1), rgba(124,58,237,0.1));
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
transform: translateY(-1px);
}
.quick-search-pill:active {
transform: translateY(0);
}
.hs-suggestion-card {
padding: var(--space-lg) var(--space-xl);
background: var(--card-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
margin-bottom: var(--space-md);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.hs-suggestion-card:hover {
border-color: var(--astrovia-blue);
box-shadow: 0 4px 12px rgba(31, 81, 246, 0.08);
}
.hs-code-badge {
display: inline-flex;
align-items: center;
padding: 6px 14px;
background: var(--astrovia-blue);
color: var(--text-inverse);
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--radius-sm);
letter-spacing: 0.5px;
}
.hs-code-hs6 {
display: inline-flex;
align-items: center;
padding: 4px 10px;
background: var(--bg-secondary);
color: var(--text-secondary);
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
font-size: 0.75rem;
font-weight: 500;
border-radius: var(--radius-xs);
border: 1px solid var(--border-light);
}
.hs-region-label {
display: inline-flex;
align-items: center;
padding: 3px 8px;
background: var(--info-bg);
color: var(--astrovia-blue);
font-size: 0.6875rem;
font-weight: 600;
border-radius: var(--radius-xs);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.hs-duty-pill {
display: inline-flex;
align-items: center;
padding: 4px 10px;
background: var(--success-bg);
color: var(--success-dark);
font-size: 0.75rem;
font-weight: 600;
border-radius: var(--radius-full);
border: 1px solid var(--success-border);
}
.hs-duty-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
background: var(--success-bg);
color: var(--success);
font-size: 0.75rem;
font-weight: 600;
border-radius: var(--radius-xs);
margin-left: 8px;
}
.hs-official-result {
padding: var(--space-md) var(--space-lg);
background: var(--card-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
margin-bottom: var(--space-sm);
display: flex;
align-items: flex-start;
gap: var(--space-md);
transition: all 0.15s ease;
}
.hs-official-result:hover {
background: var(--bg-secondary);
border-color: var(--border-medium);
}
.hs-code-mono {
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
font-size: 0.8125rem;
color: var(--text-primary);
font-weight: 600;
min-width: 120px;
flex-shrink: 0;
}
.hs-result-description {
flex: 1;
font-size: 0.8125rem;
color: var(--text-secondary);
line-height: 1.5;
}
.hs-result-duty {
display: inline-flex;
align-items: center;
padding: 4px 10px;
background: var(--success-bg);
color: var(--success-dark);
font-size: 0.75rem;
font-weight: 600;
border-radius: var(--radius-full);
border: 1px solid var(--success-border);
flex-shrink: 0;
}
.hs-result-duty.free {
background: var(--success-bg);
color: var(--success);
border-color: var(--success-border);
}
/* ========================================
INTEGRATIONS EMPTY STATE
Enhanced design following Design System
======================================== */
.integrations-empty-state {
background: var(--card-surface);
border: 1px solid var(--card-border);
border-radius: var(--radius-lg);
padding: 56px 40px;
text-align: center;
max-width: 560px;
margin: 0;
box-shadow: var(--card-shadow);
}
.integrations-empty-icon {
width: 72px;
height: 72px;
margin: 0 auto 24px;
background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
}
.integrations-empty-icon svg {
width: 36px;
height: 36px;
shape-rendering: geometricPrecision;
stroke-width: 1.5;
}
.integrations-empty-title {
margin: 0 0 14px 0;
font-size: 1.375rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
}
.integrations-empty-text {
color: var(--text-secondary);
margin: 0 0 32px 0;
font-size: 0.9375rem;
max-width: 420px;
margin-left: auto;
margin-right: auto;
line-height: 1.65;
}
.integrations-empty-btn {
padding: 14px 28px;
font-size: 0.9375rem;
box-shadow: 0 4px 14px rgba(31, 81, 246, 0.3);
}
.integrations-empty-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(31, 81, 246, 0.35);
}
/* ========================================
USER INTEGRATIONS TAB - Enhanced Design
======================================== */
.user-integration-accordion {
border-bottom: 1px solid var(--border-lighter);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.user-integration-accordion:last-child {
border-bottom: none;
}
.user-integration-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
cursor: pointer;
transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.user-integration-header:hover {
background: var(--bg-secondary);
}
.user-integration-content-tab {
padding: 24px;
background: var(--bg-secondary);
border-top: 1px solid var(--border-lighter);
}
.user-integration-store-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
background: var(--bg-white);
border-radius: var(--radius-md);
margin-bottom: 10px;
border: 1px solid var(--border-lighter);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.user-integration-store-card:last-child {
margin-bottom: 0;
}
.user-integration-store-card:hover {
border-color: var(--border-accent);
box-shadow: 0 2px 8px rgba(31, 81, 246, 0.06);
}
.user-integration-store-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
flex: 1;
}
.user-integration-store-domain {
font-weight: 600;
font-size: 0.9375rem;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-integration-store-meta {
font-size: 0.8125rem;
color: var(--text-tertiary);
}
.user-integration-store-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.user-integration-no-stores {
background: var(--bg-tertiary);
border-radius: var(--radius-md);
padding: 20px;
text-align: center;
}
.user-integration-no-stores p {
color: var(--text-tertiary);
font-size: 0.875rem;
margin: 0;
}
/* Action buttons for integrations */
.action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid var(--border-light);
background: var(--bg-white);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
color: var(--text-secondary);
}
.action-btn:hover {
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
background: var(--info-bg);
}
.action-btn-primary {
background: var(--info-bg);
border-color: transparent;
color: var(--astrovia-blue);
}
.action-btn-primary:hover {
background: rgba(31, 81, 246, 0.15);
border-color: var(--astrovia-blue);
}
.action-btn-danger {
color: var(--text-tertiary);
}
.action-btn-danger:hover {
background: var(--error-bg-solid);
border-color: var(--error);
color: var(--error);
}
/* ========================================
AUTHENTICATION PAGES
Login & Signup - Design System Compliant
======================================== */
/* Auth Container Layout */
.auth-container {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
background: var(--bg-primary);
}
/* Auth Card - Main container */
.auth-card {
background: var(--bg-white);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: 40px 48px 48px 48px;
max-width: 460px;
width: 100%;
box-shadow: var(--shadow-lg);
}
.auth-card.auth-card-wide {
max-width: 520px;
}
/* Auth Logo Section */
.auth-logo-section {
text-align: center;
margin-bottom: 28px;
}
.auth-logo-row {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.auth-logo-img {
height: 32px;
width: auto;
}
.auth-logo-subtitle {
font-size: 0.6875rem;
font-weight: 500;
color: var(--text-tertiary);
letter-spacing: 0.02em;
text-transform: uppercase;
opacity: 0.7;
}
/* Auth Form Container - Inner section with gradient bar */
.auth-form-container {
background: var(--bg-secondary);
border-radius: var(--radius-md);
padding: 28px 24px 24px 24px;
position: relative;
overflow: hidden;
}
/* Auth Header */
.auth-header {
text-align: center;
margin-bottom: 24px;
}
.auth-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 6px 0;
letter-spacing: -0.02em;
}
.auth-subtitle {
font-size: 0.875rem;
color: var(--text-secondary);
margin: 0;
}
/* Auth Form Elements */
.auth-form {
text-align: left;
}
.auth-form-group {
margin-bottom: 20px;
}
.auth-form-group.has-icon {
position: relative;
}
.auth-form-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.auth-form-input {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border-medium);
border-radius: var(--radius-md);
font-size: 1rem;
color: var(--text-primary);
background: var(--bg-white);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
font-family: inherit;
}
.auth-form-input:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-input);
}
.auth-form-input::placeholder {
color: var(--text-tertiary);
}
/* Password field with toggle */
.auth-password-wrapper {
position: relative;
}
.auth-password-toggle {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
border-radius: var(--radius-sm);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
}
.auth-password-toggle:hover {
background: rgba(0, 0, 0, 0.04);
color: var(--text-primary);
}
.auth-password-toggle svg {
width: 18px;
height: 18px;
}
/* Auth Error Message */
.auth-error {
background: var(--error-tint);
color: var(--error-dark);
padding: 12px 16px;
border-radius: var(--radius-sm);
font-size: 0.875rem;
margin-bottom: 20px;
text-align: center;
display: none;
border: 1px solid var(--error-border-medium);
}
.auth-error.visible {
display: block;
}
/* Auth Success Message */
.auth-success {
background: var(--success-tint);
color: var(--success);
padding: 12px 16px;
border-radius: var(--radius-sm);
font-size: 0.875rem;
margin-bottom: 20px;
text-align: center;
display: none;
border: 1px solid var(--success-border-strong);
}
.auth-success.visible {
display: block;
}
/* Auth Primary Button */
.auth-btn-primary {
width: 100%;
padding: 14px 24px;
background: var(--astrovia-blue);
color: var(--text-inverse);
border: none;
border-radius: var(--radius-md);
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: inherit;
}
.auth-btn-primary:hover:not(:disabled) {
background: var(--astrovia-blue-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-btn-primary);
}
.auth-btn-primary:active:not(:disabled) {
transform: translateY(0);
}
.auth-btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Auth Secondary Button */
.auth-btn-secondary {
width: 100%;
padding: 14px 24px;
background: var(--bg-white);
color: var(--text-primary);
border: 1px solid var(--border-medium);
border-radius: var(--radius-md);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: inherit;
}
.auth-btn-secondary:hover:not(:disabled) {
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
background: var(--info-bg);
}
/* Auth Surface Button - Light grey background for secondary actions (e.g., OAuth buttons) */
.auth-btn-surface {
width: 100%;
padding: 14px 24px;
background: var(--bg-secondary);
color: var(--text-primary);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: inherit;
text-decoration: none;
box-sizing: border-box;
}
.auth-btn-surface:hover:not(:disabled) {
background: var(--border-lighter);
border-color: var(--border-medium);
}
.auth-btn-surface:active:not(:disabled) {
background: var(--border-light);
}
.auth-btn-surface:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Auth Link */
.auth-link-section {
text-align: center;
margin-top: 24px;
font-size: 0.875rem;
color: var(--text-secondary);
}
.auth-link-section a {
color: var(--astrovia-blue);
text-decoration: none;
font-weight: 600;
transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.auth-link-section a:hover {
color: var(--astrovia-blue-hover);
text-decoration: underline;
}
/* Auth Spinner */
.auth-spinner {
animation: auth-spin 1s linear infinite;
display: none;
}
.auth-spinner.visible {
display: inline-block;
}
@keyframes auth-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ========================================
SIGNUP SPECIFIC STYLES
Multi-step signup flow
======================================== */
/* Progress Steps */
.auth-progress-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-bottom: 0;
padding: 20px 24px;
background: var(--bg-secondary);
border-radius: var(--radius-md);
}
.auth-step {
display: flex;
align-items: center;
gap: 8px;
}
.auth-step-number {
width: 24px;
height: 24px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6875rem;
font-weight: 700;
background: var(--bg-white);
color: var(--text-tertiary);
border: 1.5px solid var(--border-light);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.auth-step.active .auth-step-number {
background: var(--astrovia-blue);
border-color: var(--astrovia-blue);
color: var(--text-inverse);
}
.auth-step.completed .auth-step-number {
background: var(--astrovia-blue);
border-color: var(--astrovia-blue);
color: var(--text-inverse);
}
.auth-step-label {
font-size: 0.8125rem;
color: var(--text-tertiary);
font-weight: 500;
}
.auth-step.active .auth-step-label {
color: var(--text-primary);
font-weight: 600;
}
.auth-step.completed .auth-step-label {
color: var(--astrovia-blue);
}
.auth-step-connector {
width: 32px;
height: 2px;
background: var(--border-light);
margin: 0 12px;
}
.auth-step-connector.completed {
background: var(--astrovia-blue);
}
/* Step Content */
.auth-step-content {
display: none;
}
.auth-step-content.active {
display: block;
}
/* Plans Container for Signup */
.auth-plans-container {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 48px;
padding-top: 32px;
max-width: 1200px;
width: 100%;
box-shadow: var(--shadow-sm);
overflow: visible;
}
/* Plan Cards */
.auth-plans-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-top: 24px;
}
.auth-plan-card {
background: var(--bg-white);
border: 2px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 28px 24px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.auth-plan-card:hover {
border-color: var(--astrovia-blue);
box-shadow: var(--shadow-md);
}
.auth-plan-card.selected {
border-color: var(--astrovia-blue);
background: var(--info-bg);
box-shadow: var(--focus-ring-lg), var(--shadow-md);
}
.auth-plan-card.popular {
border-color: var(--astrovia-blue);
}
.auth-plan-card.popular::before {
content: 'Most Popular';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--astrovia-blue);
color: var(--text-inverse);
font-size: 0.6875rem;
font-weight: 700;
padding: 4px 12px;
border-radius: var(--radius-lg);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.auth-plan-name {
font-size: 1.125rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
}
.auth-plan-price {
font-size: 2rem;
font-weight: 800;
color: var(--astrovia-blue);
margin-bottom: 4px;
}
.auth-plan-period {
font-size: 0.875rem;
color: var(--text-secondary);
margin-bottom: 16px;
}
.auth-plan-features {
list-style: none;
padding: 0;
margin: 0;
}
.auth-plan-features li {
font-size: 0.875rem;
color: var(--text-secondary);
padding: 6px 0;
display: flex;
align-items: center;
gap: 8px;
}
.auth-plan-features li svg {
color: var(--astrovia-blue);
flex-shrink: 0;
}
/* Info Box in Auth */
.auth-info-box {
background: var(--info-bg);
border: 1px solid var(--info-border);
border-radius: var(--radius-sm);
padding: 12px 16px;
margin-bottom: 20px;
display: flex;
align-items: flex-start;
gap: 10px;
}
.auth-info-box svg {
color: var(--astrovia-blue);
flex-shrink: 0;
margin-top: 1px;
}
.auth-info-box p {
font-size: 0.8125rem;
color: var(--text-secondary);
margin: 0;
line-height: 1.5;
}
/* Two-Factor Auth Section */
.auth-2fa-section {
background: var(--bg-secondary);
border-radius: var(--radius-md);
padding: 24px;
margin-top: 20px;
}
.auth-2fa-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.auth-2fa-input-group {
display: flex;
gap: 8px;
justify-content: center;
}
.auth-2fa-input {
width: 48px;
height: 56px;
text-align: center;
font-size: 1.5rem;
font-weight: 700;
border: 2px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-white);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.auth-2fa-input:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-input);
}
/* Auth Tagline */
.auth-tagline {
text-align: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-subtle);
font-size: 0.75rem;
color: var(--text-tertiary);
letter-spacing: 0.02em;
}
/* ========================================
SIGNUP PLANS SECTION
Pricing cards and plan selection
======================================== */
/* Plans Container */
.signup-plans-container {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 48px;
padding-top: 32px;
max-width: 1200px;
width: 100%;
box-shadow: var(--shadow-sm);
overflow: visible;
}
/* Plans Grid */
.signup-plans-grid {
display: grid;
grid-template-columns: repeat(4, minmax(240px, 1fr));
gap: 24px;
margin-bottom: 32px;
padding-top: 8px;
}
@media (max-width: 1200px) {
.signup-plans-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 700px) {
.signup-plans-grid {
grid-template-columns: 1fr;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
}
/* Plan Card */
.signup-plan-card {
background: var(--bg-white);
border: 1.5px solid var(--border-lighter);
border-radius: var(--radius-xl);
padding: 36px 32px 32px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: visible;
min-height: 420px;
margin-top: 16px;
}
.signup-plan-card:hover {
border-color: var(--astrovia-blue);
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.signup-plan-card.selected {
border-color: var(--astrovia-blue);
background: var(--info-bg);
box-shadow: var(--focus-ring-lg), var(--shadow-md);
}
.signup-plan-card.recommended:not(.another-selected) {
border-color: var(--astrovia-blue);
box-shadow: var(--shadow-md);
}
.signup-plan-card.recommended.another-selected:not(.selected) {
border-color: var(--border-lighter);
box-shadow: none;
}
.signup-plan-card.recommended.selected,
.signup-plan-card.recommended:not(.another-selected):hover {
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-lg), var(--shadow-lg);
}
/* Plan Badge */
.signup-plan-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--astrovia-blue);
color: var(--text-inverse);
font-size: 0.6875rem;
font-weight: 700;
padding: 5px 14px;
border-radius: var(--radius-lg);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.signup-plan-badge.premium {
background: linear-gradient(135deg, var(--astrovia-blue), #6366F1);
}
/* Plan Name */
.signup-plan-name {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
}
/* Plan Price */
.signup-plan-price {
display: flex;
align-items: baseline;
gap: 4px;
margin-bottom: 16px;
}
.signup-plan-currency {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
}
.signup-plan-amount {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
}
.signup-plan-period {
font-size: 0.875rem;
color: var(--text-tertiary);
}
.signup-plan-free-label {
font-size: 2rem;
font-weight: 700;
color: var(--astrovia-blue);
letter-spacing: -0.02em;
}
/* Plan Description */
.signup-plan-description {
font-size: 0.875rem;
color: var(--text-secondary);
margin-bottom: 24px;
line-height: 1.6;
min-height: 44px;
}
/* Plan Features */
.signup-plan-features {
list-style: none;
padding: 0;
margin: 0;
}
.signup-plan-features li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 0.875rem;
color: var(--text-secondary);
padding: 14px 0;
border-bottom: 1px solid var(--border-subtle);
line-height: 1.5;
min-height: 44px;
}
.signup-plan-features li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.signup-plan-features li:first-child {
padding-top: 0;
}
.signup-plan-features li svg {
flex-shrink: 0;
}
.signup-plan-features .feature-check {
color: var(--astrovia-blue);
}
.signup-plan-features .feature-lock {
color: var(--text-tertiary);
}
/* Plan Select Indicator */
.signup-plan-select-indicator {
position: absolute;
top: 16px;
right: 16px;
width: 24px;
height: 24px;
border-radius: var(--radius-full);
border: 2px solid var(--border-light);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.signup-plan-card.selected .signup-plan-select-indicator {
background: var(--astrovia-blue);
border-color: var(--astrovia-blue);
}
/* Back Button */
.signup-back-btn {
display: flex;
align-items: center;
gap: var(--space-xs);
background: none;
border: none;
color: var(--text-secondary);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
padding: 8px 0;
margin-bottom: 20px;
transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.signup-back-btn:hover {
color: var(--text-primary);
}
/* Terms Text */
.signup-terms-text {
font-size: 0.8125rem;
color: var(--text-tertiary);
text-align: center;
margin-top: 16px;
line-height: 1.6;
}
.signup-terms-text a {
color: var(--astrovia-blue);
text-decoration: none;
cursor: pointer;
}
.signup-terms-text a:hover {
text-decoration: underline;
}
/* Modal Overlay */
.auth-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
z-index: 1000;
align-items: center;
justify-content: center;
padding: 20px;
}
.auth-modal-overlay.active {
display: flex;
}
.auth-modal-content {
background: var(--bg-white);
border-radius: var(--radius-lg);
max-width: 640px;
width: 100%;
max-height: 80vh;
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.auth-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 28px;
border-bottom: 1px solid var(--border-light);
}
.auth-modal-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
}
.auth-modal-close {
background: none;
border: none;
cursor: pointer;
color: var(--text-secondary);
padding: 8px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.auth-modal-close:hover {
background: var(--bg-secondary);
color: var(--text-primary);
}
.auth-modal-body {
padding: 28px;
overflow-y: auto;
max-height: calc(80vh - 80px);
}
.auth-modal-body h3 {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin: 20px 0 12px;
}
.auth-modal-body h3:first-child {
margin-top: 0;
}
.auth-modal-body p,
.auth-modal-body li {
font-size: 0.9375rem;
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 12px;
}
.auth-modal-body ul {
padding-left: 20px;
margin-bottom: 16px;
}
.auth-modal-body li {
margin-bottom: 8px;
}
/* Password Requirements */
.auth-password-requirements {
font-size: 0.75rem;
color: var(--text-tertiary);
margin-top: 8px;
}
/* ========================================
DESIGN SYSTEM UTILITY CLASSES
Reusable patterns for consistent styling
======================================== */
/* Info/Collapsible Sections - Used in Data Mapper and Profitability Calculator */
.ds-info-section,
.vat-info-section {
margin-bottom: 32px;
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 0;
overflow: hidden;
background: var(--bg-white);
box-shadow: var(--shadow-xs);
}
.ds-info-section summary,
.vat-info-section summary {
cursor: pointer;
font-weight: 600;
color: var(--text-primary);
font-size: 1rem;
user-select: none;
padding: 20px 24px;
background: linear-gradient(to right, var(--bg-secondary), var(--bg-white));
border-bottom: 1px solid var(--border-light);
}
.ds-info-section summary:hover,
.vat-info-section summary:hover {
background: linear-gradient(to right, var(--bg-tertiary), var(--bg-secondary));
}
.ds-info-section .ds-info-content {
padding: 24px;
color: var(--text-primary);
line-height: 1.7;
font-size: 0.9375rem;
}
/* Info Box - Highlighted callout */
.ds-info-box {
background: var(--bg-secondary);
padding: 16px 20px;
border-radius: var(--radius-md);
margin-bottom: 24px;
border-left: 4px solid var(--astrovia-blue);
}
.ds-info-box.info {
background: var(--info-bg);
border-color: var(--astrovia-blue);
}
.ds-info-box.warning {
background: var(--warning-bg);
border-left-color: var(--warning);
}
.ds-info-box.error {
background: var(--error-tint);
border-left-color: var(--error);
}
.ds-info-box.success {
background: var(--success-tint);
border-left-color: var(--success);
}
/* Code/Formula Box */
.ds-code-box {
background: var(--bg-secondary);
padding: 14px 18px;
border-radius: var(--radius-sm);
font-family: 'SF Mono', Monaco, monospace;
font-size: 0.875rem;
color: var(--astrovia-blue);
margin-bottom: 8px;
}
.ds-code-box.highlight {
background: var(--info-bg);
border: 2px solid var(--astrovia-blue);
font-weight: 700;
}
/* Section Title in tool content */
.ds-section-title {
font-weight: 600;
margin: 0 0 12px 0;
font-size: 0.9375rem;
color: var(--text-primary);
}
/* Section Text */
.ds-section-text {
margin: 0 0 8px 0;
color: var(--text-secondary);
}
/* Section List */
.ds-section-list {
margin: 12px 0 0 20px;
padding: 0;
color: var(--text-secondary);
}
.ds-section-list li {
margin-bottom: 6px;
}
.ds-section-list li:last-child {
margin-bottom: 0;
}
/* Tool Card Patterns */
.ds-tool-card {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 24px;
box-shadow: var(--shadow-sm);
}
.ds-tool-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--border-accent);
}
/* Result Card - for calculation results */
.ds-result-card {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 20px;
position: relative;
overflow: hidden;
}
.ds-result-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--astrovia-blue), #3B6BF7);
}
.ds-result-card.success::before {
background: var(--success);
}
.ds-result-card.warning::before {
background: var(--warning);
}
.ds-result-card.error::before {
background: var(--error);
}
/* Input Group Styling */
.ds-input-group {
margin-bottom: 20px;
}
.ds-input-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.ds-input {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border-medium);
border-radius: var(--radius-md);
font-size: 1rem;
color: var(--text-primary);
background: var(--bg-white);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
font-family: inherit;
}
.ds-input:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-input);
}
.ds-input::placeholder {
color: var(--text-tertiary);
}
/* Select Styling */
.ds-select {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border-medium);
border-radius: var(--radius-md);
font-size: 1rem;
color: var(--text-primary);
background: var(--bg-white);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
font-family: inherit;
appearance: none;
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 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 40px;
}
.ds-select:focus {
outline: none;
border-color: var(--astrovia-blue);
box-shadow: var(--focus-ring-input);
}
/* Button Styles */
.ds-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
border-radius: var(--radius-md);
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
font-family: inherit;
border: none;
}
.ds-btn-primary {
background: var(--astrovia-blue);
color: var(--text-inverse);
}
.ds-btn-primary:hover:not(:disabled) {
background: var(--astrovia-blue-hover);
box-shadow: var(--shadow-btn-primary);
transform: translateY(-1px);
}
.ds-btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.ds-btn-secondary {
background: var(--bg-white);
color: var(--text-primary);
border: 1px solid var(--border-medium);
}
.ds-btn-secondary:hover:not(:disabled) {
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
background: var(--info-bg);
}
.ds-btn-ghost {
background: transparent;
color: var(--text-secondary);
border: none;
}
.ds-btn-ghost:hover:not(:disabled) {
background: var(--bg-secondary);
color: var(--text-primary);
}
/* Table Styles */
.ds-table-wrapper {
overflow-x: auto;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
}
.ds-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.ds-table th {
background: var(--table-header-gradient);
padding: 12px 16px;
text-align: left;
font-weight: 600;
color: var(--text-primary);
border-bottom: 1px solid var(--border-light);
}
.ds-table td {
padding: 12px 16px;
border-bottom: 1px solid var(--border-lighter);
color: var(--text-secondary);
}
.ds-table tr:last-child td {
border-bottom: none;
}
.ds-table tr:hover td {
background: var(--bg-secondary);
}
/* Badge/Tag Styles */
.ds-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: var(--radius-lg);
font-size: 0.75rem;
font-weight: 600;
}
.ds-badge-primary {
background: var(--info-bg);
color: var(--astrovia-blue);
}
.ds-badge-success {
background: var(--success-tint);
color: var(--success);
}
.ds-badge-warning {
background: var(--warning-bg);
color: var(--warning);
}
.ds-badge-error {
background: var(--error-tint);
color: var(--error);
}
/* Empty State */
.ds-empty-state {
text-align: center;
padding: 48px 24px;
color: var(--text-tertiary);
}
.ds-empty-state svg {
margin-bottom: 16px;
opacity: 0.5;
}
.ds-empty-state h3 {
color: var(--text-primary);
margin: 0 0 8px 0;
font-size: 1.125rem;
}
.ds-empty-state p {
margin: 0;
font-size: 0.875rem;
}
/* Grid Layouts */
.ds-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.ds-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.ds-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 768px) {
.ds-grid-2,
.ds-grid-3,
.ds-grid-4 {
grid-template-columns: 1fr;
}
}
/* Spacing Utilities */
.ds-mb-sm { margin-bottom: 8px; }
.ds-mb-md { margin-bottom: 16px; }
.ds-mb-lg { margin-bottom: 24px; }
.ds-mb-xl { margin-bottom: 32px; }
.ds-mt-sm { margin-top: 8px; }
.ds-mt-md { margin-top: 16px; }
.ds-mt-lg { margin-top: 24px; }
.ds-mt-xl { margin-top: 32px; }
.ds-p-sm { padding: 8px; }
.ds-p-md { padding: 16px; }
.ds-p-lg { padding: 24px; }
.ds-p-xl { padding: 32px; }
/* Responsive adjustments */
@media (max-width: 480px) {
.auth-card {
padding: 32px 24px;
margin: 16px;
}
.auth-form-container {
padding: 24px 20px;
}
.auth-logo-row {
flex-direction: column;
gap: 8px;
}
.auth-logo-divider {
display: none;
}
.auth-step-label {
display: none;
}
.auth-step-connector {
width: 24px;
}
}
/* ========================================
MARKETS VIEW - Customer Tax Markets Hub
======================================== */
/* Markets Summary KPIs */
.markets-summary {
margin-bottom: 24px;
}
.markets-kpi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 768px) {
.markets-kpi-grid {
grid-template-columns: 1fr;
}
}
.markets-kpi-card {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 24px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.markets-kpi-card:hover {
border-color: var(--astrovia-blue);
background: var(--info-bg);
box-shadow: 0 2px 6px rgba(31, 81, 246, 0.08);
}
.markets-kpi-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: var(--info-bg);
border: 1px solid var(--info-border);
border-radius: var(--radius-md);
color: var(--astrovia-blue);
flex-shrink: 0;
}
.markets-kpi-content {
display: flex;
flex-direction: column;
gap: 4px;
}
.markets-kpi-label {
font-size: 0.75rem;
font-weight: 500;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.markets-kpi-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
}
/* Markets Grid */
.markets-grid-section {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.markets-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 900px) {
.markets-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.markets-grid {
grid-template-columns: 1fr;
}
}
/* Market Card */
.market-card {
display: flex;
flex-direction: column;
padding: 24px;
background: var(--bg-secondary);
border: 1px solid var(--border-lighter);
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.market-card:hover {
border-color: var(--astrovia-blue);
background: var(--info-bg);
box-shadow: 0 2px 6px rgba(31, 81, 246, 0.08);
}
.market-card-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
}
.market-card-flag {
font-size: 2rem;
line-height: 1;
}
.market-card-info {
flex: 1;
}
.market-card-name {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
}
.market-status-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: var(--radius-lg);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.market-status-pill.active {
background: var(--success-bg-solid);
color: var(--success);
border: 1px solid var(--success-border);
}
.market-status-pill.pending {
background: var(--warning-bg-solid);
color: var(--warning);
border: 1px solid var(--warning-border);
}
.market-status-pill.suspended {
background: var(--error-bg-solid);
color: var(--error);
border: 1px solid var(--error-border-medium);
}
.market-card-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding-top: 16px;
border-top: 1px solid var(--border-lighter);
}
.market-card-stat {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.market-card-stat-label {
font-size: 0.6875rem;
font-weight: 500;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.market-card-stat-value {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
}
.market-card-arrow {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 16px;
color: var(--text-tertiary);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.market-card:hover .market-card-arrow {
color: var(--astrovia-blue);
transform: translateX(4px);
}
/* Market Detail Panel */
.market-detail-panel {
margin-top: 24px;
}
.market-detail-header {
margin-bottom: 24px;
}
.market-back-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
margin-bottom: 16px;
}
.market-back-btn:hover {
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
background: var(--info-bg);
}
.market-detail-title {
display: flex;
align-items: center;
gap: 12px;
}
.market-detail-flag {
font-size: 2.5rem;
line-height: 1;
}
.market-detail-title h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
margin: 0;
}
/* Market Metrics Row */
.market-metrics-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 24px;
}
@media (max-width: 768px) {
.market-metrics-row {
grid-template-columns: 1fr;
}
}
.market-metric-card {
padding: 20px 24px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.market-metric-label {
font-size: 0.75rem;
font-weight: 500;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.market-metric-value {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
}
/* Market Reports Section */
.market-reports-section {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.market-reports-list {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Market Report Item */
.market-report-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: var(--bg-secondary);
border: 1px solid var(--border-lighter);
border-radius: var(--radius-md);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.market-report-item:hover {
border-color: var(--astrovia-blue);
background: var(--info-bg);
box-shadow: 0 2px 6px rgba(31, 81, 246, 0.08);
}
.market-report-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.market-report-month {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
}
.market-report-meta {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.8125rem;
color: var(--text-secondary);
}
.market-report-meta-item {
display: flex;
align-items: center;
gap: 4px;
}
.market-report-meta-item strong {
color: var(--text-primary);
font-weight: 600;
}
.market-report-actions {
display: flex;
align-items: center;
gap: 8px;
}
.market-download-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
font-size: 0.8125rem;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.market-download-btn:hover {
border-color: var(--astrovia-blue);
color: var(--astrovia-blue);
background: var(--info-bg);
}
.market-download-btn svg {
width: 14px;
height: 14px;
}
/* Coming Soon Markets */
.markets-coming-soon {
margin-top: 24px;
padding: 24px;
background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
border: 1px dashed #CBD5E1;
border-radius: var(--radius-md);
}
.markets-coming-soon-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 12px;
}
.markets-coming-soon-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.coming-soon-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
font-size: 0.8125rem;
color: var(--text-secondary);
}
/* ========================================
TAX FILINGS WORKSPACE
======================================== */
.filings-main-content {
width: 100%;
}
.filings-workspace {
display: grid;
grid-template-columns: 280px 1fr;
gap: var(--space-lg);
min-height: 500px;
}
@media (max-width: 900px) {
.filings-workspace {
grid-template-columns: 1fr;
}
}
/* Region Sidebar */
.filings-region-sidebar {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
}
.filings-region-header {
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--border-lighter);
background: var(--bg-secondary);
}
.filings-region-header h3 {
margin: 0;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.filings-region-list {
padding: var(--space-sm);
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
overflow-y: auto;
}
.filings-region-item {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
border: none;
background: transparent;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
text-align: left;
width: 100%;
}
.filings-region-item:hover {
background: var(--bg-tertiary);
}
.filings-region-item.active {
background: var(--astrovia-blue-subtle);
}
.filings-region-item.active .filings-region-item-name {
color: var(--astrovia-blue);
font-weight: 600;
}
.filings-region-item-flag {
font-size: 1.5rem;
line-height: 1;
}
.filings-region-item-info {
flex: 1;
min-width: 0;
}
.filings-region-item-name {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-primary);
margin-bottom: 2px;
}
.filings-region-item-type {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
}
.filings-region-item-badge {
padding: 2px 8px;
background: var(--success-bg-solid);
color: var(--success);
border: 1px solid var(--success-border);
font-size: 0.625rem;
font-weight: 600;
border-radius: var(--radius-lg);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.filings-region-item-badge.pending {
background: var(--warning-bg-solid);
color: var(--warning);
border: 1px solid var(--warning-border);
}
.filings-empty-regions {
padding: var(--space-2xl);
text-align: center;
color: var(--text-tertiary);
}
.filings-empty-regions i {
font-size: 2.5rem;
margin-bottom: var(--space-md);
opacity: 0.5;
}
.filings-empty-regions p {
margin: 0 0 var(--space-xs);
font-weight: 500;
color: var(--text-secondary);
}
.filings-empty-regions span {
font-size: var(--font-size-sm);
}
/* Detail Pane */
.filings-detail-pane {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: var(--space-xl);
min-height: 400px;
}
.filings-prompt-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
min-height: 350px;
text-align: center;
color: var(--text-tertiary);
}
.filings-prompt-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--bg-secondary);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-lg);
}
.filings-prompt-icon i {
font-size: 1.75rem;
color: var(--text-tertiary);
}
.filings-prompt-state h3 {
margin: 0 0 var(--space-xs);
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--text-secondary);
}
.filings-prompt-state p {
margin: 0;
font-size: var(--font-size-sm);
}
/* Region Detail Header */
.filings-region-detail-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: var(--space-lg);
border-bottom: 1px solid var(--border-lighter);
margin-bottom: var(--space-lg);
}
.filings-region-info {
display: flex;
align-items: center;
gap: var(--space-md);
}
.filings-region-flag {
font-size: 2.5rem;
line-height: 1;
}
.filings-region-info h2 {
margin: 0 0 4px;
font-size: 1.375rem;
font-weight: 700;
color: var(--text-primary);
}
.filings-region-status {
display: inline-flex;
align-items: center;
padding: 4px 10px;
background: var(--success-bg-solid);
color: var(--success);
border: 1px solid var(--success-border);
font-size: 0.6875rem;
font-weight: 600;
border-radius: var(--radius-lg);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.filings-region-status.pending {
background: var(--warning-bg-solid);
color: var(--warning);
border: 1px solid var(--warning-border);
}
/* Month Strip */
.filings-month-strip {
display: flex;
gap: 6px;
padding: var(--space-md) 0;
overflow-x: auto;
margin-bottom: var(--space-lg);
}
.filings-month-pill {
padding: 8px 16px;
background: var(--bg-secondary);
border: 1px solid var(--border-lighter);
border-radius: var(--radius-lg);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
white-space: nowrap;
}
.filings-month-pill:hover {
background: var(--bg-tertiary);
border-color: var(--border-light);
}
.filings-month-pill.active {
background: var(--astrovia-blue);
border-color: var(--astrovia-blue);
color: var(--text-inverse);
}
.filings-month-pill.has-filing {
position: relative;
}
.filings-month-pill.has-filing::after {
content: '';
position: absolute;
top: 4px;
right: 4px;
width: 6px;
height: 6px;
background: var(--success);
border-radius: 50%;
}
.filings-month-pill.active.has-filing::after {
background: var(--text-inverse);
}
/* Documents Panel */
.filings-documents-panel {
background: var(--bg-secondary);
border: 1px solid var(--border-lighter);
border-radius: var(--radius-md);
padding: var(--space-lg);
}
.filings-documents-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-md);
}
.filings-documents-header h3 {
margin: 0;
font-size: var(--font-size-md);
font-weight: 600;
color: var(--text-primary);
}
.filings-status-badge {
padding: 4px 12px;
background: var(--success-bg);
color: var(--success);
font-size: 0.6875rem;
font-weight: 600;
border-radius: var(--radius-lg);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.filings-status-badge.pending {
background: var(--warning-bg);
color: var(--warning);
}
/* Billing Status Badges - Tax Reports & Markets */
.billing-status-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
font-size: 0.6875rem;
font-weight: 600;
border-radius: var(--radius-lg);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.billing-status-badge.paid {
background: var(--success-bg);
color: var(--success);
}
.billing-status-badge.paid::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--success);
}
.billing-status-badge.pending-payment {
background: var(--warning-bg);
color: var(--warning);
}
.billing-status-badge.pending-payment::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--warning);
}
.billing-status-badge.overdue {
background: var(--error-bg);
color: var(--error);
}
.billing-status-badge.overdue::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--error);
}
.billing-status-badge.processing {
background: var(--info-bg);
color: var(--info);
}
.billing-status-badge.processing::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--info);
animation: pulse-dot 1.5s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.billing-status-badge.auto-pay {
background: linear-gradient(135deg, var(--astrovia-blue-light) 0%, var(--info-bg) 100%);
color: var(--astrovia-blue);
border: 1px solid var(--astrovia-blue-border);
}
.billing-status-badge.auto-pay::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--astrovia-blue);
}
/* Auto-pay toggle in admin */
.autopay-toggle {
display: flex;
align-items: center;
gap: var(--space-sm);
cursor: pointer;
}
.autopay-toggle-label {
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.autopay-toggle-switch {
position: relative;
width: 36px;
height: 20px;
background: var(--border-medium);
border-radius: 10px;
transition: background var(--duration-fast) var(--ease-default);
}
.autopay-toggle-switch::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: white;
border-radius: 50%;
box-shadow: var(--shadow-xs);
transition: transform var(--duration-fast) var(--ease-default);
}
.autopay-toggle.active .autopay-toggle-switch {
background: var(--success);
}
.autopay-toggle.active .autopay-toggle-switch::after {
transform: translateX(16px);
}
.filings-select-month-prompt {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-2xl);
text-align: center;
color: var(--text-tertiary);
}
.filings-select-month-prompt i {
font-size: 2rem;
margin-bottom: var(--space-md);
opacity: 0.5;
}
.filings-select-month-prompt p {
margin: 0;
font-size: var(--font-size-sm);
}
/* Document Cards */
.filings-document-list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.filings-document-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md) var(--space-lg);
background: var(--bg-white);
border: 1px solid var(--border-lighter);
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--ease-default);
}
.filings-document-card:hover {
border-color: var(--astrovia-blue-border);
box-shadow: var(--shadow-subtle-hover);
}
.filings-document-info {
display: flex;
align-items: center;
gap: var(--space-md);
}
.filings-document-icon {
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
}
.filings-document-icon.excel {
background: var(--success-bg);
color: var(--success-dark);
}
.filings-document-icon.pdf {
background: var(--error-bg);
color: var(--error-dark);
}
.filings-document-meta h4 {
margin: 0 0 2px;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text-primary);
}
.filings-document-meta span {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
}
.filings-document-download {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: var(--astrovia-blue);
border: none;
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-inverse);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
}
.filings-document-download:hover {
background: var(--astrovia-blue-hover);
}
.filings-document-download i {
font-size: 1rem;
}
/* No Filing State */
.filings-no-documents {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-2xl);
text-align: center;
color: var(--text-tertiary);
}
.filings-no-documents i {
font-size: 2.5rem;
margin-bottom: var(--space-md);
opacity: 0.4;
}
.filings-no-documents h4 {
margin: 0 0 var(--space-xs);
font-size: var(--font-size-md);
font-weight: 600;
color: var(--text-secondary);
}
.filings-no-documents p {
margin: 0;
font-size: var(--font-size-sm);
}
/* ========================================
ORGANIZATION MANAGEMENT STYLES
======================================== */
.organizations-list,
.members-list {
display: flex;
flex-direction: column;
gap: 0;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-xs);
}
.org-row,
.member-row {
display: grid;
grid-template-columns: minmax(200px, 1fr) auto 100px;
align-items: center;
gap: 20px;
padding: 18px 24px;
border-bottom: 1px solid var(--border-lighter);
transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.org-row:last-child,
.member-row:last-child {
border-bottom: none;
}
.org-row:hover,
.member-row:hover {
background: var(--bg-secondary);
}
.org-info,
.member-info {
display: flex;
flex-direction: row;
align-items: center;
gap: 14px;
min-width: 0;
}
.org-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, rgba(31, 81, 246, 0.1) 0%, rgba(59, 92, 232, 0.15) 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.org-icon svg {
color: var(--astrovia-blue);
}
.org-details,
.member-details {
display: flex;
flex-direction: column;
gap: var(--space-xs);
min-width: 0;
}
.org-name,
.member-name {
font-weight: 600;
font-size: 0.9375rem;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.org-shop,
.member-email {
font-size: 0.8125rem;
color: var(--text-secondary);
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.member-avatar {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background: var(--info-gradient);
border: 2px solid var(--border-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9375rem;
font-weight: 600;
color: var(--astrovia-blue);
flex-shrink: 0;
}
.org-meta,
.member-meta {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-end;
}
.org-role-badge,
.member-role {
display: inline-flex;
padding: 4px 10px;
border-radius: var(--radius-md);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
}
.role-owner {
background: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%);
color: var(--text-inverse);
}
.role-member {
background: var(--success-gradient);
color: var(--text-inverse);
}
.org-member-count {
font-size: 0.75rem;
color: var(--text-secondary);
}
.member-auth-mode {
font-size: 0.75rem;
color: var(--text-tertiary);
}
.org-actions,
.member-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.back-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
font-size: 0.8125rem;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.back-btn:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
}
.org-detail-info {
display: flex;
gap: 32px;
padding: 16px 0;
}
.org-info-item {
display: flex;
gap: 8px;
align-items: baseline;
}
.org-info-label {
font-size: 0.8125rem;
color: var(--text-tertiary);
font-weight: 500;
}
.org-info-value {
font-size: 0.9375rem;
color: var(--text-primary);
font-weight: 600;
}
.no-orgs-message,
.no-members {
padding: 40px 20px;
text-align: center;
color: var(--text-secondary);
font-size: 0.9375rem;
}
/* ========================================
ENHANCED UX COMPONENTS
World-Class Empty States, Loading States, and Onboarding
======================================== */
/* Enhanced Empty State - Actionable & Clear */
.enhanced-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 64px 32px;
background: linear-gradient(180deg, var(--bg-white) 0%, var(--bg-secondary) 100%);
border-radius: var(--radius-lg);
border: 1px dashed var(--border-light);
min-height: 300px;
}
.enhanced-empty-state-icon {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: var(--astrovia-blue-subtle);
border-radius: var(--radius-full);
margin-bottom: 24px;
}
.enhanced-empty-state-icon svg {
width: 36px;
height: 36px;
stroke: var(--astrovia-blue);
opacity: 0.8;
}
.enhanced-empty-state-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 8px 0;
}
.enhanced-empty-state-subtitle {
font-size: 0.9375rem;
color: var(--text-secondary);
margin: 0 0 24px 0;
max-width: 360px;
line-height: 1.5;
}
.enhanced-empty-state-action {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: var(--astrovia-blue);
color: var(--text-inverse);
border: none;
border-radius: var(--radius-md);
font-weight: 600;
font-size: 0.9375rem;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
}
.enhanced-empty-state-action:hover {
background: var(--astrovia-blue-hover);
box-shadow: var(--shadow-btn-primary);
transform: translateY(-1px);
}
.enhanced-empty-state-secondary {
margin-top: 12px;
font-size: 0.8125rem;
color: var(--text-tertiary);
}
.enhanced-empty-state-secondary a {
color: var(--astrovia-blue);
text-decoration: none;
}
.enhanced-empty-state-secondary a:hover {
text-decoration: underline;
}
/* Enhanced Loading State - Smooth & Reassuring */
.enhanced-loading-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
min-height: 200px;
}
.enhanced-loading-spinner {
width: 48px;
height: 48px;
border: 3px solid var(--border-light);
border-top-color: var(--astrovia-blue);
border-radius: var(--radius-full);
animation: enhanced-spin 0.8s linear infinite;
margin-bottom: 16px;
}
@keyframes enhanced-spin {
to { transform: rotate(360deg); }
}
.enhanced-loading-text {
font-size: 0.9375rem;
color: var(--text-secondary);
text-align: center;
}
.enhanced-loading-subtext {
font-size: 0.8125rem;
color: var(--text-tertiary);
margin-top: 4px;
}
/* Progress Loading Bar */
.enhanced-loading-bar {
width: 200px;
height: 4px;
background: var(--border-light);
border-radius: 2px;
overflow: hidden;
margin-bottom: 16px;
}
.enhanced-loading-bar-progress {
height: 100%;
background: linear-gradient(90deg, var(--astrovia-blue), var(--astrovia-purple));
border-radius: 2px;
animation: enhanced-loading-progress 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes enhanced-loading-progress {
0% { width: 0%; margin-left: 0; }
50% { width: 60%; margin-left: 20%; }
100% { width: 0%; margin-left: 100%; }
}
/* Welcome/Onboarding Card */
.onboarding-card {
background: linear-gradient(135deg, var(--astrovia-blue-light-bg) 0%, var(--info-bg) 100%);
border: 1px solid var(--astrovia-blue-border);
border-radius: var(--radius-lg);
padding: 32px;
margin-bottom: 24px;
position: relative;
overflow: hidden;
}
.onboarding-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(31, 81, 246, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.onboarding-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 20px;
}
.onboarding-card-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 6px 0;
}
.onboarding-card-subtitle {
font-size: 0.9375rem;
color: var(--text-secondary);
margin: 0;
}
.onboarding-dismiss {
background: transparent;
border: none;
color: var(--text-tertiary);
cursor: pointer;
padding: 4px;
border-radius: var(--radius-xs);
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.onboarding-dismiss:hover {
color: var(--text-primary);
background: rgba(0, 0, 0, 0.05);
}
.onboarding-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.onboarding-step {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
background: var(--bg-white);
border-radius: var(--radius-md);
border: 1px solid var(--border-light);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.onboarding-step:hover {
border-color: var(--astrovia-blue);
box-shadow: var(--shadow-subtle-hover);
}
.onboarding-step-number {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--astrovia-blue);
color: var(--text-inverse);
border-radius: var(--radius-full);
font-size: 0.8125rem;
font-weight: 700;
flex-shrink: 0;
}
.onboarding-step.completed .onboarding-step-number {
background: var(--success);
}
.onboarding-step-content h4 {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 4px 0;
}
.onboarding-step-content p {
font-size: 0.8125rem;
color: var(--text-secondary);
margin: 0;
line-height: 1.4;
}
/* Improved Tooltips */
.help-tooltip {
position: relative;
display: inline-flex;
align-items: center;
margin-left: 6px;
cursor: help;
}
.help-tooltip-icon {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-tertiary);
border-radius: var(--radius-full);
font-size: 0.6875rem;
color: var(--text-tertiary);
font-weight: 600;
}
.help-tooltip-content {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: var(--text-primary);
color: var(--text-inverse);
padding: 10px 14px;
border-radius: var(--radius-sm);
font-size: 0.8125rem;
line-height: 1.4;
width: max-content;
max-width: 280px;
opacity: 0;
visibility: hidden;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
box-shadow: var(--shadow-lg);
}
.help-tooltip-content::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--text-primary);
}
.help-tooltip:hover .help-tooltip-content {
opacity: 1;
visibility: visible;
}
/* Enhanced Error State */
.enhanced-error-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
text-align: center;
background: var(--error-subtle);
border: 1px solid var(--error-border-subtle);
border-radius: var(--radius-lg);
}
.enhanced-error-state-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: var(--error-tint);
border-radius: var(--radius-full);
margin-bottom: 16px;
}
.enhanced-error-state-icon svg {
width: 28px;
height: 28px;
stroke: var(--error);
}
.enhanced-error-state-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 8px 0;
}
.enhanced-error-state-message {
font-size: 0.9375rem;
color: var(--text-secondary);
margin: 0 0 20px 0;
max-width: 360px;
}
.enhanced-error-state-retry {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: var(--error);
color: var(--text-inverse);
border: none;
border-radius: var(--radius-md);
font-weight: 600;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.enhanced-error-state-retry:hover {
background: var(--error-dark);
}
/* Friendly Labels - Simplifying Technical Terms */
.label-friendly {
display: inline-flex;
align-items: center;
gap: 4px;
}
.label-friendly-hint {
font-size: 0.75rem;
color: var(--text-tertiary);
font-weight: 400;
}
/* Success Toast/Notification */
.enhanced-toast {
position: fixed;
bottom: 24px;
right: 24px;
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: var(--bg-white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
border-left: 4px solid var(--success);
z-index: 10000;
animation: toast-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes toast-slide-in {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.enhanced-toast-success {
border-left-color: var(--success);
}
.enhanced-toast-error {
border-left-color: var(--error);
}
.enhanced-toast-warning {
border-left-color: var(--warning);
}
.enhanced-toast-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.enhanced-toast-content h4 {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 2px 0;
}
.enhanced-toast-content p {
font-size: 0.8125rem;
color: var(--text-secondary);
margin: 0;
}
.enhanced-toast-close {
background: transparent;
border: none;
color: var(--text-tertiary);
cursor: pointer;
padding: 4px;
margin-left: 8px;
}
/* Breadcrumb Navigation */
.enhanced-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 0;
font-size: 0.875rem;
}
.enhanced-breadcrumb-item {
color: var(--text-tertiary);
text-decoration: none;
transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.enhanced-breadcrumb-item:hover {
color: var(--astrovia-blue);
}
.enhanced-breadcrumb-separator {
color: var(--border-light);
}
.enhanced-breadcrumb-current {
color: var(--text-primary);
font-weight: 500;
}
/* Section Header with Subtitle */
.enhanced-section-header {
margin-bottom: 24px;
}
.enhanced-section-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 6px 0;
}
.enhanced-section-subtitle {
font-size: 0.9375rem;
color: var(--text-secondary);
margin: 0;
line-height: 1.5;
}
/* Quick Stats Summary Cards */
.quick-stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.quick-stat-card {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 20px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.quick-stat-card:hover {
border-color: var(--astrovia-blue-border);
box-shadow: var(--shadow-subtle-hover);
}
.quick-stat-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.quick-stat-value {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
}
.quick-stat-change {
font-size: 0.8125rem;
margin-top: 4px;
}
.quick-stat-change.positive {
color: var(--success);
}
.quick-stat-change.negative {
color: var(--error);
}
/* ========================================
ADAPTIVE UX CLARITY SYSTEM
Confidence indicators, tooltips, error intelligence
======================================== */
/* ===== CONFIDENCE INDICATORS ===== */
.confidence-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--radius-lg);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
cursor: help;
}
.confidence-badge svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
/* High confidence - live/verified data */
.confidence-badge.high {
background: linear-gradient(135deg, var(--success-tint) 0%, var(--success-bg-solid) 100%);
color: var(--success-dark);
border: 1px solid var(--success-border);
}
.confidence-badge.high svg {
color: var(--success);
}
/* Medium confidence - synced/cached data */
.confidence-badge.medium {
background: linear-gradient(135deg, var(--warning-tint) 0%, var(--warning-bg) 100%);
color: var(--warning-dark);
border: 1px solid var(--warning-border);
}
.confidence-badge.medium svg {
color: var(--warning);
}
/* Low confidence - stale/estimated data */
.confidence-badge.low {
background: linear-gradient(135deg, var(--error-tint) 0%, var(--error-bg-solid) 100%);
color: var(--error-dark);
border: 1px solid var(--error-border);
}
.confidence-badge.low svg {
color: var(--error);
}
/* Data source indicator */
.data-source-indicator {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
font-size: 0.8125rem;
color: var(--text-secondary);
}
.data-source-indicator .source-dot {
width: 8px;
height: 8px;
border-radius: var(--radius-full);
flex-shrink: 0;
}
.data-source-indicator .source-dot.live {
background: var(--success);
box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
animation: pulse-live 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.data-source-indicator .source-dot.synced {
background: var(--warning);
}
.data-source-indicator .source-dot.cached {
background: var(--neutral-border);
}
@keyframes pulse-live {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.1); }
}
.data-source-indicator .source-label {
font-weight: 500;
}
.data-source-indicator .source-time {
color: var(--text-tertiary);
font-size: 0.75rem;
}
/* ===== CONTEXTUAL TOOLTIPS ===== */
.help-tooltip {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin-left: 6px;
cursor: help;
vertical-align: middle;
}
.help-tooltip-icon {
width: 14px;
height: 14px;
color: var(--text-tertiary);
transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.help-tooltip:hover .help-tooltip-icon {
color: var(--astrovia-blue);
}
.help-tooltip-content {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
width: 280px;
padding: 14px 16px;
background: var(--text-primary);
color: var(--text-inverse);
border-radius: var(--radius-md);
font-size: 0.8125rem;
font-weight: 400;
line-height: 1.5;
text-align: left;
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
pointer-events: none;
}
.help-tooltip-content::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--text-primary);
}
.help-tooltip:hover .help-tooltip-content {
opacity: 1;
visibility: visible;
}
.help-tooltip-title {
font-weight: 600;
margin-bottom: 6px;
font-size: 0.875rem;
color: var(--text-inverse);
}
.help-tooltip-body {
color: rgba(255, 255, 255, 0.85);
}
.help-tooltip-learn-more {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 10px;
color: var(--astrovia-blue-light);
font-weight: 500;
font-size: 0.75rem;
text-decoration: none;
}
/* Tooltip positions */
.help-tooltip-content.position-right {
bottom: 50%;
left: calc(100% + 10px);
transform: translateY(50%);
}
.help-tooltip-content.position-right::before {
top: 50%;
left: -6px;
transform: translateY(-50%);
border: 6px solid transparent;
border-right-color: var(--text-primary);
}
.help-tooltip-content.position-bottom {
bottom: auto;
top: calc(100% + 8px);
}
.help-tooltip-content.position-bottom::before {
top: -12px;
border: 6px solid transparent;
border-bottom-color: var(--text-primary);
}
/* ===== ERROR INTELLIGENCE ===== */
.smart-error {
background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
border: 1px solid var(--error-border-medium);
border-radius: var(--radius-md);
padding: 16px 20px;
margin: 16px 0;
}
.smart-error-header {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
}
.smart-error-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
color: var(--error);
}
.smart-error-title {
font-weight: 600;
color: var(--error-dark);
font-size: 0.9375rem;
line-height: 1.4;
}
.smart-error-message {
color: var(--error-text);
font-size: 0.875rem;
line-height: 1.5;
margin-bottom: 12px;
padding-left: 36px;
}
.smart-error-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding-left: 36px;
}
.smart-error-action {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: var(--bg-white);
border: 1px solid var(--error-border-medium);
border-radius: var(--radius-sm);
font-size: 0.8125rem;
font-weight: 500;
color: var(--error-dark);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
}
.smart-error-action:hover {
background: var(--error-tint);
border-color: var(--error);
}
.smart-error-action svg {
width: 14px;
height: 14px;
}
.smart-error-action.primary {
background: var(--error);
color: var(--text-inverse);
border-color: var(--error);
}
.smart-error-action.primary:hover {
background: var(--error-dark);
}
/* Smart Warning */
.smart-warning {
background: var(--warning-bg);
border: 1px solid var(--warning-border);
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-lg);
margin: var(--space-md) 0;
}
.smart-warning-header {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
margin-bottom: var(--space-xs);
}
.smart-warning-icon {
flex-shrink: 0;
width: var(--space-lg);
height: var(--space-lg);
color: var(--warning);
}
.smart-warning-title {
font-weight: 600;
color: var(--warning-dark);
font-size: var(--font-size-sm);
}
.smart-warning-message {
color: var(--warning-dark);
font-size: var(--font-size-xs);
line-height: 1.5;
padding-left: var(--space-2xl);
}
/* Smart Info */
.smart-info {
background: var(--info-bg);
border: 1px solid var(--info-border);
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-lg);
margin: var(--space-md) 0;
}
.smart-info-header {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
margin-bottom: var(--space-xs);
}
.smart-info-icon {
flex-shrink: 0;
width: var(--space-lg);
height: var(--space-lg);
color: var(--astrovia-blue);
}
.smart-info-title {
font-weight: 600;
color: var(--astrovia-blue);
font-size: var(--font-size-sm);
}
.smart-info-message {
color: var(--text-primary);
font-size: var(--font-size-xs);
line-height: 1.5;
padding-left: var(--space-2xl);
}
/* ===== INLINE TERM DEFINITIONS ===== */
.term-highlight {
position: relative;
color: var(--astrovia-blue);
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 3px;
cursor: help;
font-weight: 500;
}
.term-highlight:hover {
text-decoration-style: solid;
}
/* ===== CALCULATION AUDIT TRAIL ===== */
.calc-audit-trail {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 12px 16px;
font-size: 0.8125rem;
margin-top: 12px;
}
.calc-audit-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.calc-audit-title {
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
color: var(--text-secondary);
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.calc-audit-title svg {
width: 12px;
height: 12px;
}
.calc-audit-toggle {
font-size: 0.75rem;
color: var(--astrovia-blue);
cursor: pointer;
font-weight: 500;
}
.calc-audit-steps {
display: flex;
flex-direction: column;
gap: 6px;
}
.calc-audit-step {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
border-bottom: 1px dashed var(--border-light);
}
.calc-audit-step:last-child {
border-bottom: none;
}
.calc-audit-step-label {
flex: 1;
color: var(--text-secondary);
}
.calc-audit-step-formula {
font-family: 'SF Mono', Monaco, monospace;
color: var(--text-tertiary);
font-size: 0.75rem;
}
.calc-audit-step-result {
font-weight: 600;
color: var(--text-primary);
min-width: 80px;
text-align: right;
}
/* ===== PROGRESS INDICATORS ===== */
.sync-progress {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: var(--astrovia-blue-light-bg);
border: 1px solid var(--astrovia-blue-border);
border-radius: var(--radius-sm);
}
.sync-progress-spinner {
width: 16px;
height: 16px;
border: 2px solid var(--astrovia-blue-light);
border-top-color: var(--astrovia-blue);
border-radius: var(--radius-full);
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.sync-progress-text {
font-size: 0.8125rem;
color: var(--astrovia-blue);
font-weight: 500;
}
/* ===== VARIANCE INDICATORS ===== */
.variance-indicator {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: var(--radius-xs);
font-size: 0.75rem;
font-weight: 600;
}
.variance-indicator.positive {
background: var(--success-tint);
color: var(--success-dark);
}
.variance-indicator.negative {
background: var(--error-tint);
color: var(--error-dark);
}
.variance-indicator.neutral {
background: var(--bg-tertiary);
color: var(--text-secondary);
}
.variance-indicator svg {
width: 12px;
height: 12px;
}
/* ===== THRESHOLD PROXIMITY INDICATOR ===== */
.threshold-proximity {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
margin: 12px 0;
}
.threshold-bar {
flex: 1;
height: 6px;
background: var(--bg-tertiary);
border-radius: 3px;
overflow: hidden;
position: relative;
}
.threshold-bar-fill {
height: 100%;
border-radius: 3px;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.threshold-bar-fill.safe {
background: linear-gradient(90deg, #22C55E 0%, #4ADE80 100%);
}
.threshold-bar-fill.warning {
background: linear-gradient(90deg, #F59E0B 0%, #FBBF24 100%);
}
.threshold-bar-fill.danger {
background: linear-gradient(90deg, #EF4444 0%, #F87171 100%);
}
.threshold-marker {
position: absolute;
top: -4px;
bottom: -4px;
width: 2px;
background: var(--text-primary);
}
.threshold-label {
display: flex;
flex-direction: column;
min-width: 100px;
}
.threshold-label-value {
font-weight: 600;
font-size: 0.9375rem;
color: var(--text-primary);
}
.threshold-label-name {
font-size: 0.75rem;
color: var(--text-tertiary);
}
/* ========================================
UTILITY CLASSES - Design System Compliant
Use these instead of inline styles
======================================== */
/* Info Banner */
.ds-info-banner,
.info-banner {
background: var(--info-gradient);
border: 1px solid var(--info-border);
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-lg);
margin-bottom: var(--space-xl);
}
.info-banner--gradient {
background: var(--astrovia-gradient);
border: 1px solid var(--border-light);
}
/* Warning Banner */
.ds-warning-banner {
background: var(--warning-bg-solid);
border: 1px solid var(--warning-border);
border-radius: var(--radius-sm);
padding: var(--space-sm) var(--space-md);
}
.ds-warning-banner p {
color: var(--warning-text);
}
/* Code Inline */
.ds-code-inline {
font-size: var(--font-size-sm);
color: var(--text-primary);
background: var(--bg-primary);
padding: 6px 10px;
border-radius: var(--radius-sm);
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}
/* Card Section (for grouped content) */
.ds-card-section {
background: var(--bg-secondary);
border-radius: var(--radius-md);
padding: var(--space-xl);
}
/* Upload Zone */
.ds-upload-zone {
border: 2px dashed var(--border-light);
border-radius: var(--radius-md);
padding: var(--space-lg);
text-align: center;
background: var(--bg-white);
transition: all var(--duration-fast) var(--ease-default);
}
.ds-upload-zone:hover {
border-color: var(--astrovia-blue);
background: var(--astrovia-blue-subtle);
}
/* Info Card with Left Accent */
.ds-accent-card {
background: var(--card-surface-solid);
padding: var(--space-lg) var(--space-xl);
border-radius: var(--radius-md);
margin-bottom: var(--space-md);
border: 1px solid var(--border-light);
border-left: 4px solid var(--info-border-strong);
}
.ds-accent-card.neutral {
border-left-color: var(--text-secondary);
}
/* Metric Box */
.ds-metric-box {
padding: 10px 14px;
background: var(--bg-white);
border-radius: var(--radius-sm);
border: 1px solid var(--border-light);
}
/* Priority Badge for Tables */
.priority-badge {
display: inline-block;
padding: 4px 10px;
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.priority-badge.priority-critical {
background: var(--error-tint);
color: var(--error);
}
.priority-badge.priority-high {
background: var(--warning-bg-solid);
color: var(--warning);
}
.priority-badge.priority-medium {
background: var(--info-bg);
color: var(--astrovia-blue);
}
.priority-badge.priority-low {
background: var(--neutral-bg);
color: var(--text-secondary);
}
/* ========================================
UTILITY CLASSES
For replacing common inline styles
======================================== */
/* Icon size utilities */
.icon-sm {
font-size: var(--font-size-sm);
}
.icon-md {
font-size: var(--font-size-md);
}
/* Section header pattern */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-lg);
}
.section-header-title {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.section-header-actions {
display: flex;
gap: var(--space-sm);
}
/* Admin setup card pattern */
.admin-setup-layout {
display: flex;
align-items: flex-start;
gap: var(--space-md);
}
.admin-setup-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background: var(--credit-gradient);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.admin-setup-content {
flex: 1;
}
.admin-setup-title {
margin: 0 0 var(--space-xs) 0;
font-size: var(--font-size-lg);
}
.admin-setup-description {
color: var(--text-primary);
margin: 0 0 var(--space-md) 0;
font-size: var(--font-size-base);
line-height: 1.6;
}
.admin-setup-info-box {
background: var(--bg-secondary);
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-md);
border: 1px solid var(--border-light);
}
.admin-setup-label {
margin: 0 0 var(--space-sm) 0;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.admin-setup-stack {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
/* Form helper text */
.form-helper-text {
font-size: 0.75rem;
color: var(--text-tertiary);
margin-top: var(--space-xs);
}
/* Compact card subtitle */
.card-subtitle {
margin: 0;
font-size: var(--font-size-base);
color: var(--text-secondary);
}
/* ========================================
SPACING UTILITIES - Design System Scale
Use these instead of inline margin/padding
Scale: 8/12/16/20/24/32/48
======================================== */
/* Margin-bottom utilities */
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); } /* 8px */
.mb-sm { margin-bottom: var(--space-sm); } /* 12px */
.mb-md { margin-bottom: var(--space-md); } /* 16px */
.mb-lg { margin-bottom: var(--space-lg); } /* 20px */
.mb-xl { margin-bottom: var(--space-xl); } /* 24px */
.mb-2xl { margin-bottom: var(--space-2xl); } /* 32px */
.mb-3xl { margin-bottom: var(--space-3xl); } /* 48px */
/* Margin-top utilities */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
/* Margin utilities */
.m-0 { margin: 0; }
/* ========================================
FLEX/LAYOUT UTILITIES
======================================== */
/* Flex containers */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
/* Min-width utilities */
.min-w-320 { min-width: 320px; }
/* Gap utilities */
.gap-xs { gap: var(--space-xs); } /* 8px */
.gap-sm { gap: var(--space-sm); } /* 12px */
.gap-md { gap: var(--space-md); } /* 16px */
.gap-lg { gap: var(--space-lg); } /* 20px */
.gap-xl { gap: var(--space-xl); } /* 24px */
.gap-2xl { gap: var(--space-2xl); } /* 32px */
/* Filter row layout */
.filter-controls {
display: flex;
gap: var(--space-sm);
align-items: center;
}
/* ========================================
GRID UTILITIES
======================================== */
.grid-span-2 { grid-column: span 2; }
.grid-span-full { grid-column: 1 / -1; }
.grid-2-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
}
.grid-2-col-sm {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-sm);
}
.grid-2-col-md {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
}
.grid-3-col {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.grid-3-col-sm {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xs);
}
.grid-4-col {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-sm);
}
.grid-auto-fill {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--col-min-2xl), 1fr));
gap: var(--space-sm);
}
.grid-1-col {
grid-template-columns: 1fr;
}
/* ========================================
WIDTH UTILITIES - Form Controls
======================================== */
.w-full { width: 100%; }
.w-auto { width: auto; }
.form-select-xs { width: 100px; }
.form-select-sm { width: 120px; }
.form-select-md { width: 150px; }
.form-select-lg { width: 200px; }
.form-select-xl { width: 280px; }
/* ========================================
TEXT UTILITIES
======================================== */
.text-center { text-align: center; }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-note-info { color: var(--text-note-info); }
.text-diagnostic-red { color: var(--text-diagnostic-red); }
.text-tertiary { color: var(--text-tertiary); }
.text-uppercase { text-transform: uppercase; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.lh-relaxed { line-height: 1.6; }
/* Background utilities */
.bg-secondary { background: var(--bg-secondary); }
.bg-white { background: var(--bg-white); }
/* Padding utilities */
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
/* Border radius utilities */
.radius-xs { border-radius: var(--radius-xs); }
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
/* Width utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }
.max-w-sm { max-width: 320px; }
.max-w-md { max-width: 480px; }
.max-w-lg { max-width: 640px; }
/* ========================================
ICON PILL PATTERNS - Design System Standard
44x44 for page headers, 36x36 for cards
======================================== */
/* Large icon pill (page headers - 44x44) */
.icon-pill-lg {
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background: var(--bg-glass);
backdrop-filter: saturate(180%) blur(20px);
border: 1px solid var(--border-glass);
display: flex;
align-items: center;
justify-content: center;
color: var(--astrovia-blue);
flex-shrink: 0;
}
/* Medium icon pill (cards - 36x36) */
.icon-pill-md {
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: var(--bg-secondary);
border: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: center;
color: var(--astrovia-blue);
flex-shrink: 0;
}
/* Accent icon pill - DEPRECATED gradient, now solid color */
.icon-pill-gradient {
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: var(--astrovia-blue);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-inverse);
flex-shrink: 0;
}
/* Token-compliant accent icon pill (replaces gradient) */
.icon-pill-accent {
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: var(--astrovia-blue);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-inverse);
flex-shrink: 0;
}
/* Dark icon pill - DEPRECATED hard-coded colors, now uses tokens */
.icon-pill-dark {
width: 36px;
height: 36px;
background: var(--bg-tertiary);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
flex-shrink: 0;
}
/* Token-compliant muted icon pill (replaces dark) */
.icon-pill-muted {
width: 36px;
height: 36px;
background: var(--bg-tertiary);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
flex-shrink: 0;
}
/* ========================================
PREVIEW/CARD SECTION PATTERNS
======================================== */
/* Preview label */
.preview-label {
font-size: var(--font-size-xs);
font-weight: 500;
color: var(--text-secondary);
margin-bottom: var(--space-xs);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Preview box (sidebar/logo preview) */
.preview-box {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-sm);
}
.preview-box-dark {
background: var(--bg-tertiary);
}
.preview-box-light {
background: var(--bg-white);
border: 1px solid var(--border-light);
}
/* Preview logo image */
.preview-logo {
height: 28px;
object-fit: contain;
}
.preview-logo-lg {
height: 32px;
object-fit: contain;
}
/* Preview brand text */
.preview-brand-text {
color: rgba(255,255,255,0.5);
font-size: var(--font-size-xs);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.preview-brand-text-light {
color: var(--text-tertiary);
font-size: var(--font-size-xs);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.02em;
opacity: 0.7;
}
/* Upload status text */
.upload-status-text {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
margin-top: var(--space-sm);
text-align: center;
}
/* ========================================
TYPOGRAPHY COMBINATION CLASSES
Design System compliant typography - all values use tokens
======================================== */
.text-body-secondary { font-size: var(--font-size-sm); color: var(--text-secondary); }
.text-body-primary { font-size: var(--font-size-sm); color: var(--text-primary); }
.text-label-sm { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-xs); }
.text-heading-base { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); }
.text-label-uppercase { font-size: var(--font-size-xs); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.text-title-accent { font-weight: 600; margin: 0 0 var(--space-sm) 0; font-size: var(--font-size-base); color: var(--astrovia-blue); }
.text-hint { font-weight: 400; color: var(--text-tertiary); display: block; margin-top: var(--space-xs); }
/* Card row patterns - uses token-based spacing */
.card-row { padding: var(--space-sm) var(--space-md); background: var(--bg-white); border-radius: var(--radius-md); border: 1px solid var(--border-light); }
.card-row-compact { padding: var(--space-sm); background: var(--bg-white); border-radius: var(--radius-md); border: 1px solid var(--border-light); }
.card-row-spaced { padding: var(--space-sm) var(--space-md); background: var(--bg-white); border-radius: var(--radius-md); border: 1px solid var(--border-light); margin-bottom: var(--space-xs); }
/* Table header cells - uses token-based spacing */
.th-standard { text-align: left; padding: var(--space-sm) var(--space-md); font-size: var(--font-size-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.td-standard { padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); color: var(--text-primary); }
.td-standard-medium { padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); font-weight: 500; color: var(--text-primary); }
/* Border patterns */
.border-top-light { border-top: 1px solid var(--border-light); }
/* Grid patterns - uses token-based spacing */
.grid-2col-gap-sm { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-bottom: var(--space-sm); }
/* ========================================
INFO DROPDOWN PATTERNS
======================================== */
.info-dropdown-btn {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: var(--space-xs) 0;
width: 100%;
background: none;
border: none;
text-align: left;
}
.info-dropdown-title {
margin: 0;
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
}
.info-dropdown-subtitle {
margin: 4px 0 0 0;
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.info-dropdown-chevron {
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.info-dropdown-content {
display: none;
margin-top: var(--space-lg);
padding-top: var(--space-lg);
border-top: 1px solid var(--border-light);
}
.info-dropdown-content.is-open {
display: block;
}
/* ========================================
INFO/HELP SECTION PATTERNS
======================================== */
.info-section-title {
margin: 0 0 var(--space-sm) 0;
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
gap: var(--space-xs);
}
.info-section-text {
margin: 0;
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: 1.6;
padding-left: var(--space-2xl);
}
.info-section-content {
padding-left: var(--space-2xl);
}
.info-list-ordered {
margin: 0;
padding-left: var(--space-lg);
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: 1.8;
}
.info-list-unordered {
margin: 0;
padding-left: var(--space-md);
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: 1.6;
}
.info-grid-2col {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
.info-box {
background: var(--bg-secondary);
border-radius: var(--radius-lg);
padding: var(--space-sm);
}
.info-box-title {
font-weight: 600;
color: var(--text-primary);
font-size: var(--font-size-sm);
margin-bottom: var(--space-xs);
}
/* Collapsible section button (no background, full width) */
.collapsible-trigger {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: var(--space-xs) 0;
width: 100%;
background: none;
border: none;
text-align: left;
}
.collapsible-trigger:hover {
opacity: 0.8;
}
/* Collapsible content */
.collapsible-content {
display: none;
margin-top: var(--space-lg);
padding-top: var(--space-lg);
border-top: 1px solid var(--border-light);
}
.collapsible-content.is-open {
display: block;
}
/* Info section title */
.info-section-title {
margin: 0 0 var(--space-sm) 0;
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
gap: var(--space-xs);
}
/* Info section body */
.info-section-body {
margin: 0;
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: 1.6;
padding-left: var(--space-2xl);
}
/* ========================================
UPLOAD ZONE PATTERN
======================================== */
.upload-zone {
border: 2px dashed var(--border-light);
border-radius: var(--radius-md);
padding: var(--space-lg);
text-align: center;
background: var(--bg-white);
transition: all var(--duration-fast) var(--ease-default);
cursor: pointer;
}
.upload-zone input[type="file"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.upload-zone:hover {
border-color: var(--astrovia-blue);
background: var(--astrovia-blue-subtle);
}
.upload-zone-text {
font-size: var(--font-size-sm);
color: var(--text-primary);
margin-bottom: var(--space-xs);
}
.upload-zone-hint {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
}
.upload-zone-btn {
background: none;
border: none;
color: var(--astrovia-blue);
font-weight: 600;
cursor: pointer;
padding: 0;
}
/* ========================================
ACTION BUTTON GROUPS
======================================== */
.action-buttons {
display: flex;
gap: 10px;
margin-top: 14px;
}
/* ========================================
TOOL ACCESS ROW PATTERN
======================================== */
.tool-access-row {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--space-md);
padding: var(--space-sm) var(--space-md);
background: var(--bg-secondary);
border-radius: var(--radius-sm);
margin-bottom: var(--space-xs);
}
.tool-access-row:last-child {
margin-bottom: 0;
}
.tool-access-radios {
display: flex;
gap: var(--space-sm);
flex-wrap: nowrap;
}
.tool-access-radios label {
display: flex;
align-items: center;
gap: var(--space-xs);
cursor: pointer;
white-space: nowrap;
font-size: var(--font-size-sm);
}
/* ========================================
VISIBILITY UTILITIES
======================================== */
.hidden { display: none; }
.visible { visibility: visible; }
.invisible { visibility: hidden; }