@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/InterVariable.woff2') format('woff2-variations');
font-optical-sizing: auto;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/InterVariable-Italic.woff2') format('woff2-variations');
font-optical-sizing: auto;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--az-bg-app: #0A0A0B;
--az-bg-sidebar: #0A0A0B;
--az-bg-card: #111113;
--az-bg-card-hover: #19191C;
--az-bg-elevated: #161719;
--az-bg-surface: #111113;
--az-bg-overlay: rgba(5, 5, 7, 0.88);
--az-bg-input: #08080A;
--az-bg-input-focus: #0E0E11;
--az-border: rgba(255, 255, 255, 0.05);
--az-border-hover: rgba(255, 255, 255, 0.10);
--az-border-focus: rgba(255, 255, 255, 0.18);
--az-text-primary: #EDEDEF;     
--az-text-secondary: #ADADB5;   
--az-text-tertiary: #9595A0;    
--az-text-muted: #82828C; 
--az-text-disabled: #3B3B42;
--az-text-on-accent: #ffffff;
--az-avatar-placeholder: #AEAEB2;
--az-blue: #7B8AF2;
--az-blue-hover: #8D9AF5;
--az-blue-bg: rgba(123, 138, 242, 0.10);
--az-blue-border: rgba(123, 138, 242, 0.16);
--az-green: #4CB782;
--az-green-hover: #5CC892;
--az-green-bg: rgba(76, 183, 130, 0.10);
--az-green-border: rgba(76, 183, 130, 0.16);
--az-red: #D94F57;
--az-red-hover: #E95F67;
--az-red-bg: rgba(217, 79, 87, 0.10);
--az-red-border: rgba(217, 79, 87, 0.16);
--az-amber: #E5934E;
--az-amber-hover: #F5A35E;
--az-amber-bg: rgba(229, 147, 78, 0.10);
--az-amber-border: rgba(229, 147, 78, 0.16);
--az-indigo: #5B5FC7;
--az-indigo-bg: rgba(91, 95, 199, 0.10);
--az-indigo-border: rgba(91, 95, 199, 0.16);
--az-purple: #9B6ACD;
--az-purple-hover: #AB7ADD;
--az-purple-bg: rgba(155, 106, 205, 0.10);
--az-purple-border: rgba(155, 106, 205, 0.16);
--az-bronze: #8B7260;
--az-bronze-bg: rgba(139, 114, 96, 0.14);
--az-bronze-border: rgba(139, 114, 96, 0.24);
--az-cyan: #46B5D1;
--az-cyan-hover: #56C5E1;
--az-cyan-bg: rgba(70, 181, 209, 0.10);
--az-cyan-border: rgba(70, 181, 209, 0.16);
--az-accent: var(--az-blue);
--az-danger: var(--az-red);
--az-border-subtle: var(--az-border);
--az-2xs: 2px;
--az-xs: 4px;
--az-xs-plus: 6px;
--az-sm: 8px;
--az-sm-plus: 10px;
--az-md: 12px;
--az-md-plus: 14px;
--az-lg: 16px;
--az-lg-plus: 20px;
--az-xl: 24px;
--az-2xl: 32px;
--az-3xl: 40px;
--az-4xl: 48px;
--az-5xl: 56px;
--az-z-sticky: 100;
--az-z-dropdown: 200;
--az-z-premium: 800;
--az-z-modal-backdrop: 900;
--az-z-modal: 1000;
--az-z-toast: 1100;
--az-z-tooltip: 1200;
--az-z-chat-backdrop: 1999;
--az-z-chat: 2000;
--az-z-loader: 99999;
--az-font-light: 300;
--az-font-normal: 400;
--az-font-medium: 500;
--az-font-semibold: 600;
--az-font-bold: 700;
--az-font: 'Inter', 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--az-text-3xs: 9px;    
--az-text-2xs: 10px;   
--az-text-xs: 12px;    
--az-text-xs-plus: 12px; 
--az-text-sm: 13px;    
--az-text-md: 14px;    
--az-text-lg: 15px;    
--az-text-lg-plus: 16px; 
--az-text-xl: 17px;    
--az-text-xl-plus: 20px; 
--az-text-2xl: 22px;   
--az-text-2xl-plus: 24px;
--az-text-3xl: 28px;   
--az-text-3xl-plus: 34px; 
--az-text-4xl: 34px;
--az-text-4xl-plus: 36px;
--az-text-5xl: 48px;
--az-text-5xl-plus: 56px;
--az-tracking-tight: -0.011em;
--az-tracking-tighter: -0.025em;
--az-tracking-display: -0.032em;
--az-tracking-heading: -0.022em;
--az-font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
--az-bg-code: #131416;
--az-code-border: rgba(255, 255, 255, 0.05);
--az-radius-xs: 3px;
--az-radius-sm: 4px;
--az-radius-md: 6px;
--az-radius-lg: 8px;
--az-radius-lg-plus: 10px;
--az-radius-xl: 12px;
--az-radius-2xl: 18px;
--az-radius-3xl: 20px;
--az-radius-pill: 9999px;
--az-radius: var(--az-radius-lg);
--az-card-radius: var(--az-radius-2xl);
--az-bg-primary: var(--az-bg-card);
--az-bg-secondary: var(--az-bg-elevated);
--az-bg-tertiary: var(--az-bg-card-hover);
--az-primary: var(--az-blue);
--az-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.12);
--az-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
--az-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.35);
--az-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
--az-shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.3);
--az-shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
--az-shadow-sheet: 0 -4px 24px rgba(0, 0, 0, 0.4);
--az-overlay-bg: rgba(0, 0, 0, 0.55);
--az-grabber-bg: rgba(255, 255, 255, 0.2);
--az-fill-tertiary: rgba(118, 118, 128, 0.24); 
--az-rank-gold: #E5B54A;
--az-rank-silver: #A8ACB3;
--az-focus-ring: 0 0 0 2px rgba(74, 108, 247, 0.35);
--az-nav-bg: rgba(10, 10, 11, 0.88);
--az-nav-border: rgba(255, 255, 255, 0.06);
--az-nav-blur: 20px;
--az-nav-inactive: var(--az-text-tertiary);
--az-nav-active: var(--az-blue);
--az-sidebar-w: 232px;
--az-page-pad: var(--az-2xl);
--az-touch-min: 44px;
--az-bottom-nav-h: 56px;
--az-loader-size: 96px;
--az-header-pad-bottom: 12px;
--az-header-gap: 12px;
--az-transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
--az-transition-fast: 0.15s ease;
--az-transition-ease: 0.2s ease;
--az-transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
--az-transition-slower: 1s cubic-bezier(0.16, 1, 0.3, 1);
--az-blur-sm: 8px;
--az-blur-md: 12px;
--az-blur-lg: 20px;
--az-ease-spring: linear(
0, 0.006, 0.025, 0.056, 0.1, 0.157, 0.225, 0.306,
0.399, 0.502, 0.614, 0.732, 0.847, 0.953, 1.043,
1.113, 1.158, 1.178, 1.174, 1.15, 1.111, 1.063,
1.012, 0.963, 0.921, 0.889, 0.869, 0.861, 0.866,
0.879, 0.898, 0.92, 0.942, 0.962, 0.979, 0.991, 1
);
--az-ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
--az-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
--az-segment-track-pad: 3px;
--az-opacity-muted: 0.5;
--az-opacity-placeholder: 0.6;
--az-section-gap: 24px;
--az-card-pad: 14px 16px;
--az-card-pad-lg: 16px;
--az-table-row-h: 36px;
--az-input-h: 32px;
--az-input-pad: 6px 10px;
--az-btn-inv-bg: #fafafa;
--az-btn-inv-bg-hover: #e4e4e7;
--az-btn-inv-bg-gradient: linear-gradient(135deg, #fafafa 0%, #e4e4e7 100%);
--az-btn-inv-bg-gradient-hover: linear-gradient(135deg, #ffffff 0%, #f4f4f5 100%);
--az-btn-inv-text: #09090b;
--az-btn-inv-focus: 0 0 0 3px rgba(250, 250, 250, 0.25);
--az-press-opacity: 0.65;
--az-widget-body-flex: 1;
--az-kpi-grid-gap: var(--az-md);
--az-kpi-pad: var(--az-lg) var(--az-lg-plus);
--az-kpi-pad-lg: var(--az-lg) var(--az-lg);
--az-kpi-pad-compta: var(--az-lg) var(--az-lg-plus);
--az-kpi-gap: var(--az-md);
--az-kpi-gap-lg: var(--az-sm-plus);
--az-kpi-icon: var(--az-2xl);
--az-kpi-icon-lg: var(--az-card-btn-size);
--az-kpi-icon-svg: var(--az-lg);
--az-kpi-value: var(--az-lg-plus);
--az-kpi-value-lg: var(--az-lg-plus);
--az-kpi-label-font: var(--az-text-sm);
--az-kpi-label-color: var(--az-text-secondary);
--az-kpi-value-lh: 1.2;
--az-kpi-label-lh: 1.3;
--az-kpi-card-min-h: auto;
--az-kpi-icon-radius: 10px;
--az-icon-btn-sm: 28px;
--az-icon-lg: 36px;
--az-header-pad-top: 8px;
--az-sort-chip-gap: 8px;
--az-sort-chip-pad: 4px 10px;
--az-sort-chip-radius: 20px;
--az-sort-chip-font: var(--az-text-sm);
--az-sort-chip-bg: var(--az-bg-elevated);
--az-sort-chip-border: var(--az-border);
--az-sort-chip-color: var(--az-text-secondary);
--az-sort-chip-active-bg: #1C1D21;
--az-sort-chip-active-border: rgba(255, 255, 255, 0.08);
--az-sort-chip-active-color: var(--az-text-primary);
--az-segment-active-bg: rgba(255, 255, 255, 0.08);
--az-segment-active-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
--az-segment-active-color: var(--az-text-primary);
--az-chip-active-border: rgba(255, 255, 255, 0.14);
--az-segment-track-bg: rgba(255, 255, 255, 0.03);
--az-card-avatar: var(--az-touch-min);
--az-card-avatar-font: var(--az-text-xs);
--az-card-grid-cols: var(--az-card-avatar) 1fr auto;
--az-card-grid-gap-x: var(--az-md);
--az-card-grid-gap-y: 2px;
--az-card-amount-font: var(--az-text-md);
--az-card-detail-font: var(--az-text-xs);
--az-card-btn-size: 34px;
--az-card-btn-icon: 16px;
--az-card-badge-h: 34px;
--az-card-badge-font: 12px;
--az-card-badge-pad: 0 14px;
--az-card-badge-radius: 17px;
--az-card-ref-font: 13px;
--az-glass-bg: rgba(255, 255, 255, 0.04);
--az-glass-bg-hover: rgba(255, 255, 255, 0.06);
--az-glass-border: rgba(255, 255, 255, 0.06);
--az-glass-border-hover: rgba(255, 255, 255, 0.10);
--az-glass-blur: 12px;
--az-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
--az-glass-card-bg: rgba(255, 255, 255, 0.08);
--az-glass-card-border: rgba(255, 255, 255, 0.12);
--az-glass-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
--az-rev-tracking: -0.1px;
--az-rev-tracking-tight: -0.2px;
--az-rev-tracking-balance: -2px;
--az-rev-tracking-banner: -0.9px;
--az-rev-balance-size: 51px;
--az-rev-section-title: 20px;
--az-rev-kpi-value: 22px;
--az-rev-row-title: 16px;
--az-rev-row-subtitle: 14px;
--az-rev-amount: 16px;
--az-rev-label: 14px;
--az-rev-banner-title: 18px;
--az-rev-banner-body: 15px;
--az-rev-link: 16px;
--az-rev-pill-text: 15px;
--az-rev-text-primary: var(--az-text-primary);
--az-rev-text-secondary: var(--az-text-secondary);
--az-rev-text-banner: var(--az-text-secondary);
--az-rev-text-banner-title: var(--az-text-primary);
--az-rev-accent: #0666EB;
--az-rev-orange: #EC7E00;
--az-rev-dot-active: #BAC4CD;
--az-rev-dot-inactive: #CDD3DA;
--az-rev-card-pad: 16px;
--az-rev-card-radius: 16px;
--az-rev-card-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.16);
--az-rev-section-gap: 32px;
--az-rev-item-gap: 18px;
--az-rev-widget-gap: 16px;
--az-rev-row-pad: 14px 16px;
--az-rev-avatar: 44px;
--az-rev-avatar-inner: 40px;
--az-rev-glass-bg: rgba(255, 255, 255, 0.35);
--az-rev-glass-blur: 7px;
--az-rev-pill-radius: 35px;
--az-rev-pill-pad: 14px 17px;
--az-rev-banner-pad: 26px 18px;
--az-rev-hero-circle-size: 55px;
--az-rev-hero-circle-radius: 50%;
--az-action-circle-bg: rgba(255, 255, 255, 0.08);
--az-rev-hero-action-label: 15px;
--az-rev-topbar-icon-size: 44px;
--az-rev-topbar-icon-radius: 20px;
--az-rev-search-radius: 9999px;
--az-rev-search-pad: 8px 12px;
--az-rev-search-text: 16px;
--az-glow-blue: rgba(74, 108, 247, 0.15);
--az-glow-green: rgba(76, 183, 130, 0.15);
--az-glow-red: rgba(217, 79, 87, 0.15);
--az-label-transform: none;           
--az-heading-transform: none;         
--az-micro-transform: uppercase;      
--az-chart-grid-gap: var(--az-lg);
--az-chart-pad: var(--az-lg-plus);
--color-bg-app: var(--az-bg-app);
--color-bg-card: var(--az-bg-card);
--color-bg-alt: var(--az-bg-elevated);
--color-bg-hover: var(--az-bg-card-hover);
--color-bg-primary: var(--az-bg-app);
--color-text-primary: var(--az-text-primary);
--color-text-secondary: var(--az-text-secondary);
--color-text-tertiary: var(--az-text-tertiary);
--color-text-muted: var(--az-text-muted);
--color-text-disabled: var(--az-text-disabled);
--color-border: var(--az-border);
--color-shadow: rgba(0, 0, 0, 0.3);
--color-success: var(--az-green);
--color-chart-grid: rgba(255, 255, 255, 0.06);
--color-chart-text: var(--az-text-tertiary);
--color-tooltip-bg: #1a1a1f;
--color-tooltip-text: var(--az-text-primary);
--radius-sm: var(--az-radius-sm);
}
html, body {
touch-action: manipulation;
-ms-touch-action: manipulation;
overscroll-behavior: none;
}
html:not(.dark-mode),
html.light-mode,
body.light-mode {
--az-glass-bg: #ffffff;
--az-glass-bg-hover: #F7F7FA;
--az-glass-border: rgba(0, 0, 0, 0.08);
--az-glass-border-hover: rgba(0, 0, 0, 0.14);
--az-glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
--az-glass-card-bg: #ffffff;
--az-glass-card-border: rgba(0, 0, 0, 0.06);
--az-glass-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
--az-glow-blue: rgba(0, 122, 255, 0.06);
--az-glow-green: rgba(36, 138, 61, 0.06);
--az-glow-red: rgba(215, 0, 21, 0.06);
--az-bg-app: #F5F5F7;
--az-bg-sidebar: #F5F5F7;
--az-bg-card: #ffffff;
--az-bg-card-hover: #F9F9FB;
--az-bg-elevated: #EDEDF0;
--az-action-circle-bg: #EDEDF0;
--az-bg-surface: #ffffff;
--az-bg-overlay: rgba(0, 0, 0, 0.45);
--az-bg-input: #ffffff;
--az-bg-input-focus: #F9F9FB;
--az-bg-code: #F2F2F5;
--az-code-border: rgba(0, 0, 0, 0.08);
--az-border: rgba(0, 0, 0, 0.12);
--az-border-hover: rgba(0, 0, 0, 0.20);
--az-border-focus: rgba(0, 122, 255, 0.50);
--az-text-primary: #1C1C1E;
--az-text-secondary: #48484A;
--az-text-tertiary: rgba(60, 60, 67, 0.65);
--az-text-muted: rgba(60, 60, 67, 0.65);
--az-text-disabled: rgba(60, 60, 67, 0.30);
--az-blue-bg: rgba(0, 122, 255, 0.12);
--az-blue-border: rgba(0, 122, 255, 0.16);
--az-green-bg: rgba(36, 138, 61, 0.10);
--az-green-border: rgba(36, 138, 61, 0.14);
--az-red-bg: rgba(215, 0, 21, 0.10);
--az-red-border: rgba(215, 0, 21, 0.14);
--az-amber-bg: rgba(201, 52, 0, 0.10);
--az-amber-border: rgba(201, 52, 0, 0.14);
--az-indigo-bg: rgba(79, 70, 229, 0.10);
--az-indigo-border: rgba(79, 70, 229, 0.14);
--az-purple-bg: rgba(139, 92, 246, 0.10);
--az-purple-border: rgba(139, 92, 246, 0.14);
--az-bronze-bg: rgba(140, 105, 70, 0.10);
--az-bronze-border: rgba(140, 105, 70, 0.14);
--az-cyan-bg: rgba(6, 182, 212, 0.10);
--az-cyan-border: rgba(6, 182, 212, 0.14);
--az-blue: #007AFF;
--az-blue-hover: #0066D6;
--az-green: #248A3D;
--az-green-hover: #1B6D30;
--az-red: #D70015;
--az-red-hover: #B80012;
--az-amber: #C93400;
--az-amber-hover: #A62D00;
--az-purple: #7c3aed;
--az-purple-hover: #6d28d9;
--az-bronze: #7a6147;
--az-cyan: #0e7490;
--az-cyan-hover: #0c6378;
--az-indigo: #4f46e5;
--az-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.07);
--az-shadow: 0 0.5px 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.08);
--az-shadow-lg: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.1);
--az-overlay-bg: rgba(0, 0, 0, 0.35);
--az-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08);
--az-shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
--az-shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
--az-shadow-sheet: 0 -4px 24px rgba(0, 0, 0, 0.12);
--az-grabber-bg: rgba(60, 60, 67, 0.3);
--az-fill-tertiary: rgba(118, 118, 128, 0.12); 
--az-rank-gold: #D4A017;
--az-rank-silver: #8E8E93;
--az-focus-ring: 0 0 0 3px rgba(0, 122, 255, 0.30);
--color-bg-app: var(--az-bg-app);
--color-bg-card: var(--az-bg-card);
--color-bg-alt: var(--az-bg-elevated);
--color-bg-hover: var(--az-bg-card-hover);
--color-bg-primary: var(--az-bg-app);
--color-text-primary: var(--az-text-primary);
--color-text-secondary: var(--az-text-secondary);
--color-text-tertiary: var(--az-text-tertiary);
--color-text-muted: var(--az-text-muted);
--color-text-disabled: var(--az-text-disabled);
--color-border: var(--az-border);
--color-shadow: rgba(0, 0, 0, 0.05);
--color-chart-grid: rgba(0, 0, 0, 0.10);
--color-chart-text: var(--az-text-tertiary);
--color-tooltip-bg: #ffffff;
--color-tooltip-text: var(--az-text-primary);
--az-sort-chip-active-bg: #ffffff;
--az-sort-chip-active-border: rgba(0, 0, 0, 0.14);
--az-segment-active-bg: rgba(0, 122, 255, 0.06);
--az-segment-active-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
--az-segment-active-color: var(--az-blue);
--az-chip-active-border: rgba(0, 122, 255, 0.16);
--az-segment-track-bg: rgba(60, 60, 67, 0.05);
--az-nav-bg: rgba(255, 255, 255, 0.92);
--az-nav-border: rgba(0, 0, 0, 0.12);
--az-nav-inactive: #8E8E93;
--az-nav-active: var(--az-blue);
--az-bg-primary: var(--az-bg-card);
--az-bg-secondary: var(--az-bg-elevated);
--az-bg-tertiary: var(--az-bg-card-hover);
--az-primary: var(--az-blue);
--az-radius: var(--az-radius-lg);
--az-btn-inv-bg: #18181b;
--az-btn-inv-bg-hover: #27272a;
--az-btn-inv-bg-gradient: linear-gradient(135deg, #18181b 0%, #27272a 100%);
--az-btn-inv-bg-gradient-hover: linear-gradient(135deg, #27272a 0%, #3f3f46 100%);
--az-btn-inv-text: #fafafa;
--az-btn-inv-focus: 0 0 0 3px rgba(0, 122, 255, 0.40);
}
html.dark-mode {
--az-bg-app: #0A0A0B;
--az-bg-sidebar: #0A0A0B;
--az-bg-card: #111113;
--az-bg-card-hover: #19191C;
--az-bg-elevated: #161719;
--az-bg-surface: #111113;
--az-bg-overlay: rgba(5, 5, 7, 0.88);
--az-bg-input: #08080A;
--az-bg-input-focus: #0E0E11;
--az-border: rgba(255, 255, 255, 0.05);
--az-border-hover: rgba(255, 255, 255, 0.10);
--az-border-focus: rgba(255, 255, 255, 0.18);
--az-text-primary: #EDEDEF;
--az-text-secondary: #ADADB5;
--az-text-tertiary: #9595A0;
--az-text-muted: #82828C; 
--az-text-disabled: #3B3B42;
--az-blue: #7B8AF2;
--az-blue-hover: #8D9AF5;
--az-blue-bg: rgba(123, 138, 242, 0.10);
--az-blue-border: rgba(123, 138, 242, 0.16);
--az-green: #4CB782;
--az-green-hover: #5CC892;
--az-green-bg: rgba(76, 183, 130, 0.10);
--az-green-border: rgba(76, 183, 130, 0.16);
--az-red: #D94F57;
--az-red-hover: #E95F67;
--az-red-bg: rgba(217, 79, 87, 0.10);
--az-red-border: rgba(217, 79, 87, 0.16);
--az-amber: #E5934E;
--az-amber-hover: #F5A35E;
--az-amber-bg: rgba(229, 147, 78, 0.10);
--az-amber-border: rgba(229, 147, 78, 0.16);
--az-purple: #9B6ACD;
--az-purple-hover: #AB7ADD;
--az-purple-bg: rgba(155, 106, 205, 0.10);
--az-purple-border: rgba(155, 106, 205, 0.16);
--az-bronze: #8B7260;
--az-bronze-bg: rgba(139, 114, 96, 0.14);
--az-bronze-border: rgba(139, 114, 96, 0.24);
--az-cyan: #46B5D1;
--az-cyan-hover: #56C5E1;
--az-cyan-bg: rgba(70, 181, 209, 0.10);
--az-cyan-border: rgba(70, 181, 209, 0.16);
--az-indigo: #5B5FC7;
--az-indigo-bg: rgba(91, 95, 199, 0.10);
--az-indigo-border: rgba(91, 95, 199, 0.16);
--az-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.12);
--az-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
--az-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.35);
--az-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
--az-shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.3);
--az-shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
--az-shadow-sheet: 0 -4px 24px rgba(0, 0, 0, 0.4);
--az-overlay-bg: rgba(0, 0, 0, 0.55);
--az-grabber-bg: rgba(255, 255, 255, 0.2);
--az-fill-tertiary: rgba(118, 118, 128, 0.24); 
--az-rank-gold: #E5B54A;
--az-rank-silver: #A8ACB3;
--az-focus-ring: 0 0 0 2px rgba(74, 108, 247, 0.35);
--az-opacity-muted: 0.5;
--az-opacity-placeholder: 0.6;
--az-bg-primary: var(--az-bg-card);
--az-bg-secondary: var(--az-bg-elevated);
--az-bg-tertiary: var(--az-bg-card-hover);
--az-primary: var(--az-blue);
--az-radius: var(--az-radius-lg);
--az-btn-inv-bg: #fafafa;
--az-btn-inv-bg-hover: #e4e4e7;
--az-btn-inv-bg-gradient: linear-gradient(135deg, #fafafa 0%, #e4e4e7 100%);
--az-btn-inv-bg-gradient-hover: linear-gradient(135deg, #ffffff 0%, #f4f4f5 100%);
--az-btn-inv-text: #09090b;
--az-btn-inv-focus: 0 0 0 3px rgba(250, 250, 250, 0.25);
--az-sort-chip-active-bg: #1C1D21;
--az-sort-chip-active-border: rgba(255, 255, 255, 0.08);
--az-segment-active-bg: rgba(255, 255, 255, 0.08);
--az-segment-active-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
--az-segment-active-color: var(--az-text-primary);
--az-chip-active-border: rgba(255, 255, 255, 0.14);
--az-segment-track-bg: rgba(255, 255, 255, 0.03);
--color-bg-app: var(--az-bg-app);
--color-bg-card: var(--az-bg-card);
--color-bg-alt: var(--az-bg-elevated);
--color-bg-hover: var(--az-bg-card-hover);
--color-bg-primary: var(--az-bg-app);
--color-text-primary: var(--az-text-primary);
--color-text-secondary: var(--az-text-secondary);
--color-text-tertiary: var(--az-text-tertiary);
--color-text-muted: var(--az-text-muted);
--color-text-disabled: var(--az-text-disabled);
--color-border: var(--az-border);
--color-shadow: rgba(0, 0, 0, 0.3);
--color-chart-grid: rgba(255, 255, 255, 0.06);
--color-chart-text: var(--az-text-tertiary);
--color-tooltip-bg: #1a1a1f;
--color-tooltip-text: var(--az-text-primary);
}
html.dark-mode,
html.dark-mode body {
color-scheme: dark;
}
html:not(.dark-mode),
html:not(.dark-mode) body {
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
html:not(.light-mode):not(.dark-mode) {
color-scheme: dark;
background: #0A0A0B;
color: #e4e4e7;
}
}
html:not(.dark-mode) input[type="time"]::-webkit-calendar-picker-indicator {
opacity: 1;
position: static;
width: auto;
height: auto;
}
html:not(.dark-mode) input[type="time"] {
color-scheme: light;
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='rgba(60,60,67,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px 16px;
padding-right: 34px;
}
html:not(.dark-mode) * {
scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
html:not(.dark-mode) ::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15);
}
html:not(.dark-mode) ::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.25);
}
html:not(.dark-mode) ::selection {
background: rgba(59, 130, 246, 0.2);
color: #18181b;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scrollbar-gutter: stable;
}
body {
font-family: var(--az-font);
font-size: var(--az-text-md);
font-optical-sizing: auto;
line-height: 1.4;
letter-spacing: -0.006em;
background: var(--az-bg-app);
color: var(--az-text-primary);
overflow-x: hidden;
overflow-y: auto;
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}
a {
color: inherit;
text-decoration: none;
transition: color var(--az-transition-fast), opacity var(--az-transition-fast);
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
transition: background var(--az-transition-fast), color var(--az-transition-fast), border-color var(--az-transition-fast), transform var(--az-transition-fast), box-shadow var(--az-transition-fast);
}
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
transition: border-color var(--az-transition-fast), box-shadow var(--az-transition-fast), background var(--az-transition-fast);
}
img {
display: block;
max-width: 100%;
}
svg {
max-width: 100%;
}
ul,
ol {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: var(--az-font-semibold);
line-height: 1.25;
letter-spacing: -0.02em;
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.18);
}
::selection {
background: rgba(59, 130, 246, 0.3);
color: var(--az-text-primary);
}
input[type="time"] {
color-scheme: dark;
position: relative;
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='rgba(255,255,255,0.55)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px 16px;
padding-right: 34px;
}
input[type="time"]::-webkit-calendar-picker-indicator {
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
:focus-visible {
outline: none;
box-shadow: var(--az-focus-ring);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: none;
border-color: var(--az-border-focus);
box-shadow: var(--az-focus-ring);
}
body.app-visible {
overflow: hidden;
}
body.app-visible #auth-page,
body.app-visible #auth-page.d-flex,
body.app-visible #auth-page.d-block {
display: none;
}
body.app-visible .app-container,
body.app-visible .app-container.d-none {
display: flex;
}
body.auth-visible .app-container,
body.auth-visible .app-container.d-flex,
body.auth-visible .app-container.d-block {
display: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.hidden {
display: none;
}
.initial-loader {
position: fixed;
inset: 0;
z-index: 99999;
background: var(--az-bg-app);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--az-xl);
overflow: hidden;
opacity: 1;
visibility: visible;
transition: opacity 0.4s ease;
}
.initial-loader.is-hidden {
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.initial-loader-brand {
font-family: var(--az-font);
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--az-text-muted);
user-select: none;
}
.az-loader {
width: var(--az-loader-size, 96px);
height: var(--az-loader-size, 96px);
}
.az-loader__ring {
animation: az-ring-a 2s linear infinite;
}
.az-loader__ring--a { stroke: var(--az-text-muted); }
.az-loader__ring--b { stroke: var(--az-text-tertiary); animation-name: az-ring-b; }
.az-loader__ring--c { stroke: var(--az-text-secondary); animation-name: az-ring-c; }
.az-loader__ring--d { stroke: var(--az-text-muted); animation-name: az-ring-d; }
@keyframes az-ring-a {
from, 4%   { stroke-dasharray: 0 660; stroke-width: 20; stroke-dashoffset: -330; }
12%        { stroke-dasharray: 60 600; stroke-width: 30; stroke-dashoffset: -335; }
32%        { stroke-dasharray: 60 600; stroke-width: 30; stroke-dashoffset: -595; }
40%, 54%   { stroke-dasharray: 0 660; stroke-width: 20; stroke-dashoffset: -660; }
62%        { stroke-dasharray: 60 600; stroke-width: 30; stroke-dashoffset: -665; }
82%        { stroke-dasharray: 60 600; stroke-width: 30; stroke-dashoffset: -925; }
90%, to    { stroke-dasharray: 0 660; stroke-width: 20; stroke-dashoffset: -990; }
}
@keyframes az-ring-b {
from, 12%  { stroke-dasharray: 0 220; stroke-width: 20; stroke-dashoffset: -110; }
20%        { stroke-dasharray: 20 200; stroke-width: 30; stroke-dashoffset: -115; }
40%        { stroke-dasharray: 20 200; stroke-width: 30; stroke-dashoffset: -195; }
48%, 62%   { stroke-dasharray: 0 220; stroke-width: 20; stroke-dashoffset: -220; }
70%        { stroke-dasharray: 20 200; stroke-width: 30; stroke-dashoffset: -225; }
90%        { stroke-dasharray: 20 200; stroke-width: 30; stroke-dashoffset: -305; }
98%, to    { stroke-dasharray: 0 220; stroke-width: 20; stroke-dashoffset: -330; }
}
@keyframes az-ring-c {
from       { stroke-dasharray: 0 440; stroke-width: 20; stroke-dashoffset: 0; }
8%         { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -5; }
28%        { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -175; }
36%, 58%   { stroke-dasharray: 0 440; stroke-width: 20; stroke-dashoffset: -220; }
66%        { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -225; }
86%        { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -395; }
94%, to    { stroke-dasharray: 0 440; stroke-width: 20; stroke-dashoffset: -440; }
}
@keyframes az-ring-d {
from, 8%   { stroke-dasharray: 0 440; stroke-width: 20; stroke-dashoffset: 0; }
16%        { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -5; }
36%        { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -175; }
44%, 50%   { stroke-dasharray: 0 440; stroke-width: 20; stroke-dashoffset: -220; }
58%        { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -225; }
78%        { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -395; }
86%, to    { stroke-dasharray: 0 440; stroke-width: 20; stroke-dashoffset: -440; }
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.ph-spin {
animation: spin 1s linear infinite;
display: inline-block;
}
@media (max-width: 768px) {
:root {
--az-text-2xs: 11px;
}
}
button,
[role="button"],
a,
label,
input[type="checkbox"],
input[type="radio"],
input[type="submit"],
input[type="button"],
.btn,
.tab,
.chip,
.action-sheet-row,
[class*="-btn"]:not(.btn-group):not(.btn-toolbar),
[class*="-link"],
[class*="-item"],
[class*="-trigger"],
[data-action],
[data-haptic] {
touch-action: manipulation;
}
i[class*="ph-"] {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
line-height: 1;
}
.icon-3xs { font-size: var(--az-text-2xs); }
.icon-2xs { font-size: var(--az-text-xs); }
.icon-xs  { font-size: var(--az-text-md); }
.icon-sm  { font-size: var(--az-text-lg); }
.icon-md  { font-size: var(--az-text-xl); }
.icon-lg  { font-size: var(--az-text-xl-plus); }
.icon-xl  { font-size: var(--az-text-2xl); }
.icon-2xl { font-size: var(--az-text-2xl-plus); }
.icon-3xl { font-size: var(--az-text-3xl-plus); }
.icon-4xl { font-size: var(--az-text-3xl-plus); }
.icon-5xl { font-size: var(--az-text-5xl); }
.modal-footer-actions {
display: flex;
gap: var(--az-sm);
justify-content: flex-end;
}
.text-danger { color: var(--az-red); }
.text-muted-sm {
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
}
.app-container {
display: flex;
height: 100vh;
height: -webkit-fill-available;
height: 100dvh;
overflow: clip;
position: relative;
z-index: 1;
}
.main-content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: var(--az-page-pad);
position: relative;
}
.sidebar-nav {
position: relative;
width: var(--az-sidebar-w);
min-width: var(--az-sidebar-w);
height: 100vh;
height: 100dvh;
background: var(--az-bg-sidebar, var(--az-bg-app));
border-right: 1px solid var(--az-border);
display: flex;
flex-direction: column;
overflow: hidden;
overflow-y: auto;
}
.app-container.editor-fullscreen .sidebar-nav {
width: 0;
min-width: 0;
opacity: 0;
pointer-events: none;
border-right: none;
overflow: hidden;
}
.sidebar-content {
display: flex;
flex-direction: column;
min-height: 100%;
padding: var(--az-lg) 0;
}
.sidebar-logo {
padding: var(--az-sm) var(--az-xl);
margin-bottom: var(--az-3xl);
position: relative;
}
.logo {
display: flex;
align-items: baseline;
gap: var(--az-xs-plus);
text-decoration: none;
padding: var(--az-sm) 0 0;
min-height: var(--az-touch-min);
}
.sidebar-logo .logo {
flex-direction: column;
align-items: flex-start;
gap: 0;
}
.sidebar-logo .logo-bold {
font-size: var(--az-text-md);
letter-spacing: 2.5px;
}
.sidebar-logo .logo-light {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
letter-spacing: 2.5px;
color: var(--az-text-tertiary);
text-transform: uppercase;
}
.logo-bold {
font-size: var(--az-text-sm);
font-weight: var(--az-font-bold);
letter-spacing: var(--az-tracking-display, 1.5px);
color: var(--az-text-primary);
}
.logo-light {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
letter-spacing: 2px;
color: var(--az-text-tertiary);
text-transform: uppercase;
}
.sidebar-section {
margin-bottom: var(--az-sm);
}
.sidebar-section.sidebar-section-bottom {
margin-bottom: var(--az-xs, 4px);
}
.sidebar-section-label {
padding: var(--az-sm) var(--az-xl);
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
letter-spacing: 1px;
color: var(--az-text-muted);
text-transform: uppercase;
}
.sidebar-divider {
height: 1px;
margin: var(--az-sm) var(--az-lg);
background: var(--az-border);
opacity: 0.5;
}
.sidebar-links {
display: flex;
flex-direction: column;
gap: var(--az-xs);
padding: 0 var(--az-md);
}
.nav-link.nav-admin-hidden,
.bottom-sheet-item.nav-admin-hidden {
display: none;
}
.nav-link {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-sm) var(--az-lg);
border-radius: var(--az-radius-md);
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
min-height: var(--az-touch-min);
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
cursor: pointer;
}
.nav-link:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.nav-link:focus-visible {
box-shadow: var(--az-focus-ring);
outline: none;
}
.nav-link.active {
background: var(--az-bg-elevated);
color: var(--az-text-primary);
}
.nav-link.active .nav-icon {
color: var(--az-text-primary);
}
.nav-icon {
font-size: var(--az-text-xl-plus);
line-height: 1;
flex-shrink: 0;
color: currentColor;
}
.nav-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-spacer {
flex: 1;
}
.sidebar-bottom {
padding: 0;
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.subscription-badge-inline {
flex-shrink: 0;
align-self: center;
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
color: var(--az-text-muted);
letter-spacing: 0.3px;
text-transform: uppercase;
white-space: nowrap;
line-height: 1;
}
.subscription-badge-inline.gold {
color: var(--az-amber);
}
.subscription-badge-inline.trial {
color: var(--az-blue);
}
.subscription-badge-inline.premium {
color: var(--az-indigo);
}
.subscription-badge-inline.warning {
color: var(--az-amber);
}
.subscription-badge-inline.expired {
color: var(--az-red);
}
.sidebar-account {
padding: var(--az-sm) var(--az-md);
}
.account-menu {
display: flex;
position: relative;
}
.account-menu-btn {
display: flex;
align-items: center;
gap: var(--az-sm);
width: 100%;
padding: var(--az-sm) var(--az-md);
border: none;
background: none;
cursor: pointer;
border-radius: var(--az-radius-md);
transition: background var(--az-transition);
color: var(--az-text-primary);
line-height: 1;
}
.account-menu-btn:hover {
background: var(--az-bg-card-hover);
}
.account-avatar {
position: relative;
width: var(--az-2xl);
height: var(--az-2xl);
border-radius: var(--az-radius-pill);
background: var(--az-indigo-bg);
border: 1px solid var(--az-indigo-border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.account-initial {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-indigo);
}
.account-status-dot {
position: absolute;
bottom: 1px;
right: 1px;
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
background: var(--az-green);
border: 2px solid var(--az-bg-app);
}
.account-name {
text-align: left;
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.account-menu-arrow {
flex-shrink: 0;
margin-left: auto;
color: var(--az-text-muted);
}
.account-menu-dropdown {
position: absolute;
bottom: calc(100% + var(--az-sm));
left: 0;
right: 0;
background: var(--az-bg-surface);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-lg);
z-index: var(--az-z-dropdown);
box-shadow: var(--az-shadow-dropdown);
}
.account-menu-header {
display: flex;
align-items: flex-start;
gap: var(--az-md);
}
.account-avatar-large {
position: relative;
width: var(--az-3xl);
height: var(--az-3xl);
border-radius: var(--az-radius-pill);
background: var(--az-indigo-bg);
border: 1px solid var(--az-indigo-border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.account-menu-info {
flex: 1;
min-width: 0;
}
.account-name-large {
display: block;
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin-bottom: 2px;
}
.account-email-container {
margin-bottom: var(--az-sm);
}
.account-email {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-menu-item {
display: flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-xs-plus) 0;
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
transition: color var(--az-transition);
}
.account-menu-item:hover {
color: var(--az-red);
}
.nav-logout i {
font-size: var(--az-text-lg-plus);
line-height: 1;
}
.page,
.view {
display: none;
flex-direction: column;
gap: var(--az-section-gap);
}
.page.active,
.view.active {
display: flex;
}
.page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--az-header-gap);
position: relative;
z-index: var(--az-z-dropdown);
flex-wrap: wrap;
padding-top: var(--az-header-pad-top);
padding-bottom: var(--az-header-pad-bottom);
}
.page-header-content {
flex: 1;
min-width: 0;
}
.page-header-actions {
display: none;
}
.page-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-lg);
width: 100%;
}
.page-title {
font-size: var(--az-text-3xl);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
line-height: 1.2;
letter-spacing: var(--az-tracking-display);
}
.page-subtitle {
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
margin-top: var(--az-xs);
}
.page-subtitle-with-dot {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.page-count-separator:not(:empty)::before {
content: "·";
margin-right: var(--az-xs);
color: var(--az-text-muted);
}
.page-count-separator {
color: var(--az-text-tertiary);
white-space: nowrap;
}
.page-dot {
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
display: inline-block;
flex-shrink: 0;
}
.page-dot-green {
background: var(--az-green);
}
.page-dot-blue {
background: var(--az-blue);
}
.page-dot-red {
background: var(--az-red);
}
.page-dot-amber {
background: var(--az-amber);
}
.page-dot-purple {
background: var(--az-purple);
}
.page-dot-indigo {
background: var(--az-indigo);
}
.page-dot-rose {
background: var(--az-red);
}
.nav-badge {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
background: var(--az-red);
color: var(--az-text-on-accent);
border-radius: var(--az-radius-lg-plus);
padding: 1px var(--az-xs-plus);
min-width: 18px;
text-align: center;
line-height: 16px;
margin-left: auto;
}
.settings-nav-link .nav-badge {
position: absolute;
top: 2px;
right: 2px;
margin-left: 0;
padding: 0 5px;
min-width: 16px;
font-size: var(--az-text-2xs); 
line-height: 15px;
}
.settings-nav-link {
position: relative;
}
.trash-tabs {
display: flex;
gap: 0;
margin-bottom: var(--az-lg);
border-bottom: 1px solid var(--az-border);
}
.trash-tab-btn {
background: transparent;
color: var(--az-text-tertiary);
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
padding: var(--az-sm) var(--az-lg);
font-size: var(--az-text-sm, 13px);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: color var(--az-transition), border-color var(--az-transition);
}
.trash-tab-btn:hover {
color: var(--az-text-secondary);
}
.trash-tab-btn.active {
color: var(--az-text-primary);
border-bottom-color: var(--az-text-primary);
}
.trash-row {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-md) var(--az-lg);
border-bottom: 1px solid var(--az-border);
transition: background var(--az-transition);
}
.trash-row:last-child {
border-bottom: none;
}
.trash-row:hover {
background: var(--az-bg-card-hover);
}
.trash-row-urgent {
border-left: 2px solid var(--az-red);
}
.trash-row-icon {
width: var(--az-2xl);
height: var(--az-2xl);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--az-radius-pill);
background: var(--az-bg-elevated);
color: var(--az-text-tertiary);
font-size: var(--az-text-lg);
flex-shrink: 0;
}
.trash-row-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--az-2xs);
}
.trash-row-label {
font-size: var(--az-text-sm, 13px);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.trash-row-detail {
font-size: var(--az-text-xs, 12px);
color: var(--az-text-tertiary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.trash-row-meta {
flex-shrink: 0;
text-align: right;
display: flex;
flex-direction: column;
gap: var(--az-2xs);
}
.trash-row-date {
font-size: var(--az-text-xs, 12px);
color: var(--az-text-tertiary);
}
.trash-row-days {
font-size: var(--az-text-xs-plus);
color: var(--az-text-muted);
}
.trash-row-days-urgent {
color: var(--az-red);
font-weight: var(--az-font-semibold);
}
.trash-row-actions {
display: flex;
gap: var(--az-xs);
flex-shrink: 0;
}
.trash-row-actions .btn-icon-premium {
width: var(--az-touch-min);
height: var(--az-touch-min);
min-width: var(--az-touch-min);
min-height: var(--az-touch-min);
}
.trash-row-actions .btn-icon-premium.restore:hover {
color: var(--az-green);
}
.trash-row-actions .btn-icon-premium.delete:hover {
color: var(--az-red);
}
@media (max-width: 768px) {
.trash-row {
display: grid;
grid-template-columns: 32px 1fr auto;
grid-template-rows: auto auto;
gap: var(--az-xs) var(--az-sm);
padding: var(--az-md) var(--az-lg);
border-bottom: none;
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
margin-bottom: var(--az-sm);
}
.trash-row:hover {
background: var(--az-bg-card-hover);
}
.trash-row-icon {
grid-row: 1;
grid-column: 1;
}
.trash-row-info {
grid-row: 1;
grid-column: 2;
}
.trash-row-meta {
grid-row: 2;
grid-column: 1 / 3;
text-align: left;
flex-direction: row;
gap: var(--az-sm);
padding-left: var(--az-3xl);
}
.trash-row-actions {
grid-row: 1;
grid-column: 3;
}
.trash-row-actions .btn-icon-premium {
width: var(--az-card-btn-size, 34px);
height: var(--az-card-btn-size, 34px);
min-width: var(--az-card-btn-size, 34px);
min-height: var(--az-card-btn-size, 34px);
}
.trash-tabs {
overflow-x: auto;
}
.trash-tab-btn {
padding: var(--az-sm) var(--az-md);
font-size: var(--az-text-xs);
white-space: nowrap;
}
}
.header-actions,
.header-actions-desktop {
display: flex;
align-items: center;
gap: var(--az-md);
flex-shrink: 0;
}
.btn.btn-icon-only {
width: var(--az-touch-min, 44px);
height: var(--az-touch-min, 44px);
min-width: var(--az-touch-min, 44px);
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn.btn-icon-only i {
font-size: var(--az-text-xl, 17px);
}
.section-title,
.section-title-premium {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.section-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
}
.section-subtitle {
font-size: var(--az-text-sm);
color: var(--az-text-muted);
margin-top: var(--az-sm);
}
.view-scroll-content {
display: flex;
flex-direction: column;
gap: var(--az-section-gap);
}
.kpi-grid,
.cockpit-widget-grid,
.dashboard-kpi-grid,
.premium-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--az-kpi-grid-gap);
container-type: inline-size;
container-name: kpi-container;
}
@container kpi-container (max-width: 600px) {
.cockpit-widget,
.kpi-card-premium {
padding: var(--az-md);
gap: var(--az-xs);
}
}
@container kpi-container (max-width: 420px) {
.cockpit-widget .card-value,
.kpi-card-premium .card-value {
font-size: var(--az-text-lg);
}
}
.finance-kpi-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--az-kpi-grid-gap);
container-type: inline-size;
container-name: kpi-container;
}
.finance-kpi-grid--3col {
grid-template-columns: repeat(3, 1fr);
}
.finance-kpi-grid--2col {
grid-template-columns: repeat(2, 1fr);
margin-top: var(--az-kpi-grid-gap);
}
.cockpit-widget,
.kpi-card-premium {
background: var(--az-bg-card);
border: none;
border-radius: var(--az-card-radius);
padding: var(--az-kpi-pad);
box-shadow: var(--az-shadow);
display: flex;
flex-direction: column;
gap: var(--az-kpi-gap);
position: relative;
overflow: hidden;
transition:
box-shadow var(--az-transition),
background var(--az-transition);
}
.cockpit-widget:hover,
.kpi-card-premium:hover {
background: var(--az-bg-card-hover);
box-shadow: var(--az-shadow-lg);
cursor: pointer;
}
.kpi-card-premium {
align-items: stretch;
text-align: left;
}
.kpi-card-premium .widget-header {
justify-content: flex-start;
}
.kpi-card-premium .widget-body {
align-items: flex-start;
text-align: left;
}
.kpi-card-premium .widget-footer {
text-align: left;
margin-top: auto;
}
.kpi-card-icon {
position: absolute;
top: var(--az-md-plus);    
right: var(--az-lg-plus);  
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--az-text-muted);
opacity: 0.6;
}
.kpi-card-icon i {
font-size: var(--az-kpi-icon-svg);
line-height: 1;
}
.kpi-icon-ca,
[data-metric="ca"] .kpi-card-icon { color: var(--az-blue); }
.kpi-icon-charges,
[data-metric="charges"] .kpi-card-icon { color: var(--az-red); }
.kpi-icon-benefice,
[data-metric="benefices"] .kpi-card-icon { color: var(--az-green); }
.kpi-icon-pending,
[data-metric="pending-invoices-count"] .kpi-card-icon,
[data-metric="pending-invoices-amount"] .kpi-card-icon { color: var(--az-amber); }
.kpi-icon-documents,
[data-metric="pending-quotes-count"] .kpi-card-icon,
[data-metric="pending-quotes-amount"] .kpi-card-icon { color: var(--az-blue); }
.kpi-icon-clients,
[data-metric="total"] .kpi-card-icon { color: var(--az-purple); }
.kpi-icon-top,
[data-metric="top"] .kpi-card-icon { color: var(--az-amber); }
.kpi-icon-avg,
[data-metric="avg-basket"] .kpi-card-icon { color: var(--az-cyan); }
[data-metric="marge"] .kpi-card-icon { color: var(--az-cyan); }
[data-metric="ratio"] .kpi-card-icon { color: var(--az-cyan); }
[data-metric="recurring-active"] .kpi-card-icon { color: var(--az-blue); }
[data-metric="recurring-revenue"] .kpi-card-icon { color: var(--az-green); }
[data-metric="recurring-encaissement"] .kpi-card-icon { color: var(--az-amber); }
[data-metric="recurring-projection"] .kpi-card-icon { color: var(--az-cyan); }
[data-metric="trk-sent"] .kpi-card-icon { color: var(--az-blue); }
[data-metric="trk-opened"] .kpi-card-icon { color: var(--az-amber); }
[data-metric="trk-viewed"] .kpi-card-icon { color: var(--az-green); }
[data-metric="trk-delay"] .kpi-card-icon { color: var(--az-cyan); }
.cockpit-widget[data-metric],
.kpi-card-premium[data-metric] {
transition:
background var(--az-transition),
border-color var(--az-transition);
}
.widget-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-sm);
}
.card-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.widget-body {
display: flex;
flex-direction: column;
flex: var(--az-widget-body-flex);
gap: var(--az-sm);
}
.card-value {
font-size: var(--az-text-2xl);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
font-variant-numeric: tabular-nums;
letter-spacing: var(--az-tracking-tight);
transition: opacity 0.2s ease;
}
.card-subtitle {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
}
.kpi-net-estimate {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--az-xs) var(--az-sm);
border-top: 1px solid var(--az-border);
padding-top: var(--az-sm);
}
.kpi-net-amount {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-green);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.kpi-net-rates {
font-size: var(--az-text-2xs);
color: var(--az-text-secondary);
white-space: nowrap;
}
.widget-footer {
margin-top: auto;
padding-top: var(--az-md);
}
.trend-indicator {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
}
.trend-indicator.positive,
.trend-indicator.up {
color: var(--az-green);
}
.trend-indicator.negative,
.trend-indicator.down {
color: var(--az-red);
}
.trend-indicator.neutral {
color: var(--az-text-muted);
}
.trend-arrow {
font-size: var(--az-text-2xs);
}
.trend-value {
font-size: var(--az-text-xs);
}
.comparison-badge {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-xs-plus) 0;
margin-top: var(--az-xs);
}
.trend-indicator.hidden,
.comparison-badge.hidden {
display: none;
}
.comparison-label {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
}
.comparison-value {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
}
.data-list-wrap {
border-radius: var(--az-radius-xl);
border: 1px solid var(--az-glass-border);
background: var(--az-glass-bg);
overflow: hidden;
}
.data-list {
display: table;
width: 100%;
border-collapse: collapse;
font-size: var(--az-text-sm);
}
#documents-data-list,
#clients-data-list,
#transactions-data-list,
#trk-data-list {
table-layout: fixed;
}
#documents-data-list .dl-col,
#clients-data-list .dl-col,
#transactions-data-list .dl-col,
#trk-data-list .dl-col {
text-align: left;
}
#documents-data-list .dl-primary    { width: 26%; padding-left: var(--az-lg); }
#documents-data-list .dl-ref        { width: 15%; }
#documents-data-list .dl-date       { width: 13%; }
#documents-data-list .dl-amount     { width: 15%; }
#documents-data-list .dl-status-col { width: 15%; }
#documents-data-list .dl-action     { width: 48px; }
#clients-data-list .dl-primary    { width: 32%; padding-left: var(--az-lg); }
#clients-data-list .dl-amount     { width: 19%; }
#clients-data-list .dl-date       { width: 18%; }
#clients-data-list .dl-status-col { width: 19%; }
#clients-data-list .dl-action     { width: 48px; }
#transactions-data-list .dl-primary    { width: 30%; padding-left: var(--az-lg); }
#transactions-data-list .dl-ref        { width: 15%; }
#transactions-data-list .dl-date       { width: 13%; }
#transactions-data-list .dl-amount     { width: 15%; }
#transactions-data-list .dl-status-col { width: 15%; }
#transactions-data-list .dl-action     { width: 48px; }
#trk-data-list .dl-primary    { width: 30%; padding-left: var(--az-lg); }
#trk-data-list .dl-ref        { width: 15%; }
#trk-data-list .dl-date       { width: 15%; }
#trk-data-list .dl-amount     { width: 13%; }
#trk-data-list .dl-status-col { width: 15%; white-space: normal; }
#trk-data-list .dl-action     { width: 48px; }
#trk-data-list .dl-status-col .trk-tracking-dots {
margin-top: var(--az-xs);
}
.data-list-header {
display: table-header-group;
}
[id$="-list-body"] {
display: table-row-group;
}
.data-list-row {
display: table-row;
}
.dl-col {
display: table-cell;
}
.data-list-header > .dl-col {
height: 40px;
padding: 0 var(--az-sm);
font-weight: var(--az-font-medium);
font-size: var(--az-text-xs);
line-height: 1.4;
color: var(--az-text-muted);
white-space: nowrap;
letter-spacing: 0.01em;
text-align: left;
vertical-align: middle;
border-bottom: 1px solid var(--az-border);
position: sticky;
top: 0;
z-index: var(--az-z-sticky);
background: var(--az-bg-app);
}
.data-list-row > .dl-col {
padding: var(--az-sm);
vertical-align: middle;
white-space: nowrap;
color: var(--az-text-primary);
font-size: var(--az-text-sm);
line-height: 1.4;
border-bottom: 1px solid var(--az-border);
transition: background-color 0.15s ease;
}
.data-list-row:hover > .dl-col {
background-color: var(--az-bg-card-hover);
}
.data-list-row:last-child > .dl-col {
border-bottom: none;
}
.data-list-row[data-pending="true"] {
opacity: 0.55;
pointer-events: none;
transition: opacity var(--az-transition-fast);
}
.dl-select {
text-align: center;
width: 40px;
padding: 0;
}
.data-list-row > .dl-primary {
overflow: hidden;
}
.dl-primary .dl-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
max-width: calc(100% - 52px);
}
.dl-detail {
font-variant-numeric: tabular-nums;
}
.dl-detail .dl-main {
display: block;
font-weight: var(--az-font-medium);
}
.dl-detail .dl-sub {
display: block;
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.dl-ref {
font-variant-numeric: tabular-nums;
font-weight: var(--az-font-medium);
}
.dl-date {
color: var(--az-text-secondary);
}
.dl-amount {
text-align: right;
font-weight: var(--az-font-semibold);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.dl-status-col {
white-space: nowrap;
}
.dl-encours {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.dl-encours .encours-due {
color: var(--az-amber);
font-weight: var(--az-font-semibold);
}
.dl-encours .encours-clear {
color: var(--az-text-tertiary);
font-weight: var(--az-font-normal);
}
#clients-filter-month-dropdown.is-disabled {
opacity: 0.5;
pointer-events: none;
}
[data-doc-open],
[data-tx-open] {
cursor: pointer;
}
.client-info-cell .dl-sub {
display: block;
margin-top: var(--az-2xs);
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
font-weight: var(--az-font-normal);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.dl-value {
text-align: right;
font-weight: var(--az-font-semibold);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.dl-value .dl-status {
display: block;
font-size: var(--az-text-xs);
font-weight: var(--az-font-normal);
}
.dl-action {
text-align: center;
padding: 0;
vertical-align: middle;
width: 48px;
flex-shrink: 0;
}
.dl-action-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.row-action-chevron {
margin-left: auto;
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.row-actions-submenu {
display: none;
position: absolute;
left: 100%;
top: 0;
margin-left: var(--az-xs);
min-width: 160px;
background: var(--az-bg-surface);
border: 1px solid var(--az-border-hover);
border-radius: var(--az-radius-lg);
padding: var(--az-xs);
box-shadow: var(--az-shadow-dropdown);
z-index: var(--az-z-dropdown);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
.row-action-submenu-trigger:hover + .row-actions-submenu,
.row-actions-submenu:hover {
display: block;
animation: dropdownFadeIn 0.12s ease;
}
#documents-data-list .data-list-header .dl-primary,
#clients-data-list .data-list-header .dl-primary,
#transactions-data-list .data-list-header .dl-primary,
#trk-data-list .data-list-header .dl-primary {
padding-left: calc(var(--az-lg) + 40px + var(--az-sm));
}
.data-list-header .dl-primary {
padding-left: calc(var(--az-2xl) + var(--az-sm) + var(--az-sm));
}
.data-list-header .dl-amount,
.data-list-header .dl-value,
.data-list-header .dl-encours {
text-align: right;
}
.data-list-header .dl-action {
text-align: center;
}
.doc-avatar,
.client-avatar,
.transaction-avatar {
position: relative;
cursor: pointer;
transition: opacity var(--az-transition-fast), background var(--az-transition-fast);
}
.doc-avatar .avatar-check,
.client-avatar .avatar-check,
.transaction-avatar .avatar-check {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--az-transition-fast);
font-size: var(--az-text-md);
}
.doc-avatar:hover .avatar-check,
.client-avatar:hover .avatar-check,
.transaction-avatar:hover .avatar-check {
opacity: 1;
color: var(--az-text-primary);
}
.doc-avatar:hover .avatar-letter,
.client-avatar:hover .avatar-letter,
.transaction-avatar:hover .avatar-letter {
opacity: 0;
}
.doc-avatar:hover,
.client-avatar:hover,
.transaction-avatar:hover {
background: var(--az-bg-elevated);
border-color: var(--az-border);
}
.doc-avatar.selected,
.client-avatar.selected,
.transaction-avatar.selected {
background: var(--az-blue-bg);
border-color: var(--az-blue-border);
color: var(--az-blue);
}
.doc-avatar.selected .avatar-check,
.client-avatar.selected .avatar-check,
.transaction-avatar.selected .avatar-check {
opacity: 1;
}
.doc-avatar.selected .avatar-letter,
.client-avatar.selected .avatar-letter,
.transaction-avatar.selected .avatar-letter {
opacity: 0;
}
.data-list-row.row-selected > .dl-col {
background-color: var(--az-blue-bg);
}
.amount-paid { color: var(--az-green); }
.amount-pending { color: var(--az-amber); }
.amount-negative { color: var(--az-red); }
.data-list-row[data-id] {
cursor: pointer;
}
.table-container {
overflow-x: auto;
border-radius: var(--az-radius-xl);
border: 1px solid var(--az-glass-border);
background: var(--az-glass-bg);
max-width: 100%;
}
.table {
width: 100%;
border-collapse: collapse;
font-size: var(--az-text-sm);
}
.table thead th {
padding: var(--az-sm) var(--az-md);
font-weight: var(--az-font-medium);
font-size: var(--az-text-xs);
line-height: 1.4;
color: var(--az-text-muted);
text-align: left;
white-space: nowrap;
border-bottom: 1px solid var(--az-border);
position: sticky;
top: 0;
z-index: var(--az-z-sticky);
background: var(--az-bg-app);
}
.table tbody tr {
border-bottom: 1px solid var(--az-border);
transition: background-color 0.15s ease;
}
.table tbody tr:last-child {
border-bottom: none;
}
.table tbody tr:hover {
background-color: var(--az-bg-card-hover);
}
.table tbody td {
padding: var(--az-sm) var(--az-md);
font-size: var(--az-text-sm);
line-height: 1.4;
color: var(--az-text-primary);
vertical-align: middle;
}
.amount-paid { color: var(--az-green); }
.amount-pending { color: var(--az-amber); }
.row-clickable {
cursor: pointer;
}
.sortable {
cursor: pointer;
user-select: none;
transition: color var(--az-transition-fast), background var(--az-transition-fast);
}
.sortable:hover {
color: var(--az-text-secondary);
background: var(--az-segment-track-bg);
}
.sortable {
cursor: pointer;
user-select: none;
}
.sort-indicator {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: var(--az-xs-plus);
width: 7px;
height: 7px;
opacity: 0;
transition: opacity var(--az-transition-fast);
vertical-align: middle;
}
.sort-indicator::before {
display: none;
}
.sort-indicator::after {
content: '';
display: block;
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 4px solid var(--az-text-muted);
}
.sortable:not(.sort-asc):not(.sort-desc):hover .sort-indicator {
opacity: 0.4;
}
.sort-asc .sort-indicator,
.sort-desc .sort-indicator {
opacity: 1;
}
.sort-asc .sort-indicator::after {
border-top: none;
border-bottom: 4px solid var(--az-blue);
}
.sort-desc .sort-indicator::after {
border-top: 4px solid var(--az-blue);
}
.sort-asc,
.sort-desc {
color: var(--az-text-secondary);
}
.documents-type-segment {
display: flex;
background: var(--az-bg-elevated);
border-radius: var(--az-radius-pill);
padding: var(--az-2xs);
gap: var(--az-2xs);
margin-bottom: var(--az-lg);
width: fit-content;
}
.documents-type-segment:empty {
display: none;
}
.documents-type-segment .segment-btn {
display: inline-flex;
align-items: center;
min-height: var(--az-input-h);
padding: var(--az-xs-plus) var(--az-lg);
border-radius: var(--az-radius-pill);
border: none;
background: transparent;
color: var(--az-text-tertiary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
line-height: 1;
}
.documents-type-segment .segment-btn:hover {
color: var(--az-text-secondary);
}
.documents-type-segment .segment-btn.active {
background: var(--az-bg-card);
color: var(--az-text-primary);
text-shadow: 0 0 0.6px currentColor;
box-shadow: var(--az-shadow-sm);
}
.documents-type-segment .segment-btn .segment-count {
margin-left: var(--az-xs);
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
font-weight: var(--az-font-medium);
}
.documents-type-segment .segment-btn.active .segment-count {
color: var(--az-text-tertiary);
}
.table-toolbar {
display: flex;
align-items: center;
gap: var(--az-md);
flex-wrap: wrap;
}
.table-toolbar .filters {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.table-toolbar .actions {
display: flex;
align-items: center;
gap: var(--az-sm);
margin-left: auto;
}
.filter-reset-btn {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs) var(--az-sm);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-tertiary);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-pill);
cursor: pointer;
transition: color var(--az-transition-fast), background var(--az-transition-fast), border-color var(--az-transition-fast);
white-space: nowrap;
line-height: 1;
}
.filter-reset-btn:hover {
color: var(--az-text-primary);
background: var(--az-bg-card-hover);
border-color: var(--az-border-hover);
}
.filter-reset-btn i {
font-size: var(--az-text-2xs);
}
.filter-reset-btn.hidden {
display: none;
}
.th-select,
.td-select {
width: 3%;
min-width: var(--az-xl);
max-width: var(--az-3xl);
text-align: center;
padding: var(--az-xs) var(--az-sm);
}
.table tbody .td-select .row-select,
.table tbody .td-select .document-checkbox,
.table tbody .td-select .client-checkbox,
.table tbody .td-select .transaction-checkbox {
opacity: 0;
transition: opacity var(--az-transition-fast);
}
.table tbody tr:hover .td-select .row-select,
.table tbody tr:hover .td-select .document-checkbox,
.table tbody tr:hover .td-select .client-checkbox,
.table tbody tr:hover .td-select .transaction-checkbox,
.table tbody .td-select .row-select:checked,
.table tbody .td-select .document-checkbox:checked,
.table tbody .td-select .client-checkbox:checked,
.table tbody .td-select .transaction-checkbox:checked,
.table tbody .td-select .row-select:focus-visible,
.table tbody .td-select .document-checkbox:focus-visible {
opacity: 1;
}
.amount-value {
font-weight: var(--az-font-semibold);
font-variant-numeric: tabular-nums;
letter-spacing: var(--az-tracking-tight);
}
.table tbody td.amount-positive,
.table tbody td .amount-positive,
.amount-positive { color: var(--az-green); }
.table tbody td.amount-negative,
.table tbody td .amount-negative,
.amount-negative { color: var(--az-red); }
.table tbody td.amount-zero,
.table tbody td .amount-zero,
.amount-zero { color: var(--az-text-muted); }
.amount-finalized { color: var(--az-blue); }
.amount-draft { color: var(--az-text-muted); }
.amount-partial { color: var(--az-cyan); }
.amount-declined { color: var(--az-red); }
.amount-credit-note { color: var(--az-blue); }
.table .table-col-actions {
width: 5%;
min-width: var(--az-3xl);
text-align: center;
white-space: nowrap;
}
.table .table-col-address {
width: 16%;
text-align: left;
}
.table .table-col-email {
width: 22%;
text-align: left;
}
.doc-ref-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: var(--az-text-sm);
}
.doc-ref-wrapper .font-medium {
font-weight: var(--az-font-medium);
}
.doc-status-wrapper {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
gap: var(--az-xs);
}
.table-actions-cell {
white-space: nowrap;
text-align: center;
}
.action-buttons {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
}
.action-separator {
width: 1px;
height: var(--az-lg);
background: var(--az-border);
margin: 0 var(--az-xs);
}
.row-actions-dropdown {
position: relative;
display: inline-flex;
justify-content: center;
}
.row-actions-trigger {
min-width: var(--az-2xl);
min-height: var(--az-2xl);
width: var(--az-2xl);
height: var(--az-2xl);
border-radius: var(--az-radius-pill);
border: none;
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
opacity: 1;
}
.table tbody tr:hover .row-actions-trigger,
.data-list-row:hover .row-actions-trigger,
.row-actions-trigger:focus-visible,
.row-actions-dropdown:has(.row-actions-menu.active) .row-actions-trigger {
opacity: 1;
}
.row-actions-trigger:hover {
background: var(--az-border);
color: var(--az-text-primary);
}
.row-actions-trigger i {
font-size: var(--az-text-xl);
line-height: 1;
}
.row-actions-menu {
position: fixed;
min-width: 180px;
background: var(--az-bg-surface);
border: 1px solid var(--az-border-hover);
border-radius: var(--az-radius-lg);
padding: var(--az-xs);
z-index: var(--az-z-sticky);
box-shadow: var(--az-shadow-dropdown);
display: none;
max-height: calc(100dvh - 16px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
.row-actions-menu.active {
display: block;
animation: dropdownFadeIn 0.15s ease;
}
.row-action-item {
display: flex;
align-items: center;
gap: var(--az-sm-plus);
width: 100%;
padding: var(--az-sm) var(--az-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
background: none;
border: none;
border-radius: var(--az-radius-sm);
cursor: pointer;
transition: background var(--az-transition);
text-align: left;
white-space: nowrap;
}
.row-action-item:hover {
background: var(--az-bg-card-hover);
}
.row-action-item i {
font-size: var(--az-text-lg);
line-height: 1;
flex-shrink: 0;
color: var(--az-text-muted);
}
.row-action-item.action-danger {
color: var(--az-red);
}
.row-action-item.action-danger i {
color: var(--az-red);
}
.row-action-item.action-success {
color: var(--az-green);
}
.row-action-item.action-success i {
color: var(--az-green);
}
.row-actions-separator {
height: 1px;
background: var(--az-border);
margin: var(--az-xs) var(--az-xs-plus);
}
.data-list > div:has(> .empty-state-row) {
display: table-caption;
caption-side: bottom;
}
.empty-state-row {
text-align: center;
padding: var(--az-4xl) var(--az-lg);
}
.empty-state-row td,
.empty-state-cell {
text-align: center;
padding: var(--az-4xl) var(--az-lg);
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--az-4xl) var(--az-xl);
gap: var(--az-sm);
}
.empty-state-content {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-sm);
}
.empty-state-content--padded {
padding: var(--az-2xl);
text-align: center;
}
.empty-state-icon {
display: flex;
align-items: center;
justify-content: center;
width: var(--az-5xl);
height: var(--az-5xl);
border-radius: var(--az-radius-lg);
background: var(--az-bg-elevated);
font-size: var(--az-text-2xl);
line-height: 1;
color: var(--az-text-muted);
margin-bottom: var(--az-md);
}
.empty-state-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.empty-state-text {
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
font-style: normal;
padding: 0;
text-align: center;
}
.empty-state-cta {
margin-top: var(--az-md);
}
.empty-state-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--az-sm);
margin-top: var(--az-md);
max-width: 100%;
}
.empty-state-actions .empty-state-cta {
min-width: 0;
}
.shortcuts-help-overlay {
position: fixed;
inset: 0;
z-index: var(--az-z-tooltip);
background: var(--az-overlay-bg);
display: flex;
align-items: center;
justify-content: center;
padding: var(--az-xl);
}
.shortcuts-help-panel {
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-xl);
padding: var(--az-xl);
max-width: 520px;
width: 100%;
max-height: 80vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.shortcuts-help-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--az-lg);
}
.shortcuts-help-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin: 0;
}
.shortcuts-help-close {
background: none;
border: none;
color: var(--az-text-tertiary);
cursor: pointer;
padding: var(--az-xs);
font-size: var(--az-text-lg);
border-radius: var(--az-radius-sm);
transition: background var(--az-transition);
}
.shortcuts-help-close:hover {
background: var(--az-bg-card-hover);
}
.shortcuts-help-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--az-xl);
}
.shortcuts-help-section-title {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
text-transform: var(--az-heading-transform);
letter-spacing: 0.3px;
margin: 0 0 var(--az-sm);
}
.shortcut-row {
display: flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs) 0;
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.shortcut-row kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--az-xl);
height: var(--az-xl);
padding: 0 var(--az-xs);
background: var(--az-bg-app);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-sm);
font-size: var(--az-text-2xs);
font-family: inherit;
color: var(--az-text-primary);
font-weight: var(--az-font-medium);
}
.shortcut-row span {
margin-left: var(--az-sm);
color: var(--az-text-primary);
}
@media (max-width: 480px) {
.shortcuts-help-grid {
grid-template-columns: 1fr;
}
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
padding: var(--az-md) var(--az-xl);
border-radius: var(--az-radius-lg);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
transition: background-color 0.15s ease-out,
border-color 0.15s ease-out,
box-shadow 0.15s ease-out,
opacity 0.2s ease-out;
min-height: var(--az-touch-min);
white-space: nowrap;
border: 1px solid transparent;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
user-select: none;
touch-action: manipulation;
}
.btn:active {
opacity: var(--az-press-opacity);
transition: none;
}
.btn:focus-visible {
outline: none;
box-shadow: var(--az-focus-ring);
}
.btn-primary {
background: var(--az-btn-inv-bg-gradient);
color: var(--az-btn-inv-text);
border-color: transparent;
font-weight: var(--az-font-semibold);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
transition: background-color 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out, opacity 0.2s ease-out;
}
.btn-primary:hover {
background: var(--az-btn-inv-bg-gradient-hover);
border-color: transparent;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.btn-primary:active {
opacity: var(--az-press-opacity);
box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
transition: none;
}
.btn-primary:focus-visible {
box-shadow: var(--az-btn-inv-focus);
}
.btn-secondary {
background: var(--az-bg-elevated);
color: var(--az-text-primary);
border-color: var(--az-border-hover);
}
.btn-secondary:hover {
background: var(--az-bg-card-hover);
border-color: var(--az-border-hover);
}
.btn-danger {
background: var(--az-red-bg);
color: var(--az-red);
border-color: var(--az-red-border);
}
.btn-danger:hover {
background: var(--az-red-bg);
border-color: var(--az-red);
}
.btn-ghost {
background: transparent;
color: var(--az-text-secondary);
border-color: transparent;
padding: var(--az-sm-plus) var(--az-lg);
}
.btn-ghost:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.btn-accent {
background: var(--az-purple);
color: var(--az-btn-inv-text);
border-color: transparent;
font-weight: var(--az-font-semibold);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px var(--az-purple-border), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
transition: background-color 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out, opacity 0.2s ease-out;
}
.btn-accent:hover {
background: var(--az-purple-hover);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 12px var(--az-purple-border), inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.btn-accent:active {
opacity: var(--az-press-opacity);
box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 1px 2px var(--az-purple-border), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
transition: none;
}
.btn-accent:focus-visible {
box-shadow: var(--az-focus-ring);
}
.btn-warning {
background: var(--az-amber-bg);
color: var(--az-amber);
border: 1px solid var(--az-amber-border);
}
.btn-warning:hover {
background: var(--az-amber-bg);
border-color: var(--az-amber);
}
.btn-small {
padding: var(--az-sm) var(--az-lg);
font-size: var(--az-text-xs);
min-height: var(--az-touch-min);
}
.btn.hidden,
.form-group.hidden,
.hidden {
display: none;
}
.mt-sm { margin-top: var(--az-sm); }
.mt-md { margin-top: var(--az-md); }
.mt-lg { margin-top: var(--az-lg); }
.mb-md { margin-bottom: var(--az-md); }
.mb-sm { margin-bottom: var(--az-sm); }
.mb-lg { margin-bottom: var(--az-lg); }
.mb-xl { margin-bottom: var(--az-xl); }
.mr-xs { margin-right: var(--az-xs); }
.m-0   { margin: 0; }
.flex-row { display: flex; align-items: center; gap: var(--az-sm); }
.flex-col { display: flex; flex-direction: column; }
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--az-sm); margin-top: var(--az-md); }
.label-checkbox { display: flex; align-items: center; gap: var(--az-sm); cursor: pointer; font-size: var(--az-text-sm); color: var(--az-text-secondary); }
.text-xs { font-size: var(--az-text-xs); }
.text-sm { font-size: var(--az-text-sm); }
.text-secondary { color: var(--az-text-secondary); }
.text-tertiary { color: var(--az-text-tertiary); }
.text-center { text-align: center; }
.btn-ghost-sm {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
padding: var(--az-xs) var(--az-sm);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-sm);
background: transparent;
cursor: pointer;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity 0.2s ease-out;
}
.btn-ghost-sm:hover { color: var(--az-text-primary); border-color: var(--az-border-hover); }
.btn-ghost-sm:active { opacity: var(--az-press-opacity); transition: none; }
.unsaved-doc-banner {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-md) var(--az-lg);
margin-bottom: var(--az-md);
background: var(--az-amber-bg);
border: 1px solid var(--az-amber-border);
border-radius: var(--az-radius-lg);
}
.unsaved-doc-banner.hidden {
display: none;
}
.unsaved-doc-banner-icon {
flex: none;
font-size: var(--az-text-lg-plus);
color: var(--az-amber);
}
.unsaved-doc-banner-body {
flex: 1 1 auto;
min-width: 0;
}
.unsaved-doc-banner-title {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.unsaved-doc-banner-detail {
margin-top: var(--az-2xs);
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
}
.unsaved-doc-banner-actions {
flex: none;
display: flex;
align-items: center;
gap: var(--az-sm);
}
.mfa-remember-checkbox { width: var(--az-lg); height: var(--az-lg); accent-color: var(--az-blue); cursor: pointer; }
.mfa-code-input { text-align: center; font-size: var(--az-text-xl); letter-spacing: var(--az-md); font-weight: var(--az-font-semibold); }
.mfa-verify-error { font-size: var(--az-text-sm); color: var(--az-red); margin-top: var(--az-sm); }
.btn-danger { background: var(--az-red); color: var(--az-text-on-accent); border: none; }
.btn-icon-premium {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--az-touch-min);
min-height: var(--az-touch-min);
width: var(--az-touch-min);
height: var(--az-touch-min);
border-radius: var(--az-radius-sm);
color: var(--az-text-secondary);
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
border: 1px solid transparent;
background: var(--az-bg-elevated);
padding: 0;
cursor: pointer;
}
.btn-icon-premium i {
font-size: var(--az-text-lg-plus);
line-height: 1;
}
.btn-icon-premium:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
border-color: var(--az-border-hover);
}
.btn-icon-premium.convert:hover {
color: var(--az-blue);
}
.btn-icon-premium.paid:hover {
color: var(--az-green);
}
.btn-icon-premium.duplicate:hover {
color: var(--az-indigo);
}
.btn-icon-premium.edit:hover {
color: var(--az-amber);
}
.btn-icon-premium.delete:hover {
color: var(--az-red);
}
.btn-icon-premium.download-pdf:hover {
color: var(--az-blue);
}
.btn-icon-premium.email:hover {
color: var(--az-cyan);
}
.cc-toggle-btn {
min-width: var(--az-touch-min);
min-height: var(--az-touch-min);
}
[data-tooltip] {
position: relative;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
padding: var(--az-xs-plus) var(--az-md);
border-radius: var(--az-radius-sm);
background: var(--color-tooltip-bg, var(--az-bg-card));
color: var(--color-tooltip-text, var(--az-text-primary));
font-size: var(--az-text-xs-plus);
font-weight: var(--az-font-normal);
line-height: 1.4;
text-align: left;
text-transform: none;
white-space: normal;
max-width: 220px;
width: max-content;
pointer-events: none;
opacity: 0;
transition: opacity var(--az-transition-fast);
z-index: var(--az-z-tooltip);
box-shadow: var(--az-shadow-dropdown);
}
[data-tooltip]:hover::after {
opacity: 1;
}
.btn-icon-placeholder {
width: var(--az-touch-min);
height: var(--az-touch-min);
}
button:disabled,
button[disabled],
.btn:disabled,
.btn[disabled],
.btn-primary:disabled,
.btn-primary[disabled],
.btn-secondary:disabled,
.btn-secondary[disabled],
.btn-danger:disabled,
.btn-danger[disabled],
.btn-ghost:disabled,
.btn-ghost[disabled],
.btn-icon-premium:disabled,
.btn-icon-premium[disabled] {
opacity: 0.38;
cursor: not-allowed;
pointer-events: none;
}
.badge {
display: inline-flex;
align-items: center;
gap: var(--az-xs-plus);
padding: 0;
background: transparent;
border: none;
border-radius: 0;
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
line-height: 1.3;
white-space: nowrap;
text-transform: none;
letter-spacing: 0.01em;
}
.badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: var(--az-radius-pill);
flex-shrink: 0;
}
.badge-top,
.badge-gold {
color: var(--az-amber);
}
.badge-top::before,
.badge-gold::before {
background: var(--az-amber);
}
.badge-silver {
color: var(--az-text-secondary);
}
.badge-silver::before {
background: var(--az-text-secondary);
}
.badge-bronze {
color: var(--az-bronze);
}
.badge-bronze::before {
background: var(--az-bronze);
}
.badge-regular {
color: var(--az-text-muted);
}
.badge-regular::before {
background: var(--az-text-muted);
}
.badge-neutral {
color: var(--az-text-muted);
}
.badge-neutral::before {
background: var(--az-text-muted);
}
.badge-top10 {
color: var(--az-blue);
}
.badge-top10::before {
background: var(--az-blue);
}
.badge-actif {
color: var(--az-green);
}
.badge-actif::before {
background: var(--az-green);
}
.badge-new {
color: var(--az-blue);
}
.badge-new::before {
background: var(--az-blue);
}
.badge-paid,
.badge-success {
color: var(--az-green);
}
.badge-paid::before,
.badge-success::before {
background: var(--az-green);
}
.badge-pending,
.badge-warning {
color: var(--az-amber);
}
.badge-pending::before,
.badge-warning::before {
background: var(--az-amber);
}
.badge-danger {
color: var(--az-red);
}
.badge-danger::before {
background: var(--az-red);
}
.badge-opened {
color: var(--az-amber);
}
.badge-opened::before {
background: var(--az-amber);
}
.badge-viewed {
color: var(--az-blue);
}
.badge-viewed::before {
background: var(--az-blue);
}
.email-history-tracking {
display: flex;
align-items: center;
gap: var(--az-xs);
margin-top: var(--az-xs);
}
.email-history-tracking-step {
display: flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.email-history-tracking-step.active {
color: var(--az-text-primary);
text-shadow: 0 0 0.6px currentColor;
}
.email-history-tracking-step.active .email-history-tracking-dot {
background: var(--az-blue);
}
.email-history-tracking-dot {
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
background: var(--az-border);
flex-shrink: 0;
}
.email-history-tracking-line {
width: var(--az-md);
height: 1px;
background: var(--az-border);
flex-shrink: 0;
}
.kpi-status-pill {
display: inline-flex;
align-items: center;
gap: var(--az-xs-plus);
padding: 0;
background: transparent;
border: none;
border-radius: 0;
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
}
.kpi-status-pill::before {
content: '';
width: 6px;
height: 6px;
border-radius: var(--az-radius-pill);
flex-shrink: 0;
}
.status-success {
color: var(--az-green);
}
.status-success::before {
background: var(--az-green);
}
.status-warning {
color: var(--az-amber);
}
.status-warning::before {
background: var(--az-amber);
}
.status-danger {
color: var(--az-red);
}
.status-danger::before {
background: var(--az-red);
}
.modal {
position: fixed;
inset: 0;
z-index: var(--az-z-modal);
display: none;
align-items: center;
justify-content: center;
padding: var(--az-xl);
background: var(--az-overlay-bg);
}
.modal.active {
display: flex;
}
.modal-content,
.client-modal {
background: var(--az-bg-surface);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
width: 100%;
max-width: 480px;
max-height: 85vh;
max-height: 85dvh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: var(--az-shadow-modal);
}
#confirm-modal .modal-content {
max-width: 400px;
}
#confirm-modal .modal-body .form-input {
margin-top: var(--az-sm);
}
#confirm-modal .modal-body .text-error {
font-size: var(--az-text-2xs);
margin-top: var(--az-xs);
}
.modal.modal-fullpage {
background: var(--az-bg-app);
align-items: center;
justify-content: center;
padding: var(--az-xl);
}
.modal.modal-fullpage .modal-content,
.modal.modal-fullpage .client-modal {
border-radius: var(--az-radius-lg);
max-height: 85vh;
max-height: 85dvh;
}
body.mfa-visible #auth-page {
visibility: hidden;
}
.modal-header,
.client-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-md-plus) var(--az-lg);
border-bottom: 1px solid var(--az-border);
flex-shrink: 0;
}
.modal-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
letter-spacing: -0.01em;
}
.modal-close {
width: var(--az-icon-btn-sm);
height: var(--az-icon-btn-sm);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--az-radius-sm);
color: var(--az-text-muted);
font-size: var(--az-text-md);
line-height: 1;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast), transform var(--az-transition-fast);
}
.modal-close:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.modal-close:focus,
.modal-close:focus-visible {
outline: none;
box-shadow: none;
}
.client-autocomplete-dropdown {
position: fixed;
z-index: var(--az-z-tooltip);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
max-height: 240px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-shadow: var(--az-shadow-dropdown);
}
.client-autocomplete-dropdown.client-ac-inline {
position: static;
width: 100%;
margin-top: var(--az-2xs);
max-height: 260px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-shadow: none;
border-radius: var(--az-radius-md);
}
.client-autocomplete-dropdown.client-ac-inline.hidden {
display: none;
}
.client-ac-item {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
padding: var(--az-sm-plus) var(--az-md-plus);
cursor: pointer;
transition: background var(--az-transition-fast);
}
.client-ac-item:hover,
.client-ac-item.active {
background: var(--az-bg-card-hover);
}
.client-ac-name {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
font-weight: var(--az-font-medium);
}
.client-ac-name mark {
background: var(--az-indigo-bg);
color: inherit;
border-radius: var(--az-2xs);
padding: 0 1px;
}
.client-ac-meta {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.client-ac-group {
padding: var(--az-xs) var(--az-md-plus);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--az-text-muted);
background: var(--az-bg-surface);
border-top: 1px solid var(--az-border);
}
.client-ac-group:first-child {
border-top: none;
}
.client-ac-badge {
display: inline-block;
margin-left: var(--az-sm);
padding: 0 var(--az-xs-plus);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
text-transform: uppercase;
letter-spacing: 0.02em;
border-radius: var(--az-radius-sm);
vertical-align: middle;
}
.client-ac-badge-cessee {
background: var(--az-red-bg);
color: var(--az-red);
}
.tva-vies-status {
margin-top: var(--az-xs);
font-size: var(--az-text-xs);
line-height: 1.4;
min-height: var(--az-md);
}
.tva-vies-status:empty {
display: none;
}
.tva-vies-loading { color: var(--az-text-muted); }
.tva-vies-valid   { color: var(--az-green); }
.tva-vies-invalid { color: var(--az-amber); }
.tva-vies-error   { color: var(--az-text-muted); font-style: italic; }
.tva-vies-idle    { display: none; }
.client-ac-empty {
padding: var(--az-md) var(--az-md-plus);
font-size: var(--az-text-xs);
color: var(--az-text-muted);
text-align: center;
font-style: italic;
}
.client-ac-filled {
animation: acFlash 0.8s ease;
}
@keyframes acFlash {
0% { background-color: var(--az-indigo-bg); }
100% { background-color: transparent; }
}
.ac-pappers-separator {
padding: var(--az-xs-plus) var(--az-md);
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
border-top: 1px solid var(--az-border-subtle);
background: var(--az-bg-elevated);
}
.ac-pappers-item {
padding: var(--az-sm) var(--az-md);
cursor: pointer;
transition: background var(--az-transition-fast);
}
.ac-pappers-item:hover,
.ac-pappers-item.active {
background: var(--az-bg-card-hover);
}
.ac-pappers-item strong {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
font-weight: var(--az-font-medium);
}
.ac-pappers-item mark {
background: var(--az-indigo-bg);
color: inherit;
border-radius: var(--az-2xs);
padding: 0 1px;
}
.ac-pappers-meta {
font-size: var(--az-text-xs-plus);
color: var(--az-text-secondary);
}
.modal-body,
.client-modal-body {
padding: var(--az-lg);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
flex: 1;
}
#client-modal .modal-body {
padding-bottom: var(--az-lg);
}
.modal-footer,
.client-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--az-sm);
padding: var(--az-md-plus) var(--az-lg);
border-top: 1px solid var(--az-border);
flex-shrink: 0;
}
.form-group {
position: relative;
display: flex;
flex-direction: column;
gap: var(--az-sm-plus);
margin-bottom: var(--az-lg);
}
.siren-search-row {
display: flex;
gap: var(--az-sm);
align-items: stretch;
}
.siren-search-row .form-input {
flex: 1 1 auto;
min-width: 0;
}
.siren-search-row .btn {
flex: 0 0 auto;
white-space: nowrap;
}
.siren-search-status {
margin: var(--az-xs) 0 0;
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.siren-search-status.is-error { color: var(--az-red); }
.siren-search-status.is-success { color: var(--az-green); }
.smart-paste-input {
font-family: inherit;
line-height: 1.45;
resize: vertical;
min-height: 68px;
}
#settings-view .mobile-accordion-inner .form-group,
.modal .mobile-accordion-inner .form-group {
margin-bottom: var(--az-md);
}
#settings-view .mobile-accordion-inner .form-group:last-child,
.modal .mobile-accordion-inner .form-group:last-child {
margin-bottom: 0;
}
.form-label,
.form-label-compact {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
}
@media (max-width: 768px) {
.form-label {
color: var(--az-text-primary);
}
}
.form-label-compact + .form-input-compact {
margin-top: var(--az-xs);
}
.form-input,
.form-input-compact,
.form-textarea,
.form-textarea-compact,
.form-select,
.form-select-compact {
padding: var(--az-sm) var(--az-md);
background: transparent;
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
color: var(--az-text-primary);
font-size: var(--az-text-sm);
transition: border-color var(--az-transition-fast), box-shadow var(--az-transition-fast);
outline: none;
min-height: var(--az-input-h);
}
select.form-input,
select.form-input-compact,
.form-select,
.form-select-compact {
appearance: none;
-webkit-appearance: none;
text-align: left;
background: transparent 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='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
background-size: 16px 16px;
padding-right: 36px;
cursor: pointer;
}
.form-input:focus,
.form-input-compact:focus,
.form-textarea:focus,
.form-textarea-compact:focus,
.form-select:focus,
.form-select-compact:focus {
border-color: var(--az-border-focus);
background: var(--az-bg-input-focus);
box-shadow: var(--az-focus-ring);
}
.form-input:focus-visible,
.form-input-compact:focus-visible,
.form-textarea:focus-visible,
.form-textarea-compact:focus-visible,
.form-select:focus-visible,
.form-select-compact:focus-visible {
box-shadow: var(--az-focus-ring);
}
.form-input::placeholder,
.form-input-compact::placeholder,
.form-textarea::placeholder,
.form-textarea-compact::placeholder {
color: var(--az-text-muted);
}
.form-input--readonly {
opacity: var(--az-opacity-placeholder);
cursor: not-allowed;
}
.form-textarea,
.form-textarea-compact {
resize: vertical;
min-height: 80px;
}
.badge-default {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
font-weight: var(--az-font-medium);
margin-left: var(--az-xs);
}
.form-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--az-lg);
}
.form-hint {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
margin-top: var(--az-xs);
}
.form-error-message,
.text-error {
font-size: var(--az-text-2xs);
color: var(--az-red);
margin-top: var(--az-xs);
}
.form-success-message {
font-size: var(--az-text-xs);
color: var(--az-green);
}
.form-input.error,
.form-input-compact.error {
border-color: var(--az-red-border);
}
.form-input.error:focus,
.form-input-compact.error:focus {
box-shadow: 0 0 0 2px var(--az-red-bg);
}
.form-group-checkbox {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-xs) 0;
}
.form-group-checkbox label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
cursor: pointer;
user-select: none;
}
.form-group-checkbox input[type="checkbox"],
.edit-section input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border: 1.5px solid var(--az-border-hover);
border-radius: var(--az-radius-sm);
background: var(--az-bg-input);
cursor: pointer;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast), transform var(--az-transition-fast);
position: relative;
flex-shrink: 0;
}
.form-group-checkbox input[type="checkbox"]:hover,
.edit-section input[type="checkbox"]:hover {
border-color: var(--az-blue);
background: var(--az-blue-bg);
}
.form-group-checkbox input[type="checkbox"]:checked,
.edit-section input[type="checkbox"]:checked {
background: var(--az-blue);
border-color: var(--az-blue);
}
.form-group-checkbox input[type="checkbox"]:checked::after,
.edit-section input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 50%;
top: 45%;
width: 5px;
height: 9px;
border: solid var(--az-text-on-accent);
border-width: 0 2px 2px 0;
transform: translate(-50%, -50%) rotate(45deg);
}
.form-group-checkbox input[type="checkbox"]:focus-visible,
.edit-section input[type="checkbox"]:focus-visible {
box-shadow: var(--az-focus-ring);
outline: none;
}
.readonly-field {
opacity: 0.6;
cursor: not-allowed;
background: var(--az-bg-elevated);
border-style: dashed;
border-color: var(--az-border);
}
.search-input,
.search-input-compact {
width: 100%;
padding: var(--az-sm) var(--az-md);
padding-left: var(--az-2xl);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
color: var(--az-text-primary);
font-size: var(--az-text-sm);
outline: none;
min-height: var(--az-touch-min);
transition: border-color var(--az-transition);
}
.search-input:focus,
.search-input-compact:focus {
border-color: var(--az-border-focus);
}
.search-input:focus-visible,
.search-input-compact:focus-visible {
box-shadow: var(--az-focus-ring);
}
.search-input::placeholder,
.search-input-compact::placeholder {
color: var(--az-text-muted);
}
.search-compact {
position: relative;
}
.search-icon {
position: absolute;
left: var(--az-sm-plus);
top: 50%;
transform: translateY(-50%);
width: 15px;
height: 15px;
color: var(--az-text-muted);
pointer-events: none;
}
.suggestions-dropdown,
.client-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--az-bg-app);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
max-height: 200px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: var(--az-z-modal);
box-shadow: var(--az-shadow-lg);
}
.suggestion-item {
padding: var(--az-sm-plus) var(--az-md-plus);
font-size: var(--az-text-sm);
color: var(--az-text-primary);
cursor: pointer;
transition: background var(--az-transition);
}
.suggestion-item:hover {
background: var(--az-bg-card-hover);
}
.suggestion-item .contact-info {
font-size: var(--az-text-xs-plus);
color: var(--az-text-muted);
}
.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.action-select {
position: relative;
min-width: 120px;
display: inline-block;
}
.action-select-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-sm);
padding: var(--az-sm) var(--az-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
min-height: var(--az-touch-min);
letter-spacing: 0.01em;
white-space: nowrap;
}
.form-group .action-select-btn {
min-height: var(--az-input-h);
}
.action-select-btn:hover {
border-color: var(--az-border-hover);
background: var(--az-bg-card-hover);
}
.action-select-btn:focus-visible {
outline: none;
border-color: var(--az-border-focus);
box-shadow: var(--az-focus-ring);
}
.action-select-chevron {
display: inline-flex;
align-items: center;
color: var(--az-text-muted);
transition: transform var(--az-transition);
line-height: 1;
}
.action-select-chevron i {
font-size: var(--az-text-md);
line-height: 1;
}
.action-select.open .action-select-chevron {
transform: rotate(180deg);
}
.filter-dropdown-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 200px;
background: var(--az-bg-surface);
border: 1px solid var(--az-border-hover);
border-radius: var(--az-radius-lg);
padding: var(--az-xs-plus);
z-index: var(--az-z-dropdown);
box-shadow: var(--az-shadow-dropdown);
display: none;
pointer-events: none;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
.filter-dropdown-menu.active,
.filter-dropdown-menu.show {
display: block;
pointer-events: auto;
animation: dropdownFadeIn 0.15s ease;
}
@keyframes dropdownFadeIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.filter-dropdown-menu.with-scroll {
max-height: 260px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.filter-option {
display: flex;
align-items: center;
gap: var(--az-sm-plus);
padding: var(--az-sm) var(--az-md);
font-size: var(--az-text-sm);
color: var(--az-text-primary);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
border-radius: var(--az-radius-sm);
min-height: 38px;
}
.filter-option:hover {
background: var(--az-bg-card-hover);
}
.filter-option.selected,
.filter-option.active {
background: var(--az-bg-elevated);
color: var(--az-text-primary);
}
.filter-option-label {
flex: 1;
font-weight: var(--az-font-medium);
display: flex;
align-items: center;
gap: var(--az-sm);
max-width: 100%;
overflow: hidden;
}
.filter-option-label>span:not(.action-select-check) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.filter-dropdown-menu>.filter-option-label {
padding: var(--az-sm) var(--az-md);
cursor: pointer;
border-radius: var(--az-radius-sm);
min-height: 38px;
font-size: var(--az-text-sm);
color: var(--az-text-primary);
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.filter-dropdown-menu>.filter-option-label:hover {
background: var(--az-bg-card-hover);
}
.filter-dropdown-menu>.filter-option-label-main {
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
}
.filter-option-separator {
height: 1px;
background: var(--az-border);
margin: var(--az-xs) var(--az-xs-plus);
}
.filter-dropdown-item {
display: flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-sm) var(--az-md);
cursor: pointer;
border-radius: var(--az-radius-sm);
font-size: var(--az-text-sm);
color: var(--az-text-primary);
transition: background var(--az-transition);
}
.filter-dropdown-item:hover {
background: var(--az-bg-card-hover);
}
.filter-dropdown-item i {
font-size: var(--az-text-md);
opacity: 0.7;
}
.filter-dropdown-item.active {
color: var(--az-blue);
text-shadow: 0 0 0.6px currentColor;
}
.filter-dropdown-separator {
height: 1px;
background: var(--az-border);
margin: var(--az-xs) 0;
}
.filter-amount-panel {
padding: var(--az-md);
min-width: 200px;
}
.filter-amount-row {
display: flex;
align-items: center;
gap: var(--az-sm);
margin-bottom: var(--az-sm);
}
.filter-amount-label {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
min-width: 52px;
}
.filter-amount-input {
flex: 1;
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-sm);
padding: var(--az-xs) var(--az-sm);
font-size: var(--az-text-sm);
color: var(--az-text-primary);
outline: none;
transition: border-color var(--az-transition);
}
.filter-amount-input:focus {
border-color: var(--az-blue);
}
.filter-amount-apply {
width: 100%;
margin-top: var(--az-xs);
}
.filter-dropdown-menu input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: var(--az-lg);
height: var(--az-lg);
border: 1.5px solid var(--az-border-hover);
border-radius: var(--az-radius-sm);
background: transparent;
cursor: pointer;
position: relative;
flex-shrink: 0;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.filter-dropdown-menu input[type="checkbox"]:checked {
background: var(--az-blue);
border-color: var(--az-blue);
}
.filter-dropdown-menu input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 50%;
top: 45%;
width: 5px;
height: 9px;
border-radius: 0;
background: none;
border: solid var(--az-text-on-accent);
border-width: 0 2px 2px 0;
transform: translate(-50%, -50%) rotate(45deg);
}
.filter-dropdown-menu input[type="checkbox"]:hover {
border-color: var(--az-blue);
}
.filter-dropdown-menu input.filter-month-checkbox,
.filter-dropdown-menu input.documents-filter-month-checkbox,
.filter-dropdown-menu input.transactions-filter-month-checkbox,
.filter-dropdown-menu input.compta-month-checkbox,
.filter-dropdown-menu input.clients-filter-month-checkbox,
.filter-dropdown-menu input[id$="-select-all"] {
border-radius: var(--az-radius-sm);
}
.filter-dropdown-menu input.filter-month-checkbox:checked,
.filter-dropdown-menu input.documents-filter-month-checkbox:checked,
.filter-dropdown-menu input.transactions-filter-month-checkbox:checked,
.filter-dropdown-menu input.compta-month-checkbox:checked,
.filter-dropdown-menu input.clients-filter-month-checkbox:checked,
.filter-dropdown-menu input[id$="-select-all"]:checked {
background: var(--az-blue);
border-color: var(--az-blue);
}
.filter-dropdown-menu input.filter-month-checkbox:checked::after,
.filter-dropdown-menu input.documents-filter-month-checkbox:checked::after,
.filter-dropdown-menu input.transactions-filter-month-checkbox:checked::after,
.filter-dropdown-menu input.compta-month-checkbox:checked::after,
.filter-dropdown-menu input.clients-filter-month-checkbox:checked::after,
.filter-dropdown-menu input[id$="-select-all"]:checked::after {
width: 5px;
height: 9px;
border-radius: 0;
background: none;
border: solid var(--az-text-on-accent);
border-width: 0 2px 2px 0;
top: 45%;
transform: translate(-50%, -50%) rotate(45deg);
}
.filter-dropdown-menu.dropdown-above {
top: auto;
bottom: calc(100% + 6px);
}
.period-indicator {
display: inline-block;
width: 6px;
height: 6px;
border-radius: var(--az-radius-pill);
background: var(--az-blue);
flex-shrink: 0;
vertical-align: middle;
margin-right: var(--az-xs-plus);
}
.dashboard-year-checkbox,
.documents-year-checkbox,
.clients-year-checkbox,
.compta-year-checkbox {
width: var(--az-lg);
height: var(--az-lg);
accent-color: var(--az-blue);
}
.toolbar-search {
position: relative;
flex: 1;
min-width: 140px;
max-width: 280px;
}
.table-toolbar-desktop {
display: flex;
align-items: center;
gap: var(--az-md);
flex-wrap: wrap;
}
.charts-section {
display: flex;
flex-direction: column;
gap: var(--az-xl);
}
.charts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--az-chart-grid-gap);
align-items: stretch;
}
.chart-container {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-chart-pad);
display: flex;
flex-direction: column;
gap: var(--az-lg);
min-height: 0;
}
.chart-title,
.widget-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.chart-wrapper {
position: relative;
width: 100%;
flex: 1;
min-height: 0;
}
.chart-wrapper canvas {
width: 100%;
max-height: 360px;
}
.chart-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--az-sm);
min-height: 120px;
color: var(--az-text-tertiary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
text-align: center;
padding: var(--az-xl);
}
.chart-empty-state i {
font-size: var(--az-text-xl);
opacity: 0.5;
}
.az-chart-tooltip {
position: absolute;
z-index: var(--az-z-tooltip);
pointer-events: none;
opacity: 0;
transform: translateY(var(--az-xs)) scale(0.96);
transition: opacity var(--az-transition-fast), transform var(--az-transition-fast);
background: rgba(5, 5, 7, 0.88);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--az-radius-md);
box-shadow: var(--az-shadow-dropdown);
padding: var(--az-sm) var(--az-md);
min-width: 100px;
font-family: var(--az-font);
}
.az-chart-tooltip--visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.az-chart-tooltip-title {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
color: rgba(255, 255, 255, 0.55);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--az-xs);
}
.az-chart-tooltip-row {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.az-chart-tooltip-row + .az-chart-tooltip-row {
margin-top: var(--az-2xs);
}
.az-chart-tooltip-dot {
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
flex-shrink: 0;
}
.az-chart-tooltip-text {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: rgba(255, 255, 255, 0.92);
white-space: nowrap;
}
.chart-footer {
display: flex;
align-items: center;
justify-content: center;
}
.chart-period {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.chart-centered {
align-items: center;
}
.chart-centered .chart-wrapper {
align-self: stretch;
width: 100%;
}
.quarterly-section {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-lg);
}
.quarterly-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--az-sm);
}
.quarterly-card {
display: flex;
flex-direction: column;
gap: var(--az-xs);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-md) var(--az-lg);
min-width: 0;
}
.quarterly-card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.quarterly-badge {
width: var(--az-3xl);
height: var(--az-3xl);
border-radius: var(--az-radius-lg-plus);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--az-text-lg);
font-weight: var(--az-font-bold);
line-height: 1;
letter-spacing: -0.01em;
flex-shrink: 0;
}
.quarterly-badge--q1 { background: rgba(94, 106, 210, 0.15); color: rgba(94, 106, 210, 1); }
.quarterly-badge--q2 { background: rgba(76, 183, 130, 0.15); color: rgba(76, 183, 130, 1); }
.quarterly-badge--q3 { background: rgba(245, 158, 11, 0.15); color: rgba(245, 158, 11, 1); }
.quarterly-badge--q4 { background: rgba(217, 79, 87, 0.15); color: rgba(217, 79, 87, 1); }
.quarterly-period {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
font-weight: var(--az-font-normal);
text-align: right;
line-height: 1.2;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.quarterly-total {
text-align: center;
padding: var(--az-md) 0;
}
.quarterly-total-amount {
font-size: var(--az-text-xl);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.quarterly-card--monthly .quarterly-total-amount {
font-size: var(--az-text-lg);
}
.qa-card {
padding: var(--az-xl);
gap: var(--az-lg);
cursor: default;
}
.qa-card:hover {
background: var(--az-bg-card);
box-shadow: var(--az-shadow);
cursor: default;
}
.qa-detail {
display: flex;
flex-direction: column;
gap: var(--az-xs);
padding-top: var(--az-md);
border-top: 1px solid var(--az-border-subtle);
}
.qa-detail-period {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
color: var(--az-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.qa-detail-total {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.qa-detail-breakdown {
display: flex;
gap: var(--az-lg);
margin-top: var(--az-xs);
}
.qa-detail-item {
display: flex;
align-items: center;
gap: var(--az-xs);
}
.qa-detail-label {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
color: var(--az-text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.qa-detail-value {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
}
.qa-card .chart-wrapper {
height: 200px;
}
.qa-dot {
width: var(--az-xs-plus);
height: var(--az-xs-plus);
border-radius: 50%;
flex-shrink: 0;
}
.qa-dot--urssaf { background: rgba(94, 106, 210, 0.8); }
.qa-dot--cfp { background: rgba(14, 165, 233, 0.7); }
.qa-dot--impots { background: rgba(155, 106, 205, 0.7); }
.quarterly-legend {
display: flex;
flex-direction: column;
gap: var(--az-sm-plus);
}
.quarterly-legend-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-sm);
width: 100%;
}
.quarterly-legend-left {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.quarterly-legend-dot {
width: var(--az-sm);
height: var(--az-sm);
border-radius: 50%;
flex-shrink: 0;
}
.quarterly-legend-dot--urssaf { background: rgba(94, 106, 210, 0.5); }
.quarterly-legend-dot--cfp    { background: rgba(14, 165, 233, 0.5); }
.quarterly-legend-dot--impots { background: rgba(155, 106, 205, 0.5); }
html:not(.dark-mode) .quarterly-legend-dot--urssaf { background: rgba(94, 106, 210, 0.55); }
html:not(.dark-mode) .quarterly-legend-dot--cfp    { background: rgba(14, 165, 233, 0.55); }
html:not(.dark-mode) .quarterly-legend-dot--impots { background: rgba(155, 106, 205, 0.55); }
.quarterly-legend-label {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.quarterly-legend-value {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
font-weight: var(--az-font-medium);
font-variant-numeric: tabular-nums;
white-space: nowrap;
flex-shrink: 0;
}
.quarterly-label {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.quarterly-value {
font-size: var(--az-text-lg);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
}
.quarterly-chart {
margin-top: var(--az-md);
}
.chart-canvas-quarterly {
width: 100%;
height: 140px;
}
.dashboard-news-section {
flex: 1;
min-width: 280px;
max-width: 600px;
}
.dashboard-news-section.no-slides {
display: none;
}
.notifications-carousel {
overflow: hidden;
}
.carousel-container {
position: relative;
}
.carousel-track {
display: flex;
transition: transform 0.4s ease;
}
.notification-slide {
min-width: 100%;
padding: var(--az-lg) var(--az-lg-plus);
display: none;
align-items: center;
gap: var(--az-lg);
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
}
.notification-slide.active {
display: flex;
}
.notification-slide-insight,
.notification-slide-alert,
.notification-slide-empty {
border-left: none;
}
.notification-icon {
width: 36px;
height: 36px;
border-radius: var(--az-radius-pill);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
}
.notification-icon i {
font-size: var(--az-text-xl);
line-height: 1;
}
.notification-content {
flex: 1;
min-width: 0;
}
.notification-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.notification-description {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
margin-top: var(--az-2xs);
}
.notification-amount,
.notification-amount-premium {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
flex-shrink: 0;
}
.notification-amount-up {
color: var(--az-green);
}
.notification-amount-down {
color: var(--az-red);
}
.notification-badge {
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
flex-shrink: 0;
white-space: nowrap;
}
.notification-badge-transaction {
background: var(--az-green-bg);
color: var(--az-green);
}
.notification-badge-client {
background: var(--az-blue-bg);
color: var(--az-blue);
}
.notification-badge-alert {
background: var(--az-amber-bg);
color: var(--az-amber);
}
.notification-badge-document {
background: var(--az-indigo-bg);
color: var(--az-indigo);
}
.carousel-indicator {
width: 6px;
height: 6px;
border-radius: var(--az-radius-pill);
background: var(--az-text-muted);
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.carousel-indicator.active {
width: 18px;
border-radius: var(--az-radius-xs);
background: var(--az-blue);
}
.client-of-month-content,
.monthly-trends-content {
display: flex;
align-items: center;
gap: var(--az-md);
flex: 1;
min-width: 0;
}
.client-of-month-icon,
.monthly-trends-icon {
width: 36px;
height: 36px;
border-radius: var(--az-radius-lg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--az-blue-bg);
color: var(--az-blue);
}
.monthly-trends-icon.trend-up {
background: var(--az-green-bg);
color: var(--az-green);
}
.monthly-trends-icon.trend-down {
background: var(--az-red-bg);
color: var(--az-red);
}
.client-of-month-info,
.monthly-trends-info {
flex: 1;
min-width: 0;
}
.client-of-month-name {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.client-of-month-ca {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-blue);
}
.client-of-month-label {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.monthly-trends-percent {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
}
.monthly-trends-label {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.monthly-trends-current,
.monthly-trends-previous {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
}
.insight-empty-message {
font-size: var(--az-text-sm);
color: var(--az-text-muted);
}
.doc-avatar,
.client-avatar,
.transaction-avatar {
width: var(--az-2xl);
height: var(--az-2xl);
border-radius: var(--az-radius-pill);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
background: var(--az-indigo-bg);
border: 1px solid var(--az-indigo-border);
color: var(--az-indigo);
vertical-align: middle;
}
.client-avatar.status-gold {
background: var(--az-amber-bg);
border-color: var(--az-amber-border);
color: var(--az-amber);
}
.client-avatar.status-silver {
background: var(--az-bg-elevated);
border-color: var(--az-border);
color: var(--az-text-secondary);
}
.client-avatar.status-bronze {
background: var(--az-bronze-bg);
border-color: var(--az-bronze-border);
color: var(--az-bronze);
}
.client-avatar.status-top10 {
background: var(--az-blue-bg);
border-color: var(--az-blue-border);
color: var(--az-blue);
}
.client-avatar.status-actif {
background: var(--az-green-bg);
border-color: var(--az-green-border);
color: var(--az-green);
}
.client-avatar.status-neutral {
background: var(--az-bg-elevated);
border-color: var(--az-border);
color: var(--az-text-muted);
}
.premium-details-container {
display: flex;
flex-direction: column;
gap: var(--az-lg);
}
.fiche-hero {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-lg-plus);
}
.fiche-hero-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-lg);
}
.fiche-hero-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.fiche-hero-subtitle {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
margin-top: var(--az-2xs);
}
.fiche-hero-badge {
display: inline-flex;
}
.fiche-hero-amount {
font-size: var(--az-text-2xl);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin-top: var(--az-md);
font-variant-numeric: tabular-nums;
}
.fiche-hero-label {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
margin-top: var(--az-2xs);
}
.fiche-item {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: var(--az-sm-plus) 0;
border-bottom: 1px solid var(--az-border);
}
.fiche-item:last-child {
border-bottom: none;
}
.fiche-item-label {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.fiche-item-value {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
font-weight: var(--az-font-medium);
}
.fiche-desktop-sections {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--az-lg);
}
.fiche-desktop-section {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-lg-plus);
}
.fiche-desktop-section.full-width {
grid-column: 1 / -1;
}
.fiche-section-title {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin-bottom: var(--az-md);
padding-bottom: var(--az-sm);
border-bottom: 1px solid var(--az-border);
display: flex;
align-items: center;
gap: var(--az-sm);
}
.fiche-section-title i {
font-size: var(--az-text-lg-plus);
line-height: 1;
flex-shrink: 0;
}
.fiche-desktop-item {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: var(--az-sm) 0;
}
.fiche-desktop-label {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.fiche-desktop-value {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
font-weight: var(--az-font-medium);
}
.fiche-desktop-value.empty {
color: var(--az-text-muted);
font-style: italic;
}
.fiche-empty,
.fiche-empty-desktop {
text-align: center;
padding: var(--az-xl);
color: var(--az-text-muted);
font-size: var(--az-text-sm);
}
.fiche-table,
.fiche-desktop-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.fiche-table th:first-child,
.fiche-desktop-table th:first-child {
width: 65%;
}
.fiche-table th:last-child,
.fiche-desktop-table th:last-child {
width: 35%;
text-align: right;
}
.fiche-table th,
.fiche-desktop-table th {
padding: var(--az-sm) 0;
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
line-height: 1.4;
color: var(--az-text-muted);
text-align: left;
border-bottom: 1px solid var(--az-border);
}
.fiche-table td,
.fiche-desktop-table td {
padding: var(--az-sm) 0;
font-size: var(--az-text-sm);
line-height: 1.4;
color: var(--az-text-primary);
border-bottom: 1px solid var(--az-border);
}
.fiche-table td:last-child,
.fiche-desktop-table td:last-child {
text-align: right;
font-weight: var(--az-font-medium);
}
.fiche-table-ref,
.fiche-table-ref-desktop {
font-weight: var(--az-font-medium);
color: var(--az-blue);
}
.fiche-table-date,
.fiche-table-date-desktop {
color: var(--az-text-secondary);
}
.activity-timeline {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
padding-left: var(--az-xl);
}
.activity-timeline::before {
content: '';
position: absolute;
left: 5px;
top: var(--az-sm);
bottom: var(--az-sm);
width: 1px;
background: var(--az-border);
}
.activity-timeline-item {
display: flex;
align-items: flex-start;
gap: var(--az-md);
padding: var(--az-sm) 0;
position: relative;
}
.activity-timeline-dot {
position: absolute;
left: calc(-1 * var(--az-xl) + 2px);
top: var(--az-md);
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
flex-shrink: 0;
}
.activity-timeline-content {
flex: 1;
min-width: 0;
}
.activity-timeline-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
}
.activity-timeline-label {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
font-weight: var(--az-font-medium);
display: flex;
align-items: center;
gap: var(--az-xs);
}
.activity-timeline-label i {
opacity: 0.6;
}
.activity-timeline-amount {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.activity-timeline-meta {
display: flex;
align-items: center;
gap: var(--az-sm);
margin-top: var(--az-2xs);
}
.activity-timeline-date {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.activity-timeline-status {
font-size: var(--az-text-2xs);
color: var(--az-text-secondary);
background: var(--az-bg-card);
padding: 1px var(--az-xs);
border-radius: var(--az-radius-sm);
}
.activity-timeline-more {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
padding: var(--az-sm) 0;
text-align: center;
}
.fiche-charges-list,
.fiche-charges-desktop {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.fiche-charges-item,
.fiche-charge-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-xs-plus) 0;
}
.fiche-charges-item .fiche-charges-value,
.fiche-charge-row .fiche-charge-value {
color: var(--az-text-secondary);
font-variant-numeric: tabular-nums;
}
.fiche-charges-item.subtotal,
.fiche-charge-row.subtotal {
border-top: 1px solid var(--az-border);
margin-top: var(--az-sm);
padding: var(--az-sm) 0 0 0;
font-weight: var(--az-font-semibold);
}
.fiche-charges-item.subtotal .fiche-charges-value,
.fiche-charge-row.subtotal .fiche-charge-value {
color: var(--az-text-primary);
}
.fiche-charges-item.total,
.fiche-charge-row.total {
margin-top: 0;
padding: var(--az-xs) 0 0 0;
font-weight: var(--az-font-semibold);
}
.fiche-charges-item.total .fiche-charges-value,
.fiche-charge-row.total .fiche-charge-value {
color: var(--az-green);
}
.fiche-charges-item.total.negative .fiche-charges-value,
.fiche-charge-row.total.negative .fiche-charge-value {
color: var(--az-red);
}
.fiche-encaissement-fast { color: var(--az-green); }
.fiche-encaissement-medium { color: var(--az-amber); }
.fiche-encaissement-slow { color: var(--az-red); }
.fiche-charges-label,
.fiche-charge-label {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.fiche-charges-value,
.fiche-charge-value {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
}
.fiche-charges-group-title {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
font-weight: var(--az-font-medium);
letter-spacing: 0.02em;
padding: var(--az-sm) 0 0 0;
margin: 0;
list-style: none;
border-top: 1px solid var(--az-glass-border);
}
.fiche-charges-group-title:first-child {
padding-top: 0;
border-top: none;
}
.fiche-charge-placeholder-link {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-xs);
color: var(--az-text-muted);
text-decoration: none;
transition: color var(--az-transition-fast);
}
.fiche-charge-placeholder-link:hover {
color: var(--az-blue);
}
.fiche-charge-placeholder-link i {
font-size: 0.75em;
}
.fiche-notes-content {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
line-height: 1.6;
white-space: pre-wrap;
}
#fiche-edit-charges-section {
border-top: 1px solid var(--az-glass-border);
margin-top: var(--az-md);
padding-top: var(--az-md);
}
.fiche-project-charge-item {
cursor: pointer;
border-radius: var(--az-radius-sm);
padding: var(--az-xs-plus) var(--az-sm);
margin: 0 calc(-1 * var(--az-sm));
transition: background var(--az-transition-fast);
}
.fiche-project-charge-item:hover {
background: var(--az-glass-bg-hover);
}
.fiche-project-charge-item.selected {
background: var(--az-blue-bg);
outline: 1px solid var(--az-blue-border);
}
.fiche-project-charge-add-form {
margin-top: var(--az-sm);
}
.fiche-project-charge-add-hint {
display: block;
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
text-align: right;
margin-top: var(--az-xs);
opacity: 0;
transition: opacity var(--az-transition-ease);
}
.fiche-project-charge-add-form:focus-within .fiche-project-charge-add-hint {
opacity: 1;
}
.fiche-project-charge-label-input,
.fiche-project-charge-amount-input {
background: transparent;
border: none;
border-bottom: 1px solid var(--az-glass-border);
border-radius: 0;
padding: var(--az-xs) 0;
font-size: var(--az-text-sm);
color: var(--az-text-primary);
transition: border-color var(--az-transition-ease);
}
.fiche-project-charge-label-input::placeholder,
.fiche-project-charge-amount-input::placeholder {
color: var(--az-text-muted);
opacity: 0.5;
}
.fiche-project-charge-label-input:focus,
.fiche-project-charge-amount-input:focus {
outline: none;
border-bottom-color: var(--az-text-secondary);
}
.fiche-project-charge-label-input {
flex: 1;
min-width: 0;
}
.fiche-project-charge-amount-input {
width: 80px;
flex-shrink: 0;
text-align: right;
font-variant-numeric: tabular-nums;
}
.fiche-project-charges-actions {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: var(--az-md);
gap: var(--az-sm);
}
.fiche-project-charge-delete-btn {
color: var(--az-red);
margin-right: auto;
}
.fiche-project-charge-delete-btn:hover {
background: var(--az-red-bg);
}
.fiche-project-charges-actions .btn {
padding: var(--az-sm) var(--az-lg);
min-height: auto;
font-size: var(--az-text-xs);
}
.fiche-view-document-btn {
display: inline-flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-sm) var(--az-lg);
min-height: var(--az-touch-min);
background: transparent;
border: 1px solid var(--az-blue-border);
border-radius: var(--az-radius-lg);
color: var(--az-blue);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
-webkit-tap-highlight-color: transparent;
}
.fiche-view-document-btn:active {
background: var(--az-blue-bg);
filter: brightness(0.92);
}
.fiche-view-document-wrap {
padding-top: var(--az-sm);
}
.mobile-accordion-section {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
overflow: hidden;
display: none;
}
.mobile-accordion-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-md-plus) var(--az-lg);
cursor: pointer;
min-height: var(--az-touch-min);
}
.mobile-accordion-title {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.mobile-accordion-toggle {
color: var(--az-text-muted);
transition: transform var(--az-transition);
}
.mobile-accordion-section.expanded .mobile-accordion-toggle {
transform: rotate(180deg);
}
.mobile-accordion-content {
display: none;
border-top: 1px solid var(--az-border);
}
.mobile-accordion-section.expanded .mobile-accordion-content {
display: block;
}
.mobile-accordion-inner {
padding: var(--az-lg);
}
.font-medium {
font-weight: var(--az-font-medium);
}
.doc-client-cell,
.client-name-cell,
.transaction-info-cell {
min-width: 0;
}
.doc-avatar,
.client-avatar,
.transaction-avatar {
vertical-align: middle;
margin-right: var(--az-sm-plus);
}
.doc-client-info,
.client-info-cell,
.transaction-text-wrapper {
display: inline-block;
vertical-align: middle;
min-width: 0;
max-width: calc(100% - 44px);
overflow: hidden;
}
.transaction-text-wrapper .dl-name,
.client-info-cell .dl-name {
max-width: 100%;
}
.mobile-tx-date {
display: none;
}
.doc-client-info .client-name,
.client-info-cell .client-name {
display: block;
max-width: 100%;
}
.client-name,
.transaction-name {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.doc-ref,
.transaction-ref {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.doc-sep,
.transaction-sep {
margin: 0 var(--az-xs);
color: var(--az-text-muted);
}
.doc-date,
.transaction-mois {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.text-secondary-premium {
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
}
.client-address-cell {
max-width: 280px;
}
.client-address-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.text-numeric-premium {
font-variant-numeric: tabular-nums;
font-weight: var(--az-font-medium);
}
.client-secondary-info {
display: none;
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.client-rank-badge {
display: inline-flex;
}
.timestamp-pro {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.mobile-creation-timestamp {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.benefice-indicator {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
}
.benefice-indicator.positive {
color: var(--az-green);
}
.benefice-indicator.negative {
color: var(--az-red);
}
.benefice-indicator.neutral {
color: var(--az-text-muted);
}
.color-swatch {
width: 38px;
height: 38px;
border-radius: var(--az-radius-pill);
border: 2px solid var(--az-border);
cursor: pointer;
transition:
transform var(--az-transition),
box-shadow var(--az-transition);
-webkit-appearance: none;
appearance: none;
padding: 0;
}
.color-swatch::-webkit-color-swatch-wrapper {
padding: 0;
}
.color-swatch::-webkit-color-swatch {
border: none;
border-radius: var(--az-radius-pill);
}
.color-swatch:hover {
transform: scale(1.1);
box-shadow: 0 0 0 3px var(--az-border-hover);
}
.color-swatch.selected {
border-color: var(--az-text-primary);
box-shadow:
0 0 0 2px var(--az-bg-app),
0 0 0 4px var(--az-blue);
}
.color-swatch-row {
display: flex;
align-items: center;
gap: var(--az-md);
}
.color-swatch-label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
min-width: 40px;
}
#custom-charge-modal {
align-items: center;
}
.custom-charge-modal-content {
max-width: 340px;
padding: var(--az-lg-plus);
gap: var(--az-lg);
border-radius: var(--az-radius-lg);
}
.custom-charge-modal-content .modal-header,
.custom-charge-modal-content .modal-body,
.custom-charge-modal-content .modal-footer {
padding: 0;
border: none;
}
.custom-charge-body {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.custom-charge-label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
}
.custom-charge-input {
padding: var(--az-sm-plus) var(--az-md);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
color: var(--az-text-primary);
font-size: var(--az-text-md);
outline: none;
}
.custom-charge-input:focus {
border-color: var(--az-blue);
}
.custom-charge-input::placeholder {
color: var(--az-text-muted);
}
.custom-charge-footer {
display: flex;
justify-content: flex-end;
gap: var(--az-sm);
}
#color-picker-modal .modal-content {
max-width: 380px;
}
.color-picker-wrapper {
display: flex;
flex-direction: column;
gap: var(--az-lg);
}
.color-picker-preview {
width: 100%;
height: 48px;
border-radius: var(--az-radius-lg);
border: 1px solid var(--az-border);
transition: background var(--az-transition-ease);
box-shadow: inset 0 1px 3px var(--az-border);
}
.color-picker-input-hidden {
width: 0;
height: 0;
opacity: 0;
position: absolute;
pointer-events: none;
}
.color-picker-presets {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: var(--az-sm);
}
.color-picker-preset {
width: 100%;
aspect-ratio: 1;
border-radius: var(--az-radius-lg);
border: 2px solid transparent;
cursor: pointer;
transition:
transform 0.15s,
border-color 0.15s,
box-shadow 0.15s;
}
.color-picker-preset:hover {
transform: scale(1.12);
border-color: var(--az-border-focus);
}
.color-picker-preset.selected {
border-color: var(--az-text-primary);
box-shadow:
0 0 0 2px var(--az-bg-app),
0 0 0 3px var(--az-blue);
transform: scale(1.08);
}
.color-picker-custom-row {
display: flex;
align-items: center;
gap: var(--az-sm-plus);
padding-top: var(--az-md-plus);
border-top: 1px solid var(--az-border);
}
.color-picker-custom-label {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
white-space: nowrap;
font-weight: var(--az-font-medium);
}
.color-picker-hex-input {
flex: 1;
padding: var(--az-sm) var(--az-md);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
color: var(--az-text-primary);
font-size: var(--az-text-sm);
font-family: var(--az-font-mono);
outline: none;
letter-spacing: 0.5px;
}
.color-picker-hex-input:focus {
border-color: var(--az-border-focus);
box-shadow: var(--az-focus-ring);
}
.checkbox-premium,
.document-checkbox,
.client-checkbox,
.transaction-checkbox,
.row-select {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border: 1.5px solid var(--az-border-hover);
border-radius: var(--az-radius-xs);
background: transparent;
cursor: pointer;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast), transform var(--az-transition-fast);
position: relative;
flex-shrink: 0;
}
.client-checkbox:hover,
.transaction-checkbox:hover,
.row-select:hover {
border-color: var(--az-blue);
background: var(--az-blue-bg);
}
.client-checkbox:checked,
.transaction-checkbox:checked,
.row-select:checked {
background: var(--az-blue);
border-color: var(--az-blue);
}
.client-checkbox:checked::after,
.transaction-checkbox:checked::after,
.row-select:checked::after {
content: "";
position: absolute;
left: 50%;
top: 42%;
width: 3.5px;
height: 7px;
border: solid var(--az-text-on-accent);
border-width: 0 1.5px 1.5px 0;
transform: translate(-50%, -50%) rotate(45deg);
}
.action-menu {
position: absolute;
right: 0;
top: calc(100% + 4px);
background: var(--az-bg-surface);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
padding: var(--az-xs) 0;
min-width: 160px;
z-index: var(--az-z-sticky);
box-shadow: var(--az-shadow-lg);
}
.action-menu-header {
padding: var(--az-sm) var(--az-md-plus);
font-size: var(--az-text-xs);
color: var(--az-text-muted);
border-bottom: 1px solid var(--az-border);
}
#documents-sort-chips,
#transactions-sort-chips,
#clients-sort-chips {
display: flex;
gap: var(--az-sort-chip-gap);
overflow-x: auto;
padding: var(--az-sm) 0;
scrollbar-width: none;
}
#documents-sort-chips::-webkit-scrollbar,
#transactions-sort-chips::-webkit-scrollbar,
#clients-sort-chips::-webkit-scrollbar {
display: none;
}
.sort-chip,
.sort-chip-compact {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-sort-chip-pad);
border-radius: var(--az-sort-chip-radius);
font-size: var(--az-sort-chip-font);
font-weight: var(--az-font-medium);
white-space: nowrap;
background: var(--az-sort-chip-bg);
border: 1px solid var(--az-sort-chip-border);
color: var(--az-sort-chip-color);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
min-height: 36px;
}
.sort-chip:hover,
.sort-chip-compact:hover {
border-color: var(--az-border-hover);
color: var(--az-text-primary);
}
.sort-chip.active,
.sort-chip-compact.active {
background: var(--az-sort-chip-active-bg);
border-color: var(--az-sort-chip-active-border);
color: var(--az-sort-chip-active-color);
}
.chip-label {
font-size: inherit;
font-weight: inherit;
}
.chip-arrow {
font-size: var(--az-text-2xs);
opacity: 0.6;
transition: transform var(--az-transition);
}
.sort-chip.active .chip-arrow,
.sort-chip-compact.active .chip-arrow {
opacity: 1;
}
.sort-chips-inline {
display: flex;
align-items: center;
gap: var(--az-sm);
flex-wrap: wrap;
}
.table-actions,
.table-actions-mobile {
display: none;
align-items: center;
gap: var(--az-sm);
}
.bottom-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: var(--az-z-dropdown);
background: var(--az-nav-bg);
border-top: 1px solid var(--az-nav-border);
border-radius: 0;
padding: 0 var(--az-lg);
padding-bottom: env(safe-area-inset-bottom, 0px);
backdrop-filter: blur(var(--az-nav-blur));
-webkit-backdrop-filter: blur(var(--az-nav-blur));
overflow: hidden;
}
.bottom-nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--az-xs);
flex: 1;
padding: var(--az-sm) 0;
color: var(--az-nav-inactive);
font-size: var(--az-text-xs);
min-height: 48px;
transition: color var(--az-transition-ease);
background: none;
border: none;
border-radius: 0;
cursor: pointer;
}
.bottom-nav-item.active {
color: var(--az-nav-active);
background: none;
border: none;
}
.bottom-nav-item.active::before {
display: none;
}
.bottom-nav-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--az-text-xl-plus);
line-height: 1;
flex-shrink: 0;
transition: color var(--az-transition-ease);
}
.bottom-nav-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-normal);
letter-spacing: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.bottom-nav-item.active .bottom-nav-label {
text-shadow: 0 0 0.6px currentColor;
}
.bottom-sheet-menu {
display: none;
position: fixed;
inset: 0;
z-index: var(--az-z-modal-backdrop);
}
.bottom-sheet-menu.active {
display: block;
}
.bottom-sheet-overlay {
position: absolute;
inset: 0;
background: var(--az-overlay-bg);
}
.bottom-sheet-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
background: var(--az-bg-elevated);
border-radius: var(--az-radius-2xl) var(--az-radius-2xl) 0 0;
padding: var(--az-md) var(--az-lg);
padding-bottom: calc(var(--az-md) + env(safe-area-inset-bottom, 0px));
max-height: calc(85vh - env(safe-area-inset-bottom));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.15);
}
.bottom-sheet-handle {
width: 36px;
height: 5px;
background: var(--az-border);
border-radius: var(--az-radius-pill);
margin: 0 auto var(--az-lg);
}
.bottom-sheet-items {
display: flex;
flex-direction: column;
background: var(--az-bg-card);
border-radius: var(--az-radius-xl);
overflow: hidden;
}
.bottom-sheet-item {
display: flex;
align-items: center;
gap: var(--az-lg);
padding: 0 var(--az-lg);
height: 48px;
border-radius: 0;
color: var(--az-text-primary);
font-size: var(--az-text-lg);
font-weight: var(--az-font-medium);
letter-spacing: -0.01em;
transition: transform 0.1s ease, background-color 0.08s ease;
-webkit-tap-highlight-color: transparent;
position: relative;
}
.bottom-sheet-item:active {
filter: brightness(0.92);
background: var(--az-bg-card-hover);
}
.bottom-sheet-item + .bottom-sheet-item::before {
content: '';
position: absolute;
top: 0;
left: calc(var(--az-lg) + 24px + var(--az-lg));
right: 0;
height: 1px;
background: var(--az-border);
}
.bottom-sheet-item i {
font-size: 22px;
line-height: 1;
flex-shrink: 0;
color: var(--az-text-secondary);
}
.bottom-sheet-item-danger {
color: var(--az-red);
}
.bottom-sheet-item-danger + .bottom-sheet-item-danger::before {
display: none;
}
.bottom-sheet-item-danger span {
color: var(--az-red);
}
.bottom-sheet-item-danger i {
color: var(--az-red);
}
.bottom-sheet-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin-bottom: var(--az-lg);
text-align: center;
}
.sheet-head {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: var(--az-touch-min);
margin-bottom: var(--az-md);
padding: 0 calc(var(--az-touch-min) + var(--az-xs));
}
.sheet-head > .sheet-title,
.sheet-head > .bottom-sheet-title {
min-width: 0;
margin: 0;
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sheet-close {
--sheet-close-size: 30px;
position: absolute;
top: 50%;
right: calc((var(--sheet-close-size) - var(--az-touch-min)) / 2);
width: var(--az-touch-min);
height: var(--az-touch-min);
padding: 0;
border: none;
background: transparent;
color: var(--az-text-tertiary); 
font-size: 0;
cursor: pointer;
transform: translateY(-50%);
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.sheet-close::before {
content: "";
position: absolute;
inset: calc((var(--az-touch-min) - var(--sheet-close-size)) / 2);
border-radius: var(--az-radius-pill);
background: var(--az-fill-tertiary);
transition: filter var(--az-transition-fast);
}
.sheet-close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
transform: translate(-50%, -50%);
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9M10.5 1.5l-9 9' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9M10.5 1.5l-9 9' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.sheet-close:active::before {
filter: brightness(0.85);
}
@media (hover: hover) {
.sheet-close:hover {
color: var(--az-text-primary);
}
}
.bottom-sheet-section {
margin-bottom: var(--az-lg);
}
.bottom-sheet-separator {
height: 1px;
background: var(--az-border);
margin: var(--az-md) 0;
}
.bottom-sheet-section-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--az-md);
}
.period-custom-range {
display: flex;
align-items: flex-end;
gap: var(--az-md);
padding: var(--az-sm) 0;
}
.period-date-field {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.period-date-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
}
.period-date-input {
width: 100%;
padding: var(--az-sm-plus) var(--az-md);
font-size: var(--az-text-sm);
font-family: inherit;
color: var(--az-text-primary);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
outline: none;
min-height: var(--az-touch-min);
transition: border-color 0.15s ease;
}
.period-date-input::-webkit-date-and-time-value {
text-align: left;
}
.period-date-input:focus {
border-color: var(--az-blue);
}
.period-custom-apply {
margin-top: var(--az-sm);
}
.sheet-chips {
display: flex;
flex-wrap: wrap;
gap: var(--az-xs-plus);
}
.sheet-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--az-sm) var(--az-md-plus);
border-radius: var(--az-radius-lg);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
min-height: var(--az-touch-min);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
-webkit-tap-highlight-color: transparent;
}
.sheet-chip:hover {
border-color: var(--az-border-hover);
}
.sheet-chip.active {
background: var(--az-blue-bg);
border-color: var(--az-blue-border);
color: var(--az-blue);
text-shadow: 0 0 0.6px currentColor;
}
.bottom-sheet-sort-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
padding: 0 var(--az-lg);
height: 48px;
border-radius: 0;
color: var(--az-text-primary);
font-size: var(--az-text-lg);
font-weight: var(--az-font-medium);
letter-spacing: -0.01em;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 0.1s ease, background-color 0.08s ease;
position: relative;
}
.bottom-sheet-sort-item:active {
filter: brightness(0.92);
background: var(--az-bg-card-hover);
}
.bottom-sheet-sort-item + .bottom-sheet-sort-item::before {
content: '';
position: absolute;
top: 0;
left: var(--az-lg);
right: 0;
height: 1px;
background: var(--az-border);
}
.bottom-sheet-sort-item.active {
color: var(--az-blue);
text-shadow: 0 0 0.6px currentColor;
}
.bottom-sheet-sort-item .sort-check {
font-size: var(--az-text-lg);
color: var(--az-blue);
opacity: 0;
transition: opacity var(--az-transition);
}
.bottom-sheet-sort-item.active .sort-check {
opacity: 1;
}
.period-option-label {
font-size: var(--az-text-md);
}
.period-option-sub {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
margin-top: var(--az-xs);
}
.bottom-sheet-sort-item.active .period-option-sub {
color: var(--az-blue);
opacity: 0.7;
}
.bottom-sheet-actions {
display: flex;
gap: var(--az-sm);
margin-top: var(--az-lg);
padding-top: var(--az-lg);
border-top: 1px solid var(--az-border);
}
.bottom-sheet-actions .btn {
flex: 1;
min-height: var(--az-touch-min);
justify-content: center;
}
.mobile-app-header {
display: none;
}
.mobile-nav {
display: none;
overflow-x: auto;
gap: var(--az-xs);
padding: var(--az-sm) 0;
scrollbar-width: none;
}
.mobile-nav::-webkit-scrollbar {
display: none;
}
.mobile-nav-item {
padding: var(--az-sm) var(--az-md-plus);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
white-space: nowrap;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
min-height: var(--az-touch-min);
display: flex;
align-items: center;
}
.mobile-nav-item:hover {
border-color: var(--az-border-hover);
}
.mobile-nav-item.active {
background: var(--az-blue-bg);
border-color: var(--az-blue-border);
color: var(--az-blue);
}
.avatar-blue {
background: rgba(123, 138, 242, 0.18);
border-color: rgba(123, 138, 242, 0.28);
color: var(--az-blue);
}
.avatar-purple {
background: rgba(155, 106, 205, 0.18);
border-color: rgba(155, 106, 205, 0.28);
color: var(--az-purple);
}
.avatar-green {
background: rgba(76, 183, 130, 0.18);
border-color: rgba(76, 183, 130, 0.28);
color: var(--az-green);
}
.avatar-amber {
background: rgba(229, 147, 78, 0.18);
border-color: rgba(229, 147, 78, 0.28);
color: var(--az-amber);
}
.avatar-cyan {
background: rgba(70, 181, 209, 0.18);
border-color: rgba(70, 181, 209, 0.28);
color: var(--az-cyan);
}
.avatar-red {
background: rgba(217, 79, 87, 0.18);
border-color: rgba(217, 79, 87, 0.28);
color: var(--az-red);
}
.show-more-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
width: auto;
margin: var(--az-sm) auto 0 auto;
padding: var(--az-md) var(--az-lg-plus);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.table-container+.show-more-btn,
.data-list-wrap+.show-more-btn,
.documents-table-container+.show-more-btn,
#documents-table-container+.show-more-btn,
#clients-table-container+.show-more-btn,
#clients-data-list-wrap+.show-more-btn,
#transactions-table-container+.show-more-btn {
margin-top: var(--az-sm);
width: auto;
display: flex;
}
.show-more-btn:hover {
background: var(--az-bg-card-hover);
border-color: var(--az-border-hover);
color: var(--az-text-primary);
}
.show-more-count {
color: var(--az-text-muted);
font-size: var(--az-text-xs);
}
.show-more-icon {
width: 18px;
height: 18px;
transition: transform 0.3s ease;
flex-shrink: 0;
}
.show-more-btn[aria-expanded="true"] .show-more-icon {
transform: rotate(180deg);
}
.show-more-collapsed tbody tr:nth-child(n + 6) {
display: none;
}
.badge-draft {
color: var(--az-text-muted);
}
.badge-draft::before {
background: var(--az-text-muted);
}
.badge-sent {
color: var(--az-blue);
}
.badge-sent::before {
background: var(--az-blue);
}
.badge-finalized {
color: var(--az-blue);
}
.badge-finalized::before {
background: var(--az-blue);
}
.badge-accepted {
color: var(--az-green);
}
.badge-accepted::before {
background: var(--az-green);
}
.badge-declined {
color: var(--az-red);
}
.badge-declined::before {
background: var(--az-red);
}
.badge-converted {
color: var(--az-green);
}
.badge-converted::before {
background: var(--az-green);
}
.badge-partial {
color: var(--az-cyan);
}
.badge-partial::before {
background: var(--az-cyan);
}
.doc-number-draft {
color: var(--az-text-muted);
font-style: italic;
text-transform: uppercase;
font-size: var(--az-text-2xs);
letter-spacing: 0.05em;
}
.badge-overdue {
color: var(--az-red);
background: var(--az-red-bg);
border: 1px solid var(--az-red-border);
font-size: var(--az-text-2xs);
margin-left: var(--az-xs);
}
.badge-overdue::before {
background: var(--az-red);
}
.badge-overdue-mini {
background: var(--az-red-bg);
color: var(--az-red);
border: 1px solid var(--az-red-border);
font-size: var(--az-text-2xs);
}
.row-action-item.action-warning {
color: var(--az-amber);
}
.row-action-item.action-warning i {
color: var(--az-amber);
}
.row-action-item.action-stripe {
color: var(--az-purple);
}
.row-action-item.action-stripe i {
color: var(--az-purple);
}
.badge-credit-note {
color: var(--az-blue);
}
.badge-credit-note::before {
background: var(--az-blue);
}
.pending {
background: var(--az-amber-bg);
color: var(--az-amber);
border: 1px solid var(--az-amber-border);
display: inline-flex;
align-items: center;
padding: var(--az-xs) var(--az-md-plus);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
}
.paid {
background: var(--az-green-bg);
color: var(--az-green);
border: 1px solid var(--az-green-border);
display: inline-flex;
align-items: center;
padding: var(--az-xs) var(--az-md-plus);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
}
.draft {
background: var(--az-bg-elevated);
color: var(--az-text-tertiary);
border: 1px solid var(--az-border);
display: inline-flex;
align-items: center;
padding: var(--az-xs) var(--az-md-plus);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
}
.credit-note {
background: var(--az-blue-bg);
color: var(--az-blue);
border: 1px solid var(--az-blue-border);
display: inline-flex;
align-items: center;
padding: var(--az-xs) var(--az-md-plus);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
}
.text-truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.form-input-size {
width: 56px;
flex-shrink: 0;
text-align: center;
padding: var(--az-xs-plus) var(--az-sm);
min-height: auto;
font-size: var(--az-text-sm);
}
.typography-control-row {
display: flex;
gap: var(--az-sm);
align-items: center;
margin-top: var(--az-xs);
}
.typography-block-control+.typography-block-control {
margin-top: var(--az-md);
}
.btn-full {
width: 100%;
font-size: var(--az-text-sm);
}
.btn-full-spaced {
width: 100%;
font-size: var(--az-text-sm);
margin-bottom: var(--az-md);
}
.form-description {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.form-group-lg {
margin-bottom: var(--az-lg-plus);
}
.label-left {
text-align: left;
}
.currency-symbol-lg {
font-size: var(--az-text-2xl-plus);
font-weight: var(--az-font-semibold);
line-height: 1;
}
.currency-symbol-sm {
font-size: var(--az-text-lg-plus);
font-weight: var(--az-font-semibold);
line-height: 1;
}
.btn-full-mt {
width: 100%;
margin-top: var(--az-lg);
}
.bulk-recap-card {
background: var(--az-bg-elevated);
padding: var(--az-md);
border-radius: var(--az-radius-lg);
margin-bottom: var(--az-md);
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
}
:focus-visible {
outline: 2px solid var(--az-blue);
outline-offset: 2px;
}
button:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible {
outline: none;
box-shadow: var(--az-focus-ring);
}
.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible,
.search-input:focus-visible {
outline: none;
border-color: var(--az-border-focus);
box-shadow: var(--az-focus-ring);
}
.search-suggestions-container {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
box-shadow: var(--az-shadow-dropdown);
margin-top: var(--az-xs);
z-index: var(--az-z-modal);
overflow: hidden;
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition:
opacity var(--az-transition),
transform var(--az-transition);
}
.search-suggestions-container.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.search-suggestions-list {
list-style: none;
margin: 0;
padding: 0;
}
.search-suggestion-item {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-sm-plus) var(--az-md);
cursor: pointer;
transition: background var(--az-transition);
border-bottom: 1px solid var(--az-border-subtle);
}
.search-suggestion-item:last-child {
border-bottom: none;
}
.search-suggestion-item:hover,
.search-suggestion-item.active {
background: var(--az-bg-card-hover);
}
.suggestion-icon {
width: var(--az-2xl);
height: var(--az-2xl);
border-radius: var(--az-radius-pill);
background: var(--az-bg-elevated);
display: flex;
align-items: center;
justify-content: center;
color: var(--az-text-secondary);
flex-shrink: 0;
}
.suggestion-icon i {
font-size: var(--az-text-lg-plus);
line-height: 1;
}
.suggestion-content {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--az-2xs);
min-width: 0;
}
.suggestion-primary {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.suggestion-secondary {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.suggestion-amount {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.search-suggestion-item mark {
background: var(--az-amber-bg);
color: inherit;
border-radius: var(--az-2xs);
padding: 0 var(--az-2xs);
}
.revolut-action-bar {
display: none;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--az-sm) var(--az-lg-plus);
padding: var(--az-lg) var(--az-md);
margin: var(--az-sm) 0;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
opacity: 0;
transform: translateY(-8px);
transition: opacity var(--az-transition-ease), transform var(--az-transition-ease);
}
.revolut-action-bar.active {
display: flex;
opacity: 1;
transform: translateY(0);
}
.revolut-action-counter {
width: 100%;
text-align: center;
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
letter-spacing: 0.01em;
}
.revolut-action-item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-xs-plus);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
min-width: 56px;
}
.revolut-action-item.disabled {
opacity: 0.35;
pointer-events: none;
}
.revolut-action-circle {
width: var(--az-4xl);
height: var(--az-4xl);
border-radius: var(--az-radius-pill);
display: flex;
align-items: center;
justify-content: center;
background: var(--az-glass-bg);
transition: background var(--az-transition-fast), transform 0.1s ease;
}
.revolut-action-circle i {
font-size: var(--az-text-lg-plus);
line-height: 1;
color: var(--az-text-primary);
}
.revolut-action-circle.accent {
background: var(--az-blue-bg);
}
.revolut-action-circle.accent i {
color: var(--az-text-primary);
}
.revolut-action-circle.danger {
background: var(--az-red-bg);
}
.revolut-action-circle.danger i {
color: var(--az-text-primary);
}
.revolut-action-circle.success {
background: var(--az-green-bg);
}
.revolut-action-circle.success i {
color: var(--az-text-primary);
}
.revolut-action-item:active .revolut-action-circle {
filter: brightness(0.92);
}
.revolut-action-label {
font-size: var(--az-text-xs-plus);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
text-align: center;
line-height: 1.2;
}
.toast-container {
position: fixed;
z-index: var(--az-z-toast, 1100);
display: flex;
flex-direction: column;
gap: var(--az-sm);
pointer-events: none;
max-width: min(400px, calc(100vw - 40px));
}
.toast-container.top-right {
top: 20px;
right: 20px;
}
.toast-container.top-left {
top: 20px;
left: 20px;
}
.toast-container.top-center {
top: 20px;
left: 50%;
transform: translateX(-50%);
}
.toast-container.bottom-right {
bottom: 20px;
right: 20px;
}
.toast-container.bottom-left {
bottom: 20px;
left: 20px;
}
.toast-container.bottom-center {
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.toast-premium {
display: flex;
align-items: flex-start;
gap: var(--az-md);
padding: var(--az-md-plus) 18px;
border-radius: var(--az-radius-lg-plus);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
box-shadow: var(--az-shadow-toast);
pointer-events: auto;
min-width: min(280px, 100%);
max-width: 100%;
animation: toast-slide-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.toast-premium.toast-exit {
animation: toast-slide-out 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.toast-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: var(--az-lg-plus);
height: var(--az-lg-plus);
margin-top: 1px;
}
.toast-premium.success .toast-icon {
color: var(--az-green);
}
.toast-premium.error .toast-icon {
color: var(--az-red);
}
.toast-premium.warning .toast-icon {
color: var(--az-amber);
}
.toast-premium.info .toast-icon {
color: var(--az-blue);
}
.toast-premium.loading .toast-icon {
color: var(--az-blue);
animation: toast-spin 1s linear infinite;
}
.toast-content {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--az-2xs);
}
.toast-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
line-height: 1.4;
}
.toast-message {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
line-height: 1.4;
}
.toast-close {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: var(--az-xl);
height: var(--az-xl);
border: none;
background: none;
color: var(--az-text-tertiary);
cursor: pointer;
border-radius: var(--az-radius-sm);
padding: 0;
transition: color var(--az-transition-fast), background var(--az-transition-fast);
}
.toast-close:hover {
color: var(--az-text-primary);
background: var(--az-glass-bg);
}
.toast-progress {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background: var(--az-blue);
border-radius: 0 0 10px 10px;
animation: toast-progress-shrink linear forwards;
}
.toast-actions {
display: flex;
gap: var(--az-sm);
margin-top: var(--az-sm);
}
.toast-action-btn {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
padding: var(--az-xs) var(--az-md);
border-radius: var(--az-radius-md);
border: none;
cursor: pointer;
transition: background var(--az-transition-fast);
}
.toast-action-btn.toast-action-primary {
background: var(--az-blue);
color: var(--az-text-on-accent);
}
.toast-action-btn.toast-action-primary:hover {
background: var(--az-blue-hover);
}
.toast-action-btn.toast-action-secondary {
background: var(--az-border);
color: var(--az-text-secondary);
}
.toast-action-btn.toast-action-secondary:hover {
background: var(--az-border-hover);
}
@keyframes toast-slide-in {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes toast-slide-out {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(20px);
}
}
@keyframes toast-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes toast-progress-shrink {
from { width: 100%; }
to { width: 0%; }
}
.catalog-picker {
position: relative;
}
.catalog-picker-trigger {
display: flex;
align-items: center;
gap: var(--az-xs-plus);
padding: var(--az-sm) var(--az-md-plus);
min-height: var(--az-touch-min, 44px);
border-radius: var(--az-radius-lg);
border: 1px solid var(--az-border);
background: var(--az-bg-card);
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
cursor: pointer;
white-space: nowrap;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.catalog-picker-trigger:hover {
border-color: var(--az-blue);
color: var(--az-text-primary);
}
.catalog-picker-trigger i {
font-size: var(--az-text-lg-plus);
}
.catalog-picker-dropdown {
display: none;
position: absolute;
top: calc(100% + 6px);
right: 0;
width: 340px;
max-height: 360px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-xl);
box-shadow: var(--az-shadow-lg);
z-index: var(--az-z-dropdown, 100);
padding: var(--az-sm);
}
.catalog-picker-dropdown.open {
display: block;
}
.catalog-picker-dropdown-empty {
padding: var(--az-xl) var(--az-lg);
text-align: center;
color: var(--az-text-tertiary);
font-size: var(--az-text-sm);
}
.catalog-picker-category-label {
padding: var(--az-sm) var(--az-sm-plus) var(--az-xs);
font-size: var(--az-text-xs-plus);
font-weight: var(--az-font-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--az-text-tertiary);
}
.catalog-picker-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-sm-plus) var(--az-md);
min-height: var(--az-touch-min, 44px);
border-radius: var(--az-radius-lg);
cursor: pointer;
transition: background var(--az-transition);
}
.catalog-picker-item:hover {
background: var(--az-blue-bg);
}
.catalog-picker-item-name {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.catalog-picker-item-price {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-blue);
margin-left: var(--az-md);
white-space: nowrap;
}
.catalog-picker-item-unit {
font-size: var(--az-text-xs-plus);
color: var(--az-text-tertiary);
margin-left: var(--az-xs);
}
.client-suggestions-bar {
padding: var(--az-sm-plus) var(--az-md-plus);
margin-bottom: var(--az-md);
background: var(--az-blue-bg);
border: 1px solid var(--az-blue-border);
border-radius: var(--az-radius-lg-plus);
}
.client-suggestions-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--az-sm);
}
.client-suggestions-title {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-blue);
}
.client-suggestions-close {
background: none;
border: none;
color: var(--az-text-tertiary);
cursor: pointer;
padding: var(--az-2xs);
font-size: var(--az-text-lg-plus);
line-height: 1;
}
.client-suggestions-chips {
display: flex;
flex-wrap: wrap;
gap: var(--az-xs-plus);
}
.client-suggestion-chip {
display: inline-flex;
align-items: center;
gap: var(--az-xs-plus);
padding: var(--az-sm-plus) var(--az-md-plus);
min-height: var(--az-touch-min, 44px);
border-radius: var(--az-radius-3xl);
border: 1px solid var(--az-border);
background: var(--az-bg-card);
color: var(--az-text-primary);
font-size: var(--az-text-sm);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
white-space: nowrap;
}
.client-suggestion-chip:hover {
border-color: var(--az-blue);
background: var(--az-blue-bg);
}
.client-suggestion-chip-price {
font-weight: var(--az-font-semibold);
color: var(--az-blue);
}
.client-suggestions-add-all {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-sm-plus) var(--az-md-plus);
min-height: var(--az-touch-min, 44px);
border-radius: var(--az-radius-3xl);
border: 1px solid var(--az-blue);
background: var(--az-blue-bg);
color: var(--az-blue);
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.client-suggestions-add-all:hover {
background: var(--az-blue);
color: var(--az-text-primary);
}
.client-suggestions-bar {
padding: var(--az-md);
margin-bottom: var(--az-md);
}
.client-suggestions-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--az-sm);
}
.client-suggestions-title {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.client-suggestions-close {
background: none;
border: none;
color: var(--az-text-muted);
font-size: var(--az-text-md);
cursor: pointer;
padding: var(--az-xs);
line-height: 1;
}
.client-suggestions-chips {
display: flex;
flex-wrap: wrap;
gap: var(--az-xs-plus);
}
.client-suggestion-chip {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs-plus) var(--az-md);
border-radius: var(--az-radius-3xl);
border: 1px solid var(--az-border);
background: var(--az-bg-card);
color: var(--az-text-primary);
font-size: var(--az-text-xs);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
white-space: nowrap;
font-family: inherit;
}
.client-suggestion-chip:hover {
border-color: var(--az-blue);
background: var(--az-blue-bg);
}
.client-suggestion-chip-price {
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
font-size: var(--az-text-2xs);
}
.client-suggestions-add-all {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs-plus) var(--az-md);
border-radius: var(--az-radius-3xl);
border: 1px dashed var(--az-border);
background: transparent;
color: var(--az-text-secondary);
font-size: var(--az-text-xs);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
white-space: nowrap;
font-family: inherit;
}
.client-suggestions-add-all:hover {
border-color: var(--az-blue);
color: var(--az-blue);
}
.client-suggestions-actions {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.client-insights-btn {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs) var(--az-md);
border-radius: var(--az-radius-md);
border: 1px solid var(--az-border);
background: transparent;
color: var(--az-text-secondary);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
font-family: inherit;
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
white-space: nowrap;
}
.client-insights-btn:hover {
border-color: var(--az-blue);
color: var(--az-blue);
background: var(--az-blue-bg);
}
.insights-content {
padding: var(--az-lg) 0 var(--az-xl);
display: flex;
flex-direction: column;
gap: var(--az-xl);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.insights-kpi-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--az-md);
}
.insights-kpi {
padding: var(--az-md);
border-radius: var(--az-radius-md);
background: var(--az-bg-input);
text-align: center;
}
.insights-kpi-value {
font-size: var(--az-text-md);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
line-height: 1.2;
margin-bottom: var(--az-2xs);
}
.insights-kpi-label {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.insights-section {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.insights-section-title {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.insights-service-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--az-xs);
padding: var(--az-sm) var(--az-md);
border-radius: var(--az-radius-md);
background: var(--az-bg-input);
}
.insights-service-name {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.insights-service-meta {
display: flex;
align-items: center;
gap: var(--az-sm);
flex-shrink: 0;
}
.insights-service-count {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
font-weight: var(--az-font-medium);
}
.insights-service-price {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.insights-service-range {
width: 100%;
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
text-align: right;
}
.insights-cat-list {
display: flex;
flex-wrap: wrap;
gap: var(--az-xs-plus);
}
.insights-cat-chip {
display: inline-flex;
align-items: center;
padding: var(--az-xs) var(--az-md);
border-radius: var(--az-radius-3xl);
border: 1px solid var(--az-border);
background: var(--az-bg-card);
color: var(--az-text-secondary);
font-size: var(--az-text-xs);
}
.wizard-suggestions-unified.hidden {
display: none;
}
.wizard-suggestions-unified {
display: flex;
flex-direction: column;
gap: var(--az-sm);
margin-bottom: var(--az-md);
padding: var(--az-md);
border-radius: var(--az-radius-md);
background: var(--az-bg-input);
}
.wizard-suggestions-unified .client-suggestions-bar,
.wizard-suggestions-unified .frequent-suggestions-bar {
padding: 0;
margin-bottom: 0;
}
.frequent-suggestions-bar {
padding: var(--az-md);
margin-bottom: var(--az-md);
}
.frequent-suggestions-section {
margin-bottom: var(--az-md);
}
.frequent-suggestions-section:last-child {
margin-bottom: 0;
}
.frequent-suggestions-label {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--az-sm);
}
.frequent-suggestions-chips {
display: flex;
flex-wrap: wrap;
gap: var(--az-xs-plus);
}
.frequent-chip {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs-plus) var(--az-md);
border-radius: var(--az-radius-3xl);
border: 1px solid var(--az-border);
background: var(--az-bg-card);
color: var(--az-text-primary);
font-size: var(--az-text-xs);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
white-space: nowrap;
}
.frequent-chip:hover {
border-color: var(--az-blue);
background: var(--az-blue-bg);
}
.frequent-chip.used {
opacity: 0.5;
transition: opacity 0.3s ease;
}
.frequent-chip-price {
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
font-size: var(--az-text-2xs);
}
.frequent-chip-count {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
}
.frequent-chip--show-all {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 28px;
padding: 0;
border-radius: var(--az-radius-pill);
border: 1px dashed var(--az-border);
background: transparent;
color: var(--az-text-secondary);
font-size: var(--az-text-md);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
flex-shrink: 0;
}
.frequent-chip--show-all:hover {
background: var(--az-bg-hover);
color: var(--az-text-primary);
}
.aip-backdrop {
position: fixed;
inset: 0;
z-index: var(--az-z-toast);
background: rgba(0, 0, 0, 0);
display: flex;
align-items: stretch;
justify-content: flex-end;
transition: background 0.3s ease;
}
.aip-backdrop.open { background: rgba(0, 0, 0, 0.35); }
.aip-panel {
width: 420px;
max-width: 100%;
height: 100%;
background: var(--az-bg-card, #fff);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
}
.aip-backdrop.open .aip-panel { transform: translateX(0); }
.aip-backdrop.aip-mobile {
align-items: flex-end;
justify-content: center;
}
.aip-backdrop.aip-mobile .aip-panel {
width: 100%;
height: auto;
max-height: 85vh;
border-radius: var(--az-radius-xl) var(--az-radius-xl) 0 0;
transform: translateY(100%);
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}
.aip-backdrop.aip-mobile.open .aip-panel {
transform: translateY(0);
translateX: unset;
}
.aip-header {
flex-shrink: 0;
border-bottom: 1px solid var(--az-border);
}
.aip-header-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-lg) var(--az-xl) var(--az-sm);
}
.aip-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.aip-close {
background: none;
border: none;
font-size: var(--az-text-xl);
color: var(--az-text-secondary);
cursor: pointer;
padding: var(--az-xs);
border-radius: var(--az-radius-md);
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
.aip-close:hover { background: var(--az-bg-hover); }
.aip-stats {
display: flex;
gap: var(--az-lg);
padding: var(--az-sm) var(--az-xl) var(--az-md);
}
.aip-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.aip-stat-value {
font-size: var(--az-text-lg);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
}
.aip-stat-label {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.aip-toolbar {
display: flex;
gap: var(--az-sm);
padding: var(--az-sm) var(--az-xl) var(--az-md);
}
.aip-search-wrap {
flex: 1;
position: relative;
display: flex;
align-items: center;
}
.aip-search-wrap i {
position: absolute;
left: var(--az-md);
color: var(--az-text-muted);
font-size: var(--az-text-md);
pointer-events: none;
}
.aip-search {
width: 100%;
padding: var(--az-sm) var(--az-md) var(--az-sm) var(--az-3xl);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
background: var(--az-bg-input, var(--az-bg-app));
font-size: 16px;
color: var(--az-text-primary);
min-height: 40px;
}
.aip-search::placeholder { color: var(--az-text-muted); }
.aip-search:focus { outline: none; border-color: var(--az-blue); }
.aip-sort {
padding: var(--az-sm) var(--az-md);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
background: var(--az-bg-input, var(--az-bg-app));
font-size: var(--az-text-sm);
color: var(--az-text-primary);
min-height: 40px;
cursor: pointer;
}
.aip-list {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.aip-empty {
padding: var(--az-3xl) var(--az-xl);
text-align: center;
color: var(--az-text-muted);
font-size: var(--az-text-md);
}
.aip-row {
display: flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-sm) var(--az-xl);
cursor: pointer;
transition: background 0.15s ease;
border-bottom: 1px solid var(--az-border-subtle, rgba(0,0,0,0.04));
min-height: 48px;
}
.aip-row:hover { background: var(--az-bg-hover); }
.aip-row:last-child { border-bottom: none; }
.aip-check {
width: 18px;
height: 18px;
flex-shrink: 0;
accent-color: var(--az-blue);
cursor: pointer;
}
.aip-row-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.aip-designation {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.aip-meta {
display: flex;
align-items: center;
gap: var(--az-xs);
flex-wrap: wrap;
}
.aip-sep {
color: var(--az-text-muted);
font-size: var(--az-text-2xs);
}
.aip-price {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
}
.aip-cat {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
background: var(--az-bg-hover);
padding: 1px var(--az-xs);
border-radius: var(--az-radius-sm);
white-space: nowrap;
}
.aip-date {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
}
.aip-count {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
}
.aip-trend {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
}
.aip-trend-up { color: var(--az-red); }
.aip-trend-down { color: var(--az-green); }
.aip-badge {
font-size: 10px;
padding: 1px var(--az-xs);
border-radius: var(--az-radius-sm);
font-weight: var(--az-font-medium);
white-space: nowrap;
}
.aip-badge-stable {
background: rgba(52, 199, 89, 0.1);
color: var(--az-green);
}
.aip-badge-variable {
background: rgba(255, 149, 0, 0.1);
color: var(--az-amber);
}
.aip-qty {
width: 40px;
padding: var(--az-xs);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
text-align: center;
font-size: 16px;
color: var(--az-text-primary);
background: var(--az-bg-input, var(--az-bg-app));
min-height: 32px;
}
.aip-qty:focus { outline: none; border-color: var(--az-blue); }
.aip-footer {
padding: var(--az-md) var(--az-xl) var(--az-xl);
border-top: 1px solid var(--az-border);
flex-shrink: 0;
display: flex;
align-items: center;
gap: var(--az-md);
}
.aip-footer-total {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
flex-shrink: 0;
}
.aip-add-btn {
flex: 1;
padding: var(--az-md) var(--az-xl);
border: none;
border-radius: var(--az-radius-lg);
background: var(--az-blue);
color: #fff;
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
cursor: pointer;
transition: opacity 0.2s ease;
min-height: 44px;
text-align: center;
}
.aip-add-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.aip-add-btn:not(:disabled):hover { opacity: 0.9; }
.catalog-list {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.catalog-category-group {
margin-bottom: var(--az-sm);
}
.catalog-category-header {
font-size: var(--az-text-xs-plus);
font-weight: var(--az-font-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--az-text-tertiary);
padding: var(--az-sm) 0 var(--az-xs);
}
.catalog-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-md) var(--az-lg);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg-plus);
transition: border-color var(--az-transition);
}
.catalog-card:hover {
border-color: var(--az-blue-border);
}
.catalog-card-info {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
min-width: 0;
flex: 1;
}
.catalog-card-designation {
font-size: var(--az-text-md);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.catalog-card-meta {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.catalog-card-price {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin-left: var(--az-lg);
white-space: nowrap;
}
.catalog-card-actions {
display: flex;
gap: var(--az-xs);
margin-left: var(--az-md);
}
.catalog-card-btn {
background: none;
border: none;
color: var(--az-text-tertiary);
cursor: pointer;
padding: var(--az-xs-plus);
border-radius: var(--az-radius-md);
font-size: var(--az-text-lg-plus);
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.catalog-card-btn:hover {
color: var(--az-text-primary);
background: var(--az-bg-card-hover);
}
.catalog-card-btn--delete:hover {
color: var(--az-red);
}
.catalog-card--editing {
flex-direction: column;
align-items: stretch;
gap: var(--az-sm-plus);
}
.catalog-card--editing .catalog-edit-fields {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.catalog-edit-row {
display: flex;
gap: var(--az-sm);
}
.catalog-edit-row .form-input {
flex: 1;
}
.catalog-edit-select {
max-width: 120px;
}
.catalog-edit-actions {
display: flex;
gap: var(--az-sm);
justify-content: flex-end;
}
.catalog-card-description {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.catalog-card--archived {
opacity: 0.55;
}
.catalog-card-btn--archive:hover {
color: var(--az-amber);
}
.catalog-textarea {
resize: vertical;
min-height: var(--az-3xl);
}
.catalog-label-optional {
color: var(--az-text-tertiary);
font-weight: var(--az-font-normal);
}
.catalog-add-actions {
margin-top: var(--az-lg);
}
.catalog-toolbar {
display: flex;
flex-direction: column;
gap: var(--az-md);
padding: var(--az-lg) 0 var(--az-sm);
}
.catalog-wipe-btn {
align-self: flex-start;
color: var(--az-red);
font-size: var(--az-text-sm);
padding: var(--az-xs-plus) var(--az-md);
}
.catalog-wipe-btn:hover {
background: var(--az-red-bg);
}
.catalog-search-wrap {
position: relative;
}
.catalog-search-icon {
position: absolute;
left: var(--az-md);
top: 50%;
transform: translateY(-50%);
font-size: var(--az-text-lg);
color: var(--az-text-tertiary);
pointer-events: none;
}
.catalog-search-input {
padding-left: var(--az-3xl);
}
.catalog-sort-chips {
display: flex;
gap: var(--az-sort-chip-gap);
flex-wrap: wrap;
}
.catalog-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--az-4xl) var(--az-xl);
text-align: center;
gap: var(--az-sm);
max-width: 440px;
margin: 0 auto;
}
.catalog-empty-icon {
font-size: 56px;
color: var(--az-text-muted);
margin-bottom: var(--az-sm);
}
.catalog-empty-title {
color: var(--az-text-primary);
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
margin: 0;
}
.catalog-empty-hint {
color: var(--az-text-tertiary);
font-size: var(--az-text-sm);
line-height: 1.55;
margin: 0;
}
.catalog-empty-actions {
display: flex;
gap: var(--az-sm);
margin-top: var(--az-lg);
flex-wrap: wrap;
justify-content: center;
}
.catalog-empty-cta { margin-top: var(--az-sm); }
.catalog-picker-search {
margin-bottom: var(--az-sm);
font-size: var(--az-text-sm);
}
.catalog-picker-empty-icon {
font-size: var(--az-text-xl);
display: block;
margin-bottom: var(--az-sm);
}
.catalog-picker-empty-hint {
font-size: var(--az-text-xs-plus);
}
.catalog-picker-empty-link {
color: var(--az-blue);
text-decoration: none;
font-weight: var(--az-font-medium);
cursor: pointer;
transition: opacity var(--az-transition);
}
.catalog-picker-empty-link:hover {
opacity: 0.8;
text-decoration: underline;
}
.catalog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--az-md);
}
.catalog-grid .catalog-card {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
padding: 0;
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-xl);
overflow: hidden;
transition: border-color var(--az-transition), transform var(--az-transition), box-shadow var(--az-transition);
position: relative;
}
.catalog-grid .catalog-card:hover {
border-color: var(--az-border-hover);
transform: translateY(-2px);
box-shadow: var(--az-shadow-sm);
}
.catalog-grid .catalog-card--archived {
opacity: 0.5;
}
.catalog-card-visual-wrap {
position: relative;
aspect-ratio: 4 / 3;
background: var(--az-bg-elevated);
overflow: hidden;
border-bottom: 1px solid var(--az-border);
}
.catalog-card-visual {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.catalog-card-visual img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: relative;
z-index: 2;
}
.catalog-card-visual--broken img { display: none; }
.catalog-card-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.catalog-card-placeholder--icon i {
font-size: 36px;
color: var(--az-text-muted);
transition: color var(--az-transition-fast);
}
.catalog-grid .catalog-card:hover .catalog-card-placeholder--icon i {
color: var(--az-text-tertiary);
}
.catalog-card-visual img + .catalog-card-placeholder--icon { display: none; }
.catalog-card-visual--broken .catalog-card-placeholder--icon { display: flex; }
.catalog-card-supplier-tag {
position: absolute;
top: var(--az-sm);
left: var(--az-sm);
z-index: 3;
}
.catalog-card-supplier-tag .catalog-card-supplier {
display: inline-block;
padding: 4px 8px;
border-radius: var(--az-radius-sm);
background: rgba(0, 0, 0, 0.65);
color: #fff;
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
letter-spacing: 0.04em;
text-transform: uppercase;
backdrop-filter: blur(4px);
}
.catalog-card-link {
position: absolute;
top: var(--az-sm);
right: var(--az-sm);
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.65);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: var(--az-text-md);
z-index: 3;
transition: var(--az-transition-fast);
backdrop-filter: blur(4px);
}
.catalog-card-link:hover {
background: var(--az-text-primary);
color: var(--az-bg-app);
transform: scale(1.08);
}
.catalog-card-overlay-actions {
position: absolute;
bottom: var(--az-sm);
right: var(--az-sm);
display: flex;
gap: var(--az-xs);
opacity: 0;
transition: opacity var(--az-transition-fast);
z-index: 3;
}
.catalog-grid .catalog-card:hover .catalog-card-overlay-actions {
opacity: 1;
}
.catalog-card-action-btn {
width: 30px;
height: 30px;
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.65);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--az-text-md);
backdrop-filter: blur(4px);
transition: var(--az-transition-fast);
}
.catalog-card-action-btn:hover {
background: var(--az-text-primary);
}
.catalog-card-body {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
padding: var(--az-md);
}
.catalog-card-brand {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--az-text-tertiary);
}
.catalog-grid .catalog-card-designation {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
margin-bottom: var(--az-2xs);
}
.catalog-grid .catalog-card-ref {
font-family: ui-monospace, SFMono-Regular, monospace;
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
}
.catalog-card-variants {
display: flex;
gap: var(--az-xs);
flex-wrap: wrap;
margin-top: var(--az-2xs);
}
.catalog-card-variant-badge {
font-size: var(--az-text-2xs);
padding: 2px 6px;
border-radius: var(--az-radius-sm);
background: var(--az-bg-card-hover);
color: var(--az-text-secondary);
font-weight: var(--az-font-medium);
}
.catalog-grid .catalog-card-meta {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
margin-top: var(--az-2xs);
}
.catalog-card-prices {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: var(--az-sm);
padding-top: var(--az-sm);
border-top: 1px solid var(--az-border);
}
.catalog-card-price-main {
font-size: var(--az-text-md);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
}
.catalog-card-price-cost {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
font-variant-numeric: tabular-nums;
}
.catalog-pagination {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--az-sm);
padding: var(--az-lg) 0 var(--az-md);
margin-top: var(--az-md);
border-top: 1px solid var(--az-border);
}
.catalog-pagination-info {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
font-variant-numeric: tabular-nums;
}
.catalog-pagination-controls {
display: flex;
align-items: center;
gap: var(--az-xs);
}
.catalog-pagination-btn {
width: 32px;
height: 32px;
border-radius: var(--az-radius-md);
border: 1px solid var(--az-border);
background: var(--az-bg-card);
color: var(--az-text-primary);
font-size: var(--az-text-md);
cursor: pointer;
transition: var(--az-transition-fast);
display: inline-flex;
align-items: center;
justify-content: center;
}
.catalog-pagination-btn:hover:not(:disabled) {
background: var(--az-bg-card-hover);
border-color: var(--az-border-hover);
}
.catalog-pagination-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.catalog-pagination-page {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
padding: 0 var(--az-sm);
font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) {
.catalog-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--az-sm);
}
.catalog-card-overlay-actions {
opacity: 1; 
}
}
.catalog-edit-overlay {
position: fixed;
inset: 0;
z-index: var(--az-z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: var(--az-lg);
}
.catalog-edit-backdrop {
position: absolute;
inset: 0;
background: var(--az-overlay-bg, rgba(0, 0, 0, 0.55));
backdrop-filter: blur(6px);
}
.catalog-edit-modal {
position: relative;
z-index: 1;
width: 100%;
max-width: 720px;
max-height: calc(100vh - 32px);
display: flex;
flex-direction: column;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-2xl);
box-shadow: var(--az-shadow-modal);
overflow: hidden;
}
.catalog-edit-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-lg) var(--az-xl);
border-bottom: 1px solid var(--az-border);
}
.catalog-edit-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.catalog-edit-close {
width: 32px;
height: 32px;
border-radius: var(--az-radius-md);
background: transparent;
border: none;
color: var(--az-text-secondary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--az-text-lg);
transition: var(--az-transition-fast);
}
.catalog-edit-close:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.catalog-edit-body {
display: grid;
grid-template-columns: 240px 1fr;
gap: var(--az-xl);
padding: var(--az-xl);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.catalog-edit-photo {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.catalog-edit-photo-preview {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: var(--az-radius-xl);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.catalog-edit-photo-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.catalog-edit-photo-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-xs);
color: var(--az-text-tertiary);
}
.catalog-edit-photo-empty i {
font-size: 40px;
}
.catalog-edit-photo-empty span {
font-size: var(--az-text-xs);
}
.catalog-edit-uploading {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--az-xs);
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: var(--az-text-sm);
border-radius: var(--az-radius-xl);
}
.catalog-edit-uploading i {
font-size: 28px;
animation: spin 0.9s linear infinite;
}
.catalog-edit-photo-preview {
position: relative;
}
.catalog-edit-photo-actions {
display: flex;
flex-wrap: wrap;
gap: var(--az-xs);
}
.catalog-edit-grid {
display: flex;
flex-direction: column;
gap: var(--az-md);
min-width: 0;
}
.catalog-edit-field {
display: flex;
flex-direction: column;
gap: var(--az-xs);
min-width: 0;
}
.catalog-edit-row-2,
.catalog-edit-row-3 {
display: grid;
gap: var(--az-md);
}
.catalog-edit-row-2 { grid-template-columns: 1fr 1fr; }
.catalog-edit-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.catalog-edit-chips {
display: flex;
flex-wrap: wrap;
gap: var(--az-xs);
min-height: 28px;
}
.catalog-edit-chips-empty {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
font-style: italic;
}
.catalog-edit-chip {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
height: 28px;
padding: 0 var(--az-sm) 0 var(--az-md);
border-radius: var(--az-radius-pill);
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
}
.catalog-edit-chip-remove {
width: 18px;
height: 18px;
border: none;
border-radius: 50%;
background: var(--az-bg-app);
color: var(--az-text-secondary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--az-text-md);
line-height: 1;
}
.catalog-edit-chip-remove:hover {
background: var(--az-red-bg);
color: var(--az-red);
}
.catalog-edit-chip-add input {
margin-top: var(--az-xs);
font-size: var(--az-text-sm);
}
.catalog-edit-footer {
display: flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-md) var(--az-xl);
border-top: 1px solid var(--az-border);
background: var(--az-bg-card);
}
.catalog-edit-footer-spacer { flex: 1; }
.btn-danger-ghost {
background: transparent;
border: 1px solid transparent;
color: var(--az-red);
padding: 8px 14px;
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: var(--az-transition-fast);
}
.btn-danger-ghost:hover {
background: var(--az-red-bg);
border-color: var(--az-red-border);
}
@media (max-width: 768px) {
.catalog-edit-modal {
max-width: 100%;
max-height: calc(100vh - env(safe-area-inset-bottom, 0px));
border-radius: var(--az-radius-xl);
}
.catalog-edit-body {
grid-template-columns: 1fr;
padding: var(--az-md);
gap: var(--az-md);
}
.catalog-edit-photo-preview { max-width: 200px; margin: 0 auto; }
.catalog-edit-row-2,
.catalog-edit-row-3 {
grid-template-columns: 1fr;
}
.catalog-edit-footer {
padding: var(--az-md);
flex-wrap: wrap;
}
}
.catalog-add-panel {
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-card-radius);
padding: var(--az-xl);
margin-bottom: var(--az-lg);
}
.catalog-add-panel .catalog-add-form {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.catalog-add-panel .form-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--az-md);
}
.catalog-add-panel .catalog-add-actions {
display: flex;
justify-content: flex-end;
gap: var(--az-sm);
padding-top: var(--az-sm);
border-top: 1px solid var(--az-border);
}
.catalog-import-trigger {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-sm);
}
.catalog-supplier-filter {
display: flex;
flex-wrap: wrap;
gap: var(--az-xs);
padding: var(--az-sm) 0;
border-bottom: 1px solid var(--az-border);
margin-bottom: var(--az-md);
}
.catalog-supplier-filter.hidden {
display: none;
}
.catalog-supplier-chip {
height: 28px;
padding: 0 var(--az-md);
border-radius: var(--az-radius-pill);
background: transparent;
border: 1px solid var(--az-border);
color: var(--az-text-secondary);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: var(--az-transition-fast);
}
.catalog-supplier-chip:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.catalog-supplier-chip.active {
background: var(--az-text-primary);
color: var(--az-bg-app);
border-color: var(--az-text-primary);
}
.catalog-supplier-tools {
display: inline-flex;
gap: var(--az-xs);
margin-left: auto;
}
.catalog-supplier-tool {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
height: 28px;
padding: 0 var(--az-md);
border-radius: var(--az-radius-pill);
background: transparent;
border: 1px solid var(--az-border);
color: var(--az-text-secondary);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: var(--az-transition-fast);
}
.catalog-supplier-tool:hover {
background: var(--az-red-bg);
color: var(--az-red);
border-color: var(--az-red-border);
}
.catalog-supplier-tool i {
font-size: var(--az-text-md);
}
.catalog-pattern-overlay {
position: fixed;
inset: 0;
z-index: var(--az-z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: var(--az-lg);
}
.catalog-pattern-backdrop {
position: absolute;
inset: 0;
background: var(--az-overlay-bg, rgba(0, 0, 0, 0.55));
backdrop-filter: blur(6px);
}
.catalog-pattern-modal {
position: relative;
z-index: 1;
width: 100%;
max-width: 560px;
max-height: calc(100vh - 32px);
display: flex;
flex-direction: column;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-2xl);
box-shadow: var(--az-shadow-modal);
overflow: hidden;
}
.catalog-pattern-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-lg) var(--az-xl);
border-bottom: 1px solid var(--az-border);
}
.catalog-pattern-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.catalog-pattern-body {
padding: var(--az-xl);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.catalog-pattern-help {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0;
}
.catalog-pattern-template {
padding: var(--az-md);
background: var(--az-bg-card);
border-radius: var(--az-radius-md);
border: 1px solid var(--az-border);
font-family: ui-monospace, SFMono-Regular, monospace;
font-size: var(--az-text-xs);
color: var(--az-text-primary);
word-break: break-all;
}
.catalog-pattern-template code {
background: transparent;
padding: 0;
}
.catalog-pattern-warn {
font-size: var(--az-text-xs);
color: var(--az-amber);
background: var(--az-amber-bg);
border: 1px solid var(--az-amber-border);
padding: var(--az-sm) var(--az-md);
border-radius: var(--az-radius-md);
margin: 0;
line-height: 1.5;
}
.catalog-pattern-warn code {
font-size: var(--az-text-2xs);
background: var(--az-bg-app);
padding: 1px 4px;
border-radius: var(--az-radius-xs);
}
.catalog-pattern-samples {
display: flex;
flex-direction: column;
gap: var(--az-xs);
padding: var(--az-md);
background: var(--az-bg-card);
border-radius: var(--az-radius-md);
border: 1px solid var(--az-border);
}
.catalog-pattern-sample {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
padding: var(--az-sm) 0;
border-bottom: 1px solid var(--az-border);
}
.catalog-pattern-sample:last-child {
border-bottom: none;
}
.catalog-pattern-sample-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.catalog-pattern-sample-name {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 220px;
}
.catalog-pattern-sample-ref {
font-family: ui-monospace, SFMono-Regular, monospace;
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
}
.catalog-pattern-sample-url {
flex-shrink: 0;
font-family: ui-monospace, SFMono-Regular, monospace;
font-size: var(--az-text-2xs);
color: var(--az-blue);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--az-xs);
max-width: 280px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.catalog-pattern-sample-url:hover {
text-decoration: underline;
}
.catalog-pattern-impact {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
margin: 0;
}
.catalog-pattern-footer {
display: flex;
justify-content: flex-end;
gap: var(--az-sm);
padding: var(--az-md) var(--az-xl);
border-top: 1px solid var(--az-border);
background: var(--az-bg-card);
}
.catalog-card-thumb {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: var(--az-radius-lg);
overflow: hidden;
background: var(--az-bg-card-hover);
border: 1px solid var(--az-border);
}
.catalog-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.catalog-card-thumb--broken {
display: none;
}
.catalog-card-tags {
display: flex;
flex-wrap: wrap;
gap: var(--az-xs);
margin-top: var(--az-xs);
align-items: center;
}
.catalog-card-supplier {
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 var(--az-sm);
border-radius: var(--az-radius-sm);
background: var(--az-blue-bg);
color: var(--az-blue);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.catalog-card-ref {
font-family: var(--az-font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
}
.catalog-card-prices {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
align-items: flex-end;
min-width: 140px;
}
.catalog-card-price-line {
display: flex;
gap: var(--az-sm);
align-items: baseline;
}
.catalog-card-price-label {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.catalog-card-price-purchase {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
font-variant-numeric: tabular-nums;
}
.catalog-import-overlay {
position: fixed;
inset: 0;
z-index: var(--az-z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: var(--az-lg);
}
.catalog-import-backdrop {
position: absolute;
inset: 0;
background: var(--az-overlay-bg, rgba(0, 0, 0, 0.5));
backdrop-filter: blur(4px);
}
.catalog-import-modal {
position: relative;
z-index: 1;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-2xl);
box-shadow: var(--az-shadow-modal);
width: 100%;
max-width: 720px;
max-height: calc(100vh - 32px);
display: flex;
flex-direction: column;
overflow: hidden;
}
.catalog-import-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-lg) var(--az-xl);
border-bottom: 1px solid var(--az-border);
}
.catalog-import-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.catalog-import-close {
width: 32px;
height: 32px;
border-radius: var(--az-radius-md);
background: transparent;
border: none;
color: var(--az-text-secondary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--az-text-lg);
transition: var(--az-transition-fast);
}
.catalog-import-close:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.catalog-import-body {
padding: var(--az-xl);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.catalog-import-step {
display: flex;
flex-direction: column;
gap: var(--az-lg);
}
.catalog-import-step-title {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.catalog-import-help {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
line-height: 1.5;
margin: 0;
}
.catalog-import-field {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.catalog-import-actions {
display: flex;
justify-content: flex-end;
gap: var(--az-sm);
padding-top: var(--az-md);
border-top: 1px solid var(--az-border);
}
.catalog-import-dropzone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--az-xs);
padding: var(--az-3xl) var(--az-xl);
border: 2px dashed var(--az-border);
border-radius: var(--az-radius-xl);
background: var(--az-bg-card);
cursor: pointer;
transition: var(--az-transition-fast);
}
.catalog-import-dropzone:hover,
.catalog-import-dropzone.is-dragover {
border-color: var(--az-blue);
background: var(--az-blue-bg);
}
.catalog-import-error {
padding: var(--az-md);
border-radius: var(--az-radius-lg);
background: var(--az-red-bg);
border: 1px solid var(--az-red-border);
color: var(--az-red);
font-size: var(--az-text-sm);
line-height: 1.4;
}
.catalog-import-error.hidden {
display: none;
}
.catalog-import-dropzone-icon {
font-size: 40px;
color: var(--az-text-tertiary);
}
.catalog-import-dropzone-title {
font-size: var(--az-text-md);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
}
.catalog-import-dropzone-hint {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.catalog-import-loading {
display: flex;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.catalog-import-loading.hidden {
display: none;
}
.catalog-import-spinner {
font-size: var(--az-text-lg);
animation: spin 0.9s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.catalog-import-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: var(--az-sm);
}
.catalog-import-stat {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
padding: var(--az-md);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
background: var(--az-bg-card);
}
.catalog-import-stat-value {
font-size: var(--az-text-xl);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
}
.catalog-import-stat-label {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.catalog-import-stat--warn .catalog-import-stat-value {
color: var(--az-amber);
}
.catalog-import-section {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.catalog-import-section-title {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.catalog-import-map {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--az-sm);
}
.catalog-import-map-row {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
}
.catalog-import-map-label {
font-size: var(--az-text-2xs);
color: var(--az-text-secondary);
font-weight: var(--az-font-medium);
}
.catalog-import-req {
color: var(--az-red);
}
.catalog-import-map-select {
font-size: var(--az-text-sm);
height: 32px;
}
.catalog-import-preview-wrap {
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
overflow: auto;
max-height: 200px;
background: var(--az-bg-card);
}
.catalog-import-preview-table {
width: 100%;
border-collapse: collapse;
font-size: var(--az-text-2xs);
}
.catalog-import-preview-table th,
.catalog-import-preview-table td {
padding: var(--az-xs) var(--az-sm);
text-align: left;
border-bottom: 1px solid var(--az-border);
white-space: nowrap;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
.catalog-import-preview-table th {
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
font-weight: var(--az-font-semibold);
position: sticky;
top: 0;
}
.catalog-import-preview-table td {
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
}
.catalog-import-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--az-md);
}
.catalog-import-radio-group {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.catalog-import-radio {
display: flex;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-sm);
color: var(--az-text-primary);
cursor: pointer;
}
.catalog-import-radio input {
accent-color: var(--az-blue);
}
.catalog-import-sheet-list {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.catalog-import-sheet-row {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-md);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
background: var(--az-bg-card);
cursor: pointer;
transition: var(--az-transition-fast);
}
.catalog-import-sheet-row:hover {
background: var(--az-bg-card-hover);
border-color: var(--az-border-hover);
}
.catalog-import-sheet-row.is-picked {
border-color: var(--az-blue);
background: var(--az-blue-bg);
}
.catalog-import-sheet-row input {
accent-color: var(--az-blue);
}
.catalog-import-sheet-name {
flex: 1;
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
}
.catalog-import-step--analyzing {
display: flex;
flex-direction: column;
gap: var(--az-lg);
}
.catalog-import-sheet-meta {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
font-variant-numeric: tabular-nums;
}
.wiz-v2-catalog-picker-field {
position: relative;
}
.wiz-v2-catalog-trigger {
display: flex;
align-items: center;
gap: var(--az-md);
width: 100%;
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-md) var(--az-md);
cursor: pointer;
transition: var(--az-transition-fast);
text-align: left;
}
.wiz-v2-catalog-trigger:hover {
border-color: var(--az-border-hover);
background: var(--az-bg-card);
}
.wiz-v2-catalog-trigger.has-selection {
border-color: var(--az-blue);
background: var(--az-blue-bg);
}
.wiz-v2-catalog-trigger-icon {
width: 36px;
height: 36px;
border-radius: var(--az-radius-md);
background: var(--az-bg-card);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--az-text-secondary);
flex-shrink: 0;
}
.wiz-v2-catalog-trigger-icon i { font-size: var(--az-text-xl); }
.wiz-v2-catalog-trigger.has-selection .wiz-v2-catalog-trigger-icon {
background: var(--az-blue);
color: var(--az-text-on-accent);
}
.wiz-v2-catalog-trigger-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.wiz-v2-catalog-trigger-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
line-height: 1.3;
}
.wiz-v2-catalog-trigger-sub {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
line-height: 1.3;
}
.wiz-v2-catalog-trigger.has-selection .wiz-v2-catalog-trigger-sub {
color: var(--az-blue);
font-weight: var(--az-font-medium);
}
.wiz-v2-catalog-trigger-chevron {
color: var(--az-text-tertiary);
flex-shrink: 0;
}
.wiz-v2-catalog-trigger-chevron i { font-size: var(--az-text-md); }
.wiz-v2-sheet-backdrop--secondary { z-index: calc(var(--az-z-modal) + 20); }
.wiz-v2-sheet--secondary { max-height: 85dvh; }
.wiz-v2-sheet-submit--secondary { margin-top: var(--az-md); }
.wiz-v2-catalog-search {
background: var(--az-bg-input);
}
.wiz-v2-catalog-results {
margin-top: var(--az-xs);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
background: var(--az-bg-elevated);
max-height: 280px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
}
.wiz-v2-catalog-results.hidden {
display: none;
}
.wiz-v2-catalog-item {
display: flex;
flex-direction: column;
background: transparent;
border: none;
border-bottom: 1px solid var(--az-border);
text-align: left;
}
.wiz-v2-catalog-item:last-child {
border-bottom: none;
}
.wiz-v2-catalog-item.is-selected {
background: var(--az-blue-bg);
}
.wiz-v2-catalog-item-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
padding: var(--az-sm) var(--az-md);
background: transparent;
border: none;
width: 100%;
text-align: left;
cursor: pointer;
min-height: 44px;
transition: background var(--az-transition-fast);
color: inherit;
font: inherit;
}
.wiz-v2-catalog-item-row:hover,
.wiz-v2-catalog-item-row:focus-visible {
background: var(--az-bg-card-hover);
outline: none;
}
.wiz-v2-catalog-item.is-selected .wiz-v2-catalog-item-row:hover {
background: var(--az-blue-bg);
}
.wiz-v2-catalog-item-check {
flex-shrink: 0;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--az-radius-pill);
border: 1px solid var(--az-border);
background: var(--az-bg-app);
color: var(--az-bg-app);
font-size: var(--az-text-xs);
font-weight: var(--az-font-bold);
transition: var(--az-transition-fast);
}
.wiz-v2-catalog-item.is-selected .wiz-v2-catalog-item-check {
background: var(--az-blue);
border-color: var(--az-blue);
color: #fff;
}
.wiz-v2-catalog-item-expand {
display: flex;
flex-direction: column;
gap: var(--az-sm);
padding: 0 var(--az-md) var(--az-md);
}
.wiz-v2-catalog-variant-row,
.wiz-v2-catalog-qty-row {
display: flex;
align-items: center;
gap: var(--az-sm);
flex-wrap: wrap;
}
.wiz-v2-catalog-variant-label {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
min-width: 60px;
}
.wiz-v2-catalog-variant-chips {
display: flex;
gap: var(--az-xs);
flex-wrap: wrap;
flex: 1;
}
.wiz-v2-catalog-variant-chip {
height: 28px;
padding: 0 var(--az-md);
border-radius: var(--az-radius-pill);
border: 1px solid var(--az-border);
background: var(--az-bg-app);
color: var(--az-text-secondary);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: var(--az-transition-fast);
}
.wiz-v2-catalog-variant-chip:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.wiz-v2-catalog-variant-chip.is-active {
background: var(--az-text-primary);
color: var(--az-bg-app);
border-color: var(--az-text-primary);
}
.wiz-v2-catalog-stepper {
display: inline-flex;
align-items: center;
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
background: var(--az-bg-app);
overflow: hidden;
height: 32px;
}
.wiz-v2-catalog-stepper-btn {
width: 32px;
height: 32px;
border: none;
background: transparent;
color: var(--az-text-primary);
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.wiz-v2-catalog-stepper-btn:hover {
background: var(--az-bg-card-hover);
}
.wiz-v2-catalog-stepper-input {
width: 48px;
height: 32px;
border: none;
border-left: 1px solid var(--az-border);
border-right: 1px solid var(--az-border);
background: transparent;
text-align: center;
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
outline: none;
}
.wiz-v2-catalog-selection-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-sm) var(--az-md);
margin-top: var(--az-xs);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
}
.wiz-v2-catalog-selection-bar.hidden {
display: none;
}
.wiz-v2-catalog-clear {
background: transparent;
border: none;
color: var(--az-blue);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
cursor: pointer;
padding: 0;
}
.wiz-v2-catalog-clear:hover {
text-decoration: underline;
}
.wiz-v2-faded {
opacity: 0.4;
pointer-events: none;
transition: opacity var(--az-transition-fast);
}
.wiz-v2-catalog-supplier-bar {
display: flex;
flex-wrap: wrap;
gap: var(--az-xs);
padding: 0 0 var(--az-xs);
margin-bottom: var(--az-xs);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.wiz-v2-catalog-supplier-chip {
flex-shrink: 0;
height: 26px;
padding: 0 var(--az-md);
border-radius: var(--az-radius-pill);
border: 1px solid var(--az-border);
background: transparent;
color: var(--az-text-secondary);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: var(--az-transition-fast);
}
.wiz-v2-catalog-supplier-chip:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.wiz-v2-catalog-supplier-chip.is-active {
background: var(--az-text-primary);
color: var(--az-bg-app);
border-color: var(--az-text-primary);
}
.catalog-import-history {
display: flex;
flex-direction: column;
gap: var(--az-xs);
padding: var(--az-md);
margin-bottom: var(--az-md);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
}
.catalog-import-history-title {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--az-xs);
}
.catalog-import-history-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
padding: var(--az-sm) var(--az-md);
background: var(--az-bg-app);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
}
.catalog-import-history-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.catalog-import-history-supplier {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
}
.catalog-import-history-meta {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.catalog-import-history-actions {
display: flex;
gap: var(--az-xs);
flex-shrink: 0;
}
.catalog-import-history-undo,
.catalog-import-history-reimport {
flex-shrink: 0;
height: 30px;
padding: 0 var(--az-md);
border-radius: var(--az-radius-md);
border: 1px solid var(--az-border);
background: transparent;
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: var(--az-transition-fast);
}
.catalog-import-history-undo {
color: var(--az-red);
}
.catalog-import-history-undo:hover {
background: var(--az-red-bg);
border-color: var(--az-red-border);
}
.catalog-import-history-reimport {
color: var(--az-blue);
border-color: var(--az-blue-border);
background: var(--az-blue-bg);
}
.catalog-import-history-reimport:hover {
background: var(--az-blue);
color: #fff;
border-color: var(--az-blue);
}
.catalog-import-history-warn {
color: var(--az-amber);
font-weight: var(--az-font-semibold);
}
.wiz-v2-catalog-item-thumb {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: var(--az-radius-md);
overflow: hidden;
background: var(--az-bg-card-hover);
border: 1px solid var(--az-border);
}
.wiz-v2-catalog-item-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.wiz-v2-catalog-item-thumb--broken {
display: none;
}
.wiz-v2-catalog-item-main {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.wiz-v2-catalog-item-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wiz-v2-catalog-item-sub {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wiz-v2-catalog-item-price {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.wiz-v2-catalog-empty {
padding: var(--az-md);
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
text-align: center;
}
@media (max-width: 768px) {
.catalog-picker-dropdown {
width: calc(100vw - 32px);
right: -16px;
max-height: 300px;
}
.client-suggestions-chips {
gap: var(--az-sm);
}
.catalog-card {
flex-wrap: wrap;
gap: var(--az-sm);
}
.catalog-card-price {
order: -1;
width: 100%;
}
.catalog-card-prices {
order: -1;
width: 100%;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.catalog-toolbar {
padding: var(--az-md) 0 var(--az-xs);
}
.catalog-import-trigger {
align-self: stretch;
justify-content: center;
}
.catalog-import-modal {
max-width: 100%;
max-height: calc(100vh - env(safe-area-inset-bottom, 0px));
border-radius: var(--az-radius-xl);
}
.catalog-import-body {
padding: var(--az-md);
}
.catalog-import-header {
padding: var(--az-md);
}
.catalog-import-options,
.catalog-import-map {
grid-template-columns: 1fr;
}
}
@keyframes skeleton-pulse {
0%, 100% { opacity: 0.8; }
50% { opacity: 0.4; }
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton {
background: linear-gradient(
90deg,
var(--az-bg-elevated) 25%,
var(--az-bg-card-hover) 50%,
var(--az-bg-elevated) 75%
);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: var(--az-radius-sm);
}
.skeleton-text {
height: var(--az-lg);
border-radius: var(--az-radius-sm);
}
.skeleton-text-sm {
height: var(--az-md);
width: 60%;
border-radius: var(--az-radius-sm);
}
.skeleton-circle {
border-radius: 50%;
}
.skeleton-avatar {
width: var(--az-touch-min);
height: var(--az-touch-min);
border-radius: 50%;
}
.skeleton-row td {
padding: var(--az-sm) var(--az-md);
}
.skeleton-doc-name {
width: 60%;
height: var(--az-lg);
}
.skeleton-doc-ref {
width: 80%;
height: var(--az-md);
}
.skeleton-doc-amount {
width: 40%;
height: var(--az-md);
}
.documents-filter-warning {
padding: var(--az-lg);
text-align: center;
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
}
.skeleton-card {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-lg);
margin-bottom: var(--az-sm);
}
.az-date-wrap {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.az-date-wrap .az-date-input {
flex: 1;
padding-right: var(--az-3xl);
font-variant-numeric: tabular-nums;
letter-spacing: 0.03em;
}
.az-date-wrap .az-date-input::placeholder {
color: var(--az-text-muted);
opacity: 0.6;
letter-spacing: 0.06em;
}
.az-date-cal-btn {
position: absolute;
right: var(--az-xs);
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: var(--az-icon-btn-sm);
height: var(--az-icon-btn-sm);
padding: 0;
border: none;
border-radius: var(--az-radius-sm);
background: transparent;
color: var(--az-text-tertiary);
cursor: pointer;
transition: background var(--az-transition-fast), color var(--az-transition-fast);
}
.az-date-cal-btn:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.az-date-cal-btn i {
font-size: var(--az-text-md);
}
.az-date-input.az-date-valid {
border-color: var(--az-green-border);
}
.az-date-input.az-date-invalid {
border-color: var(--az-red-border);
}
.az-time-wrap {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.az-time-wrap .az-time-input {
flex: 1;
padding-right: var(--az-3xl);
font-variant-numeric: tabular-nums;
letter-spacing: 0.05em;
}
.az-time-wrap .az-time-input::placeholder {
color: var(--az-text-muted);
opacity: 0.6;
letter-spacing: 0.08em;
}
.az-time-icon {
position: absolute;
right: var(--az-sm);
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
color: var(--az-text-tertiary);
pointer-events: none;
}
.az-time-icon i {
font-size: var(--az-text-md);
}
.az-time-input.az-time-valid {
border-color: var(--az-green-border);
}
.az-time-input.az-time-invalid {
border-color: var(--az-red-border);
}
.flatpickr-calendar {
background: var(--az-bg-surface);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
box-shadow: var(--az-shadow-dropdown);
font-family: inherit;
width: 280px;
z-index: var(--az-z-dropdown);
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
display: none;
}
.flatpickr-months {
background: transparent;
padding: var(--az-xs) 0;
}
.flatpickr-months .flatpickr-month {
background: transparent;
color: var(--az-text-primary);
fill: var(--az-text-primary);
height: 36px;
}
.flatpickr-current-month {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
padding-top: var(--az-xs);
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
background: var(--az-bg-surface);
color: var(--az-text-primary);
border: none;
font-weight: var(--az-font-semibold);
appearance: none;
-webkit-appearance: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
background: var(--az-bg-card-hover);
}
.flatpickr-current-month input.cur-year {
color: var(--az-text-primary);
font-weight: var(--az-font-semibold);
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
color: var(--az-text-secondary);
fill: var(--az-text-secondary);
padding: var(--az-xs);
border-radius: var(--az-radius-sm);
transition: background var(--az-transition-fast);
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
fill: var(--az-text-primary);
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
fill: currentColor;
}
.flatpickr-weekdays {
background: transparent;
}
span.flatpickr-weekday {
color: var(--az-text-tertiary);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
background: transparent;
}
.flatpickr-day {
color: var(--az-text-primary);
border-radius: var(--az-radius-sm);
border: 1px solid transparent;
transition: background 0.12s ease, border-color 0.12s ease;
max-width: 34px;
height: 34px;
line-height: 34px;
font-size: var(--az-text-xs);
}
.flatpickr-day:hover,
.flatpickr-day:focus {
background: var(--az-bg-card-hover);
border-color: var(--az-border-hover);
}
.flatpickr-day.today:not(.selected) {
border-color: var(--az-blue);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
background: var(--az-blue);
border-color: var(--az-blue);
color: var(--az-text-on-accent);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
color: var(--az-text-muted);
}
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
background: var(--az-bg-card-hover);
border-color: transparent;
}
.numInputWrapper span {
border: none;
}
.numInputWrapper span:hover {
background: var(--az-bg-card-hover);
}
.numInputWrapper span svg path {
fill: var(--az-text-secondary);
}
.flatpickr-alt-input {
cursor: pointer;
}
#receipt-modal .modal-content {
max-width: 400px;
}
.receipt-modal-subtitle {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
margin: 0 0 var(--az-lg);
}
html:not(.dark-mode) .flatpickr-calendar {
background: var(--az-bg-card);
border-color: var(--az-border);
}
html:not(.dark-mode) .flatpickr-day {
color: var(--az-text-primary);
}
html:not(.dark-mode) .flatpickr-day:hover {
background: var(--az-bg-card-hover);
border-color: var(--az-border-hover);
}
html:not(.dark-mode) .flatpickr-day.selected,
html:not(.dark-mode) .flatpickr-day.selected:hover {
background: var(--az-blue);
color: var(--az-bg-card);
}
html:not(.dark-mode) span.flatpickr-weekday {
color: var(--az-text-tertiary);
}
html:not(.dark-mode) .flatpickr-current-month {
color: var(--az-text-primary);
}
html:not(.dark-mode) .flatpickr-current-month .flatpickr-monthDropdown-months {
background: var(--az-bg-card);
color: var(--az-text-primary);
}
html:not(.dark-mode) .flatpickr-months .flatpickr-prev-month,
html:not(.dark-mode) .flatpickr-months .flatpickr-next-month {
color: var(--az-text-tertiary);
fill: var(--az-text-tertiary);
}
html:not(.dark-mode) .flatpickr-months .flatpickr-prev-month:hover,
html:not(.dark-mode) .flatpickr-months .flatpickr-next-month:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
fill: var(--az-text-primary);
}
html:not(.dark-mode) .flatpickr-current-month input.cur-year {
color: var(--az-text-primary);
}
html:not(.dark-mode) .flatpickr-day.prevMonthDay,
html:not(.dark-mode) .flatpickr-day.nextMonthDay {
color: var(--az-text-disabled);
}
html:not(.dark-mode) .numInputWrapper span svg path {
fill: var(--az-text-tertiary);
}
.sealed-badge {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
color: var(--az-text-tertiary);
font-size: var(--az-text-2xs);
margin-left: var(--az-xs);
vertical-align: middle;
}
.sealed-badge i {
font-size: var(--az-text-xs);
opacity: 0.7;
}
.payment-modal-container {
display: flex;
flex-direction: column;
gap: var(--az-xl);
}
.payment-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-lg);
}
.payment-modal-header-left {
display: flex;
align-items: center;
gap: var(--az-sm);
min-width: 0;
}
.payment-modal-ref {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
white-space: nowrap;
}
.payment-modal-client {
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.payment-modal-amount-total {
font-size: var(--az-text-lg);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.payment-modal-progress {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.payment-progress-bar {
height: var(--az-md);
background: var(--az-bg-elevated);
border-radius: var(--az-radius-pill);
overflow: hidden;
border: 1px solid var(--az-border);
}
.payment-progress-fill {
height: 100%;
width: 0;
border-radius: var(--az-radius-pill);
transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.payment-progress-fill--animated {
width: var(--payment-progress-w, 0%);
}
.payment-progress-fill--empty {
background: var(--az-bg-elevated);
}
.payment-progress-fill--active {
background: var(--az-blue);
}
.payment-progress-fill--high {
background: var(--az-amber);
}
.payment-progress-fill--complete {
background: var(--az-green);
}
.payment-progress-stats {
display: flex;
align-items: center;
justify-content: space-between;
}
.payment-progress-paid {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
font-variant-numeric: tabular-nums;
}
.payment-progress-percent {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
}
.payment-remaining-badge {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
align-self: flex-start;
padding: var(--az-xs) var(--az-md);
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-amber);
background: var(--az-amber-bg);
border: 1px solid var(--az-amber-border);
border-radius: var(--az-radius-pill);
font-variant-numeric: tabular-nums;
}
.payment-remaining-badge--paid {
color: var(--az-green);
background: var(--az-green-bg);
border-color: var(--az-green-border);
}
.payment-modal-form {
display: flex;
flex-direction: column;
gap: var(--az-lg);
}
.payment-form-row {
display: flex;
gap: var(--az-md);
}
.payment-form-field {
display: flex;
flex-direction: column;
gap: var(--az-xs);
flex: 1;
min-width: 0;
}
.payment-form-field--amount {
flex: 1.2;
}
.payment-form-field--date {
flex: 1.2;
}
.payment-form-field--method {
flex: 1;
}
.payment-form-field--note {
flex: 1;
}
.payment-form-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
}
.payment-label-optional {
font-weight: var(--az-font-normal);
color: var(--az-text-muted);
}
.payment-input {
height: var(--az-input-h);
padding: var(--az-input-pad);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
color: var(--az-text-primary);
font-size: var(--az-text-sm);
font-family: var(--az-font);
transition: border-color var(--az-transition-fast);
width: 100%;
}
.payment-input:focus {
outline: none;
border-color: var(--az-border-focus);
background: var(--az-bg-input-focus);
}
.payment-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.payment-input-wrap .payment-input {
padding-right: var(--az-2xl);
}
.payment-input-suffix {
position: absolute;
right: var(--az-md);
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
pointer-events: none;
}
.payment-submit-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
padding: var(--az-sm) var(--az-lg);
height: var(--az-input-h);
background: var(--az-blue);
color: var(--az-text-on-accent);
border: none;
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: background var(--az-transition-fast);
}
.payment-submit-btn:hover {
background: var(--az-blue-hover);
}
.payment-submit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.payment-history-section {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.payment-history-title {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
letter-spacing: 0.03em;
}
.payment-history-list {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.payment-history-row {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-sm) var(--az-md);
background: var(--az-bg-elevated);
border-radius: var(--az-radius-md);
border: 1px solid var(--az-border);
transition: border-color var(--az-transition-fast);
}
.payment-history-row:hover {
border-color: var(--az-border-hover);
}
.payment-history-icon {
display: flex;
align-items: center;
justify-content: center;
width: var(--az-2xl);
height: var(--az-2xl);
border-radius: var(--az-radius-md);
background: var(--az-blue-bg);
color: var(--az-blue);
font-size: var(--az-text-md);
flex-shrink: 0;
}
.payment-history-info {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
min-width: 0;
flex: 1;
}
.payment-history-main {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.payment-history-method {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
white-space: nowrap;
}
.payment-history-date {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
white-space: nowrap;
}
.payment-history-note {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.payment-history-right {
display: flex;
align-items: center;
gap: var(--az-sm);
flex-shrink: 0;
}
.payment-history-amount {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-green);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.payment-delete-btn {
display: flex;
align-items: center;
justify-content: center;
width: var(--az-xl);
height: var(--az-xl);
background: transparent;
border: none;
border-radius: var(--az-radius-sm);
color: var(--az-text-muted);
cursor: pointer;
opacity: 0;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast), transform var(--az-transition-fast);
}
.payment-history-row:hover .payment-delete-btn {
opacity: 1;
}
.payment-delete-btn:hover {
color: var(--az-red);
background: var(--az-red-bg);
}
.payment-history-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-sm);
padding: var(--az-2xl) var(--az-lg);
color: var(--az-text-muted);
}
.payment-history-empty-icon {
font-size: var(--az-text-xl);
opacity: 0.4;
}
.payment-history-empty span {
font-size: var(--az-text-xs);
}
.deposit-modal-container {
display: flex;
flex-direction: column;
gap: var(--az-xl);
}
.deposit-modal-summary {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.deposit-modal-ref {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
}
.deposit-progress-wrap {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.deposit-progress-bar {
height: var(--az-sm);
background: var(--az-bg-elevated);
border-radius: var(--az-radius-pill);
overflow: hidden;
border: 1px solid var(--az-border);
}
.deposit-progress-fill {
height: 100%;
background: var(--az-blue);
border-radius: var(--az-radius-pill);
transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.deposit-progress-fill.deposit-progress-complete {
background: var(--az-green);
}
.deposit-progress-labels {
display: flex;
justify-content: space-between;
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
}
.deposit-remaining {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-blue);
}
.deposit-remaining.deposit-remaining-complete {
color: var(--az-green);
}
.deposit-modal-form {
display: flex;
flex-direction: column;
gap: var(--az-md);
padding: var(--az-lg);
background: var(--az-bg-elevated);
border-radius: var(--az-radius-lg);
border: 1px solid var(--az-border);
}
.deposit-form-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.deposit-form-mode {
display: flex;
gap: var(--az-xs);
padding: var(--az-2xs);
background: var(--az-bg-input);
border-radius: var(--az-radius-md);
border: 1px solid var(--az-border);
}
.deposit-mode-btn {
flex: 1;
padding: var(--az-xs-plus) var(--az-md);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-tertiary);
background: transparent;
border: none;
border-radius: var(--az-radius-sm);
cursor: pointer;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast), transform var(--az-transition-fast);
}
.deposit-mode-btn:hover {
color: var(--az-text-secondary);
}
.deposit-mode-btn.deposit-mode-active {
background: var(--az-blue-bg);
color: var(--az-blue);
border: 1px solid var(--az-blue-border);
}
.deposit-form-fields {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.deposit-form-field {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.deposit-field-hidden {
display: none;
}
.deposit-form-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
}
.deposit-input {
height: var(--az-input-h);
padding: var(--az-input-pad);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
color: var(--az-text-primary);
font-size: var(--az-text-sm);
transition: border-color var(--az-transition-fast);
}
.deposit-input:focus {
outline: none;
border-color: var(--az-border-focus);
background: var(--az-bg-input-focus);
}
.deposit-input-wrap {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.deposit-input-sm {
width: var(--az-4xl);
text-align: center;
padding: var(--az-xs) var(--az-sm);
}
.deposit-input-wrap .deposit-input:not(.deposit-input-sm) {
width: 100%;
}
.deposit-input-suffix {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
white-space: nowrap;
}
.deposit-slider {
flex: 1;
height: var(--az-xs);
appearance: none;
background: var(--az-bg-elevated);
border-radius: var(--az-radius-pill);
outline: none;
}
.deposit-slider::-webkit-slider-thumb {
appearance: none;
width: var(--az-lg);
height: var(--az-lg);
border-radius: var(--az-radius-pill);
background: var(--az-blue);
cursor: pointer;
border: 2px solid var(--az-bg-card);
box-shadow: 0 0 0 1px var(--az-blue-border);
}
.deposit-slider-value {
display: flex;
align-items: center;
gap: var(--az-2xs);
flex-shrink: 0;
}
.deposit-computed-amount {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
padding: var(--az-sm) 0;
border-top: 1px solid var(--az-border);
}
.deposit-computed-amount strong {
color: var(--az-text-primary);
font-weight: var(--az-font-semibold);
}
.deposit-submit-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
padding: var(--az-sm) var(--az-lg);
background: var(--az-blue);
color: var(--az-text-on-accent);
border: none;
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: opacity var(--az-transition-fast);
}
.deposit-submit-btn:hover {
opacity: 0.9;
}
.deposit-submit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.deposit-solde-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
padding: var(--az-sm) var(--az-lg);
background: var(--az-green);
color: var(--az-text-on-accent);
border: none;
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: opacity var(--az-transition-fast);
}
.deposit-solde-btn:hover {
opacity: 0.9;
}
.deposit-solde-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.deposit-solde-complete {
display: flex;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-sm);
color: var(--az-green);
font-weight: var(--az-font-medium);
}
.deposit-solde-complete i {
font-size: var(--az-text-lg);
}
.deposit-history-section {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.deposit-history-title {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.deposit-history-list {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
}
.deposit-history-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-sm) var(--az-md);
background: var(--az-bg-elevated);
border-radius: var(--az-radius-md);
border: 1px solid var(--az-border);
}
.deposit-history-info {
display: flex;
align-items: center;
gap: var(--az-md);
min-width: 0;
}
.deposit-history-number {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
white-space: nowrap;
}
.deposit-history-date {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
white-space: nowrap;
}
.deposit-history-pct {
font-size: var(--az-text-xs);
color: var(--az-blue);
font-weight: var(--az-font-medium);
white-space: nowrap;
}
.deposit-history-amount {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.deposit-history-empty {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
text-align: center;
padding: var(--az-lg);
}
.badge-deposit {
display: inline-flex;
align-items: center;
padding: var(--az-2xs) var(--az-sm);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
color: var(--az-blue);
background: var(--az-blue-bg);
border: 1px solid var(--az-blue-border);
border-radius: var(--az-radius-pill);
white-space: nowrap;
}
.badge-deposit.badge-deposit-complete {
color: var(--az-green);
background: var(--az-green-bg);
border-color: var(--az-green-border);
}
.portal-admin-container {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.portal-admin-description {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
line-height: 1.5;
}
.portal-admin-actions {
display: flex;
gap: var(--az-sm);
}
.portal-admin-btn {
display: inline-flex;
align-items: center;
gap: var(--az-xs-plus);
padding: var(--az-sm) var(--az-md);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
border-radius: var(--az-radius-md);
border: 1px solid var(--az-border);
cursor: pointer;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast), transform var(--az-transition-fast);
font-family: inherit;
background: transparent;
color: var(--az-text-primary);
}
.portal-btn-generate {
background: var(--az-blue-bg);
border-color: var(--az-blue-border);
color: var(--az-blue);
}
.portal-btn-generate:hover {
background: var(--az-blue);
color: var(--az-text-on-accent);
}
.portal-admin-link-wrap {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.portal-admin-link-wrap.hidden,
.portal-admin-actions.hidden {
display: none;
}
.portal-admin-link-row {
display: flex;
gap: var(--az-sm);
align-items: center;
}
.portal-admin-link-input {
flex: 1;
font-size: var(--az-text-xs);
font-family: var(--az-font-mono);
color: var(--az-text-secondary);
text-overflow: ellipsis;
}
.portal-btn-copy {
flex-shrink: 0;
padding: var(--az-sm);
background: var(--az-bg-elevated);
}
.portal-btn-copy:hover {
background: var(--az-blue-bg);
border-color: var(--az-blue-border);
color: var(--az-blue);
}
.portal-admin-meta {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
}
.portal-btn-revoke {
color: var(--az-red);
border-color: var(--az-red-border);
background: var(--az-red-bg);
}
.portal-btn-revoke:hover {
background: var(--az-red);
color: var(--az-text-on-accent);
}
.sort-chip:focus-visible,
.sort-chip-compact:focus-visible,
.filter-option:focus-visible,
.row-action-item:focus-visible,
.bottom-nav-item:focus-visible,
.mobile-nav-item:focus-visible,
.catalog-picker-item:focus-visible,
.catalog-card-btn:focus-visible,
.color-swatch:focus-visible,
.client-suggestion-chip:focus-visible {
box-shadow: var(--az-focus-ring);
outline: none;
}
.glass-card {
backdrop-filter: blur(var(--az-glass-blur));
-webkit-backdrop-filter: blur(var(--az-glass-blur));
background: var(--az-glass-card-bg);
border: 1px solid var(--az-glass-card-border);
box-shadow: var(--az-glass-card-shadow);
border-radius: var(--az-radius-xl);
}
dialog.az-bottom-sheet {
position: fixed;
inset: auto 0 0 0;
max-height: 85dvh;
width: 100%;
max-width: 100%;
border: none;
overflow-x: hidden;
touch-action: pan-y;
overscroll-behavior: contain;
border-radius: var(--az-radius-xl) var(--az-radius-xl) 0 0;
background: var(--az-bg-surface);
padding: var(--az-md) var(--az-lg);
padding-bottom: max(var(--az-lg), env(safe-area-inset-bottom));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-shadow: var(--az-shadow-modal);
z-index: var(--az-z-modal);
translate: 0 0;
opacity: 1;
transition:
translate 0.35s var(--az-ease-sheet),
opacity 0.25s ease,
overlay 0.35s allow-discrete,
display 0.35s allow-discrete;
}
dialog.az-bottom-sheet:not([open]) {
translate: 0 100%;
opacity: 0;
}
@starting-style {
dialog.az-bottom-sheet[open] {
translate: 0 100%;
opacity: 0;
}
}
dialog.az-bottom-sheet::backdrop {
background: var(--az-overlay-bg);
opacity: 1;
transition: opacity 0.3s ease,
overlay 0.35s allow-discrete,
display 0.35s allow-discrete;
}
dialog.az-bottom-sheet:not([open])::backdrop {
opacity: 0;
}
@starting-style {
dialog.az-bottom-sheet[open]::backdrop {
opacity: 0;
}
}
dialog.az-bottom-sheet .bottom-sheet-handle {
width: 36px;
height: 4px;
background: var(--az-text-muted);
border-radius: var(--az-2xs);
margin: 0 auto var(--az-lg);
}
.transaction-row {
display: grid;
grid-template-columns: var(--az-touch-min) 1fr auto;
grid-template-rows: auto auto;
gap: 0 var(--az-md);
align-items: center;
padding: var(--az-md) var(--az-lg);
transition: background var(--az-transition-fast);
}
.transaction-row:hover {
background: var(--az-bg-card-hover);
}
.transaction-icon {
grid-row: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
width: var(--az-touch-min);
height: var(--az-touch-min);
border-radius: var(--az-radius-lg);
background: var(--az-bg-elevated);
font-size: var(--az-text-xl);
color: var(--az-text-secondary);
}
.transaction-title {
grid-column: 2;
font-weight: var(--az-font-medium);
font-size: var(--az-text-md);
color: var(--az-text-primary);
line-height: 1.3;
}
.transaction-subtitle {
grid-column: 2;
color: var(--az-text-tertiary);
font-size: var(--az-text-sm);
line-height: 1.3;
}
.transaction-amount {
grid-column: 3;
grid-row: 1 / -1;
font-variant-numeric: tabular-nums;
text-align: right;
font-weight: var(--az-font-semibold);
font-size: var(--az-text-md);
color: var(--az-text-primary);
}
.transaction-amount.positive {
color: var(--az-green);
}
.transaction-amount.negative {
color: var(--az-red);
}
.transaction-date-header {
position: sticky;
top: 0;
background: var(--az-bg-app);
padding: var(--az-sm) var(--az-lg);
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
z-index: 1;
}
.spring-enter {
transition: transform 0.5s var(--az-ease-spring),
opacity 0.3s ease;
}
.spring-scale {
transition: transform 0.4s var(--az-ease-spring);
}
.spring-scale:active {
filter: brightness(0.92);
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--az-lg);
}
.card-grid-item {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
}
.az-carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
gap: var(--az-lg);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.az-carousel::-webkit-scrollbar {
display: none;
}
.az-carousel-item {
flex: 0 0 auto;
scroll-snap-align: center;
scroll-snap-stop: always;
}
@supports (selector(::scroll-marker)) {
.az-carousel::scroll-marker-group {
display: flex;
gap: var(--az-xs);
justify-content: center;
padding-top: var(--az-md);
}
.az-carousel-item::scroll-marker {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--az-text-muted);
transition: color 0.3s var(--az-ease-snappy), background-color 0.3s var(--az-ease-snappy), border-color 0.3s var(--az-ease-snappy), opacity 0.3s var(--az-ease-snappy), transform 0.3s var(--az-ease-snappy);
}
.az-carousel-item::scroll-marker:target-current {
background: var(--az-blue);
width: 24px;
border-radius: var(--az-radius-pill);
}
}
.profile-photo-group {
margin-bottom: var(--az-lg);
}
.file-input-hidden {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
}
.profile-photo-upload {
display: flex;
align-items: center;
gap: var(--az-lg);
cursor: pointer;
}
.profile-photo-preview {
position: relative;
width: 72px;
height: 72px;
border-radius: var(--az-radius-pill);
background: var(--az-bg-alt);
border: 1px solid var(--az-border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
cursor: pointer;
}
.profile-photo-initial {
font-size: var(--az-text-xl);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
line-height: 1;
}
.profile-photo-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--az-radius-pill);
}
.profile-photo-img.hidden {
display: none;
}
.profile-photo-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.35);
border-radius: var(--az-radius-pill);
opacity: 0;
transition: opacity 0.15s ease;
}
.profile-photo-overlay i {
font-size: var(--az-text-xl);
color: #fff;
}
.profile-photo-preview:hover .profile-photo-overlay {
opacity: 1;
}
.profile-photo-meta {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
}
.profile-photo-label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-blue);
cursor: pointer;
}
.profile-photo-hint {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.profile-photo-delete {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
background: none;
border: none;
padding: 0;
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-red);
cursor: pointer;
margin-top: var(--az-2xs);
}
.profile-photo-delete:hover {
text-decoration: underline;
}
.profile-photo-delete.hidden {
display: none;
}
html:not(.dark-mode) .nav-link.active {
background: var(--az-bg-elevated);
text-shadow: 0 0 0.6px currentColor;
}
html:not(.dark-mode) .cockpit-widget,
html:not(.dark-mode) .kpi-card-premium {
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: var(--az-shadow);
}
html:not(.dark-mode) .cockpit-widget:hover,
html:not(.dark-mode) .kpi-card-premium:hover {
background: var(--az-bg-card);
border-color: rgba(0, 0, 0, 0.10);
box-shadow: var(--az-shadow-lg);
}
html:not(.dark-mode) .chart-container {
box-shadow: var(--az-shadow-sm);
}
html:not(.dark-mode) .glass-card {
box-shadow: var(--az-shadow-sm);
}
html:not(.dark-mode) .avatar-blue {
background: rgba(0, 122, 255, 0.14);
border-color: rgba(0, 122, 255, 0.22);
}
html:not(.dark-mode) .avatar-purple {
background: rgba(124, 58, 237, 0.14);
border-color: rgba(124, 58, 237, 0.22);
}
html:not(.dark-mode) .avatar-green {
background: rgba(36, 138, 61, 0.14);
border-color: rgba(36, 138, 61, 0.22);
}
html:not(.dark-mode) .avatar-amber {
background: rgba(201, 52, 0, 0.14);
border-color: rgba(201, 52, 0, 0.22);
}
html:not(.dark-mode) .avatar-cyan {
background: rgba(14, 116, 144, 0.14);
border-color: rgba(14, 116, 144, 0.22);
}
html:not(.dark-mode) .avatar-red {
background: rgba(215, 0, 21, 0.14);
border-color: rgba(215, 0, 21, 0.22);
}
html:not(.dark-mode) .btn-icon-premium {
background: var(--az-bg-card);
border-color: var(--az-glass-border);
}
html:not(.dark-mode) .btn-icon-premium:hover {
background: var(--az-bg-card-hover);
}
html:not(.dark-mode) .btn-secondary:hover {
background: var(--az-bg-card-hover);
}
html:not(.dark-mode) .table thead th {
color: var(--az-text-secondary);
background: var(--az-bg-card);
border-bottom: 1px solid var(--az-border);
}
html:not(.dark-mode) .table tbody tr:nth-child(even) {
background: rgba(60, 60, 67, 0.04);
}
html:not(.dark-mode) .table-container {
box-shadow: var(--az-shadow-sm);
}
html:not(.dark-mode) .notification-slide {
box-shadow: var(--az-shadow-sm);
}
html:not(.dark-mode) .quarterly-card {
background: var(--az-bg-card);
border-color: var(--az-glass-border);
box-shadow: var(--az-shadow-sm);
}
html:not(.dark-mode) .quarterly-badge--q1 { background: rgba(94, 106, 210, 0.22); color: var(--az-indigo); }
html:not(.dark-mode) .quarterly-badge--q2 { background: rgba(76, 183, 130, 0.22); color: var(--az-green); }
html:not(.dark-mode) .quarterly-badge--q3 { background: rgba(245, 158, 11, 0.22); color: var(--az-amber); }
html:not(.dark-mode) .quarterly-badge--q4 { background: rgba(217, 79, 87, 0.22); color: var(--az-red); }
.pdf-viewer-modal {
position: fixed;
inset: 0;
z-index: var(--az-z-modal);
display: flex;
align-items: flex-end;
justify-content: center;
pointer-events: none;
}
.pdf-viewer-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.72);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
opacity: 0;
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: auto;
}
.pdf-viewer-surface {
position: relative;
width: 100%;
max-width: 1100px;
height: 100vh;
height: 100dvh;
background: var(--az-bg-app);
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: auto;
overflow: hidden;
outline: none;
}
.pdf-viewer-surface:focus {
outline: none;
}
@media (min-width: 768px) {
.pdf-viewer-modal {
align-items: center;
padding: var(--az-lg);
}
.pdf-viewer-surface {
height: min(92vh, 1200px);
max-height: 92vh;
border-radius: var(--az-radius-2xl);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--az-border);
transform: scale(0.96) translateY(12px);
opacity: 0;
transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease-out;
}
}
.pdf-viewer--open .pdf-viewer-backdrop {
opacity: 1;
}
.pdf-viewer--open .pdf-viewer-surface {
transform: translateY(0);
}
@media (min-width: 768px) {
.pdf-viewer--open .pdf-viewer-surface {
transform: scale(1) translateY(0);
opacity: 1;
}
}
.pdf-viewer--closing .pdf-viewer-backdrop {
opacity: 0;
transition-duration: 0.2s;
}
.pdf-viewer--closing .pdf-viewer-surface {
transform: translateY(100%);
transition-duration: 0.22s;
}
@media (min-width: 768px) {
.pdf-viewer--closing .pdf-viewer-surface {
transform: scale(0.96) translateY(12px);
opacity: 0;
}
}
.pdf-viewer-header {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
padding: var(--az-sm) var(--az-md);
padding-top: max(var(--az-sm), env(safe-area-inset-top, 0px));
border-bottom: 1px solid var(--az-border);
background: var(--az-bg-surface);
flex-shrink: 0;
min-height: 56px;
touch-action: pan-x; 
}
.pdf-viewer-drag-handle {
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
width: 36px;
height: 4px;
border-radius: var(--az-radius-pill);
background: var(--az-text-muted);
opacity: 0.4;
pointer-events: none;
}
@media (min-width: 768px) {
.pdf-viewer-drag-handle {
display: none;
}
.pdf-viewer-header {
touch-action: auto;
}
}
.pdf-viewer-btn {
width: var(--az-touch-min);
height: var(--az-touch-min);
min-width: var(--az-touch-min);
border: none;
background: transparent;
color: var(--az-text-primary);
border-radius: var(--az-radius-lg);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: var(--az-text-xl);
flex-shrink: 0;
transition: background-color 0.15s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
.pdf-viewer-btn:hover {
background: var(--az-bg-elevated);
}
.pdf-viewer-btn:active {
filter: brightness(0.92);
transition-duration: 0.05s;
transition-timing-function: linear;
}
.pdf-viewer-btn:focus-visible {
outline: none;
box-shadow: var(--az-focus-ring);
}
.pdf-viewer-title {
flex: 1;
min-width: 0;
margin: 0;
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 var(--az-xs);
}
.pdf-viewer-spacer {
width: var(--az-touch-min);
height: var(--az-touch-min);
flex-shrink: 0;
}
.pdf-viewer-body {
flex: 1;
position: relative;
background: var(--az-bg-elevated);
overflow: hidden;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pdf-viewer-iframe {
width: 100%;
height: 100%;
border: none;
background: #ffffff;
display: block;
}
.pdf-viewer-loading {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--az-lg);
background: #0A0A0B;
--az-loader-size: 128px;
}
.pdf-viewer-loading .az-loader__ring--a { stroke: rgba(255, 255, 255, 0.85); }
.pdf-viewer-loading .az-loader__ring--b { stroke: rgba(255, 255, 255, 0.55); }
.pdf-viewer-loading .az-loader__ring--c { stroke: rgba(255, 255, 255, 0.7); }
.pdf-viewer-loading .az-loader__ring--d { stroke: rgba(255, 255, 255, 0.5); }
.pdf-viewer-loading-text {
font-family: var(--az-font);
font-size: var(--az-text-sm);
letter-spacing: 0.22em;
text-transform: uppercase;
color: #ffffff;
text-align: center;
}
.pdf-viewer-loading-text .pdf-viewer-brand-bold { font-weight: 700; }
.pdf-viewer-loading-text .pdf-viewer-brand-light { font-weight: 300; opacity: 0.7; }
.pdf-viewer-error {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--az-sm);
padding: var(--az-2xl) var(--az-xl);
text-align: center;
color: var(--az-text-secondary);
background: var(--az-bg-elevated);
}
.pdf-viewer-error i {
font-size: var(--az-text-3xl);
color: var(--az-amber);
margin-bottom: var(--az-sm);
}
.pdf-viewer-error-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.pdf-viewer-error-hint {
font-size: var(--az-text-sm);
color: var(--az-text-muted);
}
@media (prefers-reduced-motion: reduce) {
.pdf-viewer-backdrop,
.pdf-viewer-surface {
transition-duration: 0.01s;
}
.pdf-viewer-spinner {
animation: none;
border-top-color: var(--az-border);
}
}
.document-defaults-modal-content {
max-width: 560px;
}
.document-defaults-intro {
margin: 0 0 var(--az-lg) 0;
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
line-height: 1.5;
}
.defaults-section {
padding: var(--az-lg) 0;
border-top: 1px solid var(--az-border);
}
.defaults-section:first-of-type {
border-top: 0;
padding-top: 0;
}
.defaults-section-title {
margin: 0 0 var(--az-md) 0;
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.defaults-labels-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--az-md);
}
.defaults-save-status {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
margin-right: auto;
}
.defaults-save-status.is-saving {
color: var(--az-text-secondary);
}
.defaults-save-status.is-saved {
color: var(--az-green);
}
@media (max-width: 640px) {
.document-defaults-modal-content {
max-width: 100%;
max-height: 100dvh;
border-radius: 0;
}
.defaults-labels-grid {
grid-template-columns: 1fr;
}
}
.az-login-overlay {
position: fixed;
inset: 0;
background: var(--az-bg-overlay);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--az-z-modal);
padding: var(--az-lg);
}
.az-login-modal {
background: var(--az-bg-card);
border: 1px solid var(--az-border);
padding: var(--az-2xl);
border-radius: var(--az-radius-2xl);
max-width: 400px;
width: 100%;
box-shadow: var(--az-shadow-modal);
}
.az-login-title {
margin: 0 0 var(--az-xl) 0;
color: var(--az-text-primary);
font-size: var(--az-text-2xl);
font-weight: var(--az-font-semibold);
letter-spacing: -0.01em;
}
.az-login-form {
display: flex;
flex-direction: column;
gap: var(--az-lg);
}
.az-login-field {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.az-login-label {
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
}
.az-login-input {
width: 100%;
padding: var(--az-md) var(--az-md-plus);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
color: var(--az-text-primary);
font-size: var(--az-text-md);
box-sizing: border-box;
transition: var(--az-transition);
}
.az-login-input:focus {
outline: none;
background: var(--az-bg-input-focus);
border-color: var(--az-border-focus);
}
.az-login-error {
color: var(--az-red);
font-size: var(--az-text-sm);
display: none;
}
.az-login-error.is-visible {
display: block;
}
.az-login-btn {
width: 100%;
padding: var(--az-md-plus) var(--az-lg);
background: var(--az-blue);
color: var(--az-text-on-accent);
border: none;
border-radius: var(--az-radius-lg);
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
cursor: pointer;
transition: var(--az-transition);
min-height: var(--az-touch-min);
}
.az-login-btn:hover {
background: var(--az-blue-hover);
}
.az-login-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
body .mobile-nav-drawer,
body .mobile-nav-overlay,
body .mobile-menu-toggle {
display: none;
}
#tracking .data-list .dl-detail .dl-main {
color: var(--az-blue);
font-weight: var(--az-font-medium);
}
#dashboard {
gap: var(--az-lg);
}
#dashboard .dashboard-header {
align-items: center;
flex-wrap: nowrap;
justify-content: space-between;
}
.dash-header-actions {
display: flex;
align-items: center;
gap: var(--az-sm);
flex-shrink: 0;
}
#dashboard .dash-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
position: relative;
z-index: var(--az-z-dropdown);
}
.dash-toolbar-left {
display: flex;
align-items: center;
gap: var(--az-md);
flex: 1;
min-width: 0;
}
.rev-topbar-avatar,
.rev-topbar-icon { display: none; }
#dashboard-mobile-hero { display: none; }
.dash-toolbar-left .filters {
display: flex;
gap: var(--az-sm);
}
.dash-toolbar-actions {
display: none;
}
#dashboard .dash-search-icon {
font-size: var(--az-text-xl);
}
#dashboard .dash-chevron-icon {
font-size: var(--az-text-md);
}
.dash-action-btn {
display: inline-flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-sm) var(--az-md);
min-height: var(--az-touch-min);
background: transparent;
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-md);
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast), transform var(--az-transition-fast);
white-space: nowrap;
}
.dash-action-btn:hover {
border-color: var(--az-glass-border-hover);
color: var(--az-text-primary);
}
.dash-action-btn i {
font-size: var(--az-text-md);
}
.dash-report-select {
position: relative;
}
.dash-report-select .filter-dropdown-menu {
right: 0;
left: auto;
min-width: 200px;
}
#dashboard .kpi-card-premium:hover .dash-kpi-link {
color: var(--az-text-secondary);
}
.dash-kpi-link {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
font-weight: var(--az-font-medium);
transition: color var(--az-transition-fast);
display: flex;
align-items: center;
gap: var(--az-xs);
}
.dash-kpi-link i {
font-size: var(--az-text-xs);
transition: transform var(--az-transition-fast);
}
.kpi-card-premium:hover .dash-kpi-link i {
transform: translateX(2px);
}
.dash-charts-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--az-lg);
align-items: stretch;
}
.dash-evolution-ca,
.dash-charts-grid .cockpit-widget {
padding: var(--az-chart-pad);
display: flex;
flex-direction: column;
}
.dash-evolution-ca .chart-wrapper canvas,
.dash-charts-grid .chart-wrapper canvas {
max-height: 280px;
}
.widget-subtitle {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
margin-top: var(--az-2xs);
}
.dash-widget-link {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-tertiary);
cursor: pointer;
transition: color var(--az-transition-fast);
text-decoration: none;
flex-shrink: 0;
min-height: 44px;
padding: var(--az-sm) 0;
}
.dash-widget-link:hover {
color: var(--az-text-primary);
}
.dash-widget-link i {
font-size: var(--az-text-xs);
transition: transform var(--az-transition-fast);
}
.dash-widget-link:hover i {
transform: translateX(3px);
}
.dash-activity {
display: flex;
flex-direction: column;
padding: var(--az-lg);
max-height: 420px;
}
.dash-activity .widget-header {
margin-bottom: var(--az-sm);
}
.dash-activity-list {
flex: 1;
overflow-y: auto;
}
.dash-activity-item {
display: flex;
gap: var(--az-sm-plus);
padding: var(--az-sm-plus) 0;
border-bottom: 1px solid var(--az-glass-border);
align-items: center;
}
.dash-activity-item:last-child {
border-bottom: none;
}
.dash-activity-dot { display: none; }
.dash-activity-item .transaction-avatar {
width: var(--az-2xl);
height: var(--az-2xl);
font-size: var(--az-text-xs);
flex-shrink: 0;
}
.dash-activity-content {
flex: 1;
min-width: 0;
}
.dash-activity-text {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
line-height: 1.4;
}
.dash-activity-text strong {
font-weight: var(--az-font-semibold);
}
.dash-activity-meta {
display: flex;
align-items: center;
gap: var(--az-sm);
margin-top: var(--az-2xs);
}
.dash-activity-status {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
font-weight: var(--az-font-medium);
}
.dash-activity-time {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.dash-activity-amount {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
flex-shrink: 0;
align-self: center;
}
.dash-activity-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--az-xs);
padding-top: var(--az-sm);
margin-top: auto;
border-top: 1px solid var(--az-glass-border);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
color: var(--az-text-tertiary);
cursor: pointer;
transition: color var(--az-transition-fast);
text-decoration: none;
}
.dash-activity-footer:hover {
color: var(--az-text-primary);
}
.dash-activity-footer i {
font-size: var(--az-text-xs);
transition: transform var(--az-transition-fast);
}
.dash-activity-footer:hover i {
transform: translateX(3px);
}
.dash-obj-projection {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--az-xs);
}
.dash-proj-hero {
display: flex;
align-items: baseline;
gap: var(--az-md);
}
.dash-proj-value {
font-size: var(--az-text-2xl);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
line-height: 1.3;
}
.dash-proj-chip {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-pill);
white-space: nowrap;
}
.dash-proj-chip-ok {
color: var(--az-green);
background: var(--az-green-bg);
}
.dash-proj-chip-warning {
color: var(--az-amber);
background: var(--az-amber-bg);
}
.dash-proj-chip-danger {
color: var(--az-red);
background: var(--az-red-bg);
}
.dash-proj-sub {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.dash-obj-sep {
height: 1px;
background: var(--az-border);
}
#dashboard .quarterly-section .quarterly-chart {
position: relative;
flex: 1;
min-height: 0;
max-height: 160px;
}
#dashboard .quarterly-section .quarterly-chart canvas {
display: block;
width: 100%;
height: 100%;
}
#dashboard .chart-container .widget-header,
#dashboard .quarterly-section .widget-header,
#dashboard .dash-transactions .widget-header,
#dashboard .dash-objectives .widget-header,
#dashboard .dash-activity .widget-header {
align-items: flex-start;
align-self: stretch;
margin-bottom: var(--az-md);
}
.dash-transactions-table-wrap {
overflow-x: auto;
}
.dash-transactions-table {
width: 100%;
border-collapse: collapse;
}
.dash-transactions-table th {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: var(--az-sm) var(--az-md);
text-align: left;
border-bottom: 1px solid var(--az-glass-border);
}
.dash-transactions-table td {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
padding: var(--az-md);
border-bottom: 1px solid var(--az-glass-border);
white-space: nowrap;
}
.dash-transactions-table tbody tr {
transition: background var(--az-transition-fast);
cursor: pointer;
}
.dash-transactions-table tbody tr:hover {
background: var(--az-glass-bg-hover);
}
.dash-transactions-table .dash-tx-status {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
}
.dash-tx-dot {
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
}
.dash-tx-dot-paid { background: var(--az-green); }
.dash-tx-dot-sent { background: var(--az-amber); }
.dash-tx-dot-draft { background: var(--az-text-muted); }
.dash-transactions-table tbody td:nth-child(4) {
font-weight: var(--az-font-semibold);
font-variant-numeric: tabular-nums;
}
.dash-transactions-table tbody tr:not(:has(.dash-tx-dot)) td:nth-child(4) {
color: var(--az-green);
}
.dash-transactions-table tbody tr:has(.dash-tx-dot-sent) td:nth-child(4) {
color: var(--az-amber);
}
.dash-transactions-empty {
padding: var(--az-2xl) var(--az-lg);
text-align: center;
color: var(--az-text-tertiary);
font-size: var(--az-text-sm);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-md);
}
.dash-transactions-empty.hidden {
display: none;
}
.dash-empty-cta {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-sm) var(--az-md);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-pill);
color: var(--az-text-primary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: background var(--az-transition-fast);
font-family: inherit;
}
.dash-empty-cta:hover {
background: var(--az-bg-card-hover);
}
.dash-empty-cta i {
font-size: var(--az-text-md);
}
.dash-objectives-body {
display: flex;
flex-direction: column;
gap: var(--az-lg);
}
.plafond-row {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.plafond-row-header {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.plafond-row-label {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.plafond-row-pct {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
}
.plafond-progress-bar {
height: var(--az-xs-plus);
background: var(--az-glass-border);
border-radius: var(--az-radius-pill);
overflow: hidden;
}
.plafond-progress-bar-fill {
height: 100%;
width: 0;
border-radius: var(--az-radius-pill);
transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.plafond-bar-fill-green {
background: var(--az-green);
}
.plafond-bar-fill-amber {
background: var(--az-amber);
}
.plafond-bar-fill-red {
background: var(--az-red);
}
.plafond-row-amounts {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: var(--az-2xs);
font-variant-numeric: tabular-nums;
}
.plafond-row-current {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
font-weight: var(--az-font-medium);
}
.plafond-row-remaining {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.plafond-pct-amber {
color: var(--az-amber);
}
.plafond-pct-red {
color: var(--az-red);
}
.plafond-alert-toast {
position: fixed;
bottom: var(--az-xl);
right: var(--az-xl);
z-index: var(--az-z-toast);
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-md) var(--az-lg);
border-radius: var(--az-radius-xl);
box-shadow: var(--az-shadow-toast);
opacity: 0;
transform: translateY(var(--az-lg));
transition: opacity var(--az-transition), transform var(--az-transition);
pointer-events: none;
max-width: 420px;
}
.plafond-alert-toast-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.plafond-alert-toast-amber {
background: var(--az-bg-card);
border: 1px solid var(--az-amber-border);
}
.plafond-alert-toast-red {
background: var(--az-bg-card);
border: 1px solid var(--az-red-border);
}
.plafond-alert-toast-content {
display: flex;
align-items: flex-start;
gap: var(--az-md);
flex: 1;
min-width: 0;
}
.plafond-alert-toast-icon {
font-size: var(--az-text-xl);
flex-shrink: 0;
margin-top: var(--az-2xs);
}
.plafond-alert-toast-amber .plafond-alert-toast-icon {
color: var(--az-amber);
}
.plafond-alert-toast-red .plafond-alert-toast-icon {
color: var(--az-red);
}
.plafond-alert-toast-text {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
min-width: 0;
}
.plafond-alert-toast-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.plafond-alert-toast-msg {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
line-height: 1.4;
}
.plafond-alert-toast-close {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: var(--az-xl);
height: var(--az-xl);
border-radius: var(--az-radius-md);
color: var(--az-text-tertiary);
transition: color var(--az-transition-fast), background var(--az-transition-fast);
cursor: pointer;
}
.plafond-alert-toast-close:hover {
color: var(--az-text-primary);
background: var(--az-glass-bg-hover);
}
@media (min-width: 769px) {
.dash-shortcuts.cockpit-widget {
display: none;
}
}
.dash-shortcuts-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--az-md);
padding: 0 var(--az-lg) var(--az-lg);
}
.dash-shortcut {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-sm);
text-decoration: none;
color: inherit;
cursor: pointer;
}
.dash-shortcut-icon {
display: flex;
align-items: center;
justify-content: center;
width: var(--az-5xl);
height: var(--az-5xl);
border-radius: var(--az-radius-lg);
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast), transform var(--az-transition-fast);
}
.dash-shortcut-icon i {
font-size: var(--az-text-xl);
color: var(--az-text-secondary);
}
.dash-shortcut:hover .dash-shortcut-icon {
background: var(--az-glass-bg-hover);
border-color: var(--az-glass-border-hover);
transform: translateY(-2px);
}
.dash-shortcut-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
text-align: center;
line-height: 1.2;
}
.rapports-error { padding: var(--az-xl); color: var(--az-red); text-align: center; }
.rapports-error-title { font-weight: var(--az-font-semibold); }
.rapports-error-detail { font-size: var(--az-text-xs); opacity: 0.7; margin-top: var(--az-sm); }
.dash-kpi-row [data-metric="ca"] { border-left: 3px solid var(--az-blue); }
.dash-kpi-row [data-metric="charges"] { border-left: 3px solid var(--az-red); }
.dash-kpi-row [data-metric="benefices"] { border-left: 3px solid var(--az-green); }
.dash-kpi-row [data-metric="ratio"] { border-left: 3px solid var(--az-cyan); }
.dash-kpi-row [data-metric="ca"]:hover { background: var(--az-blue-bg); }
.dash-kpi-row [data-metric="charges"]:hover { background: var(--az-red-bg); }
.dash-kpi-row [data-metric="benefices"]:hover { background: var(--az-green-bg); }
.dash-kpi-row [data-metric="ratio"]:hover { background: var(--az-indigo-bg); }
#kpi-charges-breakdown {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
@media (min-width: 769px) {
#dashboard.page.active {
display: grid;
grid-template-columns: 2fr 1fr;
row-gap: var(--az-section-gap);
column-gap: var(--az-lg);
}
#dashboard > .dashboard-header,
#dashboard > .dash-toolbar,
#dashboard > .kpi-grid,
#dashboard > #dashboard-welcome-card,
#dashboard > .dash-charts-grid,
#dashboard > .dash-transactions,
#dashboard > .quarterly-section,
#dashboard > .dash-overdue,
#dashboard > .dash-shortcuts {
grid-column: 1 / -1;
}
#dashboard > .dash-evolution-ca {
grid-column: 1;
}
#dashboard > .dash-objectives {
grid-column: 2;
}
}
@media (max-width: 768px) {
.dash-charts-grid {
grid-template-columns: 1fr;
}
.dash-transactions {
display: none;
}
.dash-activity {
max-height: none;
}
.dash-activity-text {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
}
.dash-activity-meta {
font-size: var(--az-text-xs);
}
.dash-activity-amount {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
}
.dash-activity-item {
padding: var(--az-md) 0;
align-items: center;
}
.dash-activity-item .transaction-avatar {
width: var(--az-rev-avatar);
height: var(--az-rev-avatar);
font-size: var(--az-text-xs);
}
}
#documents-content-wrapper {
display: flex;
flex-direction: column;
gap: var(--az-section-gap);
}
#documents-view .documents-hero {
display: flex;
flex-direction: column;
gap: var(--az-xs);
padding: 0;
margin: 0;
}
#documents-view .documents-hero .documents-hero-label {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
font-weight: var(--az-font-medium);
letter-spacing: 0;
text-transform: lowercase;
line-height: 1.3;
}
#documents-view .documents-hero .documents-hero-value {
font-size: var(--az-text-3xl);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
letter-spacing: var(--az-tracking-tight);
line-height: 1.1;
}
#documents-view .documents-hero .documents-hero-value.amount-positive { color: var(--az-green); }
#documents-view .documents-hero .documents-hero-value.amount-pending { color: var(--az-amber); }
#documents-view .documents-hero .documents-hero-value.amount-finalized { color: var(--az-blue); }
#documents-view .documents-hero .documents-hero-value.amount-partial { color: var(--az-cyan); }
#documents-view .documents-hero .documents-hero-value.amount-declined { color: var(--az-red); }
#documents-view .documents-hero .documents-hero-context {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
font-weight: var(--az-font-normal);
line-height: 1.3;
margin-top: var(--az-2xs);
}
#documents-view .documents-hero[hidden] { display: none; }
#documents-view .cockpit-widget {
padding: var(--az-kpi-pad);
gap: var(--az-kpi-gap);
}
#documents-view .kpi-card-premium {
padding: var(--az-kpi-pad);
row-gap: var(--az-kpi-gap);
}
#documents-view .card-value {
font-size: var(--az-kpi-value);
}
#documents-view .trend-indicator.neutral,
#documents-view .comparison-badge {
display: none;
}
#documents-view .mobile-doc-details {
display: none;
}
.invoice-preview {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
}
.invoice-custom-header,
.invoice-custom-footer {
padding: var(--az-md) var(--az-lg);
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
#edit-view .page-header {
gap: var(--az-lg);
align-items: center;
flex-wrap: wrap;
position: sticky;
top: calc(-1 * var(--az-page-pad));
z-index: var(--az-z-sticky);
background: var(--az-bg-app);
margin: calc(-1 * var(--az-page-pad));
margin-bottom: 0;
padding: var(--az-page-pad);
padding-bottom: var(--az-lg);
border-bottom: 1px solid var(--az-border);
}
#edit-view .edit-header-actions {
display: flex;
align-items: center;
gap: var(--az-md);
flex-wrap: wrap;
margin: 0;
}
.edit-pdf-dropdown {
position: relative;
}
.edit-pdf-btn {
position: relative;
}
.edit-pdf-caret {
font-size: var(--az-text-xs);
opacity: 0.6;
transition: transform var(--az-transition-fast);
}
.edit-pdf-dropdown.open .edit-pdf-caret {
transform: rotate(180deg);
}
.edit-pdf-menu {
display: none;
position: absolute;
top: calc(100% + var(--az-xs));
left: 0;
min-width: 180px;
background: var(--az-bg-surface);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
box-shadow: var(--az-shadow-lg);
padding: var(--az-xs);
z-index: var(--az-z-dropdown);
animation: dropdownFadeIn 0.15s ease;
}
.edit-pdf-dropdown.open .edit-pdf-menu {
display: block;
}
.edit-pdf-option {
display: flex;
align-items: center;
gap: var(--az-sm);
width: 100%;
padding: var(--az-sm) var(--az-md);
border: none;
background: none;
color: var(--az-text-primary);
font-size: var(--az-text-sm);
border-radius: var(--az-radius-sm);
cursor: pointer;
transition: background var(--az-transition-ease);
text-align: left;
}
.edit-pdf-option:hover {
background: var(--az-bg-card-hover);
}
.edit-pdf-option i {
font-size: var(--az-text-md);
color: var(--az-text-tertiary);
}
.edit-invoice-container {
display: grid;
grid-template-columns: 440px 1fr;
gap: var(--az-xl);
min-height: 600px;
margin-top: var(--az-lg);
}
.edit-invoice-controls {
display: flex;
flex-direction: column;
gap: var(--az-lg);
overflow-y: auto;
padding-top: var(--az-sm);
min-width: 0;
scrollbar-gutter: stable;
}
.editor-section-segmented {
display: flex;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
padding: var(--az-segment-track-pad);
gap: var(--az-2xs);
min-width: 0;
flex-wrap: nowrap;
}
.editor-section-btn {
flex: 1 1 0;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--az-xs-plus);
padding: var(--az-sm-plus) var(--az-md-plus);
border-radius: var(--az-radius-sm);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-tertiary);
transition: color var(--az-transition-ease), background-color var(--az-transition-ease), border-color var(--az-transition-ease), opacity var(--az-transition-ease), transform var(--az-transition-ease);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
}
.editor-section-btn i {
flex-shrink: 0;
font-size: var(--az-text-lg);
opacity: 0.6;
transition: opacity var(--az-transition-ease);
}
.editor-section-btn:hover {
color: var(--az-text-secondary);
background: var(--az-bg-card-hover);
}
.editor-section-btn:hover i {
opacity: 0.8;
}
.editor-section-btn.active {
background: var(--az-bg-card);
color: var(--az-text-primary);
box-shadow: var(--az-shadow);
}
.editor-section-btn.active i {
opacity: 1;
}
.edit-tabs-content {
display: flex;
flex-direction: column;
}
.edit-tab-pane {
display: none;
}
.edit-tab-pane.active {
display: block;
}
.edit-section {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-lg-plus) var(--az-xl);
margin-bottom: var(--az-lg);
}
.edit-section .form-group:last-child,
.edit-section .form-group-checkbox:last-child {
margin-bottom: 0;
}
.edit-section .form-group-checkbox {
margin-bottom: var(--az-sm);
}
.editor-section {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-xl);
margin-bottom: var(--az-xl);
}
.editor-section-title,
.edit-section-title {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--az-text-muted);
margin-bottom: var(--az-md);
}
.typography-sub-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
margin-top: var(--az-xl);
margin-bottom: var(--az-md);
padding-bottom: var(--az-sm);
border-bottom: 1px solid var(--az-border);
}
.edit-section-collapsible > .edit-section-title {
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
}
.edit-section-collapsible > .edit-section-title::after {
content: '';
width: var(--az-sm);
height: var(--az-sm);
border-right: 2px solid var(--az-text-tertiary);
border-bottom: 2px solid var(--az-text-tertiary);
transform: rotate(45deg);
transition: transform var(--az-transition-ease);
flex-shrink: 0;
}
.edit-section-collapsible.is-open > .edit-section-title::after {
transform: rotate(-135deg);
}
.edit-section-collapsible > .edit-section-body {
display: none;
}
.edit-section-collapsible.is-open > .edit-section-body {
display: block;
}
.recurring-collapsible {
margin-bottom: var(--az-lg);
}
.recurring-collapsible-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
padding: var(--az-sm) 0;
}
.recurring-collapsible-title::after {
content: '';
width: var(--az-sm);
height: var(--az-sm);
border-right: 1.5px solid var(--az-text-muted);
border-bottom: 1.5px solid var(--az-text-muted);
transform: rotate(45deg);
transition: transform var(--az-transition);
flex-shrink: 0;
}
.recurring-collapsible.is-open > .recurring-collapsible-title::after {
transform: rotate(-135deg);
}
.recurring-collapsible-body {
display: none;
padding-top: var(--az-sm);
}
.recurring-collapsible.is-open > .recurring-collapsible-body {
display: block;
}
.recurring-custom-field-hidden {
display: none;
margin-top: var(--az-sm);
}
.editor-tabs-row {
display: flex;
align-items: center;
gap: var(--az-sm);
margin-bottom: var(--az-lg);
flex-wrap: nowrap;
min-width: 0;
}
.editor-tabs-row .editor-section-segmented {
flex: 1;
}
.editor-settings-btn {
width: 42px;
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--az-radius-md);
color: var(--az-text-muted);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
flex-shrink: 0;
}
.editor-settings-btn:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
border-color: var(--az-border-hover);
}
.editor-wizard-btn {
display: none;
align-items: center;
justify-content: center;
gap: var(--az-sm);
padding: var(--az-sm-plus) var(--az-lg);
border-radius: var(--az-radius-md);
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
border: 1px solid var(--az-border);
font-weight: var(--az-font-medium);
font-size: var(--az-text-sm);
transition: color var(--az-transition-ease), background-color var(--az-transition-ease), border-color var(--az-transition-ease), opacity var(--az-transition-ease), transform var(--az-transition-ease);
white-space: nowrap;
width: 100%;
}
.editor-wizard-btn:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
border-color: var(--az-border-hover);
}
.editor-wizard-btn:active {
filter: brightness(0.92);
}
.editor-wizard-btn:focus-visible {
box-shadow: var(--az-focus-ring);
}
.editor-quick-actions {
display: none;
align-items: center;
gap: var(--az-sm);
margin-bottom: var(--az-sm);
}
.doc-type-toggle {
display: flex;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
padding: var(--az-segment-track-pad);
}
.doc-type-option {
flex: 1;
padding: var(--az-sm-plus) var(--az-lg);
border: none;
border-radius: var(--az-radius-sm);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
background: transparent;
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.doc-type-option.active {
background: var(--az-bg-card);
color: var(--az-text-primary);
box-shadow: var(--az-shadow);
}
.line-input-console-inline {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.vat-segmented {
display: flex;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
padding: var(--az-xs);
gap: var(--az-2xs);
}
.vat-option {
flex: 1;
padding: var(--az-sm) var(--az-sm-plus);
border-radius: var(--az-radius-sm);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
background: transparent;
border: none;
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
text-align: center;
}
.vat-option:hover {
color: var(--az-text-primary);
}
.vat-option.active {
background: var(--az-segment-active-bg);
color: var(--az-segment-active-color);
box-shadow: var(--az-segment-active-shadow);
}
.vat-custom {
display: flex;
align-items: center;
justify-content: center;
}
.vat-custom-input {
width: 48px;
padding: var(--az-xs) var(--az-xs-plus);
background: transparent;
border: none;
color: inherit;
font-size: var(--az-text-sm);
text-align: center;
outline: none;
}
.vat-custom.active .vat-custom-input {
color: var(--az-text-primary);
}
.discount-toggle-row {
display: flex;
align-items: center;
}
.toggle-switch-label {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
cursor: pointer;
padding: var(--az-xs) 0;
}
.toggle-label-text {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
}
.toggle-switch {
position: relative;
width: 40px;
height: 22px;
flex-shrink: 0;
}
.toggle-input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border-hover);
border-radius: var(--az-radius-3xl);
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.toggle-slider::before {
content: '';
position: absolute;
width: var(--az-lg);
height: var(--az-lg);
left: var(--az-2xs);
bottom: var(--az-2xs);
background: var(--az-bg-card);
border-radius: var(--az-radius-pill);
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.toggle-input:checked + .toggle-slider {
background: var(--az-blue);
border-color: var(--az-blue);
}
.toggle-input:checked + .toggle-slider::before {
transform: translateX(18px);
background: var(--az-btn-inv-text);
}
.smtp-status-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
padding: var(--az-md) var(--az-lg);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius);
flex-wrap: wrap;
}
.smtp-status-indicator {
display: flex;
align-items: center;
gap: var(--az-sm-plus);
}
.smtp-status-dot {
width: var(--az-sm-plus);
height: var(--az-sm-plus);
border-radius: var(--az-radius-pill);
flex-shrink: 0;
background: var(--az-text-disabled);
}
.smtp-status-bar.connected .smtp-status-dot {
background: var(--az-green);
box-shadow: 0 0 8px var(--az-glow-green);
}
.smtp-status-bar.error .smtp-status-dot {
background: var(--az-red);
box-shadow: 0 0 8px var(--az-glow-red);
}
.smtp-status-text {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
}
.smtp-status-bar.connected .smtp-status-text {
color: var(--az-green);
}
.smtp-status-bar.error .smtp-status-text {
color: var(--az-red);
}
.smtp-status-actions {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.smtp-action-btn {
display: inline-flex;
align-items: center;
gap: var(--az-xs-plus);
padding: var(--az-sm) var(--az-md-plus);
min-height: var(--az-card-btn-size);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius);
color: var(--az-text-secondary);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
white-space: nowrap;
}
.smtp-action-btn:hover {
border-color: var(--az-blue);
color: var(--az-blue);
}
.smtp-action-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.smtp-action-btn i {
font-size: var(--az-text-md);
}
.smtp-action-disconnect:hover {
border-color: var(--az-red);
color: var(--az-red);
}
@keyframes smtp-spin {
to { transform: rotate(360deg); }
}
.smtp-action-btn i.spinning {
animation: smtp-spin 0.8s linear infinite;
}
.discount-fields {
margin-top: var(--az-md);
}
.discount-type-row {
display: flex;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
padding: var(--az-segment-track-pad);
gap: var(--az-2xs);
margin-bottom: var(--az-md);
}
.discount-type-option {
flex: 1;
padding: var(--az-sm) var(--az-sm-plus);
border-radius: var(--az-radius-sm);
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
background: transparent;
border: none;
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
text-align: center;
}
.discount-type-option:hover {
color: var(--az-text-primary);
}
.discount-type-option.active {
background: var(--az-bg-surface);
color: var(--az-text-primary);
box-shadow: var(--az-shadow-sm);
}
.discount-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.discount-input-wrap .form-input-compact {
padding-right: var(--az-2xl);
}
.discount-input-suffix {
position: absolute;
right: var(--az-sm-plus);
color: var(--az-text-tertiary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
pointer-events: none;
}
.discount-preview {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-sm) var(--az-md);
margin-top: var(--az-sm);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-sm);
}
.discount-preview-label {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.discount-preview-amount {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-red);
}
.line-input-section {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.line-input-section-category {
padding-bottom: var(--az-md);
}
.line-input-category-row {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.line-input-category-row .line-input-inline-field {
flex: 1;
}
.line-input-inline-btn-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--az-radius-md);
background: var(--az-bg-elevated);
color: var(--az-text-muted);
border: 1px solid var(--az-border);
cursor: pointer;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast), transform var(--az-transition-fast);
flex-shrink: 0;
}
.line-input-inline-btn-icon:hover {
color: var(--az-text-primary);
background: var(--az-bg-card-hover);
border-color: var(--az-border-hover);
}
.line-input-inline-field-group {
display: flex;
flex-direction: column;
gap: var(--az-xs);
flex: 1;
}
.line-input-inline-field {
flex: 1;
width: 100%;
padding: var(--az-sm-plus) var(--az-md-plus);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
color: var(--az-text-primary);
font-size: var(--az-text-md);
font-family: inherit;
outline: none;
transition:
border-color var(--az-transition),
background var(--az-transition);
min-height: var(--az-touch-min);
}
.line-input-inline-field:focus {
border-color: var(--az-border-focus);
background: var(--az-bg-input-focus);
}
.line-input-inline-field:focus-visible {
box-shadow: var(--az-focus-ring);
}
.line-input-inline-field::placeholder {
color: var(--az-text-muted);
}
.line-input-inline-label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
}
.line-input-inline-btn-text {
padding: var(--az-sm) var(--az-lg);
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
min-height: var(--az-touch-min);
}
.line-input-inline-btn-text:hover {
color: var(--az-text-primary);
background: var(--az-bg-card-hover);
border-color: var(--az-border-hover);
}
.line-input-inline-btn-primary {
padding: var(--az-sm-plus) var(--az-lg-plus);
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
background: var(--az-bg-surface);
color: var(--az-text-primary);
border: 1px solid var(--az-border-hover);
cursor: pointer;
transition: color var(--az-transition-ease), background-color var(--az-transition-ease), border-color var(--az-transition-ease), opacity var(--az-transition-ease), transform var(--az-transition-ease);
min-height: var(--az-touch-min);
}
.line-input-inline-btn-primary:hover {
background: var(--az-bg-overlay);
border-color: var(--az-border-hover);
}
.line-input-inline-btn-primary:active {
filter: brightness(0.92);
}
.line-input-separator {
height: 1px;
background: var(--az-border);
margin: var(--az-sm) 0;
}
.line-input-field-designation {
width: 100%;
}
.line-input-numbers-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--az-sm);
align-items: end;
}
.line-input-numbers-row .line-input-inline-label {
text-align: center;
}
.line-input-numbers-row .line-input-inline-field {
text-align: center;
}
.line-input-field-total .line-input-inline-field {
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
cursor: default;
opacity: 0.7;
}
.line-input-bottom-row {
display: flex;
justify-content: flex-end;
gap: var(--az-sm);
margin-top: var(--az-sm);
}
.line-input-inline-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--az-sm);
padding-top: var(--az-xs);
}
.line-input-console-inline.validating {
}
.line-row--just-added {
animation: lineRowFadeIn 0.35s ease-out;
}
@keyframes lineRowFadeIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.form-input-compact.error,
.form-textarea-compact.error {
border-color: var(--az-red);
}
.form-error-message {
font-size: var(--az-text-xs);
color: var(--az-red);
margin-top: var(--az-xs);
}
.line-items-panel {
margin-top: var(--az-lg);
}
.line-items-panel__title {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
letter-spacing: 0.05em;
color: var(--az-text-muted);
margin-bottom: var(--az-md);
}
.line-items-list {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: var(--az-md);
}
.line-items-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--az-2xl) var(--az-lg);
text-align: center;
color: var(--az-text-muted);
border: 1px dashed var(--az-border);
border-radius: var(--az-radius-md);
margin-top: var(--az-md);
}
.line-items-empty i {
font-size: var(--az-text-3xl-plus);
line-height: 1;
margin-bottom: var(--az-sm);
opacity: 0.4;
}
.line-items-empty p {
margin: 0;
font-size: var(--az-text-sm);
}
.line-items-empty p:first-of-type {
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
margin-bottom: var(--az-xs);
}
.line-row {
display: flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-sm-plus) var(--az-sm);
background: transparent;
border: none;
border-bottom: 1px solid var(--az-border);
border-radius: 0;
transition: background var(--az-transition);
}
.line-row:first-child {
border-top: 1px solid var(--az-border);
}
.line-row:hover {
background: var(--az-bg-card-hover);
}
.line-row--category {
background: var(--az-blue-bg);
border-color: var(--az-blue-border);
min-height: 84px;
}
.line-row--category:hover {
border-color: var(--az-blue);
}
.line-row--editing {
border-color: var(--az-blue-border);
background: var(--az-blue-bg);
}
.line-row--2rows {
flex-wrap: wrap;
}
.line-row__row1 {
display: flex;
align-items: center;
gap: var(--az-sm);
width: 100%;
}
.line-row__row2 {
display: flex;
align-items: center;
gap: var(--az-sm);
width: 100%;
padding-left: var(--az-2xl);
}
.line-row__drag {
display: flex;
align-items: center;
justify-content: center;
color: var(--az-text-muted);
cursor: grab;
flex-shrink: 0;
width: 20px;
}
.line-row__drag:active {
cursor: grabbing;
}
.line-row__info {
flex: 1;
min-width: 0;
}
.line-row__label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.line-row__designation {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.line-row__details {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
display: flex;
align-items: center;
gap: var(--az-xs);
}
.line-row__separator {
color: var(--az-text-muted);
}
.line-row__qty,
.line-row__unit {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.line-row__total {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
white-space: nowrap;
margin-left: auto;
}
.line-row__editable {
background: var(--az-bg-input);
border: 1px solid var(--az-border-focus);
border-radius: var(--az-radius-sm);
color: var(--az-text-primary);
font-size: var(--az-text-lg-plus);
padding: var(--az-sm) var(--az-sm-plus);
outline: none;
font-family: inherit;
transition: border-color var(--az-transition);
}
.line-row__editable:focus {
border-color: var(--az-border-focus);
box-shadow: var(--az-focus-ring);
}
input.line-row__qty {
width: 48px;
text-align: center;
}
input.line-row__unit {
width: 80px;
text-align: right;
}
.line-row__actions {
display: flex;
align-items: center;
gap: var(--az-2xs);
flex-shrink: 0;
}
.line-row__btn {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--az-radius-sm);
color: var(--az-text-muted);
background: transparent;
border: none;
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.line-row__btn:hover {
color: var(--az-text-primary);
background: var(--az-bg-card-hover);
}
.line-row__btn--edit:hover {
color: var(--az-blue);
}
.line-row__btn--duplicate:hover {
color: var(--az-indigo);
}
.line-row__btn--delete {
opacity: 0;
transition: opacity var(--az-transition), color var(--az-transition), background var(--az-transition);
}
.line-row:hover .line-row__btn--delete {
opacity: 1;
}
.line-row__btn--delete:hover {
color: var(--az-red);
background: var(--az-red-bg);
}
.line-row__btn--save:hover {
color: var(--az-green);
background: var(--az-green-bg);
}
.line-row__btn--cancel:hover {
color: var(--az-red);
background: var(--az-red-bg);
}
.line-row.dragging {
opacity: 0.5;
border: 1px dashed var(--az-blue);
background: var(--az-blue-bg);
}
.line-row.drag-over {
border-top: 2px solid var(--az-blue);
}
.touch-drag-ghost {
border: 1px solid var(--az-blue-border);
}
.line-item-control {
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
padding: var(--az-md);
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.line-item-control:hover {
border-color: var(--az-border-hover);
}
.line-item-control-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--az-sm);
}
.line-item-control-title {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.line-item-control-actions {
display: flex;
align-items: center;
gap: var(--az-2xs);
}
.line-item-control-btn {
display: flex;
align-items: center;
justify-content: center;
width: var(--az-icon-btn-sm);
height: var(--az-icon-btn-sm);
min-width: var(--az-touch-min);
min-height: var(--az-touch-min);
border-radius: var(--az-radius-sm);
color: var(--az-text-muted);
background: transparent;
border: none;
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.line-item-control-btn:hover {
color: var(--az-text-primary);
background: var(--az-bg-card-hover);
}
.line-item-control-btn--edit:hover {
color: var(--az-blue);
}
.line-item-control-btn--duplicate:hover {
color: var(--az-indigo);
}
.line-item-control-remove {
display: flex;
align-items: center;
justify-content: center;
width: var(--az-icon-btn-sm);
height: var(--az-icon-btn-sm);
min-width: var(--az-touch-min);
min-height: var(--az-touch-min);
border-radius: var(--az-radius-sm);
color: var(--az-text-muted);
background: transparent;
border: none;
cursor: pointer;
font-size: var(--az-text-xl);
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.line-item-control-remove:hover {
color: var(--az-red);
background: var(--az-red-bg);
}
.line-item-control-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--az-sm);
}
.line-item-category {
background: var(--az-blue-bg);
border-color: var(--az-blue-border);
}
.line-item-total-readonly {
opacity: 0.6;
cursor: default;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--az-sm);
}
.logo-upload-zone {
border: 2px dashed var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-xl);
text-align: center;
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.logo-upload-zone:hover {
border-color: var(--az-border-hover);
background: var(--az-bg-card);
}
.logo-upload-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-sm);
color: var(--az-text-muted);
font-size: var(--az-text-sm);
}
.logo-upload-preview {
display: none;
}
.logo-upload-zone.has-logo .logo-upload-empty,
.logo-upload-zone[data-has-logo="true"] .logo-upload-empty {
display: none;
}
.logo-upload-zone.has-logo .logo-upload-preview,
.logo-upload-zone[data-has-logo="true"] .logo-upload-preview {
display: block;
}
.logo-upload-preview.hidden {
display: none;
}
.logo-upload-preview img {
max-width: 160px;
max-height: 80px;
object-fit: contain;
}
.logo-upload-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-sm);
}
.logo-upload-empty.hidden,
.logo-upload-loading.hidden {
display: none;
}
.logo-progress-bar {
width: 100%;
height: 4px;
background: var(--az-bg-elevated);
border-radius: var(--az-2xs);
overflow: hidden;
}
.logo-progress-fill {
height: 100%;
background: var(--az-blue);
border-radius: var(--az-2xs);
transition: width 0.3s ease;
}
.logo-preview-container {
position: relative;
display: inline-block;
}
.logo-delete-btn {
position: absolute;
top: -10px;
right: -10px;
width: var(--az-icon-btn-sm);
height: var(--az-icon-btn-sm);
border-radius: var(--az-radius-pill);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
color: var(--az-red);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
z-index: 2;
box-shadow: var(--az-shadow);
}
.logo-delete-btn i {
font-size: var(--az-text-md);
line-height: 1;
}
.logo-delete-btn:hover {
background: var(--az-red);
border-color: var(--az-red);
color: var(--az-btn-inv-text);
}
.logo-info {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
margin-top: var(--az-sm);
}
.logo-upload-title {
font-size: var(--az-text-md);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
}
.logo-upload-hint {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.logo-upload-action {
font-size: var(--az-text-sm);
color: var(--az-blue);
font-weight: var(--az-font-medium);
}
.logo-upload-icon {
color: var(--az-text-muted);
margin-bottom: var(--az-xs);
}
.logo-loading-text {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.logo-size-slider {
display: flex;
gap: var(--az-sm);
}
.logo-size-btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-2xs);
padding: var(--az-sm-plus);
border-radius: var(--az-radius-md);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.logo-size-btn:hover {
border-color: var(--az-border-hover);
}
.logo-size-btn.active {
background: var(--az-bg-elevated);
border-color: var(--az-border-focus);
color: var(--az-text-primary);
}
.logo-size-value {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.logo-size-btn.active .logo-size-value {
color: var(--az-text-secondary);
}
.invoice-preview-wrapper {
position: relative;
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
overflow: hidden;
background: var(--az-bg-card);
box-shadow: var(--az-shadow-lg);
align-self: start;
}
@media (min-width: 1025px) {
.invoice-preview-wrapper {
position: sticky;
top: var(--az-xl);
display: flex;
flex-direction: column;
max-height: calc(100vh - 48px);
max-height: calc(100dvh - 48px);
}
.invoice-preview-stage {
flex: 1;
min-height: 0;
}
}
.invoice-preview-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
padding: var(--az-sm-plus) var(--az-md);
flex-shrink: 0;
background: var(--az-bg-overlay);
border-bottom: 1px solid var(--az-border);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
.invoice-preview-toolbar-title {
display: flex;
align-items: center;
gap: var(--az-sm-plus);
min-width: 0;
}
.invoice-preview-toolbar-label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.invoice-preview-toolbar-chip {
font-size: var(--az-text-xs-plus);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
padding: var(--az-xs) var(--az-sm-plus);
border-radius: var(--az-radius-pill);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
letter-spacing: 0.02em;
}
.invoice-preview-toolbar-actions {
display: flex;
align-items: center;
gap: var(--az-sm-plus);
}
.invoice-zoom-select {
min-width: 110px;
}
.invoice-zoom-select .action-select-btn {
background: var(--az-bg-elevated);
}
.invoice-preview-toolbar .btn-icon-premium {
width: var(--az-touch-min);
height: var(--az-touch-min);
min-width: var(--az-touch-min);
min-height: var(--az-touch-min);
border-radius: var(--az-radius-md);
}
.invoice-zoom-select .filter-dropdown-menu {
left: auto;
right: 0;
min-width: 180px;
}
.invoice-preview-stage {
display: flex;
align-items: flex-start;
justify-content: center;
padding: var(--az-lg);
background: var(--az-bg-app);
overflow-x: auto;
overflow-y: auto;
}
.invoice-preview-zoom {
background: var(--az-bg-card);
padding: var(--az-2xl) var(--az-4xl) 36px;
border-radius: var(--az-radius-2xl);
overflow: visible;
border: 1px solid var(--az-border);
box-shadow: var(--az-shadow-lg);
transition: box-shadow var(--az-transition);
}
.invoice-preview-zoom .invoice-iframe {
box-shadow: var(--az-shadow-lg);
}
.invoice-preview-loading {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--az-lg);
z-index: var(--az-z-sticky);
background: #0A0A0B;
--az-loader-size: 128px;
}
.invoice-preview-loading.hidden {
display: none;
}
.invoice-preview-loading .az-loader__ring--a { stroke: rgba(255, 255, 255, 0.85); }
.invoice-preview-loading .az-loader__ring--b { stroke: rgba(255, 255, 255, 0.55); }
.invoice-preview-loading .az-loader__ring--c { stroke: rgba(255, 255, 255, 0.7); }
.invoice-preview-loading .az-loader__ring--d { stroke: rgba(255, 255, 255, 0.5); }
.invoice-preview-loading-text {
font-family: var(--az-font);
font-size: var(--az-text-sm);
letter-spacing: 0.22em;
text-transform: uppercase;
color: #ffffff;
text-align: center;
}
.invoice-preview-loading-text .invoice-preview-brand-bold { font-weight: 700; }
.invoice-preview-loading-text .invoice-preview-brand-light { font-weight: 300; opacity: 0.7; }
.invoice-iframe {
display: block;
width: 100%;
min-height: 297mm;
border: none;
background: var(--az-bg-card);
transition: height 0.15s ease;
}
.typography-page-title {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin-bottom: var(--az-md);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.typography-block-control {
margin-bottom: var(--az-lg);
}
.typography-block-control .form-group.typography-control-row {
flex-direction: row;
align-items: center;
gap: var(--az-md);
margin-bottom: var(--az-sm);
}
.weight-selector {
display: flex;
gap: var(--az-xs);
}
.weight-btn {
padding: var(--az-xs-plus) var(--az-md);
border-radius: var(--az-radius-sm);
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.weight-btn:hover {
border-color: var(--az-border-hover);
color: var(--az-text-primary);
}
.weight-btn.active {
background: var(--az-bg-surface);
border-color: var(--az-border-hover);
color: var(--az-text-primary);
text-shadow: 0 0 0.6px currentColor;
}
.header-color-options {
display: flex;
gap: var(--az-lg);
margin-top: var(--az-sm);
align-items: center;
}
.premium-page {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--az-z-premium);
background: var(--az-bg-app);
}
.premium-wrapper {
display: flex;
width: 100%;
height: 100%;
}
.premium-left {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: var(--az-2xl);
overflow-y: auto;
}
.premium-content {
max-width: 480px;
width: 100%;
}
.premium-header {
margin-bottom: var(--az-2xl);
}
.premium-logo {
display: flex;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-lg);
}
.premium-logo .logo-bold {
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
}
.premium-logo .logo-light {
font-weight: var(--az-font-light);
color: var(--az-text-secondary);
}
.premium-title {
font-size: var(--az-text-2xl);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin-bottom: var(--az-sm);
}
.premium-subtitle {
font-size: var(--az-text-md);
color: var(--az-text-secondary);
margin-bottom: var(--az-xl);
}
.premium-offers {
display: flex;
flex-direction: column;
gap: var(--az-lg);
}
.offer-card {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-xl);
transition: border-color var(--az-transition), background var(--az-transition);
}
.offer-card:hover {
border-color: var(--az-glass-border-hover);
}
.offer-card.offer-premium {
border-color: var(--az-glass-border-hover);
background: var(--az-bg-card-hover);
}
.offer-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--az-lg);
}
.offer-name {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.offer-price {
display: flex;
align-items: baseline;
gap: var(--az-xs);
}
.offer-amount {
font-size: var(--az-text-2xl);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
}
.offer-period {
font-size: var(--az-text-sm);
color: var(--az-text-muted);
}
.offer-features {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--az-sm);
margin-bottom: var(--az-xl);
}
.offer-feature {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
padding: var(--az-xs) 0;
}
.offer-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: var(--az-md-plus) var(--az-xl);
border-radius: var(--az-radius-md);
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
border: none;
}
.offer-btn-premium {
background: var(--az-blue);
color: var(--az-btn-inv-text);
}
.offer-btn-premium:hover {
background: var(--az-blue-hover);
box-shadow: var(--az-shadow-lg);
}
.premium-right {
flex: 1;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--az-blue-bg);
}
.premium-right-background {
position: absolute;
inset: 0;
pointer-events: none;
}
.premium-grid-pattern {
width: 100%;
height: 100%;
background-image:
linear-gradient(var(--az-blue-bg) 1px, transparent 1px),
linear-gradient(90deg, var(--az-blue-bg) 1px, transparent 1px);
background-size: 40px 40px;
opacity: 0.5;
}
.premium-right-content {
position: relative;
z-index: 1;
padding: var(--az-2xl);
max-width: 520px;
}
.premium-value-card {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-2xl);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.premium-value-title {
font-size: var(--az-text-xl);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin-bottom: var(--az-xl);
}
.premium-features-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--az-lg);
}
.premium-feature-item {
display: flex;
align-items: flex-start;
gap: var(--az-lg);
}
.premium-feature-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: var(--az-radius-xl);
display: flex;
align-items: center;
justify-content: center;
background: var(--az-blue-bg);
color: var(--az-blue);
border: 1px solid var(--az-blue-border);
}
.premium-feature-content {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.premium-feature-content strong {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.premium-feature-desc {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
line-height: 1.5;
}
.subscription-info-card {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-xl);
}
.subscription-status {
display: flex;
align-items: center;
margin-bottom: var(--az-lg);
}
.status-badge {
display: inline-flex;
align-items: center;
gap: var(--az-xs-plus);
padding: var(--az-xs-plus) var(--az-md-plus);
border-radius: var(--az-radius-pill);
background: var(--az-green-bg);
border: 1px solid var(--az-green-border);
}
.status-icon {
font-size: var(--az-text-md);
}
.status-text {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-green);
}
.subscription-details {
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--az-border);
margin-bottom: var(--az-lg);
}
.subscription-detail-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-md) 0;
border-bottom: 1px solid var(--az-border);
}
.subscription-detail-item .detail-label {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.subscription-detail-item .detail-value {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
}
.subscription-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-sm);
}
.subscription-help-text {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
text-align: center;
}
.sub-page-content {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 var(--az-xl) var(--az-3xl);
gap: var(--az-3xl);
}
.sub-section {
width: 100%;
max-width: 680px;
}
.sub-hero {
text-align: center;
margin-bottom: var(--az-lg);
}
.sub-hero-title {
font-size: var(--az-text-2xl);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
letter-spacing: var(--az-tracking-tighter);
line-height: 1.2;
margin-bottom: var(--az-sm);
}
.sub-hero-desc {
font-size: var(--az-text-md);
color: var(--az-text-secondary);
line-height: 1.5;
max-width: 420px;
margin: 0 auto;
}
.sub-section-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
letter-spacing: var(--az-tracking-tight);
text-align: center;
margin-bottom: var(--az-sm);
}
.sub-section-desc {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
text-align: center;
margin-bottom: var(--az-lg);
}
.sub-toggle-wrap {
display: flex;
justify-content: center;
margin-bottom: var(--az-lg);
}
.sub-toggle {
display: inline-flex;
align-items: center;
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-pill);
padding: var(--az-xs);
gap: var(--az-2xs);
}
.sub-toggle-btn {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-sm) var(--az-lg);
border: none;
border-radius: var(--az-radius-pill);
background: transparent;
color: var(--az-text-tertiary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
white-space: nowrap;
}
.sub-toggle-btn.active {
background: var(--az-bg-elevated);
color: var(--az-text-primary);
text-shadow: 0 0 0.6px currentColor;
}
.sub-toggle-btn:hover:not(.active) {
color: var(--az-text-secondary);
}
.sub-toggle-save {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
color: var(--az-green);
background: var(--az-green-bg);
padding: var(--az-2xs) var(--az-xs);
border-radius: var(--az-radius-pill);
line-height: 1;
}
.sub-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--az-lg);
margin-bottom: var(--az-lg);
}
.sub-card {
position: relative;
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-xl);
display: flex;
flex-direction: column;
transition: border-color var(--az-transition), box-shadow var(--az-transition);
}
.sub-card:hover {
border-color: var(--az-border-hover);
}
.sub-card--highlight {
border-color: var(--az-blue-border);
box-shadow: 0 0 var(--az-3xl) var(--az-blue-bg);
}
.sub-card--highlight::before {
content: '';
position: absolute;
top: -1px;
left: var(--az-xl);
right: var(--az-xl);
height: 2px;
background: var(--az-blue);
border-radius: 0 0 var(--az-radius-sm) var(--az-radius-sm);
}
.sub-card--highlight:hover {
border-color: var(--az-blue);
box-shadow: 0 0 var(--az-4xl) var(--az-blue-bg);
}
.sub-card-badge {
position: absolute;
top: calc(-1 * var(--az-sm));
left: 50%;
transform: translateX(-50%);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-bold);
color: var(--az-blue);
background: var(--az-bg-card);
border: 1px solid var(--az-blue-border);
padding: var(--az-xs) var(--az-md);
border-radius: var(--az-radius-pill);
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
}
.sub-card-top {
margin-bottom: var(--az-md);
}
.sub-card-name {
font-size: var(--az-text-xl);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
letter-spacing: var(--az-tracking-tight);
margin-bottom: var(--az-xs);
}
.sub-card-desc {
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
}
.sub-card-price-row {
display: flex;
align-items: baseline;
gap: var(--az-xs);
margin-bottom: var(--az-lg);
}
.sub-card-price {
font-size: var(--az-text-3xl);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
letter-spacing: var(--az-tracking-tighter);
line-height: 1;
}
.sub-card-period {
font-size: var(--az-text-sm);
color: var(--az-text-muted);
}
.sub-cta {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
width: 100%;
padding: var(--az-md) var(--az-xl);
border-radius: var(--az-radius-lg);
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
border: none;
}
.sub-cta--primary {
background: var(--az-blue);
color: var(--az-text-on-accent);
}
.sub-cta--primary:hover {
background: var(--az-blue-hover);
}
.sub-cta--secondary {
background: transparent;
color: var(--az-text-primary);
border: 1px solid var(--az-border);
}
.sub-cta--secondary:hover {
border-color: var(--az-border-hover);
background: var(--az-bg-elevated);
}
.sub-card-sep {
border: none;
border-top: 1px solid var(--az-border);
margin: var(--az-lg) 0;
}
.sub-card-feats {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--az-sm);
flex: 1;
}
.sub-card-feats li {
display: flex;
align-items: flex-start;
gap: var(--az-sm);
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
line-height: 1.5;
}
.sub-card-feats li i {
color: var(--az-green);
font-size: var(--az-text-md);
flex-shrink: 0;
margin-top: var(--az-2xs);
}
.sub-card-feats li.sub-card-feat--highlight {
color: var(--az-text-primary);
font-weight: var(--az-font-semibold);
}
.sub-guarantees {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--az-sm) var(--az-xl);
}
.sub-guarantee {
display: flex;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.sub-guarantee i {
font-size: var(--az-text-lg);
}
.sub-faq-section {
max-width: 560px;
}
.sub-faq-list {
display: flex;
flex-direction: column;
}
.sub-faq-item {
border-bottom: 1px solid var(--az-border);
}
.sub-faq-item:first-child {
border-top: 1px solid var(--az-border);
}
.sub-faq-item summary {
list-style: none;
}
.sub-faq-item summary::-webkit-details-marker {
display: none;
}
.sub-faq-q {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-lg) 0;
cursor: pointer;
color: var(--az-text-primary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
line-height: 1.4;
transition: color var(--az-transition);
}
.sub-faq-q:hover {
color: var(--az-text-primary);
}
.sub-faq-q i {
font-size: var(--az-text-sm);
color: var(--az-text-muted);
flex-shrink: 0;
margin-left: var(--az-lg);
transition: transform var(--az-transition);
}
.sub-faq-item[open] .sub-faq-q i {
transform: rotate(180deg);
}
.sub-faq-a {
padding-bottom: var(--az-lg);
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
line-height: 1.6;
}
.sub-contact-text {
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
text-align: center;
}
.sub-contact-text a {
color: var(--az-blue);
text-decoration: none;
font-weight: var(--az-font-medium);
transition: color var(--az-transition);
}
.sub-contact-text a:hover {
color: var(--az-blue-hover);
}
.sub-status-card {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-xl);
}
.sub-status-head {
margin-bottom: var(--az-lg);
}
.sub-badge {
display: inline-flex;
align-items: center;
padding: var(--az-xs) var(--az-md);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
background: var(--az-green-bg);
border: 1px solid var(--az-green-border);
color: var(--az-green);
}
.sub-badge--active {
background: var(--az-blue-bg);
border-color: var(--az-blue-border);
color: var(--az-blue);
}
.sub-badge--gold {
background: var(--az-amber-bg);
border-color: var(--az-amber-border);
color: var(--az-amber);
}
.sub-status-rows {
margin-bottom: var(--az-lg);
}
.sub-status-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-md) 0;
border-bottom: 1px solid var(--az-border);
}
.sub-status-row:first-child {
border-top: 1px solid var(--az-border);
}
.sub-status-label {
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
}
.sub-status-value {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
}
.sub-hint {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
text-align: center;
margin-top: var(--az-md);
}
.sub-gold-banner {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-lg);
background: var(--az-amber-bg);
border: 1px solid var(--az-amber-border);
border-radius: var(--az-radius-lg);
}
.sub-gold-banner i {
font-size: var(--az-text-xl);
color: var(--az-amber);
flex-shrink: 0;
}
.sub-gold-banner span {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
line-height: 1.5;
}
.sub-plans-section--wide {
max-width: 900px;
}
.sub-cards--triple {
grid-template-columns: repeat(3, 1fr);
}
.sub-cards--triple .sub-card {
padding: var(--az-lg);
}
.sub-cards--triple .sub-card-price {
font-size: var(--az-text-2xl);
}
.sub-cards--triple .sub-card-feats {
gap: var(--az-xs);
}
.sub-cards--triple .sub-card-top {
margin-bottom: var(--az-sm);
}
.sub-cards--triple .sub-card-price-row {
margin-bottom: var(--az-md);
}
.sub-status-card--gold {
border-color: var(--az-amber-border);
box-shadow: 0 0 var(--az-4xl) var(--az-amber-bg);
}
.sub-status-gold-hero {
display: flex;
align-items: center;
gap: var(--az-lg);
margin-bottom: var(--az-xl);
}
.sub-status-gold-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: var(--az-4xl);
height: var(--az-4xl);
border-radius: var(--az-radius-pill);
background: var(--az-amber-bg);
border: 1px solid var(--az-amber-border);
color: var(--az-amber);
}
.sub-status-gold-icon i {
font-size: var(--az-text-xl);
}
.sub-status-gold-identity {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.sub-status-gold-title {
font-size: var(--az-text-2xl);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
letter-spacing: var(--az-tracking-tighter);
line-height: 1.2;
}
.sub-status-gold-sub {
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
}
.sub-status-gold-divider {
height: 1px;
background: var(--az-border);
margin-bottom: var(--az-xl);
}
.sub-status-gold-perks {
display: flex;
flex-wrap: wrap;
gap: var(--az-sm);
}
.sub-perk {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs) var(--az-md);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
white-space: nowrap;
}
.sub-perk i {
font-size: var(--az-text-sm);
color: var(--az-green);
flex-shrink: 0;
}
.sub-gold-card {
background: var(--az-glass-bg);
border: 1px solid var(--az-amber-border);
border-radius: var(--az-radius-xl);
padding: var(--az-3xl) var(--az-3xl) var(--az-xl);
box-shadow: 0 0 var(--az-4xl) var(--az-amber-bg);
}
.sub-gold-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--az-md);
margin-bottom: var(--az-xl);
}
.sub-gold-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: var(--az-radius-pill);
background: var(--az-amber-bg);
border: 1px solid var(--az-amber-border);
color: var(--az-amber);
}
.sub-gold-icon i {
font-size: var(--az-text-xl);
}
.sub-gold-header .sub-badge--gold {
margin-top: var(--az-xs);
}
.sub-gold-title {
font-size: var(--az-text-xl);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
line-height: 1.2;
}
.sub-gold-subtitle {
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
line-height: 1.5;
max-width: 480px;
}
.sub-gold-divider {
height: 1px;
background: var(--az-glass-border);
margin-bottom: var(--az-xl);
}
.sub-gold-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--az-lg);
margin-bottom: var(--az-xl);
}
.sub-gold-group-title {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--az-md);
}
.sub-gold-group-items {
display: flex;
flex-direction: column;
gap: var(--az-sm-plus);
}
.sub-gold-feat {
display: flex;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
line-height: 1.4;
white-space: nowrap;
}
.sub-gold-feat i {
font-size: var(--az-text-md);
color: var(--az-amber);
flex-shrink: 0;
margin-top: 1px;
}
.sub-gold-note {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
font-size: var(--az-text-sm);
color: var(--az-amber);
line-height: 1.6;
opacity: 0.7;
}
.sub-gold-note i {
font-size: var(--az-text-md);
flex-shrink: 0;
}
.sub-card-badge--current {
color: var(--az-amber);
border-color: var(--az-amber-border);
background: var(--az-amber-bg);
}
.sub-card--readonly {
opacity: 0.72;
pointer-events: none;
}
@media (max-width: 640px) {
.sub-cards {
grid-template-columns: 1fr;
}
.sub-page-content {
padding: 0 var(--az-md) var(--az-xl);
}
}
#recurring .kpi-card-premium:hover .dash-kpi-link {
color: var(--az-text-secondary);
}
.recurring-badge {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs) var(--az-sm);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
line-height: 1;
}
.recurring-badge-active {
background: var(--az-green-bg);
color: var(--az-green);
}
.recurring-badge-paused {
background: var(--az-amber-bg);
color: var(--az-amber);
}
.recurring-badge-completed {
background: var(--az-bg-elevated);
color: var(--az-text-tertiary);
}
.recurring-badge-health-good {
background: var(--az-green-bg);
color: var(--az-green);
}
.recurring-badge-health-warning {
background: var(--az-amber-bg);
color: var(--az-amber);
}
.recurring-badge-health-danger {
background: var(--az-red-bg);
color: var(--az-red);
}
.recurring-badge-health-neutral {
background: var(--az-bg-elevated);
color: var(--az-text-tertiary);
}
.recurring-alerts {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.recurring-alert-item {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-sm) var(--az-lg);
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
}
.recurring-alert-item.alert-warning {
background: var(--az-amber-bg);
color: var(--az-amber);
border: 1px solid var(--az-amber-border);
}
.recurring-alert-item.alert-danger {
background: var(--az-red-bg);
color: var(--az-red);
border: 1px solid var(--az-red-border);
}
.recurring-alert-item.alert-info {
background: var(--az-blue-bg);
color: var(--az-blue);
border: 1px solid var(--az-blue-border);
}
.recurring-alert-item i {
font-size: var(--az-text-lg);
flex-shrink: 0;
}
.recurring-alert-text {
flex: 1;
}
.recurring-main-row {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--az-lg);
align-items: stretch;
}
.recurring-chart-widget {
padding: var(--az-lg);
}
.recurring-chart-widget .chart-wrapper canvas {
max-height: 280px;
}
.recurring-activity-widget {
display: flex;
flex-direction: column;
padding: var(--az-lg);
max-height: 380px;
}
.recurring-activity-widget .widget-header {
margin-bottom: var(--az-sm);
}
.recurring-activity-list {
flex: 1;
overflow-y: auto;
}
.recurring-activity-item {
display: flex;
gap: var(--az-sm);
padding: var(--az-sm) 0;
border-bottom: 1px solid var(--az-glass-border);
}
.recurring-activity-item:last-child {
border-bottom: none;
}
.recurring-activity-content {
flex: 1;
min-width: 0;
}
.recurring-activity-text {
font-size: var(--az-text-2xs);
color: var(--az-text-primary);
line-height: 1.4;
}
.recurring-activity-text strong {
font-weight: var(--az-font-semibold);
}
.recurring-activity-time {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
margin-top: var(--az-2xs);
}
.recurring-activity-amount {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
flex-shrink: 0;
align-self: center;
}
.recurring-activity-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--az-text-sm);
color: var(--az-text-muted);
}
.recurring-transactions {
padding: var(--az-xl);
}
.recurring-transactions-wrap {
overflow-x: auto;
}
.recurring-table {
width: 100%;
border-collapse: collapse;
}
.recurring-table th {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: var(--az-sm) var(--az-md);
text-align: left;
border-bottom: 1px solid var(--az-glass-border);
white-space: nowrap;
}
.recurring-th-client  { width: 20%; }
.recurring-th-freq    { width: 14%; }
.recurring-th-amount  { width: 14%; }
.recurring-th-health  { width: 10%; }
.recurring-th-last    { width: 16%; }
.recurring-th-next    { width: 16%; }
.recurring-th-actions {
text-align: right;
width: 10%;
}
.recurring-table td {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
padding: var(--az-md);
border-bottom: 1px solid var(--az-glass-border);
vertical-align: middle;
white-space: nowrap;
}
.recurring-table td.td-actions {
text-align: right;
}
.recurring-table tbody tr {
transition: background var(--az-transition-fast);
cursor: pointer;
}
.recurring-table tbody tr:hover {
background: var(--az-glass-bg-hover);
}
.recurring-table tbody tr:last-child td {
border-bottom: none;
}
.recurring-client-name {
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
}
.recurring-countdown {
font-weight: var(--az-font-medium);
color: var(--az-blue);
}
.recurring-empty-filtered {
text-align: center;
padding: var(--az-xl);
color: var(--az-text-muted);
}
.recurring-mobile-card { display: none; }
@media (max-width: 768px) {
.recurring-th-health,
.recurring-td-health {
display: none;
}
.recurring-main-row {
grid-template-columns: 1fr;
}
.recurring-activity-widget {
max-height: 300px;
}
}
.activity-timeline-dot.dot-green { background: var(--az-green); }
.activity-timeline-dot.dot-blue { background: var(--az-blue); }
.activity-timeline-dot.dot-red { background: var(--az-red); }
.activity-timeline-dot.dot-muted { background: var(--az-text-muted); }
.recurring-cell-sub {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
margin-top: var(--az-2xs);
}
.recurring-cell-suffix {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
font-weight: var(--az-font-normal);
margin-left: var(--az-2xs);
}
.recurring-amount-value {
font-weight: var(--az-font-semibold);
}
.recurring-cell-muted {
color: var(--az-text-muted);
}
#recurring-fiche .page-header-content {
display: flex;
align-items: center;
gap: var(--az-md);
}
#recurring-fiche .page-title {
margin: 0;
}
#recurring-fiche #recurring-fiche-content {
display: flex;
flex-direction: column;
gap: var(--az-lg);
padding: 0;
}
.recurring-line-row {
display: grid;
grid-template-columns: 1fr 64px 96px;
gap: var(--az-sm);
align-items: end;
margin-bottom: var(--az-sm);
}
.recurring-line-row.has-delete {
grid-template-columns: 1fr 64px 96px 32px;
}
.recurring-line-label {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.recurring-line-actions-col {
display: flex;
align-items: center;
justify-content: center;
min-height: var(--az-input-h, 36px);
}
.recurring-line-actions-col.has-label {
padding-top: var(--az-xl);
}
.recurring-line-delete {
color: var(--az-text-tertiary);
transition: color var(--az-transition-fast);
}
.recurring-line-delete:hover {
color: var(--az-red);
}
.recurring-line-qty,
.recurring-line-price {
-moz-appearance: textfield;
text-align: center;
}
.recurring-line-qty::-webkit-inner-spin-button,
.recurring-line-qty::-webkit-outer-spin-button,
.recurring-line-price::-webkit-inner-spin-button,
.recurring-line-price::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.recurring-client-search-wrapper {
position: relative;
}
.recurring-client-search-wrapper .client-autocomplete-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: var(--az-z-dropdown);
margin-top: var(--az-xs);
}
@media (max-width: 640px) {
.recurring-line-row {
grid-template-columns: 1fr 48px 72px;
gap: var(--az-xs);
}
.recurring-line-row.has-delete {
grid-template-columns: 1fr 48px 72px 28px;
}
}
.recurring-modal-subtitle {
display: block;
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
color: var(--az-text-tertiary);
margin-top: var(--az-xs);
letter-spacing: 0.02em;
}
.recurring-summary-card {
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-lg);
margin-bottom: var(--az-lg);
}
.recurring-summary-header {
display: flex;
align-items: center;
gap: var(--az-sm);
margin-bottom: var(--az-md);
}
.recurring-summary-icon {
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
}
.recurring-summary-label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
letter-spacing: 0.01em;
}
.recurring-summary-client {
margin-left: auto;
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
font-weight: var(--az-font-medium);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 40%;
}
.recurring-summary-lines {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.recurring-summary-category {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
padding-top: var(--az-sm);
}
.recurring-summary-category:first-child {
padding-top: 0;
}
.recurring-summary-line {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--az-sm);
}
.recurring-summary-line.indented {
padding-left: var(--az-lg);
}
.recurring-summary-line-desc {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.recurring-summary-line-meta {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
white-space: nowrap;
flex-shrink: 0;
}
.recurring-summary-line-amount {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
white-space: nowrap;
flex-shrink: 0;
text-align: right;
min-width: 72px;
}
.recurring-summary-divider {
height: 1px;
background: var(--az-border);
margin: var(--az-md) 0;
}
.recurring-summary-totals {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.recurring-summary-totals-row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
}
.recurring-summary-totals-row span:last-child {
font-weight: var(--az-font-medium);
text-align: right;
min-width: 72px;
}
.recurring-summary-totals-total {
padding-top: var(--az-sm);
border-top: 1px solid var(--az-border);
margin-top: var(--az-xs);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
}
.recurring-summary-totals-total span:last-child {
font-weight: var(--az-font-bold);
}
.recurring-summary-notes {
margin-top: var(--az-md);
padding-top: var(--az-md);
border-top: 1px solid var(--az-border);
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.recurring-summary-notes-section {
font-size: var(--az-text-2xs);
font-style: italic;
color: var(--az-text-tertiary);
line-height: 1.5;
}
.recurring-summary-notes-label {
display: block;
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
font-style: normal;
color: var(--az-text-secondary);
margin-bottom: var(--az-xs);
letter-spacing: 0.02em;
}
.recurring-email-preview {
background: var(--az-bg-primary);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
padding: var(--az-lg);
margin-top: var(--az-md);
}
.recurring-email-preview:empty {
display: none;
}
.recurring-email-preview-label {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--az-sm);
}
.recurring-email-preview-subject {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin-bottom: var(--az-md);
padding-bottom: var(--az-sm);
border-bottom: 1px solid var(--az-border);
}
.recurring-email-preview-body {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
line-height: 1.6;
}
.recurring-email-preview-para {
margin: 0 0 var(--az-sm) 0;
}
.recurring-email-preview-para:last-child {
margin-bottom: 0;
}
.recurring-email-preview-sig {
margin-top: var(--az-md);
padding-top: var(--az-sm);
padding-left: var(--az-md);
border-left: 2px solid var(--az-text-tertiary);
}
.recurring-email-preview-sig-name {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
line-height: 1.4;
}
.recurring-email-preview-sig-detail {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
line-height: 1.5;
}
.recurring-email-preview-sig-placeholder {
font-style: italic;
opacity: var(--az-opacity-placeholder);
}
.modal-lg {
max-width: 640px;
}
.form-divider {
height: 1px;
background: var(--az-border);
margin: var(--az-md) 0;
opacity: var(--az-opacity-muted);
}
.form-label:has(.ml-auto) {
display: flex;
align-items: center;
width: 100%;
}
.ml-auto {
margin-left: auto;
}
.modal-body .form-group-checkbox {
margin-bottom: var(--az-lg);
}
#clients .cockpit-widget {
padding: var(--az-kpi-pad);
gap: var(--az-kpi-gap);
}
#clients .kpi-card-premium {
padding: var(--az-kpi-pad);
row-gap: var(--az-kpi-gap);
}
#clients .card-value {
font-size: var(--az-kpi-value);
}
#clients .trend-indicator.neutral,
#clients .comparison-badge {
display: none;
}
.mobile-client-actions {
display: none;
}
.btn-action-mobile {
width: var(--az-touch-min);
height: var(--az-touch-min);
border-radius: var(--az-radius-sm);
display: flex;
align-items: center;
justify-content: center;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
color: var(--az-text-secondary);
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.btn-action-mobile:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.btn-action-mobile.call:hover {
color: var(--az-green);
}
.btn-action-mobile.email:hover {
color: var(--az-blue);
}
#transactions .cockpit-widget {
padding: var(--az-kpi-pad);
gap: var(--az-kpi-gap);
}
#transactions .kpi-card-premium {
padding: var(--az-kpi-pad);
row-gap: var(--az-kpi-gap);
}
#transactions .card-value {
font-size: var(--az-kpi-value);
}
#transactions .mobile-transaction-details {
display: none;
}
.rapports-tabs {
display: flex;
gap: var(--az-2xs);
background: var(--az-segment-track-bg);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
padding: var(--az-segment-track-pad);
overflow-x: auto;
scrollbar-width: none;
}
.rapports-header-toolbar {
display: flex;
align-items: center;
gap: var(--az-sm);
margin-left: auto;
}
@media (min-width: 769px) {
.rapports-tabs {
display: flex;
width: 100%;
background: var(--az-glass-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-segment-track-pad);
gap: var(--az-2xs);
}
}
.rapports-tabs::-webkit-scrollbar {
display: none;
}
.rapports-tab-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
padding: var(--az-sm-plus) var(--az-lg);
border-radius: var(--az-radius-sm);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
background: transparent;
border: none;
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
white-space: nowrap;
min-height: var(--az-touch-min);
flex: 1;
}
.rapports-tab-btn:hover {
color: var(--az-text-primary);
background: var(--az-bg-card-hover);
}
.rapports-tab-btn.active {
background: var(--az-segment-active-bg);
color: var(--az-segment-active-color);
text-shadow: 0 0 0.6px currentColor;
box-shadow: var(--az-segment-active-shadow);
}
.rapports-tab-btn i {
font-size: var(--az-text-xl);
line-height: 1;
flex-shrink: 0;
}
.rapports-content,
#rapports-content {
display: flex;
flex-direction: column;
gap: var(--az-section-gap);
}
.rapports-content .section-title {
display: flex;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin-bottom: var(--az-md);
}
.rapports-content h2 {
font-size: var(--az-text-xl);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin-bottom: var(--az-xs);
}
.rapports-content h2+p,
.rapports-content h2+span,
.export-premium-header-content p {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
html:not(.dark-mode) .rapports-tabs {
background: var(--az-bg-elevated);
border-color: var(--az-border);
}
html:not(.dark-mode) .rapports-tab-btn.active {
background: var(--az-segment-active-bg);
color: var(--az-blue);
border-color: transparent;
box-shadow: var(--az-segment-active-shadow);
}
html:not(.dark-mode) .rapports-tab-btn:hover {
background: var(--az-bg-card-hover);
}
.kpi-value-negative {
color: var(--az-red);
}
.plafond-bar-premium {
width: 100%;
height: 8px;
background: var(--az-bg-elevated);
border-radius: var(--az-radius-sm);
overflow: hidden;
position: relative;
margin-top: var(--az-sm);
}
.plafond-fill-animated {
height: 100%;
border-radius: var(--az-radius-sm);
background: var(--fill-color, var(--az-green));
}
.chart-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--az-sm);
}
.chart-title-group {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.chart-subtitle {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.chart-actions {
display: flex;
gap: var(--az-xs);
}
.chart-badge {
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
}
.chart-badge.accent {
background: var(--az-blue-bg);
color: var(--az-blue);
border: 1px solid var(--az-blue-border);
}
.chart-container-rapports {
position: relative;
width: 100%;
min-height: 200px;
flex: 1;
}
.chart-doughnut {
max-width: 280px;
margin: 0 auto;
display: grid;
}
.chart-doughnut > * {
grid-area: 1 / 1;
}
.chart-bar-comparison {
width: 100%;
}
.doughnut-center-label {
place-self: center;
text-align: center;
pointer-events: none;
z-index: 1;
}
.center-value {
font-size: var(--az-text-xl);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
display: block;
font-variant-numeric: tabular-nums;
letter-spacing: var(--az-tracking-tight);
}
.center-label {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
display: block;
}
.chart-legend-inline {
display: flex;
flex-wrap: wrap;
gap: var(--az-md);
justify-content: center;
margin-top: var(--az-sm);
}
.legend-item {
display: inline-flex;
align-items: center;
gap: var(--az-xs-plus);
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
}
.legend-dot {
width: 8px;
height: 8px;
border-radius: var(--az-radius-pill);
flex-shrink: 0;
}
.full-width {
grid-column: 1 / -1;
}
.circle-center-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
pointer-events: none;
}
.rapports-alert-premium {
background: var(--az-amber-bg);
border: 1px solid var(--az-amber-border);
border-radius: var(--az-radius-lg);
padding: var(--az-lg) var(--az-lg-plus);
display: flex;
align-items: center;
gap: var(--az-md);
}
.rapports-alert-premium.animate-slide-in {
animation: slideIn 0.4s ease;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.alert-icon-pulse {
width: var(--az-icon-lg);
height: var(--az-icon-lg);
border-radius: var(--az-radius-pill);
display: flex;
align-items: center;
justify-content: center;
background: var(--az-amber-bg);
color: var(--az-amber);
animation: pulse 2s ease infinite;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.rapports-synthese {
display: flex;
flex-direction: column;
gap: var(--az-section-gap);
}
.rapports-synthese > .charts-grid {
grid-template-columns: repeat(2, 1fr);
}
.rapports-urssaf-premium {
display: flex;
flex-direction: column;
gap: var(--az-section-gap);
}
.urssaf-hero-premium {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-4xl) var(--az-2xl);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--az-lg);
text-align: center;
}
.urssaf-label {
font-size: var(--az-text-md);
color: var(--az-text-secondary);
font-weight: var(--az-font-medium);
letter-spacing: 0.02em;
}
.urssaf-amount-huge {
font-size: var(--az-text-4xl-plus);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
letter-spacing: var(--az-tracking-tight);
font-variant-numeric: tabular-nums;
}
.urssaf-amount-huge.animate-count {
animation: countUp 1s ease;
}
.urssaf-ca-sub {
font-size: var(--az-text-sm);
color: var(--az-text-muted);
margin-top: calc(-1 * var(--az-sm));
}
@keyframes countUp {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.urssaf-actions {
display: flex;
gap: var(--az-sm);
}
.btn-copy-premium {
padding: var(--az-sm) var(--az-md-plus);
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
color: var(--az-text-secondary);
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.btn-copy-premium:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.btn.btn-primary-premium,
.btn-primary-premium {
background: var(--az-btn-inv-bg);
border-color: transparent;
color: var(--az-btn-inv-text);
font-weight: var(--az-font-semibold);
}
.btn-primary-premium:hover {
background: var(--az-btn-inv-bg-hover);
}
.btn-declare-premium {
display: inline-flex;
align-items: center;
gap: var(--az-xs-plus);
text-decoration: none;
cursor: pointer;
}
.urssaf-gauge-container {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-md);
}
.urssaf-gauge {
position: relative;
width: 180px;
height: 180px;
}
.gauge-svg {
width: 100%;
height: 100%;
}
.gauge-bg {
fill: none;
stroke: var(--az-border);
stroke-width: 10;
}
.gauge-fill {
fill: none;
stroke-width: 10;
stroke-linecap: round;
transition: stroke-dashoffset 1s ease;
}
.gauge-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-2xs);
text-align: center;
white-space: nowrap;
}
.gauge-value {
font-size: var(--az-text-xl);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.gauge-label {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.urssaf-period-badge {
display: inline-flex;
align-items: center;
gap: var(--az-xs-plus);
padding: var(--az-xs) var(--az-md);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
background: var(--az-glass-border);
color: var(--az-text-secondary);
}
.urssaf-monthly-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--az-sm);
}
.monthly-period-card {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-md);
transition: border-color var(--az-transition), background var(--az-transition);
}
.monthly-period-card.active {
border-color: var(--az-glass-border-hover);
background: var(--az-glass-bg-hover);
}
.monthly-period-card.past {
opacity: 0.6;
}
.monthly-period-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--az-xs-plus);
}
.monthly-period-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.monthly-period-ca {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.monthly-period-urssaf {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
}
.urssaf-timeline-section {
margin-top: var(--az-lg);
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-xl);
}
.urssaf-timeline {
display: flex;
flex-direction: row;
justify-content: space-between;
position: relative;
padding: 0 var(--az-lg-plus);
}
.timeline-quarter {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-sm);
flex: 1;
position: relative;
text-align: center;
z-index: 1;
}
.timeline-dot {
width: 32px;
height: 32px;
border-radius: var(--az-radius-pill);
background: var(--az-bg-elevated);
border: 2px solid var(--az-border);
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.timeline-quarter.past .timeline-dot {
background: var(--az-green-bg);
border-color: var(--az-green);
}
.timeline-quarter.past .timeline-dot i {
color: var(--az-green);
}
.timeline-quarter.active .timeline-dot {
background: var(--az-blue);
border-color: var(--az-blue);
box-shadow: 0 0 0 4px var(--az-blue-bg);
}
.dot-pulse {
width: 10px;
height: 10px;
border-radius: var(--az-radius-pill);
background: var(--az-text-primary);
animation: dotPulse 2s ease infinite;
}
.dot-pulse-small {
width: 8px;
height: 8px;
border-radius: var(--az-radius-pill);
background: var(--az-blue);
animation: dotPulse 2s ease infinite;
}
@keyframes dotPulse {
0%,
100% {
box-shadow: 0 0 0 0 var(--az-blue-border);
}
50% {
box-shadow: 0 0 0 6px transparent;
}
}
.timeline-content {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-xs);
}
.timeline-label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.timeline-ca {
font-size: var(--az-text-lg);
font-weight: var(--az-font-bold);
color: var(--az-blue);
}
.timeline-urssaf {
font-size: var(--az-text-lg);
font-weight: var(--az-font-bold);
color: var(--az-blue);
}
.timeline-progress-bar {
width: 100%;
height: 4px;
background: var(--az-bg-elevated);
border-radius: var(--az-2xs);
overflow: hidden;
margin-top: var(--az-lg);
}
.timeline-progress-fill {
height: 100%;
border-radius: var(--az-2xs);
background: var(--az-blue);
transition: width 1s ease;
}
.urssaf-details-grid,
.premium-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--az-lg);
}
.urssaf-detail-card {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-md-plus);
display: flex;
align-items: flex-start;
gap: var(--az-md);
}
.urssaf-detail-card.highlight-card {
border-color: var(--az-glass-border-hover);
}
.detail-icon {
width: var(--az-icon-btn-sm);
height: var(--az-icon-btn-sm);
border-radius: var(--az-radius-pill);
display: flex;
align-items: center;
justify-content: center;
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
flex-shrink: 0;
}
.detail-content {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
}
.detail-label {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.detail-value {
font-size: var(--az-text-md);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
letter-spacing: var(--az-tracking-tight);
}
.detail-value.accent {
color: var(--az-blue);
}
.section-total {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
margin-left: var(--az-sm);
}
.urssaf-chart-section {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-lg-plus);
}
.urssaf-mini-chart-container {
max-width: 500px;
margin: 0 auto;
}
.urssaf-tips-card,
.premium-tips {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-lg-plus);
}
.urssaf-tips-card ul,
.premium-tips ul {
display: flex;
flex-direction: column;
gap: var(--az-sm);
padding-left: var(--az-lg-plus);
list-style: disc;
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.tips-header {
display: flex;
align-items: center;
gap: var(--az-sm);
margin-bottom: var(--az-md);
}
.rapports-fiscal-premium {
display: flex;
flex-direction: column;
gap: var(--az-section-gap);
}
.fiscal-kpi-grid {
grid-template-columns: repeat(2, 1fr);
}
.charts-grid.fiscal-charts-row {
grid-template-columns: 1fr;
}
.fiscal-waterfall-container {
min-height: 320px;
}
@media (max-width: 768px) {
.fiscal-kpi-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--az-sm);
}
.charts-grid.fiscal-charts-row {
grid-template-columns: 1fr;
}
}
.fiscal-overview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--az-md);
}
.fiscal-overview-card {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-md-plus);
text-align: center;
}
.fiscal-overview-card.fiscal-minus {
border-color: var(--az-red-border);
}
.fiscal-overview-card.fiscal-result {
border-color: var(--az-green-border);
background: var(--az-green-bg);
}
.fiscal-overview-label {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
margin-bottom: var(--az-xs);
}
.fiscal-overview-value {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.fiscal-section {
margin-top: var(--az-xl);
}
.fiscal-ir-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--az-lg);
}
@media (max-width: 768px) {
#rapports .fiscal-ir-grid {
grid-template-columns: 1fr;
gap: var(--az-sm);
}
#rapports .fiscal-ir-card {
padding: var(--az-md) var(--az-lg);
}
#rapports .ir-amount {
flex-wrap: wrap;
align-items: baseline;
gap: var(--az-xs);
}
#rapports .ir-amount-value {
flex-shrink: 0;
}
}
.fiscal-ir-card {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-xl);
transition: border-color var(--az-transition), background var(--az-transition);
}
.fiscal-ir-card.active {
border-color: var(--az-glass-border-hover);
background: var(--az-glass-bg-hover);
}
.ir-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--az-md);
}
.ir-card-badge {
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
}
.ir-status {
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
}
.ir-active {
background: var(--az-green-bg);
color: var(--az-green);
}
.ir-inactive {
background: var(--az-bg-elevated);
color: var(--az-text-muted);
}
.ir-card-body {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.ir-rate {
display: flex;
align-items: baseline;
gap: var(--az-xs);
}
.ir-rate-value {
font-size: var(--az-text-2xl);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
letter-spacing: var(--az-tracking-tight);
}
.ir-rate-label {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.ir-amount {
display: flex;
align-items: baseline;
gap: var(--az-xs);
}
.ir-amount-value {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
letter-spacing: var(--az-tracking-tight);
}
.ir-amount-label {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.ir-card-detail {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
margin-top: var(--az-sm);
}
.fiscal-tip {
display: flex;
align-items: flex-start;
gap: var(--az-sm);
background: var(--az-blue-bg);
border: 1px solid var(--az-blue-border);
border-radius: var(--az-radius-md);
padding: var(--az-md) var(--az-lg);
font-size: var(--az-text-sm);
color: var(--az-blue);
margin-top: var(--az-lg);
}
.fiscal-tip i {
flex-shrink: 0;
}
.fiscal-recap-table {
width: 100%;
border-collapse: collapse;
}
.recap-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-md-plus) 0;
border-bottom: 1px solid var(--az-border);
}
.recap-row.recap-total {
font-weight: var(--az-font-semibold);
border-top: 2px solid var(--az-border);
margin-top: var(--az-sm);
padding-top: var(--az-xl);
}
.recap-row.recap-result {
font-weight: var(--az-font-semibold);
color: var(--az-green);
}
.recap-label {
flex: 1;
font-size: var(--az-text-lg);
color: var(--az-text-secondary);
}
.recap-rate {
min-width: 60px;
text-align: center;
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.recap-amount {
font-size: var(--az-text-lg-plus);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.charges-pro-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--az-lg);
}
.charge-pro-card {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-lg-plus);
}
.charge-pro-card.has-value {
border-color: var(--az-glass-border-hover);
}
.charge-pro-header {
display: flex;
align-items: center;
gap: var(--az-sm-plus);
margin-bottom: var(--az-sm);
}
.charge-pro-icon {
width: var(--az-icon-btn-sm);
height: var(--az-icon-btn-sm);
border-radius: var(--az-radius-lg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.charge-pro-info {
flex: 1;
}
.charge-pro-label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
}
.charge-pro-desc {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.charge-pro-value-row {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-top: var(--az-sm);
}
.charge-pro-value {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
letter-spacing: var(--az-tracking-tight);
}
.charge-pro-percent {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
}
.charge-pro-avg {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.rapports-recettes-premium {
display: flex;
flex-direction: column;
gap: var(--az-section-gap);
}
.recettes-header-premium {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--az-lg);
}
.recettes-title-section {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.recettes-legal {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.recettes-stats-premium {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-md) var(--az-lg);
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
flex-wrap: wrap;
}
.recettes-stat-item {
display: flex;
align-items: baseline;
gap: var(--az-xs);
}
.recettes-stat-value {
font-size: var(--az-text-lg-plus);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.recettes-stat-value.accent {
color: var(--az-blue);
}
.recettes-stat-label {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.recettes-stat-sep {
color: var(--az-text-muted);
font-size: var(--az-text-md);
}
.recettes-section {
margin-top: var(--az-lg);
}
.top-clients-section {
margin-top: var(--az-lg);
}
.table-section {
margin-top: var(--az-lg);
}
.top-clients-grid {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.top-client-row {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-sm-plus) 0;
}
.client-rank {
width: var(--az-icon-btn-sm);
height: var(--az-icon-btn-sm);
border-radius: var(--az-radius-pill);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
flex-shrink: 0;
}
.client-info {
flex: 1;
min-width: 0;
}
.client-bar-container {
flex: 1;
height: 6px;
background: var(--az-bg-elevated);
border-radius: var(--az-radius-xs);
overflow: hidden;
}
.client-bar {
height: 100%;
border-radius: var(--az-radius-xs);
background: var(--az-blue);
transition: width 1s ease;
}
.client-amount {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
flex-shrink: 0;
min-width: 80px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.recettes-desktop-view {
display: block;
}
.recettes-mobile-view,
.recettes-mobile-show-more {
display: none;
}
.recettes-table-wrap {
overflow: hidden;
border-radius: var(--az-radius-lg);
border: 1px solid var(--az-border);
max-width: 100%;
overflow-x: auto;
}
.recettes-table-wrap::-webkit-scrollbar {
height: 6px;
}
.recettes-table-wrap::-webkit-scrollbar-track {
background: transparent;
}
.recettes-table-wrap::-webkit-scrollbar-thumb {
background: var(--az-border);
border-radius: var(--az-radius-xs);
}
.recettes-table-wrap::-webkit-scrollbar-thumb:hover {
background: var(--az-text-muted);
}
.recettes-table-premium {
width: 100%;
border-collapse: collapse;
}
.recettes-table-premium thead th {
padding: var(--az-sm-plus) var(--az-lg);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
line-height: 1.4;
color: var(--az-text-muted);
text-align: left;
background: transparent;
border-bottom: 1px solid var(--az-border);
}
.recettes-table-premium tbody tr {
border-bottom: 1px solid var(--az-border);
transition: background var(--az-transition);
}
.recettes-table-premium tbody tr:hover {
background: var(--az-bg-card-hover);
}
.recettes-table-premium td {
padding: var(--az-sm-plus) var(--az-lg);
font-size: var(--az-text-sm);
line-height: 1.4;
color: var(--az-text-primary);
}
.recettes-table-premium tfoot td {
padding: var(--az-md) var(--az-lg);
font-weight: var(--az-font-semibold);
border-top: 2px solid var(--az-border);
background: var(--az-bg-elevated);
color: var(--az-text-primary);
font-size: var(--az-text-sm);
}
.recettes-table-premium tfoot tr:last-child td:first-child {
border-bottom-left-radius: var(--az-radius-lg);
}
.recettes-table-premium tfoot tr:last-child td:last-child {
border-bottom-right-radius: var(--az-radius-lg);
}
.text-right {
text-align: right;
}
.ref-badge {
display: inline-flex;
justify-content: center;
min-width: 120px;
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-sm);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
background: var(--az-bg-elevated);
border: none;
color: var(--az-text-secondary);
}
.mode-pill {
display: inline-flex;
justify-content: center;
min-width: 80px;
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
}
.recettes-table-premium th:nth-child(3),
.recettes-table-premium td:nth-child(3),
.recettes-table-premium th:nth-child(6),
.recettes-table-premium td:nth-child(6) {
text-align: center;
}
.recettes-table-premium th:nth-child(7),
.recettes-table-premium td:nth-child(7) {
text-align: right;
}
.amount-cell {
font-weight: var(--az-font-semibold);
font-variant-numeric: tabular-nums;
}
.mono {
font-family: inherit;
font-variant-numeric: tabular-nums;
}
.recettes-table-premium .amount-cell {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
}
.empty-row {
opacity: 0.5;
}
.empty-state {
text-align: center;
padding: var(--az-4xl) var(--az-2xl);
color: var(--az-text-muted);
}
.heatmap-months {
display: flex;
gap: var(--az-xs);
overflow-x: auto;
}
.heatmap-month {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-2xs);
}
.heatmap-month-label {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
margin-bottom: 2px;
}
.heatmap-days {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
}
.heatmap-day {
width: 12px;
height: 12px;
border-radius: var(--az-2xs);
background: var(--az-bg-elevated);
}
.heatmap-day.intensity-0 {
background: var(--az-bg-elevated);
}
.heatmap-day.intensity-1 {
background: color-mix(in srgb, var(--az-green) 15%, transparent);
}
.heatmap-day.intensity-2 {
background: color-mix(in srgb, var(--az-green) 30%, transparent);
}
.heatmap-day.intensity-3 {
background: color-mix(in srgb, var(--az-green) 45%, transparent);
}
.heatmap-day.intensity-4 {
background: color-mix(in srgb, var(--az-green) 65%, transparent);
}
.heatmap-day.intensity-5 {
background: color-mix(in srgb, var(--az-green) 85%, transparent);
}
.export-premium-container {
display: flex;
flex-direction: column;
gap: var(--az-section-gap);
}
.export-premium-header {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-lg-plus);
}
.export-premium-header-content {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.export-period-badge {
display: inline-flex;
align-items: center;
gap: var(--az-xs-plus);
padding: var(--az-xs) var(--az-md);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
background: var(--az-blue-bg);
color: var(--az-blue);
}
.export-cards-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--az-lg);
}
@media (max-width: 768px) {
.export-cards-grid {
grid-template-columns: 1fr;
}
}
.export-card {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-chart-pad);
cursor: pointer;
display: flex;
flex-direction: column;
gap: var(--az-lg);
transition:
border-color var(--az-transition),
background var(--az-transition);
}
.export-card:hover {
border-color: var(--az-glass-border-hover);
background: var(--az-glass-bg-hover);
}
.export-card-top {
display: flex;
align-items: center;
}
.export-format-tag {
padding: var(--az-xs) var(--az-sm-plus);
border-radius: var(--az-radius-md);
font-size: var(--az-text-xs-plus);
font-weight: var(--az-font-bold);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.export-format-tag.pdf {
background: var(--az-red-bg);
color: var(--az-red);
}
.export-format-tag.xlsx {
background: var(--az-green-bg);
color: var(--az-green);
}
.export-format-tag.txt {
background: var(--az-indigo-bg);
color: var(--az-indigo);
}
.export-format-tag.csv {
background: var(--az-cyan-bg);
color: var(--az-cyan);
}
.export-card-title {
font-size: var(--az-text-xl);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
line-height: 1.3;
margin: 0;
}
.export-card-desc {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
line-height: 1.4;
margin: 0;
}
.export-card-metrics {
display: flex;
gap: var(--az-xl);
padding: var(--az-lg) 0;
border-top: 1px solid var(--az-border);
}
.export-metric {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
}
.export-metric-value {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.export-metric-label {
font-size: var(--az-text-sm);
color: var(--az-text-muted);
text-transform: var(--az-label-transform);
}
.export-card-bottom {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
font-size: var(--az-text-sm);
color: var(--az-text-muted);
}
.export-card-bottom i {
color: var(--az-text-muted);
transition: transform var(--az-transition-ease);
}
.export-card:hover .export-card-bottom i {
transform: translateX(4px);
color: var(--az-text-primary);
}
#settings-view {
gap: var(--az-section-gap);
}
.settings-layout,
.settings-container {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.settings-sidebar {
display: flex;
align-items: center;
gap: var(--az-md);
position: static;
padding: 0 var(--az-lg-plus);
margin-bottom: var(--az-md);
}
.settings-nav-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--az-sm);
overflow-x: visible;
scrollbar-width: thin;
padding-bottom: var(--az-sm);
border-bottom: 1px solid var(--az-border);
margin-bottom: 0;
}
.settings-nav-list::-webkit-scrollbar {
height: 4px;
}
.settings-nav-item {
list-style: none;
}
.settings-nav-link {
display: flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-sm-plus) var(--az-lg);
border-radius: var(--az-radius-md);
border: 1px solid transparent; 
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
white-space: nowrap;
min-height: var(--az-touch-min);
}
.settings-nav-link:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.settings-nav-link.active {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
border-color: var(--az-border-hover);
}
@keyframes settings-section-highlight-pulse {
0%   { box-shadow: 0 0 0 0 var(--az-blue-border); }
40%  { box-shadow: 0 0 0 6px var(--az-blue-border); }
100% { box-shadow: 0 0 0 0 transparent; }
}
.settings-section-highlight {
animation: settings-section-highlight-pulse 1.6s cubic-bezier(0.16, 1, 0.3, 1);
border-radius: var(--az-radius-lg);
}
.settings-nav-icon {
font-size: var(--az-text-xl);
line-height: 1;
flex-shrink: 0;
}
.settings-content {
display: flex;
flex-direction: column;
gap: 0;
}
.settings-content-section {
display: none;
}
.settings-content-section.active {
display: flex;
flex-direction: column;
gap: var(--az-lg);
}
.messagerie-nav {
margin-bottom: var(--az-lg);
}
.messagerie-nav-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--az-sm);
overflow-x: visible;
scrollbar-width: thin;
padding-bottom: var(--az-sm);
border-bottom: 1px solid var(--az-border);
margin-bottom: 0;
list-style: none;
padding-left: 0;
}
.messagerie-nav-item {
list-style: none;
}
.messagerie-nav-link {
display: flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-sm-plus) var(--az-lg);
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
white-space: nowrap;
min-height: var(--az-touch-min);
background: none;
border: 1px solid transparent;
cursor: pointer;
}
.messagerie-nav-link:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.messagerie-nav-link.active {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
border: 1px solid var(--az-border-hover);
}
.messagerie-nav-icon {
font-size: var(--az-text-xl);
line-height: 1;
flex-shrink: 0;
}
.messagerie-content {
display: flex;
flex-direction: column;
gap: 0;
}
.messagerie-tab-section {
display: none;
}
.messagerie-tab-section.active {
display: block;
}
.sched-report-frequency-block {
padding: var(--az-md) 0;
border-bottom: 1px solid var(--az-border);
}
.sched-report-frequency-block:last-child {
border-bottom: none;
}
.sched-report-test-block {
margin-top: var(--az-lg);
padding-top: var(--az-lg);
border-top: 1px solid var(--az-border);
}
.sched-report-test-row {
display: flex;
gap: var(--az-sm);
align-items: center;
margin-top: var(--az-sm);
}
.sched-report-test-row select {
flex: 0 0 auto;
width: auto;
}
.sched-report-test-row .btn {
white-space: nowrap;
}
.sched-report-freq-params {
padding-left: var(--az-xl);
padding-top: var(--az-sm);
}
.settings-sub-nav {
display: flex;
gap: var(--az-xs);
border-bottom: 1px solid var(--az-border);
padding: 0 var(--az-lg-plus);
margin-bottom: var(--az-xl);
}
.settings-sub-tab {
padding: var(--az-sm) var(--az-lg);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: color var(--az-transition-fast), border-color var(--az-transition-fast);
}
.settings-sub-tab:hover {
color: var(--az-text-primary);
}
.settings-sub-tab.active {
color: var(--az-blue);
border-bottom-color: var(--az-blue);
}
.settings-subtab-content {
display: none;
}
.settings-subtab-content.active {
display: flex;
flex-direction: column;
gap: var(--az-xl);
}
.settings-section {
background: var(--az-bg-card);
border: none;
border-radius: var(--az-card-radius);
padding: var(--az-xl) var(--az-lg-plus);
box-shadow: var(--az-shadow);
}
.settings-section-header {
margin-bottom: var(--az-lg);
padding-bottom: var(--az-sm);
border-bottom: 1px solid var(--az-glass-border);
}
.settings-section-title {
font-size: var(--az-text-lg-plus);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.settings-section-description {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
margin-top: var(--az-sm);
}
.settings-section-header.collapsible {
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
justify-content: space-between;
}
.settings-section-header.collapsible > div {
flex: 1;
min-width: 0;
}
.settings-section-chevron {
flex-shrink: 0;
color: var(--az-text-muted);
transition: transform var(--az-transition-ease);
margin-left: var(--az-md);
}
.settings-section.collapsed .settings-section-chevron {
transform: rotate(-90deg);
}
.settings-section.collapsed {
padding: var(--az-md-plus) var(--az-lg-plus);
}
.settings-section.collapsed .settings-section-header {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.mfa-challenge-inline {
margin-top: var(--az-lg);
padding: var(--az-lg);
background: var(--az-bg-elevated);
border: 1px solid var(--az-blue-border);
border-radius: var(--az-radius-md);
}
.mfa-challenge-text {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
margin-bottom: var(--az-md);
}
.mfa-challenge-inline .form-group {
margin-bottom: var(--az-md);
}
.mfa-challenge-code {
max-width: 160px;
font-size: var(--az-text-lg);
letter-spacing: 0.15em;
text-align: center;
}
.mfa-resend-link {
font-size: var(--az-text-xs);
color: var(--az-blue);
background: none;
border: none;
cursor: pointer;
padding: 0;
transition: opacity 0.15s;
}
.mfa-resend-link:hover {
opacity: 0.8;
}
.mfa-resend-link:disabled {
color: var(--az-text-tertiary);
cursor: default;
opacity: 0.6;
}
#mfa-verify-modal .modal-content { max-width: 420px; }
#mfa-verify-modal .label-checkbox { justify-content: center; }
.settings-form {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.settings-section.collapsed > *:not(.settings-section-header) {
display: none;
}
#settings-view .form-label {
padding-left: var(--az-md);
}
.settings-form #email-subject,
.settings-form #email-body,
.settings-form #email-signature {
font-size: var(--az-text-xs);
}
.settings-assistant-launcher {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.settings-export-actions {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--az-lg);
flex-wrap: wrap;
}
.settings-export-buttons {
display: flex;
gap: var(--az-md);
flex-wrap: wrap;
}
.settings-export-info {
display: flex;
flex-direction: column;
gap: var(--az-sm);
align-items: flex-end;
text-align: right;
}
.settings-export-info-item {
font-size: var(--az-text-sm);
color: var(--az-text-muted);
}
.settings-backup-status {
padding: var(--az-md) var(--az-lg);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
margin-bottom: var(--az-lg);
}
.settings-backup-status-row {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.settings-backup-dot {
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
background: var(--az-green);
flex-shrink: 0;
}
.settings-mfa-action { margin-left: auto; }
.settings-mfa-confirm { margin-top: var(--az-md); }
.settings-backup-label {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.settings-backup-time {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
font-variant-numeric: tabular-nums;
margin-left: auto;
}
.settings-backup-restore {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.settings-backup-actions {
display: flex;
gap: var(--az-md);
flex-wrap: wrap;
}
.settings-password-form {
display: flex;
flex-direction: column;
gap: var(--az-md);
max-width: 420px;
}
.settings-password-form .btn,
.settings-form > .btn {
align-self: flex-start;
}
.settings-password-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.settings-password-input-wrap .form-input {
flex: 1;
width: 100%;
padding-right: var(--az-touch-min);
}
.settings-password-toggle {
position: absolute;
right: var(--az-sm);
background: none;
border: none;
color: var(--az-text-tertiary);
cursor: pointer;
padding: var(--az-xs);
border-radius: var(--az-radius-sm);
transition: color var(--az-transition);
}
.settings-password-toggle:hover {
color: var(--az-text-primary);
}
.settings-password-toggle i {
font-size: var(--az-text-lg-plus);
}
.smtp-password-locked {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-sm) var(--az-md);
background: var(--az-bg-secondary);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
}
.email-preview-empty {
margin: 0;
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
text-align: center;
padding: var(--az-3xl) var(--az-lg);
}
.email-preview-label {
margin: 0 0 var(--az-sm);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.email-preview-subject {
margin: 0 0 var(--az-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
}
.email-preview-body-wrap {
border-top: 1px solid var(--az-border);
padding-top: var(--az-md);
}
.email-preview-body {
margin: 0;
font-size: var(--az-text-sm);
color: var(--az-text-primary);
line-height: 1.6;
}
.sig-block {
margin-top: var(--az-lg);
padding-left: var(--az-md);
border-left: var(--az-2xs) solid var(--az-text-primary);
}
.sig-name {
margin: 0;
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.sig-detail {
margin: var(--az-2xs) 0 0;
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
line-height: 1.4;
}
.sig-sep {
opacity: 0.3;
margin: 0 var(--az-2xs);
}
.sig-link {
color: var(--az-text-primary);
text-decoration: none;
}
.smtp-hint-link {
color: var(--az-blue);
}
.settings-google-notice {
color: var(--az-text-tertiary);
font-size: var(--az-text-sm);
}
.backup-item {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-md) var(--az-lg);
cursor: pointer;
border-bottom: 1px solid var(--az-border);
transition: background var(--az-transition);
}
.backup-item:hover {
background: var(--az-bg-secondary);
}
.backup-item-radio {
accent-color: var(--az-blue);
width: var(--az-lg);
height: var(--az-lg);
flex-shrink: 0;
}
.backup-item-body {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--az-2xs);
}
.backup-item-header {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.backup-item-date {
color: var(--az-text-primary);
font-weight: var(--az-font-medium);
font-size: var(--az-text-sm);
}
.badge-blue {
background: var(--az-blue-bg);
color: var(--az-blue);
border: 1px solid var(--az-blue-border);
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-sm);
font-size: var(--az-text-xs);
}
.backup-item-meta {
color: var(--az-text-muted);
font-size: var(--az-text-xs);
}
.smtp-password-locked-display {
display: flex;
align-items: center;
gap: var(--az-sm);
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
}
.smtp-password-locked-display i {
font-size: var(--az-text-md);
color: var(--az-text-tertiary);
}
.smtp-password-locked-dots {
letter-spacing: 2px;
font-size: var(--az-text-sm);
}
.smtp-password-change-btn {
margin-left: auto;
background: none;
border: none;
color: var(--az-blue);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
padding: var(--az-xs) var(--az-sm);
border-radius: var(--az-radius-sm);
transition: background var(--az-transition);
}
.smtp-password-change-btn:hover {
background: var(--az-blue-bg);
}
.smtp-password-edit-actions {
display: flex;
justify-content: flex-end;
margin-top: var(--az-xs);
}
.smtp-password-cancel-btn {
background: none;
border: none;
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
padding: var(--az-xs) var(--az-sm);
border-radius: var(--az-radius-sm);
transition: color var(--az-transition), background var(--az-transition);
}
.smtp-password-cancel-btn:hover {
color: var(--az-text-primary);
background: var(--az-bg-elevated);
}
.settings-password-error {
font-size: var(--az-text-sm);
color: var(--az-red);
display: none;
}
.settings-password-success {
font-size: var(--az-text-sm);
color: var(--az-green);
display: none;
}
.settings-danger-zone {
border: 1px solid var(--az-red-border);
background: var(--az-red-bg);
padding: var(--az-xl);
border-radius: var(--az-radius-md);
}
.settings-mfa-row {
display: flex;
align-items: center;
gap: var(--az-md);
justify-content: space-between;
}
.settings-mfa-info {
display: flex;
align-items: center;
gap: var(--az-md);
}
.settings-mfa-dot-off {
background: var(--az-text-tertiary);
}
.settings-mfa-label {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.settings-title-danger {
color: var(--az-red);
}
.settings-btn-danger {
background: var(--az-red);
color: var(--az-text-on-accent);
border: none;
}
.settings-section-header--flex {
display: flex;
align-items: center;
justify-content: space-between;
}
.settings-legal-preview {
margin-top: var(--az-sm);
padding: var(--az-md);
border-radius: var(--az-radius-md);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
display: none;
}
.settings-legal-preview-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--az-xs);
}
.settings-legal-preview-label {
font-size: var(--az-text-2xs);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--az-text-tertiary);
}
.settings-legal-preview-btn {
font-size: var(--az-text-2xs);
color: var(--az-blue);
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.settings-backup-dropdown {
min-width: 100%;
}
.settings-backup-dropdown-list {
width: 100%;
max-height: 320px;
}
.settings-section:has(.settings-backup-dropdown) {
overflow: visible;
}
.filter-dropdown-menu > .sheet-head {
display: none;
}
.settings-trash-empty {
display: none;
text-align: center;
padding: var(--az-3xl) var(--az-xl);
}
.settings-trash-empty-icon {
font-size: var(--az-text-5xl);
color: var(--az-text-muted);
margin-bottom: var(--az-lg);
display: block;
}
.settings-trash-empty-text {
color: var(--az-text-tertiary);
font-size: var(--az-text-sm);
}
.form-input-readonly {
display: flex;
align-items: center;
opacity: 0.6;
cursor: default;
pointer-events: none;
}
.form-label--checkbox {
display: flex;
align-items: center;
gap: var(--az-md);
cursor: pointer;
}
.form-label--checkbox input[type="checkbox"] {
width: var(--az-lg);
height: var(--az-lg);
accent-color: var(--az-blue);
cursor: pointer;
flex-shrink: 0;
}
.btn-assistant-settings {
padding: var(--az-sm-plus) var(--az-lg-plus);
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
color: var(--az-text-primary);
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
cursor: pointer;
flex-shrink: 0;
}
.btn-assistant-settings:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.settings-header-actions {
display: flex;
align-items: center;
gap: var(--az-md);
margin-left: auto;
flex-shrink: 0;
}
.settings-save-status {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-xs);
color: var(--az-text-muted);
margin-left: var(--az-sm);
opacity: 0;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
vertical-align: middle;
}
.settings-save-status.saving {
opacity: 1;
color: var(--az-text-secondary);
}
.settings-save-status.saved {
opacity: 1;
color: var(--az-green);
}
.settings-save-status.error {
opacity: 1;
color: var(--az-red);
}
.settings-save-status.fade-out {
opacity: 0;
}
.settings-save-btn.saving i {
animation: spin 1s linear infinite;
}
#settings-save-btn.settings-save-btn.saved {
background: var(--az-green);
border-color: var(--az-green);
}
.settings-save-btn.saved i {
animation: check-bounce 0.5s ease;
}
@keyframes check-bounce {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.fiscal-year-pill {
display: inline-flex;
align-items: center;
padding: var(--az-xs-plus) var(--az-md-plus);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
color: var(--az-text-secondary);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.fiscal-year-pill:hover {
border-color: var(--az-border-hover);
}
.fiscal-year-pill.active {
background: var(--az-bg-card-hover);
border-color: var(--az-border-hover);
color: var(--az-text-primary);
}
.fiscal-year-pills {
display: flex;
gap: var(--az-sm);
flex-wrap: wrap;
}
.fiscal-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--az-text-muted);
margin-bottom: var(--az-sm);
}
.fiscal-help-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--az-xl);
height: var(--az-xl);
padding: var(--az-xs);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
color: var(--az-text-muted);
cursor: help;
vertical-align: middle;
margin-left: var(--az-xs);
}
.fiscal-regime-grid {
display: grid;
gap: var(--az-md);
}
.fiscal-regime-grid-4 {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.fiscal-regime-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.rate-edit-value {
background: transparent;
border: none;
border-bottom: 1px dashed transparent;
color: inherit;
font: inherit;
font-size: inherit;
font-weight: inherit;
padding: 0;
width: 42px;
cursor: inherit;
outline: none;
transition: border-color var(--az-transition-ease);
}
.fiscal-regime-card.active .rate-edit-value {
cursor: text;
}
.rate-edit-value:focus {
border-bottom-color: var(--az-blue);
color: var(--az-text-primary);
}
.fiscal-regime-card {
display: flex;
flex-direction: column;
gap: var(--az-sm);
padding: var(--az-lg);
background: var(--az-glass-bg);
overflow: hidden;
min-width: 0;
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
text-align: left;
color: var(--az-text-secondary);
}
.fiscal-regime-card:hover {
border-color: var(--az-glass-border-hover);
background: var(--az-glass-bg-hover);
}
.fiscal-regime-card.active {
background: var(--az-blue-bg);
border-color: var(--az-blue-border);
color: var(--az-text-primary);
}
.fiscal-regime-card.active:hover {
border-color: var(--az-blue);
}
.regime-card-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.regime-card-desc {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
line-height: 1.4;
}
.regime-card-rate {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
margin-top: auto;
overflow-wrap: break-word;
word-break: break-word;
}
.fiscal-regime-card.active .regime-card-rate {
color: var(--az-text-secondary);
}
.fiscal-regime-grid:has(.fiscal-regime-card.active) .fiscal-regime-card:not(.active) {
opacity: 0.55;
}
.fiscal-regime-grid:has(.fiscal-regime-card.active) .fiscal-regime-card:not(.active):hover {
opacity: 0.85;
}
.finance-kpi-card {
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-xl);
padding: var(--az-xl);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--az-md);
}
.finance-kpi-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-xs);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.finance-kpi-value {
font-size: var(--az-text-xl);
font-weight: var(--az-font-normal);
color: var(--az-text-primary);
letter-spacing: var(--az-tracking-tight);
font-variant-numeric: tabular-nums;
}
.finance-kpi-value--large {
font-size: var(--az-text-2xl);
}
.finance-kpi-hint {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
text-align: center;
}
.finance-kpi-card .finance-kpi-value--large,
.finance-kpi-card .settings-kpi-editable-value-large {
text-align: center;
width: 100%;
}
.finance-kpi-card .finance-kpi-progress {
width: 100%;
}
.finance-kpi-visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
}
.finance-kpi-visual .finance-kpi-value,
.finance-kpi-visual .settings-kpi-editable-value {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
text-align: center;
font-size: var(--az-text-lg-plus);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
width: 100%;
min-width: unset;
padding: 0;
z-index: 1;
}
.finance-kpi-circle {
width: 100px;
height: 100px;
min-width: 100px;
min-height: 100px;
border-radius: var(--az-radius-pill);
flex-shrink: 0;
transform: rotate(-90deg);
}
.finance-kpi-ring {
width: 100px;
height: 100px;
min-width: 100px;
min-height: 100px;
border-radius: var(--az-radius-pill);
flex-shrink: 0;
background: conic-gradient(var(--ring-color, var(--az-blue)) var(--ring-deg, 0deg),
var(--az-border) var(--ring-deg, 0deg));
position: relative;
}
.finance-kpi-ring::after {
content: "";
position: absolute;
inset: 6px;
border-radius: var(--az-radius-pill);
background: var(--az-bg-card);
}
.finance-kpi-ring--blue {
--ring-color: var(--az-blue);
}
.finance-kpi-ring--red {
--ring-color: var(--az-red);
}
.finance-kpi-progress {
height: 6px;
background: var(--az-bg-elevated);
border-radius: var(--az-radius-xs);
overflow: hidden;
width: 100%;
}
.finance-kpi-card--blue,
.finance-kpi-card--red,
.finance-kpi-card--cyan,
.finance-kpi-card--green,
.finance-kpi-card--purple {
border-left: 1px solid var(--az-border);
}
.fiscal-disclaimer {
display: flex;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
margin-bottom: var(--az-lg);
line-height: 1.4;
}
.fiscal-disclaimer i {
font-size: var(--az-text-sm);
flex-shrink: 0;
}
.fiscal-disclaimer a {
color: var(--az-blue);
text-decoration: none;
}
.fiscal-disclaimer a:hover {
text-decoration: underline;
}
.settings-kpi-editable-value,
.settings-kpi-editable-value-large {
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-sm);
padding: var(--az-xs) var(--az-sm);
color: var(--az-text-primary);
font-weight: var(--az-font-semibold);
font-variant-numeric: tabular-nums;
letter-spacing: var(--az-tracking-tight);
width: auto;
min-width: 80px;
}
.settings-kpi-editable-value-large {
font-size: var(--az-text-lg);
padding: var(--az-xs-plus) var(--az-sm-plus);
min-width: 120px;
}
.settings-kpi-editable-value:focus,
.settings-kpi-editable-value-large:focus {
border-color: var(--az-border-focus);
background: var(--az-bg-input-focus);
outline: none;
}
.settings-kpi-progress-fill,
.settings-kpi-progress-micro,
.settings-kpi-progress-tva {
height: 100%;
border-radius: var(--az-radius-xs);
transition: width 0.5s ease;
}
.settings-kpi-progress-fill {
background: var(--az-blue);
}
.settings-kpi-progress-micro {
background: var(--az-green);
}
.settings-kpi-progress-tva {
background: var(--az-purple);
}
.form-accordion {
display: block;
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
overflow: hidden;
margin-bottom: var(--az-md);
}
.form-accordion .mobile-accordion-header {
display: none;
}
.form-accordion .mobile-accordion-content {
display: block;
border-top: none;
}
@media (max-width: 768px) {
.form-accordion .mobile-accordion-header {
display: flex;
}
.form-accordion .mobile-accordion-content {
display: none;
border-top: 1px solid var(--az-border);
}
.form-accordion.expanded .mobile-accordion-content {
display: block;
}
}
.modal .modal-body .action-select button[type="button"] {
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
padding: 11px var(--az-md-plus);
width: 100%;
text-align: left;
cursor: pointer;
min-height: var(--az-touch-min);
}
.charges-header-flex {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 480px;
}
.charge-type-toggle-add-btn {
width: var(--az-icon-lg);
height: var(--az-icon-lg);
border-radius: var(--az-radius-lg-plus);
border: 1px solid var(--az-border);
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition:
background 0.2s,
color 0.2s,
border-color 0.2s;
}
.charge-type-toggle-add-btn:hover {
background: var(--az-blue-bg);
color: var(--az-blue);
border-color: var(--az-blue-border);
}
.charges-picker-panel {
margin-bottom: var(--az-lg-plus);
padding: var(--az-lg);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
}
.charges-picker-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--az-sm-plus);
}
.charges-picker-card {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-md-plus);
cursor: pointer;
transition:
border-color var(--az-transition),
background var(--az-transition);
position: relative;
}
.charges-picker-card:hover {
border-color: var(--az-glass-border-hover);
background: var(--az-bg-card-hover);
}
.charges-picker-card.selected {
border-color: var(--az-blue);
background: var(--az-blue-bg);
}
.charges-picker-card-icon {
color: var(--az-text-muted);
font-size: var(--az-text-lg);
margin-bottom: var(--az-sm);
}
.charges-picker-card.selected .charges-picker-card-icon {
color: var(--az-blue);
}
.charges-picker-card-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.charges-picker-card-label {
display: block;
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.charges-picker-card-desc {
display: block;
font-size: var(--az-text-xs);
color: var(--az-text-muted);
margin-top: var(--az-xs);
}
.charges-picker-footer {
display: flex;
justify-content: flex-end;
gap: var(--az-sm);
margin-top: var(--az-sm-plus);
}
.charges-picker-cancel-btn,
.charges-picker-ok-btn {
padding: var(--az-xs-plus) var(--az-lg);
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
border-radius: var(--az-radius-lg);
border: none;
cursor: pointer;
transition: background var(--az-transition-ease);
}
.charges-picker-cancel-btn {
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
}
.charges-picker-cancel-btn:hover {
background: var(--az-bg-card-hover);
}
.charges-picker-ok-btn {
background: var(--az-blue);
color: var(--az-bg-primary);
}
.charges-picker-ok-btn:hover {
filter: brightness(1.15);
}
.charges-picker-card.picker-custom {
border-style: dashed;
}
.charges-picker-check {
position: absolute;
top: var(--az-sm-plus);
right: var(--az-sm-plus);
width: var(--az-2xl);
height: var(--az-2xl);
border-radius: var(--az-radius-md);
border: 1px solid var(--az-border);
display: flex;
align-items: center;
justify-content: center;
color: transparent;
transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
}
.charges-picker-card.selected .charges-picker-check {
background: var(--az-blue);
border-color: var(--az-blue);
color: var(--az-btn-inv-text);
}
.charges-types-list-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--az-sm-plus);
}
.charge-type-card {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-md-plus);
transition: border-color var(--az-transition);
position: relative;
}
.charge-type-card:hover {
border-color: var(--az-glass-border-hover);
}
.charge-type-card-header {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-xs-plus);
text-align: center;
}
.charge-type-card-icon {
color: var(--az-text-muted);
font-size: var(--az-text-lg);
flex-shrink: 0;
margin-bottom: var(--az-xs);
}
.charge-type-card-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.charge-type-card-label {
display: block;
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.charge-type-card-desc {
display: block;
font-size: var(--az-text-xs);
color: var(--az-text-muted);
margin-top: 1px;
}
.charge-type-card-amount {
display: flex;
justify-content: center;
align-items: center;
gap: var(--az-xs-plus);
margin-top: var(--az-lg);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-xs-plus) var(--az-md);
width: fit-content;
min-width: 90px;
margin-left: auto;
margin-right: auto;
transition: color var(--az-transition-ease), background-color var(--az-transition-ease), border-color var(--az-transition-ease), opacity var(--az-transition-ease), transform var(--az-transition-ease);
}
.charge-type-card-amount:focus-within {
border-color: var(--az-primary);
box-shadow: 0 0 0 2px var(--az-blue-bg);
}
input.charge-amount-input.charge-amount-input {
width: auto;
max-width: 120px;
padding: 0;
font-size: var(--az-text-lg-plus);
text-align: right;
background: transparent;
border: none;
outline: none;
box-shadow: none;
margin: 0;
color: var(--az-text-primary);
font-weight: var(--az-font-semibold);
}
.charge-amount-input:focus {
outline: none;
border-color: var(--az-blue);
}
.charge-amount-input::placeholder {
color: var(--az-text-muted);
font-weight: var(--az-font-normal);
}
.charge-amount-suffix {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
white-space: nowrap;
}
.charge-amount-tag {
font-size: var(--az-text-xs-plus);
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-sm);
font-weight: var(--az-font-medium);
}
.charge-amount-tag.variable {
background: var(--az-amber-bg);
color: var(--az-amber);
}
.charge-type-remove-btn {
background: none;
border: none;
color: var(--az-text-muted);
font-size: var(--az-text-sm);
cursor: pointer;
padding: var(--az-xs);
border-radius: var(--az-radius-md);
opacity: 0;
transition:
opacity 0.2s,
color 0.2s;
position: absolute;
top: 8px;
right: 8px;
}
.charge-type-card:hover .charge-type-remove-btn {
opacity: 0.6;
}
.charge-type-remove-btn:hover {
color: var(--az-red);
opacity: 1;
}
#settings-save-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
padding: var(--az-sm-plus) var(--az-lg-plus);
border-radius: var(--az-radius-md);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
color: var(--az-text-primary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
cursor: pointer;
transition:
background var(--az-transition),
border-color var(--az-transition);
flex-shrink: 0;
}
#settings-save-btn:hover {
background: var(--az-bg-card-hover);
border-color: var(--az-border-hover);
}
#settings-save-btn i {
font-size: var(--az-text-lg-plus);
line-height: 1;
color: currentColor;
}
.settings-theme-toggle {
display: flex;
gap: var(--az-xs);
flex-shrink: 0;
margin-left: auto;
padding-bottom: var(--az-sm);
}
.settings-theme-toggle-header {
display: none;
}
.settings-theme-btn-left,
.settings-theme-btn-right {
display: none;
}
.settings-theme-toggle .theme-option {
display: flex;
align-items: center;
justify-content: center;
width: var(--az-touch-min);
height: var(--az-touch-min);
padding: 0;
border-radius: var(--az-radius-md);
font-size: var(--az-text-lg-plus);
background: transparent;
border: 1px solid var(--az-border);
color: var(--az-text-muted);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.settings-theme-toggle .theme-option:hover {
border-color: var(--az-border-hover);
color: var(--az-text-primary);
}
.settings-theme-toggle .theme-option.active {
background: var(--az-bg-card-hover);
border-color: var(--az-border-hover);
color: var(--az-text-primary);
}
.settings-assistant-divider {
padding: 0 0 var(--az-lg-plus) 0;
margin-bottom: var(--az-lg);
border-bottom: 1px solid var(--az-border);
}
.btn-assistant-header {
color: var(--az-blue);
background: var(--az-blue-bg);
border: 1px solid var(--az-blue-border);
margin-right: var(--az-sm);
}
.btn-assistant-header:hover {
background: var(--az-blue-border);
border-color: var(--az-blue);
}
.settings-quick-actions {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.settings-assistant-slot-header button,
.settings-assistant-slot-header .btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
padding: var(--az-sm-plus) var(--az-lg-plus);
border-radius: var(--az-radius-md);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
color: var(--az-text-primary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
cursor: pointer;
transition:
background var(--az-transition),
border-color var(--az-transition);
flex-shrink: 0;
}
.settings-assistant-slot-header button:hover,
.settings-assistant-slot-header .btn:hover {
background: var(--az-bg-card-hover);
border-color: var(--az-border-hover);
}
#comptabilite .kpi-grid {
grid-template-columns: repeat(4, 1fr);
}
#comptabilite .cockpit-widget,
#comptabilite .kpi-card-premium {
padding: var(--az-kpi-pad);
row-gap: var(--az-kpi-gap);
}
#comptabilite .card-value {
font-size: var(--az-kpi-value);
}
.compta-header {
align-items: center;
}
.compta-header-toolbar {
display: flex;
align-items: center;
gap: var(--az-sm);
flex-shrink: 0;
}
.compta-header-toolbar .filters-desktop {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.compta-header-toolbar .actions {
display: flex;
align-items: center;
}
.fiscal-gauges-row {
grid-template-columns: 1fr 1fr;
}
.fiscal-gauge-kpi {
padding: var(--az-lg) var(--az-xl);
}
.fiscal-gauge-kpi .fiscal-gauge--inline {
width: auto;
}
.fiscal-gauge--inline {
width: 200px;
flex-shrink: 0;
}
.fiscal-gauge {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.fiscal-gauge-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--az-md);
}
.fiscal-gauge-label-wrap {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.fiscal-gauge-title {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
text-transform: var(--az-label-transform);
letter-spacing: 0.01em;
line-height: 1.3;
}
.fiscal-gauge-amount {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
line-height: 1.2;
letter-spacing: -0.01em;
}
.fiscal-gauge-right {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.fiscal-gauge-pct {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.fiscal-gauge-sub {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
font-variant-numeric: tabular-nums;
}
.fiscal-gauge-track {
height: var(--az-xs);
background: var(--az-border);
border-radius: var(--az-radius-pill);
overflow: hidden;
}
.fiscal-gauge-fill {
height: 100%;
border-radius: var(--az-radius-pill);
transition: width 1s var(--az-ease-snappy);
width: 0;
}
.fiscal-gauge-fill--tva {
background: var(--az-amber);
}
.fiscal-gauge-fill--micro {
background: var(--az-green);
}
.compta-section-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin: var(--az-xl) 0 var(--az-md) 0;
letter-spacing: -0.01em;
}
.spin-once {
animation: spin 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.onboarding-bg {
position: fixed;
inset: 0;
z-index: var(--az-z-loader);
background: var(--az-bg-app);
}
.onboarding-container {
position: fixed;
inset: 0;
z-index: calc(var(--az-z-loader) + 1);
width: 100%;
max-width: 540px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.onboarding-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-md) var(--az-lg-plus);
flex-shrink: 0;
}
.onboarding-premium-text {
font-size: var(--az-text-xs-plus);
font-weight: var(--az-font-semibold);
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--az-text-secondary);
}
.onboarding-btn-skip {
padding: var(--az-xs) var(--az-sm-plus);
border-radius: var(--az-radius-sm);
font-size: var(--az-text-xs-plus);
color: var(--az-text-muted);
transition: color var(--az-transition);
}
.onboarding-btn-skip:hover {
color: var(--az-text-primary);
}
.onboarding-progress {
height: 3px;
background: var(--az-bg-elevated);
border-radius: var(--az-2xs);
margin: 0 var(--az-lg-plus);
overflow: hidden;
flex-shrink: 0;
}
.onboarding-progress>div {
height: 100%;
background: var(--az-blue);
border-radius: var(--az-2xs);
transition: width 0.4s ease;
}
.onboarding-card {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.onboarding-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--az-lg) var(--az-lg-plus);
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--az-border) transparent;
}
.onboarding-footer {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-sm-plus) var(--az-lg-plus);
flex-shrink: 0;
border-top: 1px solid var(--az-border);
}
.onboarding-btn-back {
display: flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-sm) var(--az-md);
border-radius: var(--az-radius-md);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-muted);
border: 1px solid var(--az-border);
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.onboarding-btn-back i {
font-size: var(--az-text-md);
line-height: 1;
}
.onboarding-btn-back:hover {
color: var(--az-text-primary);
}
.onboarding-btn-back.hidden {
visibility: hidden;
}
.onboarding-footer-spacer {
flex: 1;
}
.onboarding-btn-next {
display: flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-sm) var(--az-md);
border-radius: var(--az-radius-md);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
background: var(--az-btn-inv-bg);
color: var(--az-btn-inv-text);
transition: background var(--az-transition);
}
.onboarding-btn-next i {
font-size: var(--az-text-sm);
line-height: 1;
color: var(--az-btn-inv-text);
}
.onboarding-btn-next:hover {
background: var(--az-btn-inv-bg-hover);
}
.onboarding-step-header {
text-align: center;
margin-bottom: var(--az-lg);
}
.onboarding-step-title {
font-size: var(--az-text-xl);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.onboarding-step-subtitle {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
margin-top: 3px;
}
.onboarding-form {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
#setup-cloud-overlay .onboarding-bg,
#setup-cloud-overlay .onboarding-container {
opacity: 0;
}
#setup-cloud-overlay.visible .onboarding-bg,
#setup-cloud-overlay.visible .onboarding-container {
opacity: 1;
}
.onboarding-pappers-item {
padding: var(--az-sm-plus) var(--az-md-plus);
cursor: pointer;
font-size: var(--az-text-xs);
color: var(--az-text-primary);
border-bottom: 1px solid var(--az-border);
transition: background var(--az-transition);
}
.onboarding-pappers-item:hover {
background: var(--az-bg-elevated);
}
.onboarding-pappers-item strong {
color: var(--az-text-primary);
}
.onboarding-pappers-item .ac-pappers-meta {
font-size: var(--az-text-xs-plus);
color: var(--az-text-muted);
}
.onboarding-welcome,
.onboarding-success {
text-align: center;
padding: var(--az-lg) 0;
}
.onboarding-welcome-brand {
font-size: var(--az-text-xs-plus);
font-weight: var(--az-font-semibold);
letter-spacing: 2px;
text-transform: uppercase;
color: var(--az-blue);
margin-bottom: var(--az-md);
}
.onboarding-success-icon {
width: 48px;
height: 48px;
border-radius: var(--az-radius-pill);
background: var(--az-green-bg);
color: var(--az-green);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--az-md);
}
.onboarding-success-icon i {
font-size: var(--az-text-2xl-plus);
line-height: 1;
}
.onboarding-welcome-title,
.onboarding-success-title {
font-size: var(--az-text-2xl);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin-bottom: var(--az-xs-plus);
}
.onboarding-welcome-text,
.onboarding-success-text {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
margin-bottom: var(--az-lg-plus);
line-height: 1.5;
}
.onboarding-welcome-features {
display: flex;
flex-direction: column;
gap: var(--az-sm-plus);
text-align: left;
max-width: 320px;
margin: 0 auto;
}
.onboarding-welcome-feature {
display: flex;
align-items: center;
gap: var(--az-sm-plus);
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.onboarding-welcome-feature-icon {
width: var(--az-icon-btn-sm);
height: var(--az-icon-btn-sm);
border-radius: var(--az-radius-lg);
display: flex;
align-items: center;
justify-content: center;
background: var(--az-blue-bg);
color: var(--az-blue);
flex-shrink: 0;
}
.onboarding-welcome-feature-icon i {
font-size: var(--az-text-md);
line-height: 1;
}
.onboarding-welcome-cta {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
width: 100%;
max-width: 320px;
margin: var(--az-2xl) auto 0;
padding: var(--az-md-plus) var(--az-xl);
border-radius: var(--az-radius-lg-plus);
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
background: var(--az-btn-inv-bg);
color: var(--az-btn-inv-text);
letter-spacing: 0.2px;
transition: color var(--az-transition-ease), background-color var(--az-transition-ease), border-color var(--az-transition-ease), opacity var(--az-transition-ease), transform var(--az-transition-ease);
}
.onboarding-welcome-cta i {
font-size: var(--az-text-lg-plus);
line-height: 1;
color: var(--az-btn-inv-text);
}
.onboarding-welcome-cta:hover {
background: var(--az-btn-inv-bg-hover);
}
.onboarding-btn-start {
display: inline-flex;
align-items: center;
gap: var(--az-xs-plus);
padding: var(--az-sm) var(--az-lg);
border-radius: var(--az-radius-md);
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
background: var(--az-btn-inv-bg);
color: var(--az-btn-inv-text);
transition: background var(--az-transition);
}
.onboarding-btn-start i {
font-size: var(--az-text-sm);
line-height: 1;
color: var(--az-btn-inv-text);
}
.onboarding-btn-start:hover {
background: var(--az-btn-inv-bg-hover);
}
.onboarding-field {
display: flex;
flex-direction: column;
gap: var(--az-xs-plus);
}
.onboarding-activity-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--az-sm-plus);
}
.onboarding-activity-card {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-md-plus);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
text-align: left;
}
.onboarding-activity-card:hover {
border-color: var(--az-glass-border-hover);
}
.onboarding-activity-card.selected {
border-color: var(--az-blue);
background: var(--az-blue-bg);
}
.onboarding-activity-card-icon {
margin-bottom: var(--az-xs-plus);
}
.onboarding-activity-card-icon i {
font-size: var(--az-text-xl-plus);
line-height: 1;
color: var(--az-text-secondary);
}
.onboarding-activity-card.selected .onboarding-activity-card-icon i {
color: var(--az-blue);
}
.onboarding-activity-card-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.onboarding-activity-card-desc {
font-size: var(--az-text-2xs);
color: var(--az-text-secondary);
margin-top: var(--az-2xs);
line-height: 1.3;
}
.onboarding-hint {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
margin-top: var(--az-xs);
text-align: center;
}
.onboarding-regime-grid {
display: flex;
gap: var(--az-sm);
max-width: 520px;
margin: 0 auto;
}
.onboarding-regime-card {
flex: 1;
display: flex;
align-items: center;
gap: var(--az-sm-plus);
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-md) var(--az-md-plus);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
text-align: left;
}
.onboarding-regime-card:hover {
border-color: var(--az-glass-border-hover);
}
.onboarding-regime-card.selected {
border-color: var(--az-blue);
background: var(--az-blue-bg);
}
.onboarding-regime-card-check {
width: 18px;
height: 18px;
border-radius: var(--az-radius-pill);
border: 2px solid var(--az-border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.onboarding-regime-card.selected .onboarding-regime-card-check {
border-color: var(--az-blue);
background: var(--az-blue);
}
.onboarding-regime-card-content {
flex: 1;
}
.onboarding-regime-card-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.onboarding-regime-card-desc {
font-size: var(--az-text-2xs);
color: var(--az-text-secondary);
margin-top: 1px;
}
.onboarding-regime-unknown {
font-size: var(--az-text-xs-plus);
color: var(--az-text-muted);
margin-top: var(--az-xs-plus);
transition: color var(--az-transition);
}
.onboarding-regime-unknown:hover,
.onboarding-regime-unknown.active {
color: var(--az-blue);
}
.onboarding-tax-rate-section {
margin-top: var(--az-lg-plus);
padding-top: var(--az-lg);
border-top: 1px solid var(--az-border);
}
.onboarding-urssaf-frequency {
margin-top: var(--az-lg-plus);
padding-top: var(--az-lg);
border-top: 1px solid var(--az-border);
}
.onboarding-sublabel {
display: block;
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
margin-bottom: var(--az-sm-plus);
letter-spacing: 0.05em;
text-align: center;
}
.onboarding-frequency-pills {
display: flex;
gap: var(--az-sm);
justify-content: center;
}
.onboarding-frequency-pill {
padding: var(--az-sm) var(--az-lg-plus);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
font-family: inherit;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
color: var(--az-text-secondary);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
text-align: center;
}
.onboarding-frequency-pill:hover {
border-color: var(--az-border-hover);
}
.onboarding-frequency-pill.selected {
background: var(--az-blue-bg);
border-color: var(--az-blue-border);
color: var(--az-blue);
}
.onboarding-company-form {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.onboarding-label {
display: block;
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
margin-bottom: var(--az-xs-plus);
}
.onboarding-input::placeholder,
.onboarding-textarea::placeholder {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.onboarding-input {
width: 100%;
padding: var(--az-sm-plus) var(--az-md);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
color: var(--az-text-primary);
font-size: var(--az-text-xs);
outline: none;
transition: border-color var(--az-transition);
}
.onboarding-input:focus {
border-color: var(--az-border-focus);
}
.onboarding-textarea {
width: 100%;
padding: var(--az-sm-plus) var(--az-md);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
color: var(--az-text-primary);
font-size: var(--az-text-xs);
outline: none;
resize: none;
min-height: 52px;
}
.onboarding-textarea:focus {
border-color: var(--az-border-focus);
}
.onboarding-dual-inputs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--az-md);
}
.onboarding-logo-upload {
border: 1px dashed var(--az-border);
border-radius: var(--az-radius-md);
padding: var(--az-md);
text-align: center;
cursor: pointer;
transition: border-color var(--az-transition);
}
.onboarding-logo-upload:hover {
border-color: var(--az-border-hover);
}
.onboarding-logo-upload.has-logo {
border-style: solid;
padding: var(--az-sm);
}
.logo-preview {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
}
.logo-preview img {
max-width: 80px;
max-height: 40px;
object-fit: contain;
}
.logo-remove-btn {
padding: var(--az-xs);
border-radius: var(--az-radius-sm);
color: var(--az-red);
opacity: 0.6;
transition: opacity var(--az-transition);
}
.logo-remove-btn:hover {
opacity: 1;
}
.logo-remove-btn i {
font-size: var(--az-text-md);
line-height: 1;
}
.logo-placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-xs);
color: var(--az-text-muted);
font-size: var(--az-text-xs);
}
.logo-placeholder i {
font-size: var(--az-text-xl-plus);
line-height: 1;
}
.logo-hint {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
}
.onboarding-year-pills {
display: flex;
justify-content: center;
gap: var(--az-sm-plus);
padding: var(--az-sm) 0;
}
.onboarding-year-pill {
padding: var(--az-md) var(--az-2xl);
background: var(--az-bg-elevated);
border: 1.5px solid var(--az-border);
border-radius: var(--az-radius-xl);
cursor: pointer;
font-size: var(--az-text-lg-plus);
font-weight: var(--az-font-semibold);
font-family: inherit;
color: var(--az-text-secondary);
transition: color var(--az-transition-ease), background-color var(--az-transition-ease), border-color var(--az-transition-ease), opacity var(--az-transition-ease), transform var(--az-transition-ease);
min-width: 90px;
text-align: center;
}
.onboarding-year-pill:hover {
border-color: var(--az-border-hover);
color: var(--az-text-primary);
}
.onboarding-year-pill.selected {
border-color: var(--az-blue-border);
background: var(--az-blue-bg);
color: var(--az-blue);
}
.onboarding-recap {
display: flex;
flex-direction: column;
gap: var(--az-sm-plus);
}
.onboarding-recap-section {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-md) var(--az-md-plus);
}
.onboarding-recap-section-title {
font-size: var(--az-text-xs-plus);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin-bottom: var(--az-xs-plus);
letter-spacing: 0.03em;
}
.onboarding-recap-row {
display: flex;
align-items: baseline;
gap: 0;
padding: var(--az-xs) 0;
overflow: hidden;
}
.onboarding-recap-label {
font-size: var(--az-text-xs-plus);
color: var(--az-text-secondary);
flex-shrink: 0;
}
.onboarding-recap-label::after {
content: "\00a0:\00a0";
color: var(--az-text-muted);
}
.onboarding-recap-label--charge::after {
content: "\00a0:\00a0";
}
.onboarding-recap-value {
font-size: var(--az-text-xs-plus);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.onboarding-recap-value--accent {
color: var(--az-blue);
}
.onboarding-recap-note {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
text-align: center;
margin-top: var(--az-xs);
}
@media (max-width: 480px) {
.onboarding-container {
max-width: 100%;
}
.onboarding-content {
padding: var(--az-md) var(--az-lg);
}
.onboarding-header {
padding: var(--az-sm-plus) var(--az-lg);
}
.onboarding-footer {
padding: var(--az-sm-plus) var(--az-lg);
padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.onboarding-progress {
margin: 0 var(--az-lg);
}
.onboarding-input,
.onboarding-textarea {
font-size: var(--az-text-xs);
}
.onboarding-input::placeholder,
.onboarding-textarea::placeholder {
font-size: var(--az-text-xs);
}
.onboarding-label {
font-size: var(--az-text-xs);
}
}
@media (min-width: 769px) {
.onboarding-bg {
background: var(--az-bg-app);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.onboarding-container {
inset: 0;
top: 0;
left: 0;
transform: none;
width: 100%;
max-height: none;
max-width: none;
border-radius: 0;
background: var(--az-bg-app);
border: none;
box-shadow: none;
overflow: hidden;
}
.onboarding-content {
justify-content: center;
padding: var(--az-2xl) var(--az-4xl);
max-width: 760px;
margin: 0 auto;
width: 100%;
}
.onboarding-header {
padding: var(--az-xl) var(--az-4xl);
max-width: 760px;
margin: 0 auto;
width: 100%;
}
.onboarding-premium-text {
font-size: var(--az-text-sm);
letter-spacing: 1.8px;
}
.onboarding-btn-skip {
font-size: var(--az-text-sm);
padding: var(--az-xs-plus) var(--az-md-plus);
}
.onboarding-footer {
padding: var(--az-lg-plus) var(--az-4xl);
max-width: 760px;
margin: 0 auto;
width: 100%;
}
.onboarding-progress {
margin: 0 auto;
max-width: 760px;
width: calc(100% - 96px);
}
.onboarding-card {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
width: 100%;
}
.onboarding-step-title {
font-size: var(--az-text-2xl);
}
.onboarding-step-subtitle {
font-size: var(--az-text-sm);
}
.onboarding-welcome-brand {
font-size: var(--az-text-sm);
letter-spacing: 2.5px;
margin-bottom: var(--az-lg);
}
.onboarding-welcome-title,
.onboarding-success-title {
font-size: var(--az-text-3xl);
margin-bottom: var(--az-sm-plus);
}
.onboarding-welcome-text,
.onboarding-success-text {
font-size: var(--az-text-lg);
margin-bottom: var(--az-chart-pad);
}
.onboarding-welcome-features {
max-width: 380px;
gap: var(--az-md-plus);
margin-bottom: var(--az-sm);
}
.onboarding-welcome-feature {
font-size: var(--az-text-lg);
gap: var(--az-md);
}
.onboarding-welcome-feature-icon {
width: 34px;
height: 34px;
border-radius: var(--az-radius-lg);
}
.onboarding-welcome-feature-icon i {
font-size: var(--az-text-lg-plus);
line-height: 1;
}
.onboarding-welcome-cta {
padding: var(--az-md-plus) var(--az-xl);
font-size: var(--az-text-lg);
border-radius: var(--az-radius-lg-plus);
max-width: 380px;
}
.onboarding-welcome-cta i {
font-size: var(--az-text-xl);
line-height: 1;
}
.onboarding-btn-next {
padding: var(--az-sm-plus) var(--az-lg-plus);
font-size: var(--az-text-sm);
border-radius: var(--az-radius-lg);
}
.onboarding-btn-next i {
font-size: var(--az-text-lg);
line-height: 1;
}
.onboarding-btn-back {
padding: var(--az-sm-plus) var(--az-lg-plus);
font-size: var(--az-text-sm);
border-radius: var(--az-radius-lg);
}
.onboarding-btn-back i {
font-size: var(--az-text-lg);
line-height: 1;
}
.onboarding-label {
font-size: var(--az-text-sm);
}
.onboarding-input,
.onboarding-textarea {
font-size: var(--az-text-sm);
padding: var(--az-sm-plus) var(--az-md-plus);
}
.onboarding-hint {
font-size: var(--az-text-xs);
}
.onboarding-activity-card-title {
font-size: var(--az-text-sm);
}
.onboarding-activity-card-desc {
font-size: var(--az-text-xs);
}
.onboarding-btn-start {
padding: var(--az-md-plus) var(--az-2xl);
font-size: var(--az-text-lg);
border-radius: var(--az-radius-lg-plus);
}
.onboarding-success-icon {
width: 56px;
height: 56px;
margin-bottom: var(--az-lg);
}
.onboarding-success-icon i {
font-size: var(--az-text-3xl);
line-height: 1;
}
}
.toc-page {
page-break-after: always;
}
.toc-title {
font-size: var(--az-text-xl-plus);
font-weight: var(--az-font-bold);
margin-bottom: var(--az-xl);
}
.toc-item {
display: flex;
justify-content: space-between;
padding: var(--az-sm) 0;
border-bottom: 1px solid var(--az-border);
}
.toc-item-title {
font-size: var(--az-text-md);
}
.toc-item-page {
font-size: var(--az-text-md);
color: var(--az-text-tertiary);
}
.page-footer {
font-size: var(--az-text-xs-plus);
color: var(--az-text-tertiary);
text-align: center;
margin-top: auto;
padding-top: var(--az-lg);
}
.mobile-doc-details,
.mobile-transaction-details,
.mobile-client-details,
.mobile-client-detail,
.mobile-doc-date,
.mobile-transaction-date,
.mobile-inline-status,
.mobile-right-stack,
.mobile-amount-status,
.mobile-amount,
.mobile-status,
.mobile-rank,
.mobile-actions-row,
.mobile-view-btn,
.mobile-actions-trigger,
.mobile-client-actions {
display: none;
}
#admin-view {
flex: 1;
}
#admin-view .kpi-grid {
grid-template-columns: repeat(3, 1fr);
}
#admin-view .cockpit-widget {
padding: var(--az-kpi-pad);
gap: var(--az-kpi-gap);
}
#admin-view .kpi-card-premium {
padding: var(--az-kpi-pad);
row-gap: var(--az-kpi-gap);
}
#admin-view .card-value {
font-size: var(--az-kpi-value);
}
.kpi-icon-users,
.kpi-icon-connected,
.kpi-icon-mrr,
.kpi-icon-conversion,
.kpi-icon-active,
.kpi-icon-alerts {
color: var(--az-text-secondary);
}
.admin-status-breakdown {
display: flex;
flex-wrap: wrap;
gap: var(--az-sm);
}
.admin-status-pill {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-pill);
padding: var(--az-xs) var(--az-md);
font-size: var(--az-text-xs);
color: var(--az-text-primary);
transition: background var(--az-transition);
}
.admin-status-pill:hover {
background: var(--az-bg-card-hover);
}
.admin-status-pill span:last-child {
font-variant-numeric: tabular-nums;
font-weight: var(--az-font-semibold);
}
.admin-section {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
overflow: visible;
position: relative;
}
.admin-section--padded {
padding: var(--az-xl);
}
@media (max-width: 768px) {
.admin-section--padded {
padding: var(--az-lg);
display: flex;
justify-content: center;
}
}
.admin-section .table-container {
border: none;
border-radius: 0 0 var(--az-radius-lg) var(--az-radius-lg);
overflow: hidden;
}
.admin-section .table thead th {
background: transparent;
}
.admin-th-sortable {
cursor: pointer;
user-select: none;
transition: color var(--az-transition);
}
.admin-th-sortable:hover {
color: var(--az-text-primary);
}
.admin-th-sortable .sort-arrow {
display: inline;
margin-left: var(--az-2xs);
font-size: var(--az-text-2xs);
opacity: 0.5;
vertical-align: middle;
}
.admin-th-sortable.sort-active .sort-arrow {
opacity: 0.8;
}
#admin-users-table {
min-width: 800px;
}
#admin-users-table .table-col-email {
width: 28%;
text-align: left;
}
#admin-users-table .table-col-uid {
width: 10%;
text-align: center;
}
#admin-users-table .table-col-status {
width: 10%;
text-align: center;
}
.admin-uid {
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
font-size: var(--az-text-xs);
color: var(--az-text-muted);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
padding: var(--az-2xs) var(--az-xs);
border-radius: var(--az-radius-sm);
cursor: pointer;
user-select: all;
letter-spacing: 0.02em;
}
.admin-uid.admin-uid-online {
color: var(--az-green);
background: var(--az-green-bg);
border-color: var(--az-green-border);
}
#admin-users-table .table-col-inscription {
width: 10%;
text-align: center;
}
#admin-users-table .table-col-echeance {
width: 10%;
text-align: center;
}
#admin-users-table .table-col-lastlogin {
width: 10%;
text-align: center;
}
#admin-users-table .table-col-lastsave {
width: 10%;
text-align: center;
}
#admin-users-table .table-col-actions {
width: 12%;
text-align: center;
}
#admin-users-table tbody td:first-child {
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
max-width: 0;
}
.admin-connected-list {
padding: var(--az-sm) var(--az-lg);
max-height: 200px;
overflow-y: auto;
}
.admin-connected-item {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-sm) var(--az-md);
border-radius: var(--az-radius-md);
transition: background var(--az-transition);
}
.admin-connected-item:hover {
background: var(--az-bg-elevated);
}
.admin-connected-email {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
font-weight: var(--az-font-medium);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-connected-time {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
white-space: nowrap;
}
.admin-live-dot {
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
background: var(--az-green);
flex-shrink: 0;
animation: admin-pulse 2s ease-in-out infinite;
}
.admin-online-dot {
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
background: var(--az-green);
display: inline-block;
margin-right: var(--az-xs);
flex-shrink: 0;
}
@keyframes admin-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.admin-badge {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: 0;
background: transparent;
border: none;
border-radius: 0;
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
letter-spacing: 0.03em;
text-transform: uppercase;
white-space: nowrap;
}
.admin-badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: var(--az-radius-pill);
flex-shrink: 0;
}
.admin-badge-amber {
color: var(--az-amber);
}
.admin-badge-amber::before {
background: var(--az-amber);
}
.admin-badge-blue {
color: var(--az-blue);
}
.admin-badge-blue::before {
background: var(--az-blue);
}
.admin-badge-purple {
color: var(--az-purple);
}
.admin-badge-purple::before {
background: var(--az-purple);
}
.admin-badge-gold {
color: var(--az-amber);
font-weight: var(--az-font-semibold);
}
.admin-badge-gold::before {
background: var(--az-amber);
}
.admin-badge-green {
color: var(--az-green);
}
.admin-badge-green::before {
background: var(--az-green);
}
.admin-badge-red {
color: var(--az-red);
}
.admin-badge-red::before {
background: var(--az-red);
}
.admin-badge-muted {
color: var(--az-text-tertiary);
}
.admin-badge-muted::before {
background: var(--az-text-tertiary);
}
#admin-pending-section .section-title {
margin-bottom: var(--az-lg);
}
.admin-pending-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--az-lg-plus);
height: var(--az-lg-plus);
padding: 0 var(--az-xs);
border-radius: var(--az-radius-pill);
background: var(--az-amber);
color: var(--az-bg-app);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-bold);
vertical-align: middle;
margin-left: var(--az-md);
}
#admin-pending-section .admin-section {
padding: var(--az-md);
}
.admin-pending-list {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.admin-pending-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
padding: var(--az-sm) var(--az-md);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
transition: border-color var(--az-transition);
}
.admin-pending-card:hover {
border-color: var(--az-border-hover);
}
.admin-pending-info {
display: flex;
flex-direction: column;
gap: var(--az-xs);
min-width: 0;
}
.admin-pending-email {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-pending-meta {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.admin-pending-actions {
display: flex;
gap: var(--az-sm);
flex-shrink: 0;
}
.btn-admin-approve,
.btn-admin-reject {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs) var(--az-md);
border-radius: var(--az-radius-md);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.btn-admin-approve {
background: var(--az-green-bg);
border: 1px solid var(--az-green-border);
color: var(--az-green);
}
.btn-admin-approve:hover {
border-color: var(--az-green);
}
.btn-admin-reject {
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
color: var(--az-text-tertiary);
}
.btn-admin-reject:hover {
background: var(--az-red-bg);
border-color: var(--az-red-border);
color: var(--az-red);
}
.admin-trial-inline {
display: flex;
align-items: baseline;
gap: var(--az-xs);
justify-content: center;
line-height: 1;
}
.admin-trial-inline-input {
width: 2.5ch;
padding: 0;
background: transparent;
border: none;
border-bottom: 1px solid transparent;
color: var(--az-text-primary);
font-size: inherit;
font-weight: inherit;
line-height: 1;
text-align: center;
font-variant-numeric: tabular-nums;
transition: border-color var(--az-transition);
-moz-appearance: textfield;
}
.admin-trial-inline-input::-webkit-outer-spin-button,
.admin-trial-inline-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.admin-trial-inline-input:focus {
outline: none;
border-bottom-color: var(--az-blue);
}
.admin-trial-inline-unit {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
line-height: 1;
}
.admin-trial-duration-card .widget-body {
font-size: var(--az-kpi-value);
font-weight: var(--az-font-semibold);
}
.admin-section:has(#admin-connected-list) {
max-width: 680px;
}
.admin-tab-label-short { display: none; }
.admin-tab-label-full  { display: inline; }
.admin-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--az-border);
margin-bottom: 0;
flex-shrink: 0;
}
.admin-tab {
display: flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-sm) var(--az-lg);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-tertiary);
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: color var(--az-transition-fast), border-color var(--az-transition-fast);
white-space: nowrap;
}
.admin-tab i {
font-size: var(--az-text-md);
line-height: 1;
}
.admin-tab:hover {
color: var(--az-text-secondary);
}
.admin-tab.active {
color: var(--az-text-primary);
border-bottom-color: var(--az-blue);
}
.admin-tab-panel {
display: none;
flex-direction: column;
gap: var(--az-section-gap);
overflow: visible;
padding-bottom: var(--az-3xl);
}
.admin-tab-panel.active {
display: flex;
}
.admin-tab-panel > .section-title {
margin-top: var(--az-3xl);
margin-bottom: var(--az-md);
}
.admin-tab-panel > .section-title:first-child {
margin-top: 0;
}
.admin-tab-intro {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.admin-tab-intro .section-title {
margin-top: 0;
margin-bottom: 0;
}
.admin-tab-intro .admin-tab-desc {
margin-bottom: 0;
}
.admin-tab-desc {
color: var(--az-text-tertiary);
font-size: var(--az-text-sm);
margin-bottom: var(--az-lg);
}
.admin-branding-toggle-group {
margin-bottom: var(--az-lg);
}
.admin-branding-hint {
margin-top: var(--az-xs);
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.admin-branding-field-group {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.admin-branding-label {
display: block;
}
.admin-fiscal-grid {
margin-top: var(--az-lg);
}
.admin-fiscal-actions {
display: flex;
justify-content: flex-end;
margin-top: var(--az-lg);
}
.ai-tbl--fiscal {
table-layout: auto;
}
.ai-tbl--fiscal .ai-tbl-th:first-child {
width: 100px;
}
.ai-tbl--fiscal .ai-tbl-th--metric {
text-align: center;
}
.ai-tbl--fiscal .ai-tbl-cell-metric {
padding: 0;
}
.admin-fiscal-cell {
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: var(--az-md) var(--az-lg);
cursor: text;
}
.admin-fiscal-input {
width: 100%;
max-width: 90px;
padding: var(--az-xs) 0;
background: transparent;
border: none;
border-radius: 0;
color: var(--az-text-primary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
font-family: inherit;
text-align: right;
font-variant-numeric: tabular-nums;
-moz-appearance: textfield;
outline: none;
border-bottom: 1px solid transparent;
transition: border-color var(--az-transition-fast);
}
.admin-fiscal-input::-webkit-outer-spin-button,
.admin-fiscal-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.admin-fiscal-input:hover {
border-bottom-color: var(--az-border-hover);
}
.admin-fiscal-input:focus {
border-bottom-color: var(--az-blue);
}
.admin-fiscal-unit {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
pointer-events: none;
margin-left: var(--az-2xs);
flex-shrink: 0;
}
.admin-modal-overlay {
position: fixed;
inset: 0;
z-index: var(--az-z-modal);
background: var(--az-overlay-bg);
backdrop-filter: blur(6px);
display: none;
align-items: center;
justify-content: center;
animation: adminModalIn 0.15s ease-out;
}
.admin-modal-overlay.active {
display: flex;
}
@keyframes adminModalIn {
from { opacity: 0; }
to { opacity: 1; }
}
.admin-modal-card {
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-xl);
max-width: 340px;
width: calc(100% - var(--az-xl));
animation: adminModalSlide 0.2s ease-out;
}
@keyframes adminModalSlide {
from { transform: scale(0.96); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.admin-modal-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin: 0 0 var(--az-xs);
}
.admin-modal-desc {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
line-height: 1.5;
margin: 0 0 var(--az-lg);
}
.admin-modal-desc strong {
color: var(--az-text-primary);
font-weight: var(--az-font-medium);
}
.admin-modal-actions {
display: flex;
gap: var(--az-sm);
}
.btn-admin-modal {
flex: 1;
padding: var(--az-sm) var(--az-md);
border-radius: var(--az-radius-md);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
border: none;
}
.btn-admin-modal-cancel {
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
color: var(--az-text-secondary);
}
.btn-admin-modal-cancel:hover {
border-color: var(--az-border-hover);
color: var(--az-text-primary);
}
.btn-admin-modal-danger {
background: var(--az-red);
color: var(--az-text-on-accent);
}
.btn-admin-modal-danger:hover {
opacity: 0.9;
}
@media (max-width: 640px) {
.admin-pending-card {
flex-direction: column;
align-items: stretch;
gap: var(--az-sm);
}
.admin-pending-actions {
justify-content: flex-end;
}
.admin-modal-card {
padding: var(--az-lg);
}
}
.admin-cell-save {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
white-space: nowrap;
}
.admin-actions {
display: flex;
gap: var(--az-sm);
justify-content: center;
}
.btn-admin-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--az-icon-lg);
height: var(--az-icon-lg);
border-radius: var(--az-radius-sm);
border: 1px solid transparent;
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
padding: 0;
}
.btn-admin-action i {
font-size: var(--az-text-lg-plus);
line-height: 1;
}
.btn-admin-action:hover {
background: var(--az-blue-bg);
color: var(--az-blue);
border-color: var(--az-blue-border);
}
.btn-admin-action:active {
filter: brightness(0.92);
}
.btn-admin-action.admin-action-danger:hover {
background: var(--az-red-bg);
color: var(--az-red);
border-color: var(--az-red-border);
}
.btn-admin-action.admin-action-success:hover {
background: var(--az-green-bg);
color: var(--az-green);
border-color: var(--az-green-border);
}
.admin-user-email {
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
overflow: hidden;
white-space: nowrap;
display: flex;
align-items: center;
gap: var(--az-xs);
max-width: 100%;
}
.admin-email-text {
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex: 1;
}
.admin-text-muted {
color: var(--az-text-tertiary);
}
.admin-text-danger {
color: var(--az-red);
font-weight: var(--az-font-medium);
}
.admin-text-warn {
color: var(--az-amber);
font-weight: var(--az-font-medium);
}
.admin-empty {
text-align: center;
padding: var(--az-xl);
color: var(--az-text-tertiary);
font-size: var(--az-text-sm);
}
.admin-pagination {
display: flex;
justify-content: center;
gap: var(--az-xs);
padding: var(--az-md);
}
.admin-page-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--az-2xl);
height: var(--az-2xl);
padding: 0 var(--az-sm);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
background: transparent;
color: var(--az-text-secondary);
font-size: var(--az-text-xs);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.admin-page-btn:hover {
background: var(--az-bg-elevated);
color: var(--az-text-primary);
}
.admin-page-btn:active {
filter: brightness(0.92);
}
.admin-page-btn.active {
background: var(--az-blue);
color: var(--az-text-on-accent);
border-color: var(--az-blue);
}
.admin-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--az-md);
}
.admin-detail-item {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.admin-detail-item-full {
grid-column: 1 / -1;
}
.admin-detail-label {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.admin-detail-value {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
font-weight: var(--az-font-medium);
}
.admin-detail-section {
margin-top: var(--az-lg);
padding-top: var(--az-lg);
border-top: 1px solid var(--az-border);
}
.admin-detail-section-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
margin-bottom: var(--az-md);
}
.admin-detail-actions {
display: flex;
gap: var(--az-sm);
flex-wrap: wrap;
}
.admin-action-btn {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-sm) var(--az-md);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
cursor: pointer;
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
flex: 1;
justify-content: center;
min-width: 0;
}
.admin-action-btn:hover {
color: var(--az-text-primary);
background: var(--az-bg-hover);
border-color: var(--az-border-hover);
}
.admin-action-btn svg {
flex-shrink: 0;
opacity: 0.6;
}
.admin-action-btn:hover svg {
opacity: 1;
}
.admin-action-btn-primary {
color: var(--az-text-on-accent);
background: var(--az-blue);
border-color: var(--az-blue);
flex: 0 0 auto;
}
.admin-action-btn-primary:hover {
color: var(--az-text-on-accent);
background: var(--az-blue-hover);
border-color: var(--az-blue-hover);
}
.admin-action-btn-warning {
color: var(--az-orange);
border-color: color-mix(in srgb, var(--az-orange) 25%, transparent);
}
.admin-action-btn-warning:hover {
color: var(--az-orange);
background: color-mix(in srgb, var(--az-orange) 8%, transparent);
border-color: color-mix(in srgb, var(--az-orange) 40%, transparent);
}
.admin-action-btn-danger {
color: var(--az-red);
border-color: color-mix(in srgb, var(--az-red) 25%, transparent);
}
.admin-action-btn-danger:hover {
color: var(--az-red);
background: color-mix(in srgb, var(--az-red) 8%, transparent);
border-color: color-mix(in srgb, var(--az-red) 40%, transparent);
}
.admin-detail-danger-zone {
border-top-color: color-mix(in srgb, var(--az-red) 15%, var(--az-border));
}
.admin-danger-title {
color: var(--az-text-tertiary);
font-size: var(--az-text-xs);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.admin-set-password-fields {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.admin-set-password-field {
position: relative;
display: flex;
align-items: center;
}
.admin-set-password-input {
width: 100%;
padding: var(--az-sm) var(--az-3xl) var(--az-sm) var(--az-md);
font-size: var(--az-text-sm);
color: var(--az-text-primary);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
outline: none;
transition: border-color 0.15s ease;
}
.admin-set-password-input:focus {
border-color: var(--az-blue);
}
.admin-set-password-input::placeholder {
color: var(--az-text-tertiary);
}
.admin-pwd-eye {
position: absolute;
right: var(--az-sm);
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: none;
border: none;
color: var(--az-text-tertiary);
cursor: pointer;
border-radius: var(--az-radius-sm);
transition: color 0.15s ease;
}
.admin-pwd-eye:hover {
color: var(--az-text-secondary);
}
.admin-pwd-eye .admin-pwd-eye-hide {
display: none;
}
.admin-pwd-eye-active .admin-pwd-eye-show {
display: none;
}
.admin-pwd-eye-active .admin-pwd-eye-hide {
display: block;
}
.admin-set-password-submit {
align-self: flex-end;
}
.admin-subscription-form {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.admin-subscription-form .form-label {
font-size: var(--az-text-sm);
}
.admin-subscription-form .form-select,
.admin-subscription-form .form-input {
font-size: var(--az-text-sm);
padding: var(--az-sm) var(--az-md);
min-height: var(--az-touch-min);
}
.admin-subscription-form .btn-submit {
width: 100%;
margin-top: var(--az-xs);
}
.admin-btn-group {
display: flex;
gap: var(--az-xs);
}
.admin-btn-option {
flex: 1;
padding: var(--az-sm) var(--az-xs);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
background: transparent;
color: var(--az-text-secondary);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
text-align: center;
}
.admin-btn-option:hover {
background: var(--az-bg-elevated);
color: var(--az-text-primary);
border-color: var(--az-border-hover);
}
.admin-btn-option:active {
filter: brightness(0.92);
}
.admin-btn-option.active {
background: var(--az-blue);
color: var(--az-text-on-accent);
border-color: var(--az-blue);
}
#admin-users-table tr.admin-row-gold {
border-left: 2px solid var(--az-amber);
}
#admin-users-table tr.admin-row-gold td:first-child {
padding-left: calc(var(--az-lg) - 2px);
}
.admin-blocked-label {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
font-weight: var(--az-font-normal, 400);
flex-shrink: 0;
}
.admin-password-wrapper {
position: relative;
display: flex;
align-items: center;
}
.admin-password-wrapper .form-input {
flex: 1;
padding-right: var(--az-touch-min);
}
.admin-password-toggle {
position: absolute;
right: var(--az-sm);
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--az-icon-btn-sm);
height: var(--az-icon-btn-sm);
border: none;
border-radius: var(--az-radius-sm);
background: transparent;
color: var(--az-text-tertiary);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
padding: 0;
}
.admin-password-toggle:hover {
color: var(--az-text-primary);
background: var(--az-bg-elevated);
}
.admin-password-toggle i {
font-size: var(--az-text-lg-plus);
line-height: 1;
}
.admin-user-email .admin-badge {
display: inline-flex;
vertical-align: middle;
margin-left: var(--az-sm);
flex-shrink: 0;
}
.admin-mobile-only {
display: none;
}
.admin-mobile-cards.admin-mobile-only {
flex-direction: column;
gap: var(--az-sm);
}
.admin-user-card {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-md);
display: flex;
flex-direction: column;
gap: var(--az-sm);
cursor: pointer;
transition: border-color var(--az-transition);
}
.admin-user-card:active {
border-color: var(--az-border-hover);
}
.admin-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-sm);
}
.admin-card-email {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: var(--az-xs);
}
.admin-card-meta {
display: flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.admin-card-actions {
display: flex;
flex-wrap: wrap;
gap: var(--az-xs);
padding-top: var(--az-xs);
border-top: 1px solid var(--az-border);
}
.admin-card-actions .btn-admin-action {
flex: 1 1 calc(50% - var(--az-xs));
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--az-xs);
height: var(--az-touch-min);
border-radius: var(--az-radius-md);
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
}
.admin-card-actions .btn-admin-action i {
font-size: var(--az-text-md);
line-height: 1;
}
.admin-card-actions .btn-admin-action span {
font-size: var(--az-text-xs);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 768px) {
.admin-desktop-only {
display: none;
}
.admin-mobile-only {
display: flex;
}
#admin-view .admin-sticky-header {
position: sticky;
top: 0;
z-index: var(--az-z-dropdown);
background: var(--az-bg-app);
border-bottom: 1px solid var(--az-border);
padding-bottom: var(--az-sm);
padding-left: var(--az-page-pad, var(--az-lg));
padding-right: var(--az-page-pad, var(--az-lg));
margin-left: calc(-1 * var(--az-page-pad, var(--az-lg)));
margin-right: calc(-1 * var(--az-page-pad, var(--az-lg)));
}
#admin-view .admin-sticky-header .page-header {
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--az-sm);
padding-top: var(--az-lg);
padding-bottom: var(--az-md);
position: static;
z-index: auto;
background: transparent;
}
.admin-tab-label-short { display: inline; }
.admin-tab-label-full  { display: none; }
#admin-view .kpi-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--az-md);
}
#admin-view .cockpit-widget,
#admin-view .kpi-card-premium {
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--az-lg) var(--az-md);
gap: var(--az-sm);
background: transparent;
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
min-height: 0;
text-align: center;
}
#admin-view .cockpit-widget:hover,
#admin-view .kpi-card-premium:hover {
border-color: var(--az-border);
background: transparent;
}
#admin-view .kpi-card-premium .kpi-card-icon {
display: none;
}
#admin-view .kpi-card-premium .card-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1;
}
#admin-view .kpi-card-premium .card-value {
font-size: var(--az-kpi-value);
font-weight: var(--az-font-normal);
line-height: var(--az-kpi-value-lh);
letter-spacing: var(--az-tracking-tight);
}
#admin-view .kpi-card-premium .widget-body {
align-items: center;
text-align: center;
}
#admin-view .kpi-card-premium .widget-footer {
display: none;
}
.admin-detail-grid {
grid-template-columns: 1fr;
}
.btn-admin-action {
min-width: var(--az-touch-min);
min-height: var(--az-touch-min);
}
.admin-page-btn {
min-width: var(--az-touch-min);
height: var(--az-touch-min);
}
#admin-view .section-title {
font-size: var(--az-text-xs);
font-weight: var(--az-font-bold);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--az-text-tertiary);
text-align: center;
}
.admin-tabs {
display: flex;
justify-content: stretch;
flex-shrink: 0;
}
.admin-tab {
flex: 1;
justify-content: center;
padding: var(--az-sm) var(--az-xs);
font-size: var(--az-text-2xs);
}
.admin-tab-panel {
gap: var(--az-lg);
overflow-x: hidden;
padding-left: var(--az-lg);
padding-right: var(--az-lg);
}
.admin-trial-duration-card .widget-body {
font-size: var(--az-text-xl);
font-weight: var(--az-font-semibold);
}
.admin-card-meta {
flex-wrap: wrap;
gap: var(--az-xs);
}
.ai-tbl--fiscal {
display: block;
width: 100%;
}
.ai-tbl--fiscal thead {
display: none; 
}
.ai-tbl--fiscal tbody {
display: block;
width: 100%;
}
.ai-tbl--fiscal .ai-tbl-row {
display: block;
background: transparent;
border: none;
border-bottom: 1px solid var(--az-border);
border-radius: 0;
padding: var(--az-md) 0;
margin-bottom: 0;
}
.ai-tbl--fiscal .ai-tbl-row:last-child {
margin-bottom: 0;
border-bottom: none;
}
.ai-tbl--fiscal .ai-tbl-cell-model {
display: block;
width: 100%;
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
text-transform: uppercase;
letter-spacing: 0.4px;
padding-bottom: var(--az-xs);
text-align: center;
}
.ai-tbl--fiscal .ai-tbl-cell-metric {
display: inline-block;
width: 50%;
box-sizing: border-box;
vertical-align: top;
text-align: center;
}
.ai-tbl--fiscal .ai-tbl-cell-metric::before {
content: attr(data-label);
display: block;
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
text-align: center;
padding: 0 var(--az-xs);
margin-top: var(--az-xs);
}
.admin-fiscal-cell {
padding: var(--az-2xs) var(--az-xs);
justify-content: center;
gap: var(--az-xs);
}
.admin-fiscal-input {
flex: 1;
min-width: 0;
font-size: var(--az-text-lg-plus); 
text-align: right;
min-height: var(--az-touch-min);
padding: var(--az-sm);
}
.admin-fiscal-unit {
font-size: var(--az-text-xs);
flex-shrink: 0;
}
.admin-subscription-form .form-input,
.admin-subscription-form .form-select,
.admin-fiscal-input,
.admin-trial-inline-input,
#admin-branding-text {
font-size: var(--az-text-lg-plus);
}
#admin-view .ai-cfg-select {
font-size: var(--az-text-lg-plus);
min-width: 0;
width: 100%;
}
#admin-view .ai-cfg-row {
flex-wrap: wrap;
}
#admin-view .ai-cfg-field {
flex-direction: column;
align-items: flex-start;
gap: var(--az-xs);
width: 100%;
}
.admin-tab-panel > .section-title {
margin-top: var(--az-xl);
margin-bottom: 0;
}
.admin-tab-panel > .section-title:first-child {
margin-top: 0;
}
.admin-tab-desc {
font-size: var(--az-text-xs);
text-align: center;
margin-bottom: 0;
}
.admin-tab-intro {
align-items: center;
text-align: center;
}
.admin-branding-toggle-group {
margin-bottom: var(--az-md);
}
#admin-branding-text {
width: 100%;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-section--padded {
padding: var(--az-md);
}
#admin-view .table-toolbar .toolbar-search,
#admin-view .table-toolbar .search-compact {
flex: 1 1 0;
min-width: 0;
}
}
#admin-stats-grid.skeleton-loading .card-value {
background: var(--az-bg-elevated);
color: transparent;
border-radius: var(--az-radius-sm);
animation: skeleton-pulse 1.5s ease-in-out infinite;
min-width: var(--az-3xl);
display: inline-block;
}
#coffre-fort {
transition: opacity var(--az-transition-fast);
}
.vault-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
padding-bottom: var(--az-md);
border-bottom: 1px solid var(--az-border);
margin-bottom: var(--az-xs);
}
.vault-toolbar-left {
display: flex;
align-items: center;
gap: var(--az-md);
flex: 1;
min-width: 0;
}
.vault-toolbar-right {
display: flex;
align-items: center;
gap: var(--az-xs);
flex-shrink: 0;
}
.vault-search-box {
position: relative;
max-width: 240px;
flex-shrink: 0;
}
.vault-search-box i {
position: absolute;
left: var(--az-md);
top: 50%;
transform: translateY(-50%);
color: var(--az-text-muted);
font-size: var(--az-text-sm);
pointer-events: none;
}
.vault-search-box input {
width: 100%;
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-xs) var(--az-md) var(--az-xs) var(--az-3xl);
font-size: var(--az-text-sm);
color: var(--az-text-primary);
height: var(--az-input-h);
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
font-family: inherit;
}
.vault-search-box input:focus {
outline: none;
border-color: var(--az-blue);
box-shadow: var(--az-focus-ring);
background: var(--az-bg-input-focus);
}
.vault-search-box input::placeholder {
color: var(--az-text-muted);
}
.vault-filter-chips {
display: flex;
align-items: center;
gap: var(--az-xs);
flex-wrap: wrap;
}
.vault-chip {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs) var(--az-sm);
border-radius: var(--az-radius-md);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-tertiary);
background: transparent;
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
height: var(--az-icon-btn-sm);
}
.vault-chip:hover {
color: var(--az-text-secondary);
background: var(--az-bg-elevated);
}
.vault-chip.active {
color: var(--az-text-primary);
background: var(--az-bg-elevated);
border-color: var(--az-border);
}
.vault-chip-count {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
font-weight: var(--az-font-normal);
}
.vault-chip--trash {
margin-left: auto;
}
.vault-chip--trash.active {
color: var(--az-red);
background: var(--az-red-bg);
border-color: var(--az-red-border);
}
.vault-purge-trash-btn {
display: inline-flex;
align-items: center;
gap: var(--az-xs-plus);
height: var(--az-icon-btn-sm);
padding: 0 var(--az-md);
border-radius: var(--az-radius-md);
border: 1px solid var(--az-border);
background: transparent;
color: var(--az-text-muted);
font-size: var(--az-text-xs);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
white-space: nowrap;
}
.vault-purge-trash-btn i {
font-size: var(--az-text-sm);
}
.vault-purge-trash-btn:hover {
color: var(--az-red);
border-color: var(--az-red);
background: var(--az-red-bg);
}
.vault-purge-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--az-radius-pill);
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
font-size: var(--az-text-xs-plus);
font-weight: var(--az-font-medium);
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.vault-purge-trash-btn:hover .vault-purge-count {
background: var(--az-red-bg);
color: var(--az-red);
}
.vault-view-btn {
display: flex;
align-items: center;
justify-content: center;
width: var(--az-2xl);
height: var(--az-2xl);
padding: var(--az-sm);
border-radius: var(--az-radius-md);
border: none;
background: transparent;
color: var(--az-text-muted);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
font-size: var(--az-text-sm);
}
.vault-view-btn:hover {
color: var(--az-text-secondary);
background: var(--az-bg-elevated);
}
.vault-view-btn.active {
color: var(--az-text-primary);
background: var(--az-bg-elevated);
}
.vault-drop-zone {
border: 1px dashed var(--az-glass-border-hover);
border-radius: var(--az-radius-xl);
padding: var(--az-lg);
text-align: center;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
background: var(--az-glass-bg);
cursor: pointer;
}
.vault-drop-zone:hover {
border-color: var(--az-glass-border-hover);
background: var(--az-glass-bg-hover);
}
.vault-drop-zone.vault-drop-active {
border-color: var(--az-blue);
background: var(--az-blue-bg);
}
.vault-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--az-3xl) var(--az-xl);
}
.vault-empty--spaced {
margin-top: var(--az-xl);
}
.vault-empty-icon {
font-size: var(--az-text-3xl);
color: var(--az-text-muted);
margin-bottom: var(--az-md);
}
.vault-empty-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin-bottom: var(--az-xs);
}
.vault-empty-text {
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
max-width: 360px;
margin: 0 auto;
line-height: 1.5;
}
.vault-empty-hint {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
margin-top: var(--az-sm);
}
.vault-drop-compact {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
padding: var(--az-sm) var(--az-md);
}
.vault-drop-compact-icon {
font-size: var(--az-text-md);
color: var(--az-text-muted);
}
.vault-drop-compact-text {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.vault-drop-compact-hint {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
}
.vault-empty-filtered {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-sm);
padding: var(--az-3xl);
color: var(--az-text-tertiary);
font-size: var(--az-text-sm);
}
.vault-empty-filtered i {
font-size: var(--az-text-2xl);
}
.vault-pipeline {
display: none;
align-items: center;
justify-content: center;
padding: var(--az-xl) 0;
}
.vault-orbital-loader {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--az-3xl) 0;
gap: var(--az-md);
animation: vault-orbital-fadein 0.3s ease-out;
}
@keyframes vault-orbital-fadein {
from { opacity: 0; transform: translateY(var(--az-sm)); }
to { opacity: 1; transform: translateY(0); }
}
.vault-orbital-spinner {
position: relative;
width: 96px;
height: 96px;
border-radius: var(--az-radius-pill);
background: radial-gradient(circle, var(--az-blue-bg) 30%, transparent 70%);
overflow: hidden;
}
.vault-orbital-spinner::before {
content: "";
position: absolute;
inset: 0;
border-radius: var(--az-radius-pill);
border: 3px solid transparent;
border-top-color: var(--az-blue);
animation: vault-orbital-spin 2s linear infinite;
}
.vault-orbital-spinner::after {
content: "";
position: absolute;
inset: 10%;
border-radius: var(--az-radius-pill);
background: conic-gradient(from 90deg, var(--az-blue-bg), transparent);
filter: blur(2px);
animation: vault-orbital-spin-reverse 1.5s linear infinite;
}
.vault-orbital-spinner--done::before {
border-top-color: var(--az-green);
animation: none;
}
.vault-orbital-spinner--done::after {
animation: none;
opacity: 0.3;
}
.vault-orbital-spinner--done .vault-orbital-core {
background: var(--az-green);
box-shadow: 0 0 var(--az-md) var(--az-green-border);
animation: none;
}
.vault-orbital-core {
position: absolute;
top: 50%;
left: 50%;
width: var(--az-lg);
height: var(--az-lg);
background: var(--az-blue);
border-radius: var(--az-radius-pill);
transform: translate(-50%, -50%);
box-shadow: 0 0 var(--az-md) var(--az-blue-bg);
animation: vault-orbital-pulse 1s ease-in-out infinite;
}
.vault-orbital-orbit {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: vault-orbital-rotate 3s linear infinite;
}
.vault-orbital-spinner--done .vault-orbital-orbit {
animation: none;
}
.vault-orbital-dot {
position: absolute;
left: 50%;
top: 50%;
width: var(--az-sm);
height: var(--az-sm);
background: var(--az-blue-hover);
border-radius: var(--az-radius-pill);
opacity: 0.8;
}
.vault-orbital-dot:nth-child(1) { transform: rotate(0deg) translate(30px); }
.vault-orbital-dot:nth-child(2) { transform: rotate(90deg) translate(30px); }
.vault-orbital-dot:nth-child(3) { transform: rotate(180deg) translate(30px); }
.vault-orbital-dot:nth-child(4) { transform: rotate(270deg) translate(30px); }
.vault-orbital-percent {
font-size: var(--az-text-xl);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
min-height: 1.4em;
}
.vault-orbital-label {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.vault-orbital-meta {
display: flex;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
}
.vault-orbital-meta-sep {
opacity: 0.4;
}
.vault-orbital-cancel {
display: flex;
align-items: center;
gap: var(--az-xs);
margin-top: var(--az-sm);
padding: var(--az-xs) var(--az-md);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
background: transparent;
color: var(--az-text-muted);
font-size: var(--az-text-2xs);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.vault-orbital-cancel:hover {
background: var(--az-bg-elevated);
color: var(--az-text-primary);
border-color: var(--az-border-hover);
}
@keyframes vault-orbital-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes vault-orbital-spin-reverse {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
@keyframes vault-orbital-pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.2); }
}
@keyframes vault-orbital-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.vault-storage {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-md) var(--az-lg);
margin-bottom: var(--az-md);
}
.vault-storage-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--az-sm);
}
.vault-storage-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
}
.vault-storage-value {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
font-variant-numeric: tabular-nums;
}
.vault-storage-bar-container {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.vault-storage-dot {
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
background: var(--az-blue);
flex-shrink: 0;
}
.vault-storage-dot--warning { background: var(--az-amber); }
.vault-storage-dot--critical,
.vault-storage-dot--full { background: var(--az-red); }
.vault-storage-track {
flex: 1;
height: var(--az-xs);
background: var(--az-bg-elevated);
border-radius: var(--az-radius-pill);
overflow: hidden;
}
.vault-storage-fill {
height: 100%;
background: var(--az-blue);
border-radius: var(--az-radius-pill);
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.vault-storage-fill--warning { background: var(--az-amber); }
.vault-storage-fill--critical,
.vault-storage-fill--full { background: var(--az-red); }
.vault-storage-percent {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
font-variant-numeric: tabular-nums;
min-width: var(--az-icon-btn-sm);
text-align: right;
}
.vault-storage-alert {
display: flex;
align-items: flex-start;
gap: var(--az-md);
padding: var(--az-md) var(--az-lg);
border-radius: var(--az-radius-md);
margin-bottom: var(--az-md);
animation: vault-alert-in 0.3s ease-out;
}
@keyframes vault-alert-in {
from { opacity: 0; transform: translateY(calc(var(--az-sm) * -1)); }
to { opacity: 1; transform: translateY(0); }
}
.vault-storage-alert--warning {
background: var(--az-amber-bg);
border: 1px solid var(--az-amber-border);
}
.vault-storage-alert--critical,
.vault-storage-alert--full {
background: var(--az-red-bg);
border: 1px solid var(--az-red-border);
}
.vault-storage-alert-icon {
font-size: var(--az-text-lg);
flex-shrink: 0;
padding-top: var(--az-2xs);
}
.vault-storage-alert--warning .vault-storage-alert-icon { color: var(--az-amber); }
.vault-storage-alert--critical .vault-storage-alert-icon,
.vault-storage-alert--full .vault-storage-alert-icon { color: var(--az-red); }
.vault-storage-alert-content {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.vault-storage-alert-text {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
font-weight: var(--az-font-medium);
}
.vault-storage-alert-tip {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.vault-list {
display: flex;
flex-direction: column;
}
.vault-select-all {
display: flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-sm) var(--az-lg);
border-bottom: 1px solid var(--az-border);
margin-bottom: var(--az-xs);
}
.vault-select-all input[type="checkbox"] {
width: var(--az-lg);
height: var(--az-lg);
accent-color: var(--az-blue);
cursor: pointer;
}
.vault-select-all label {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
cursor: pointer;
font-weight: var(--az-font-medium);
user-select: none;
}
.vault-select-all-count {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
margin-left: auto;
}
.vault-item {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-sm) var(--az-md);
border-radius: var(--az-radius-md);
cursor: pointer;
transition: background var(--az-transition-fast);
position: relative;
min-height: var(--az-card-btn-size);
user-select: none;
}
.vault-item:hover {
background: var(--az-bg-card-hover);
}
.vault-item.vault-item--active {
background: var(--az-blue-bg);
}
.vault-item.vault-item--selected {
background: var(--az-blue-bg);
}
.vault-item.vault-item--processing {
opacity: 0.5;
}
.vault-item.vault-item--dragging {
opacity: 0.4;
}
.vault-item-check {
width: var(--az-lg);
height: var(--az-lg);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--az-transition-fast);
}
.vault-item:hover .vault-item-check,
.vault-item.vault-item--selected .vault-item-check,
.vault-list--selecting .vault-item-check {
opacity: 1;
}
.vault-item-check input[type="checkbox"] {
width: var(--az-lg);
height: var(--az-lg);
accent-color: var(--az-blue);
cursor: pointer;
}
.vault-item-icon {
width: var(--az-xl);
height: var(--az-xl);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--az-radius-sm);
font-size: var(--az-text-sm);
}
.vault-item-icon.cat-facture_client { color: var(--az-blue); background: var(--az-blue-bg); }
.vault-item-icon.cat-facture_fournisseur { color: var(--az-amber); background: var(--az-amber-bg); }
.vault-item-icon.cat-note_de_frais { color: var(--az-red); background: var(--az-red-bg); }
.vault-item-icon.cat-devis { color: var(--az-purple); background: var(--az-purple-bg); }
.vault-item-icon.cat-avoir { color: var(--az-green); background: var(--az-green-bg); }
.vault-item-icon.cat-autre { color: var(--az-blue); background: var(--az-blue-bg); }
.vault-item-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--az-2xs);
}
.vault-item-name {
flex: 1;
min-width: 0;
overflow: hidden;
}
.vault-item-name .vault-item-filename {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.vault-item-filename {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
line-height: 1.3;
word-break: break-word;
}
.vault-item-meta {
flex-shrink: 0;
display: flex;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-xs);
color: var(--az-text-muted);
white-space: nowrap;
}
.vault-item-info {
display: flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.vault-item-sep {
color: var(--az-text-disabled);
}
.vault-item-date {
white-space: nowrap;
}
.vault-item-client {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}
.vault-item-amount {
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.vault-item-badge {
font-size: var(--az-text-3xs);
font-weight: var(--az-font-semibold);
padding: var(--az-2xs) var(--az-xs);
border-radius: var(--az-radius-sm);
white-space: nowrap;
flex-shrink: 0;
}
.vault-item-badge--linked {
background: var(--az-green-bg);
color: var(--az-green);
border: 1px solid var(--az-green-border);
}
.vault-item-badge--duplicate {
background: var(--az-amber-bg);
color: var(--az-amber);
border: 1px solid var(--az-amber-border);
}
.vault-item-badge--error {
background: var(--az-red-bg);
color: var(--az-red);
border: 1px solid var(--az-red-border);
}
.vault-item-actions {
display: flex;
align-items: center;
flex-shrink: 0;
}
.vault-inline-actions {
gap: var(--az-xs);
opacity: 0;
transition: opacity var(--az-transition-fast);
}
.vault-item:hover .vault-inline-actions {
opacity: 1;
}
.vault-inline-actions .btn-icon-premium {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
border: none;
background: transparent;
}
.vault-inline-actions .btn-icon-premium:hover {
background: var(--az-bg-card-hover);
}
.vault-group {
margin-bottom: var(--az-xs);
}
.vault-group-header {
display: flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-sm) var(--az-md);
cursor: pointer;
border-radius: var(--az-radius-md);
transition: background var(--az-transition-fast);
user-select: none;
}
.vault-group-header:hover {
background: var(--az-bg-card-hover);
}
.vault-group-chevron {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
transition: transform var(--az-transition);
flex-shrink: 0;
}
.vault-group.collapsed .vault-group-chevron {
transform: rotate(-90deg);
}
.vault-group-icon {
width: var(--az-lg-plus);
height: var(--az-lg-plus);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--az-radius-sm);
font-size: var(--az-text-xs);
flex-shrink: 0;
}
.vault-group-label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
}
.vault-group-count {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
font-weight: var(--az-font-normal);
}
.vault-group-body {
overflow: hidden;
transition: max-height var(--az-transition);
}
.vault-group.collapsed .vault-group-body {
max-height: 0;
}
.vault-group-header.vault-drop-target {
background: var(--az-blue-bg);
outline: 2px solid var(--az-blue);
outline-offset: -2px;
}
.vault-show-all-btn {
display: block;
width: 100%;
padding: var(--az-md) 0;
margin-top: var(--az-xs);
background: none;
border: 1px dashed var(--az-border);
border-radius: var(--az-radius-md);
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.vault-show-all-btn:hover {
color: var(--az-blue);
border-color: var(--az-blue);
background: var(--az-blue-bg);
}
.vault-bulk-bar {
display: none;
align-items: center;
gap: var(--az-md);
padding: var(--az-sm) var(--az-lg);
background: var(--az-blue-bg);
border: 1px solid var(--az-blue-border);
border-radius: var(--az-radius-lg);
animation: vault-alert-in 0.2s ease-out;
}
.vault-bulk-bar--visible {
display: flex;
}
.vault-bulk-count {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
white-space: nowrap;
}
.vault-bulk-actions {
display: flex;
align-items: center;
gap: var(--az-sm);
flex: 1;
}
.vault-bulk-btn {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs) var(--az-sm);
border-radius: var(--az-radius-md);
border: 1px solid var(--az-border);
background: var(--az-bg-card);
color: var(--az-text-secondary);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
font-family: inherit;
white-space: nowrap;
}
.vault-bulk-btn:hover {
background: var(--az-bg-card-hover);
border-color: var(--az-border-hover);
color: var(--az-text-primary);
}
.vault-bulk-btn--danger:hover {
background: var(--az-red-bg);
border-color: var(--az-red-border);
color: var(--az-red);
}
.vault-bulk-close {
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
width: var(--az-icon-btn-sm);
height: var(--az-icon-btn-sm);
border-radius: var(--az-radius-md);
border: none;
background: transparent;
color: var(--az-text-muted);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.vault-bulk-close:hover {
color: var(--az-text-primary);
background: var(--az-bg-elevated);
}
.vault-confidence {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
}
.vault-confidence-bar {
width: 40px;
height: var(--az-xs);
background: var(--az-bg-elevated);
border-radius: var(--az-radius-pill);
overflow: hidden;
}
.vault-confidence-fill {
height: 100%;
border-radius: var(--az-radius-pill);
transition: width 0.4s ease-out;
}
.vault-confidence-fill.high { background: var(--az-green); }
.vault-confidence-fill.medium { background: var(--az-amber); }
.vault-confidence-fill.low { background: var(--az-red); }
.vault-confidence-inline {
margin-top: var(--az-2xs);
}
.vault-context-menu {
display: none;
position: fixed;
z-index: var(--az-z-dropdown);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
box-shadow: var(--az-shadow-dropdown);
padding: var(--az-xs) 0;
min-width: 200px;
animation: vault-ctx-in 0.12s ease-out;
}
@keyframes vault-ctx-in {
from { opacity: 0; transform: scale(0.96) translateY(calc(var(--az-xs) * -1)); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.vault-ctx-group {
padding: var(--az-xs) 0;
border-bottom: 1px solid var(--az-border);
}
.vault-ctx-group:last-child {
border-bottom: none;
}
.vault-ctx-label {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: var(--az-xs) var(--az-md);
font-weight: var(--az-font-medium);
}
.vault-ctx-item {
display: flex;
align-items: center;
gap: var(--az-sm);
width: 100%;
padding: var(--az-xs) var(--az-md);
border: none;
background: transparent;
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
cursor: pointer;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast), transform var(--az-transition-fast);
font-family: inherit;
text-align: left;
}
.vault-ctx-item:hover {
background: var(--az-bg-elevated);
color: var(--az-text-primary);
}
.vault-ctx-item--danger:hover {
background: var(--az-red-bg);
color: var(--az-red);
}
.vault-ctx-item--active {
color: var(--az-blue);
}
.vault-ctx-item i {
font-size: var(--az-text-md);
width: var(--az-lg-plus);
flex-shrink: 0;
}
.vault-category-picker {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-lg);
margin-bottom: var(--az-md);
opacity: 0;
transform: translateY(var(--az-sm));
transition: opacity var(--az-transition), transform var(--az-transition);
}
.vault-category-picker--visible {
opacity: 1;
transform: translateY(0);
}
.vault-category-picker-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--az-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
}
.vault-category-picker-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--az-sm);
}
.vault-empty-categories {
margin-top: var(--az-lg);
width: 100%;
}
.vault-category-card-wrap {
position: relative;
width: 120px;
}
.vault-category-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-sm);
padding: var(--az-lg) var(--az-sm);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
background: var(--az-bg-surface);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
font-family: inherit;
width: 100%;
height: 100%;
}
.vault-category-card:hover {
border-color: var(--az-border-hover);
background: var(--az-bg-card-hover);
}
.vault-category-card > i {
font-size: var(--az-text-lg);
color: var(--az-text-tertiary);
}
.vault-category-card:hover > i {
color: var(--az-text-secondary);
}
.vault-category-card-label {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
text-align: center;
font-weight: var(--az-font-medium);
}
.vault-category-card-delete {
position: absolute;
top: var(--az-xs);
right: var(--az-xs);
width: var(--az-lg);
height: var(--az-lg);
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: var(--az-radius-pill);
background: var(--az-bg-elevated);
color: var(--az-text-muted);
font-size: var(--az-text-2xs);
cursor: pointer;
opacity: 0;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
}
.vault-category-card-wrap:hover .vault-category-card-delete {
opacity: 1;
}
.vault-category-card-delete:hover {
background: var(--az-red-bg);
color: var(--az-red);
}
.vault-category-card--auto {
border-color: var(--az-blue-border);
background: var(--az-blue-bg);
}
.vault-category-card--auto:hover {
border-color: var(--az-blue);
background: var(--az-blue-bg);
}
.vault-category-card--auto > i {
color: var(--az-blue);
}
.vault-category-card--auto:hover > i {
color: var(--az-blue-hover);
}
.vault-category-card--auto .vault-category-card-label {
color: var(--az-blue);
font-weight: var(--az-font-semibold);
}
.vault-category-card--add {
border-style: dashed;
}
.vault-category-card--add > i {
color: var(--az-text-muted);
}
.vault-category-card--input {
border-color: var(--az-blue);
border-style: solid;
}
.vault-custom-cat-inline {
width: 100%;
border: none;
background: transparent;
color: var(--az-text-primary);
font-size: var(--az-text-xs);
font-family: inherit;
font-weight: var(--az-font-medium);
text-align: center;
outline: none;
}
.cat-facture_client { color: var(--az-blue); background: var(--az-blue-bg); }
.cat-facture_fournisseur { color: var(--az-amber); background: var(--az-amber-bg); }
.cat-note_de_frais { color: var(--az-red); background: var(--az-red-bg); }
.cat-devis { color: var(--az-purple); background: var(--az-purple-bg); }
.cat-avoir { color: var(--az-green); background: var(--az-green-bg); }
.cat-autre { color: var(--az-text-tertiary); background: var(--az-bg-elevated); }
.vault-category-picker-divider {
height: 1px;
background: var(--az-border);
margin: var(--az-xs) 0;
}
.vault-folder-upload-btn {
display: flex;
align-items: center;
gap: var(--az-sm);
width: 100%;
padding: var(--az-sm) var(--az-md);
border: 1px dashed var(--az-border-hover);
border-radius: var(--az-radius-md);
background: transparent;
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
font-family: inherit;
}
.vault-folder-upload-btn:hover {
border-color: var(--az-blue-border);
background: var(--az-blue-bg);
color: var(--az-text-primary);
}
.vault-folder-upload-hint {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
margin-left: auto;
}
.vault-drop-category-overlay {
position: fixed;
inset: 0;
z-index: var(--az-z-modal-backdrop);
display: flex;
align-items: center;
justify-content: center;
background: var(--az-overlay-bg);
backdrop-filter: blur(4px);
opacity: 0;
transition: opacity var(--az-transition-ease);
}
.vault-drop-category-overlay.visible {
opacity: 1;
}
.vault-drop-category-modal {
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-lg);
max-width: 520px;
width: 90%;
box-shadow: var(--az-shadow-modal);
}
.vault-drop-category-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--az-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
}
.vault-card-category-badge {
display: inline-flex;
align-items: center;
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-sm);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
white-space: nowrap;
}
.vault-trash-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-md) var(--az-lg);
background: var(--az-bg-surface);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
margin-bottom: var(--az-md);
gap: var(--az-md);
}
.vault-trash-info {
display: flex;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-xs);
color: var(--az-amber);
}
.vault-trash-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--az-lg-plus);
height: var(--az-lg-plus);
border-radius: var(--az-radius-pill);
background: var(--az-red-bg);
color: var(--az-red);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-bold);
padding: 0 var(--az-xs);
margin-left: var(--az-xs);
}
.vault-days-left {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
}
.vault-item--trash {
opacity: 0.7;
}
.vault-item--trash:hover {
opacity: 1;
}
.vault-page-drag-overlay {
position: fixed;
inset: 0;
background: var(--az-overlay-bg);
backdrop-filter: blur(var(--az-sm));
z-index: var(--az-z-modal-backdrop);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity var(--az-transition-ease);
}
.vault-page-drag-overlay--visible {
opacity: 1;
pointer-events: auto;
}
.vault-review-modal {
position: fixed;
inset: 0;
background: var(--az-overlay-bg);
z-index: var(--az-z-modal);
display: none;
align-items: center;
justify-content: center;
}
.vault-review-content {
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
box-shadow: var(--az-shadow-modal);
width: 90vw;
max-width: 860px;
max-height: 80vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.vault-review-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-lg) var(--az-xl);
border-bottom: 1px solid var(--az-border);
flex-shrink: 0;
}
.vault-review-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.vault-review-count {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.vault-review-table {
flex: 1;
overflow-y: auto;
padding: var(--az-md);
}
.vault-review-table table {
width: 100%;
border-collapse: collapse;
font-size: var(--az-text-sm);
}
.vault-review-table th {
text-align: left;
padding: var(--az-sm) var(--az-md);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-muted);
border-bottom: 1px solid var(--az-border);
}
.vault-review-table td {
padding: var(--az-sm) var(--az-md);
border-bottom: 1px solid var(--az-border);
color: var(--az-text-secondary);
}
.vault-review-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--az-md);
padding: var(--az-md) var(--az-xl);
border-top: 1px solid var(--az-border);
flex-shrink: 0;
}
.vault-review-checkbox {
width: var(--az-lg);
height: var(--az-lg);
accent-color: var(--az-blue);
cursor: pointer;
}
.vault-multi-progress {
padding: var(--az-xl);
max-width: 480px;
margin: 0 auto;
}
.vault-multi-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--az-lg);
}
.vault-multi-title {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin: 0;
}
.vault-multi-counter {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
font-variant-numeric: tabular-nums;
}
.vault-multi-global-bar {
height: 2px;
background: var(--az-bg-tertiary);
border-radius: var(--az-radius-pill);
margin-bottom: var(--az-xl);
overflow: hidden;
}
.vault-multi-global-fill {
height: 100%;
background: var(--az-blue);
border-radius: var(--az-radius-pill);
transition: width 0.4s ease;
}
.vault-multi-list {
display: flex;
flex-direction: column;
gap: var(--az-md);
max-height: 320px;
overflow-y: auto;
}
.vault-multi-item {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.vault-multi-item-info {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-sm);
}
.vault-multi-item-name {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
transition: color 0.3s ease;
}
.vault-multi-item-icon {
flex-shrink: 0;
font-size: var(--az-text-sm);
line-height: 1;
}
.vault-multi-item-bar {
height: 3px;
background: var(--az-bg-tertiary);
border-radius: var(--az-radius-pill);
overflow: hidden;
}
.vault-multi-item-fill {
height: 100%;
width: 0%;
border-radius: var(--az-radius-pill);
transition: width 0.5s ease;
}
.vault-multi-item[data-status="processing"] .vault-multi-item-name {
color: var(--az-text-primary);
}
.vault-multi-item[data-status="processing"] .vault-multi-item-fill {
width: 100%;
background: linear-gradient(90deg, var(--az-bg-tertiary) 25%, var(--az-blue) 50%, var(--az-bg-tertiary) 75%);
background-size: 200% 100%;
animation: vault-multi-shimmer 1.5s ease-in-out infinite;
}
.vault-multi-item[data-status="done"] .vault-multi-item-fill {
width: 100%;
background: var(--az-green);
}
.vault-multi-item[data-status="done"] .vault-multi-item-icon {
color: var(--az-green);
}
.vault-multi-item[data-status="error"] .vault-multi-item-fill {
width: 100%;
background: var(--az-red);
}
.vault-multi-item[data-status="error"] .vault-multi-item-icon {
color: var(--az-red);
}
@keyframes vault-multi-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.vault-bulk-loading-spinner {
display: inline-block;
width: var(--az-lg);
height: var(--az-lg);
border: 2px solid var(--az-border);
border-top-color: var(--az-blue);
border-radius: var(--az-radius-pill);
animation: vault-spin 0.8s linear infinite;
}
@keyframes vault-spin {
to { transform: rotate(360deg); }
}
.vault-bulk-summary {
text-align: center;
padding: var(--az-xl);
}
.vault-bulk-summary-icon {
font-size: var(--az-text-3xl);
margin-bottom: var(--az-md);
}
.vault-bulk-summary--success .vault-bulk-summary-icon { color: var(--az-green); }
.vault-bulk-summary--partial .vault-bulk-summary-icon { color: var(--az-amber); }
.vault-bulk-summary--error .vault-bulk-summary-icon { color: var(--az-red); }
.vault-bulk-summary-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin-bottom: var(--az-lg);
}
.vault-bulk-summary-stats {
display: flex;
justify-content: center;
gap: var(--az-xl);
margin-bottom: var(--az-lg);
}
.vault-bulk-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-xs);
}
.vault-bulk-stat-value {
font-size: var(--az-text-2xl);
font-weight: var(--az-font-bold);
font-variant-numeric: tabular-nums;
}
.vault-bulk-stat--success .vault-bulk-stat-value { color: var(--az-green); }
.vault-bulk-stat--error .vault-bulk-stat-value { color: var(--az-red); }
.vault-bulk-stat--skipped .vault-bulk-stat-value { color: var(--az-text-muted); }
.vault-bulk-stat-label {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.vault-bulk-errors {
max-height: 200px;
overflow-y: auto;
text-align: left;
margin-top: var(--az-md);
}
.vault-bulk-errors-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin-bottom: var(--az-sm);
}
.vault-bulk-errors-list {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.vault-bulk-result-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--az-xs) var(--az-md);
border-radius: var(--az-radius-md);
font-size: var(--az-text-xs);
}
.vault-bulk-result-row--error {
background: var(--az-red-bg);
color: var(--az-red);
}
.facturx-chip {
color: var(--az-blue);
background: var(--az-blue-bg);
border-color: var(--az-blue-border);
}
.cmdk-overlay {
position: fixed;
inset: 0;
z-index: var(--az-z-modal-backdrop);
background: var(--az-overlay-bg);
backdrop-filter: blur(4px);
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 15vh;
opacity: 0;
visibility: hidden;
transition: opacity var(--az-transition-fast), visibility var(--az-transition-fast);
}
.cmdk-overlay.cmdk-visible {
opacity: 1;
visibility: visible;
}
.cmdk-dialog {
width: 100%;
max-width: 560px;
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
box-shadow: var(--az-shadow-modal);
overflow: hidden;
transform: scale(0.96) translateY(-8px);
transition: transform var(--az-transition-fast);
}
.cmdk-visible .cmdk-dialog {
transform: scale(1) translateY(0);
}
.cmdk-input-wrap {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-lg);
border-bottom: 1px solid var(--az-border);
}
.cmdk-search-icon {
font-size: var(--az-text-lg);
color: var(--az-text-tertiary);
flex-shrink: 0;
}
.cmdk-input {
flex: 1;
background: none;
border: none;
outline: none;
color: var(--az-text-primary);
font-size: var(--az-text-md);
font-family: inherit;
caret-color: var(--az-blue);
}
.cmdk-input::placeholder {
color: var(--az-text-muted);
}
.cmdk-kbd {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
background: var(--az-bg-tertiary);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-sm);
padding: 2px var(--az-xs);
font-family: inherit;
line-height: 1;
flex-shrink: 0;
}
.cmdk-results {
max-height: 360px;
overflow-y: auto;
padding: var(--az-sm) 0;
}
.cmdk-results::-webkit-scrollbar {
width: 4px;
}
.cmdk-results::-webkit-scrollbar-thumb {
background: var(--az-border);
border-radius: var(--az-2xs);
}
.cmdk-category {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: var(--az-sm) var(--az-lg);
margin-top: var(--az-xs);
}
.cmdk-category:first-child {
margin-top: 0;
}
.cmdk-item {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-sm) var(--az-lg);
cursor: pointer;
transition: background 0.1s ease;
}
.cmdk-item-active {
background: var(--az-bg-tertiary);
}
.cmdk-item-icon {
font-size: var(--az-text-md);
color: var(--az-text-tertiary);
flex-shrink: 0;
width: 20px;
text-align: center;
}
.cmdk-item-active .cmdk-item-icon {
color: var(--az-blue);
}
.cmdk-item-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.cmdk-item-label {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cmdk-item-subtitle {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cmdk-empty {
text-align: center;
color: var(--az-text-muted);
font-size: var(--az-text-sm);
padding: var(--az-3xl) var(--az-lg);
}
.cmdk-footer {
display: flex;
align-items: center;
gap: var(--az-lg);
padding: var(--az-sm) var(--az-lg);
border-top: 1px solid var(--az-border);
}
.cmdk-footer-hint {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
display: flex;
align-items: center;
gap: var(--az-xs);
}
.cmdk-footer-hint kbd {
font-size: var(--az-text-2xs);
background: var(--az-bg-tertiary);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-sm);
padding: 1px var(--az-xs);
font-family: inherit;
line-height: 1.2;
}
@media (max-width: 640px) {
.cmdk-overlay {
padding-top: var(--az-lg);
padding-left: var(--az-sm);
padding-right: var(--az-sm);
}
.cmdk-dialog {
max-width: 100%;
}
.cmdk-footer {
display: none;
}
}
.stripe-page {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
padding: var(--az-xl);
}
.stripe-card {
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-3xl);
width: 100%;
max-width: 440px;
box-shadow: var(--az-shadow-dropdown);
}
.stripe-card--large {
max-width: 480px;
}
.stripe-logo {
margin-bottom: var(--az-xl);
}
.stripe-logo-text {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: var(--az-font-medium);
}
.stripe-title {
font-size: var(--az-text-2xl);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin: 0 0 var(--az-sm) 0;
letter-spacing: -0.025em;
}
.stripe-subtitle {
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
line-height: 1.5;
margin: 0;
}
.stripe-plan {
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
padding: var(--az-lg);
margin-bottom: var(--az-xl);
}
.stripe-plan-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--az-md);
padding-bottom: var(--az-md);
border-bottom: 1px solid var(--az-border);
}
.stripe-plan-name {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.stripe-plan-price {
font-size: var(--az-text-xl);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
}
.stripe-plan-period {
font-size: var(--az-text-sm);
color: var(--az-text-muted);
}
.stripe-plan-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.stripe-plan-feature {
display: flex;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.stripe-plan-feature i {
color: var(--az-green);
flex-shrink: 0;
}
.stripe-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
width: 100%;
padding: var(--az-md) var(--az-xl);
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
font-family: inherit;
cursor: pointer;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast), transform var(--az-transition-fast);
text-decoration: none;
border: none;
}
.stripe-btn--primary {
background: var(--az-text-primary);
color: var(--az-bg-app);
}
.stripe-btn--primary:hover {
opacity: 0.9;
}
.stripe-btn--primary:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.stripe-btn--secondary {
background: transparent;
color: var(--az-text-tertiary);
border: 1px solid var(--az-border);
}
.stripe-btn--secondary:hover {
color: var(--az-text-primary);
border-color: var(--az-border-hover);
}
.stripe-footer {
margin-top: var(--az-lg);
text-align: center;
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
}
.stripe-checkout-modal-fullscreen {
position: fixed;
inset: 0;
z-index: var(--az-z-modal);
overflow-y: auto;
background: var(--az-bg-overlay);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.stripe-checkout-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
width: 100%;
max-width: 960px;
min-height: 560px;
border-radius: var(--az-radius-lg);
overflow: hidden;
border: 1px solid var(--az-border);
box-shadow: var(--az-shadow-dropdown);
}
.stripe-split-left {
background: var(--az-bg-card);
padding: var(--az-3xl);
display: flex;
flex-direction: column;
justify-content: space-between;
border-right: 1px solid var(--az-border);
}
.stripe-split-right {
background: var(--az-bg-surface);
padding: var(--az-3xl);
}
.checkout-logo {
display: flex;
align-items: center;
gap: var(--az-sm);
text-decoration: none;
margin-bottom: var(--az-xl);
}
.checkout-hero {
margin-bottom: var(--az-xl);
}
.checkout-headline {
font-size: var(--az-text-xl);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
line-height: 1.3;
margin: 0 0 var(--az-sm) 0;
letter-spacing: -0.025em;
}
.checkout-headline-accent {
color: var(--az-blue);
}
.checkout-subheadline {
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
line-height: 1.5;
margin: 0;
}
.checkout-price-display {
margin-bottom: var(--az-xl);
}
.checkout-price-main {
display: flex;
align-items: baseline;
gap: var(--az-xs);
}
.checkout-price-amount {
font-size: var(--az-text-2xl);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
}
.checkout-price-period {
font-size: var(--az-text-sm);
color: var(--az-text-muted);
}
.checkout-savings {
display: inline-block;
margin-top: var(--az-xs);
padding: var(--az-xs) var(--az-sm);
background: var(--az-green-bg);
color: var(--az-green);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
border-radius: var(--az-radius-sm);
}
.checkout-benefits {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.checkout-benefit {
display: flex;
align-items: flex-start;
gap: var(--az-md);
}
.checkout-benefit-icon {
flex-shrink: 0;
width: var(--az-3xl);
height: var(--az-3xl);
display: flex;
align-items: center;
justify-content: center;
background: var(--az-bg-elevated);
border-radius: var(--az-radius-sm);
color: var(--az-text-secondary);
}
.checkout-benefit-text {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
}
.checkout-benefit-text strong {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
}
.checkout-benefit-text span {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.checkout-trust {
display: flex;
gap: var(--az-lg);
padding-top: var(--az-xl);
border-top: 1px solid var(--az-border);
}
.checkout-trust-item {
display: flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
}
#stripe-error-message {
margin-top: var(--az-md);
font-size: var(--az-text-sm);
color: var(--az-red);
}
@media (max-width: 768px) {
.stripe-page {
padding: var(--az-md);
}
.stripe-card {
padding: var(--az-xl);
}
.stripe-checkout-split {
grid-template-columns: 1fr;
max-width: 100%;
}
.stripe-split-left {
border-right: none;
border-bottom: 1px solid var(--az-border);
padding: var(--az-xl);
}
.stripe-split-right {
padding: var(--az-xl);
}
.checkout-trust {
flex-direction: column;
gap: var(--az-sm);
}
}
.vault-review-overlay {
position: fixed;
inset: 0;
z-index: var(--az-z-modal);
display: flex;
align-items: center;
justify-content: center;
background: var(--az-overlay-bg);
backdrop-filter: blur(var(--az-xs));
-webkit-backdrop-filter: blur(var(--az-xs));
opacity: 0;
transition: opacity var(--az-transition-ease);
pointer-events: none;
}
.vault-review-overlay--visible {
opacity: 1;
pointer-events: auto;
}
.vault-review-card {
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
box-shadow: var(--az-shadow-modal);
width: 90vw;
max-width: 680px;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateY(var(--az-sm));
transition: transform var(--az-transition-ease);
}
.vault-review-overlay--visible .vault-review-card {
transform: translateY(0);
}
.vault-review-card .vault-review-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-lg) var(--az-xl);
border-bottom: 1px solid var(--az-border);
flex-shrink: 0;
}
.vault-review-card .vault-review-header h3 {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin: 0;
text-align: center;
flex: 1;
}
.vault-review-header-spacer {
width: var(--az-icon-btn-sm);
flex-shrink: 0;
}
.vault-review-body {
padding: var(--az-xl);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--az-3xl);
}
.vault-review-source {
display: flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-md) var(--az-lg);
background: var(--az-bg-surface);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.vault-review-source i {
font-size: var(--az-text-lg);
color: var(--az-red);
flex-shrink: 0;
}
.vault-review-original {
margin-left: auto;
font-size: var(--az-text-xs);
color: var(--az-text-muted);
white-space: nowrap;
}
.vault-review-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--az-lg);
}
.vault-review-field {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.vault-review-field--full {
grid-column: 1 / -1;
}
.vault-review-field label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
text-align: center;
}
.vault-review-input {
width: 100%;
padding: var(--az-sm) var(--az-md);
background: var(--az-bg-surface);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
color: var(--az-text-primary);
font-size: var(--az-text-sm);
font-family: inherit;
outline: none;
transition: border-color 0.15s ease;
}
.vault-review-input:focus {
border-color: var(--az-blue);
}
.vault-review-input--highlight {
background: var(--az-blue-bg);
border-color: var(--az-blue-border);
color: var(--az-blue);
font-weight: var(--az-font-semibold);
}
select.vault-review-input {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--az-md) center;
padding-right: var(--az-xl);
}
.vault-review-hint {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
text-align: center;
}
.vault-review-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--az-md);
padding: var(--az-lg) var(--az-xl);
border-top: 1px solid var(--az-border);
flex-shrink: 0;
}
@media (max-width: 480px) {
.vault-review-card {
max-width: 100%;
margin: var(--az-md);
max-height: calc(100vh - var(--az-xl));
}
.vault-review-grid {
grid-template-columns: 1fr;
}
.vault-review-source {
flex-wrap: wrap;
}
.vault-review-original {
margin-left: 0;
width: 100%;
}
}
.vault-review-section {
display: flex;
flex-direction: column;
gap: var(--az-lg);
}
.vault-review-section-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-muted);
text-transform: uppercase;
letter-spacing: 0.6px;
text-align: center;
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-xs) 0;
}
.vault-review-section-label::before,
.vault-review-section-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--az-border);
}
.vault-review-field--warn .vault-review-input {
border-color: var(--az-amber-border);
background: var(--az-amber-bg);
}
.vault-review-textarea {
resize: vertical;
min-height: 52px;
}
.vault-review-lineitems {
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
overflow: hidden;
}
.vrl-header {
display: grid;
grid-template-columns: 1fr 80px 120px 110px 32px;
gap: var(--az-sm);
padding: var(--az-sm) var(--az-lg);
background: var(--az-bg-surface);
border-bottom: 1px solid var(--az-border);
}
.vrl-header span {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.vrl-header .vrl-qty {
text-align: center;
}
.vrl-header .vrl-total,
.vrl-header .vrl-price {
text-align: right;
}
.vrl-row {
display: grid;
grid-template-columns: 1fr 80px 120px 110px 32px;
gap: var(--az-sm);
align-items: center;
padding: var(--az-sm) var(--az-lg);
border-bottom: 1px solid var(--az-border);
}
.vrl-row:last-child {
border-bottom: none;
}
.vrl-row .vault-review-input {
padding: var(--az-xs) var(--az-sm);
font-size: var(--az-text-sm);
}
.vrl-row .vrl-qty,
.vrl-row .vrl-price {
text-align: right;
-moz-appearance: textfield;
}
.vrl-row .vrl-qty::-webkit-outer-spin-button,
.vrl-row .vrl-qty::-webkit-inner-spin-button,
.vrl-row .vrl-price::-webkit-outer-spin-button,
.vrl-row .vrl-price::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.vrl-total-display {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
font-weight: var(--az-font-medium);
text-align: right;
white-space: nowrap;
}
.vrl-del-btn {
display: flex;
align-items: center;
justify-content: center;
}
.vault-review-add-row {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs) var(--az-sm);
background: none;
border: none;
cursor: pointer;
color: var(--az-text-secondary);
font-size: var(--az-text-xs);
font-family: inherit;
transition: color 0.15s ease;
}
.vault-review-add-row:hover {
color: var(--az-blue);
}
.vault-review-totals {
display: flex;
flex-direction: column;
gap: var(--az-sm);
background: var(--az-bg-surface);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
padding: var(--az-md) var(--az-lg);
}
.vault-review-total-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.vault-review-total-row--ttc {
padding-top: var(--az-sm);
border-top: 1px solid var(--az-border);
color: var(--az-text-primary);
font-weight: var(--az-font-semibold);
}
.vault-review-total-row strong {
color: var(--az-text-primary);
font-weight: var(--az-font-semibold);
white-space: nowrap;
}
.vault-review-total-row--ttc strong {
font-size: var(--az-text-lg);
color: var(--az-blue);
}
.vault-review-total-row-right {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.vault-review-vat-input {
width: 64px;
padding: var(--az-xs) var(--az-sm);
text-align: center;
}
.vault-review-vat-unit {
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
font-weight: var(--az-font-medium);
}
.vault-review-vat-amount {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
white-space: nowrap;
min-width: 80px;
text-align: right;
font-weight: var(--az-font-semibold);
}
@media (max-width: 640px) {
.vault-review-card {
max-width: calc(100vw - var(--az-xl));
}
.vrl-header,
.vrl-row {
grid-template-columns: 1fr 60px 88px 80px 28px;
gap: var(--az-xs);
padding-left: var(--az-sm);
padding-right: var(--az-sm);
}
}
.vault-review-input--mono {
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: var(--az-text-sm);
letter-spacing: 0.04em;
color: var(--az-text-secondary);
background: var(--az-bg-elevated);
cursor: default;
}
.vault-review-bank-note {
display: flex;
align-items: flex-start;
gap: var(--az-xs);
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
margin-top: var(--az-sm);
line-height: 1.5;
}
.vault-review-bank-note i {
flex-shrink: 0;
font-size: var(--az-text-md);
margin-top: 1px;
}
.vault-synthesis-overlay {
position: fixed;
inset: 0;
z-index: var(--az-z-modal-backdrop);
background: var(--az-overlay-bg);
display: flex;
align-items: center;
justify-content: center;
padding: var(--az-lg);
opacity: 0;
pointer-events: none;
transition: opacity var(--az-transition-ease);
}
.vault-synthesis-overlay--visible {
opacity: 1;
pointer-events: auto;
}
.vault-synthesis-card {
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
width: 100%;
max-width: 520px;
box-shadow: var(--az-shadow-lg);
display: flex;
flex-direction: column;
overflow: hidden;
}
.vault-synthesis-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-lg) var(--az-xl);
border-bottom: 1px solid var(--az-border);
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.vault-synthesis-body {
padding: var(--az-xl);
display: flex;
flex-direction: column;
gap: var(--az-xs);
max-height: 400px;
overflow-y: auto;
}
.vault-synthesis-row {
display: grid;
grid-template-columns: 1fr 80px 110px;
align-items: center;
gap: var(--az-md);
padding: var(--az-sm) 0;
border-bottom: 1px solid var(--az-border);
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.vault-synthesis-row:last-child {
border-bottom: none;
}
.vault-synthesis-row--header {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid var(--az-border);
padding-bottom: var(--az-sm);
}
.vault-synthesis-amount {
font-weight: var(--az-font-semibold);
color: var(--az-blue);
text-align: right;
}
.vault-synthesis-empty {
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
text-align: center;
padding: var(--az-lg) 0;
}
.vault-synthesis-note {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
margin-top: var(--az-sm);
}
.vault-synthesis-footer {
display: flex;
justify-content: flex-end;
gap: var(--az-sm);
padding: var(--az-md) var(--az-xl);
border-top: 1px solid var(--az-border);
}
.footer-payment-link-float {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-sm);
flex-shrink: 0;
margin-left: var(--az-lg);
padding: var(--az-md);
background: var(--az-bg-elevated);
border-radius: var(--az-radius-md);
border: 1px solid var(--az-border);
}
.footer-payment-link-qr {
flex-shrink: 0;
width: 80px;
height: 80px;
}
.footer-payment-link-qr svg {
display: block;
width: 80px;
height: 80px;
}
.footer-payment-link-label {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
color: var(--az-text-tertiary);
text-align: center;
margin: 0;
letter-spacing: 0.02em;
}
.settings-payment-link-hint {
margin-top: var(--az-xs);
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
}
.editor-payment-link-toggle {
margin-top: var(--az-xs);
}
.editor-payment-link-toggle .form-label-inline {
display: flex;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
cursor: pointer;
}
.editor-payment-link-toggle .form-label-inline input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--az-blue);
cursor: pointer;
flex-shrink: 0;
}
.wiz-payment-link-toggle {
display: flex;
align-items: center;
gap: var(--az-sm);
margin-top: var(--az-sm);
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
cursor: pointer;
}
.wiz-payment-link-toggle input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--az-blue);
cursor: pointer;
flex-shrink: 0;
}
.reminder-settings-grid {
margin-bottom: var(--az-lg);
}
.reminder-inline-input {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.reminder-inline-input .form-input {
max-width: 80px;
}
.reminder-inline-unit {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.reminder-section-compact > .settings-section-header {
margin-bottom: var(--az-sm);
padding-bottom: var(--az-sm);
}
.reminder-params-row {
display: flex;
align-items: center;
gap: var(--az-sm);
margin-bottom: var(--az-lg);
}
.reminder-param-label {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
white-space: nowrap;
}
.reminder-param-input {
max-width: 56px;
text-align: center;
-moz-appearance: textfield;
appearance: textfield;
}
.reminder-param-input::-webkit-outer-spin-button,
.reminder-param-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.reminder-param-unit {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
white-space: nowrap;
}
.reminder-param-select {
max-width: 150px;
font-size: var(--az-text-xs);
}
.reminder-param-sep {
width: 1px;
height: var(--az-lg);
background: var(--az-border);
flex-shrink: 0;
}
.reminder-levels-section {
margin-top: 0;
}
.quote-expiration-section {
border-top: 1px solid var(--az-border);
padding-top: var(--az-md);
margin-top: var(--az-xs);
}
.reminder-levels-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--az-sm);
}
.reminder-add-level-btn {
display: flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs) var(--az-md);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
background: transparent;
color: var(--az-text-secondary);
font-size: var(--az-text-xs);
cursor: pointer;
transition: var(--az-transition-fast);
}
.reminder-levels-section > .reminder-add-level-btn {
margin-top: var(--az-sm);
}
.reminder-add-level-btn:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
border-color: var(--az-border-hover);
}
.reminder-levels-list {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.reminder-level-item {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--az-sm) var(--az-md);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
padding: var(--az-sm) var(--az-md);
cursor: pointer;
transition: var(--az-transition-fast);
}
.reminder-level-item:hover {
border-color: var(--az-border-hover);
}
.reminder-level-item.active {
box-shadow: inset 2px 0 0 var(--az-blue);
}
.reminder-level-label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
white-space: nowrap;
}
.reminder-level-days-wrap {
display: flex;
align-items: center;
gap: var(--az-xs);
}
.reminder-level-days-label {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
}
.reminder-level-days-input {
max-width: 56px;
text-align: center;
-moz-appearance: textfield;
appearance: textfield;
}
.reminder-level-days-input::-webkit-outer-spin-button,
.reminder-level-days-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.reminder-level-tpl-select {
max-width: 160px;
font-size: var(--az-text-xs);
}
.reminder-level-remove {
display: flex;
align-items: center;
justify-content: center;
width: var(--az-xl);
height: var(--az-xl);
border: none;
background: transparent;
color: var(--az-text-muted);
cursor: pointer;
border-radius: var(--az-radius-sm);
transition: var(--az-transition-fast);
margin-left: auto;
}
.reminder-level-remove:hover {
background: var(--az-red-bg);
color: var(--az-red);
}
.reminder-level-custom-fields {
display: flex;
flex-direction: column;
gap: var(--az-sm);
width: 100%;
padding-top: var(--az-sm);
border-top: 1px solid var(--az-border);
}
.comm-preview-label {
margin: 0 0 var(--az-xs);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.comm-preview-subject {
margin: 0 0 var(--az-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
}
.comm-preview-body-wrap {
border-top: 1px solid var(--az-border);
padding-top: var(--az-md);
}
.comm-preview-body {
margin: 0;
font-size: var(--az-text-sm);
color: var(--az-text-primary);
line-height: 1.6;
}
.comm-preview-sig {
margin-top: var(--az-lg);
padding-left: var(--az-md);
border-left: 2px solid var(--az-text-primary);
}
.comm-preview-sig-name {
margin: 0;
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.comm-preview-sig-line {
margin: 1px 0 0;
font-size: var(--az-text-2xs);
color: var(--az-text-secondary);
line-height: 1.4;
}
.comm-preview-sig-sep {
opacity: 0.3;
margin: 0 var(--az-xs);
}
.comm-preview-empty {
margin: 0;
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
text-align: center;
padding: var(--az-3xl) var(--az-lg);
}
.comm-template-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--az-xl);
align-items: start;
}
.comm-template-preview {
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
padding: var(--az-xl);
min-height: 200px;
}
.dash-overdue {
border: 1px solid var(--az-red-border);
background: var(--az-bg-card);
border-radius: var(--az-card-radius);
padding: var(--az-xl);
}
.dash-overdue .widget-header {
margin-bottom: var(--az-lg);
}
.dash-overdue .chart-title {
color: var(--az-red);
}
.dash-overdue-list {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.dash-overdue-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-sm) var(--az-md);
border-radius: var(--az-radius-md);
cursor: pointer;
transition: var(--az-transition-fast);
}
.dash-overdue-row:hover {
background: var(--az-bg-card-hover);
}
.dash-overdue-left {
display: flex;
align-items: center;
gap: var(--az-md);
min-width: 0;
}
.dash-overdue-client {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.dash-overdue-ref {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
white-space: nowrap;
}
.dash-overdue-right {
display: flex;
align-items: center;
gap: var(--az-lg);
flex-shrink: 0;
}
.dash-overdue-amount {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
white-space: nowrap;
}
.dash-overdue-delay {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-sm);
white-space: nowrap;
}
.dash-overdue-mild .dash-overdue-delay {
color: var(--az-amber);
background: var(--az-amber-bg);
}
.dash-overdue-warning .dash-overdue-delay {
color: var(--az-red);
background: var(--az-red-bg);
}
.dash-overdue-critical .dash-overdue-delay {
color: var(--az-red);
background: var(--az-red-bg);
border: 1px solid var(--az-red-border);
}
.dash-overdue-reminder {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
white-space: nowrap;
}
.bank-page-section {
margin-bottom: var(--az-xl);
}
.bank-page-section-title {
display: flex;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin-bottom: var(--az-lg);
}
.bank-page-section-title i {
font-size: var(--az-text-xl);
color: var(--az-text-secondary);
}
.bank-page-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--az-3xl) var(--az-xl);
text-align: center;
}
.bank-page-empty-icon {
font-size: var(--az-text-4xl);
color: var(--az-text-muted);
margin-bottom: var(--az-lg);
}
.bank-page-empty-title {
font-size: var(--az-text-md);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
margin-bottom: var(--az-sm);
}
.bank-page-empty-desc {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
max-width: 380px;
margin-bottom: var(--az-xl);
line-height: 1.5;
}
.bank-page-connect-btn {
display: inline-flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-sm) var(--az-lg);
background: var(--az-blue);
color: var(--az-text-on-accent);
border: none;
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: background var(--az-transition-fast);
}
.bank-page-connect-btn:hover {
background: var(--az-blue-hover);
}
.bank-page-connect-btn-secondary {
margin-top: var(--az-lg);
background: var(--az-bg-elevated);
color: var(--az-text-primary);
border: 1px solid var(--az-border);
}
.bank-page-connect-btn-secondary:hover {
background: var(--az-bg-card-hover);
border-color: var(--az-border-hover);
}
.bank-page-connections {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.bank-connection-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-md) var(--az-lg);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
transition: border-color var(--az-transition-fast);
}
.bank-connection-card:hover {
border-color: var(--az-border-hover);
}
.bank-connection-card-header {
display: flex;
align-items: center;
gap: var(--az-md);
flex: 1;
min-width: 0;
}
.bank-connection-logo {
width: var(--az-icon-lg);
height: var(--az-icon-lg);
border-radius: var(--az-radius-md);
object-fit: contain;
flex-shrink: 0;
}
.bank-connection-logo-fallback {
width: var(--az-icon-lg);
height: var(--az-icon-lg);
border-radius: var(--az-radius-md);
background: var(--az-bg-elevated);
display: flex;
align-items: center;
justify-content: center;
color: var(--az-text-tertiary);
font-size: var(--az-text-lg);
flex-shrink: 0;
}
.bank-connection-info {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
min-width: 0;
}
.bank-connection-name {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bank-connection-meta {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.bank-connection-badge {
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
flex-shrink: 0;
}
.bank-badge-green {
background: var(--az-green-bg);
color: var(--az-green);
border: 1px solid var(--az-green-border);
}
.bank-badge-amber {
background: var(--az-amber-bg);
color: var(--az-amber);
border: 1px solid var(--az-amber-border);
}
.bank-badge-red {
background: var(--az-red-bg);
color: var(--az-red);
border: 1px solid var(--az-red-border);
}
.bank-badge-muted {
background: var(--az-bg-elevated);
color: var(--az-text-muted);
border: 1px solid var(--az-border);
}
.bank-connection-card-actions {
display: flex;
align-items: center;
gap: var(--az-sm);
margin-left: var(--az-lg);
}
.bank-action-btn {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs) var(--az-sm);
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
font-size: var(--az-text-xs);
cursor: pointer;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast), transform var(--az-transition-fast);
}
.bank-action-btn:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
border-color: var(--az-border-hover);
}
.bank-action-delete:hover {
color: var(--az-red);
border-color: var(--az-red-border);
}
.bank-page-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
margin-bottom: var(--az-lg);
flex-wrap: wrap;
}
.bank-page-filters {
display: flex;
gap: var(--az-xs);
}
.bank-filter-chip {
padding: var(--az-sort-chip-pad);
border-radius: var(--az-sort-chip-radius);
font-size: var(--az-sort-chip-font);
background: var(--az-sort-chip-bg);
color: var(--az-sort-chip-color);
border: 1px solid var(--az-sort-chip-border);
cursor: pointer;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast), transform var(--az-transition-fast);
}
.bank-filter-chip:hover {
color: var(--az-text-primary);
border-color: var(--az-border-hover);
}
.bank-filter-chip.active {
background: var(--az-sort-chip-active-bg);
color: var(--az-sort-chip-active-color);
border-color: var(--az-sort-chip-active-border);
}
.bank-page-toolbar-right {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.bank-search-wrap {
position: relative;
}
.bank-search-icon {
position: absolute;
left: var(--az-sm);
top: 50%;
transform: translateY(-50%);
color: var(--az-text-muted);
font-size: var(--az-text-sm);
pointer-events: none;
}
.bank-search-input {
padding: var(--az-xs) var(--az-sm) var(--az-xs) var(--az-xl);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
color: var(--az-text-primary);
font-size: var(--az-text-sm);
width: 200px;
transition: border-color var(--az-transition-fast);
}
.bank-search-input:focus {
outline: none;
border-color: var(--az-border-focus);
box-shadow: var(--az-focus-ring);
}
.bank-auto-reconcile-btn {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs) var(--az-md);
background: var(--az-blue-bg);
color: var(--az-blue);
border: 1px solid var(--az-blue-border);
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast), transform var(--az-transition-fast);
}
.bank-auto-reconcile-btn:hover {
background: var(--az-blue);
color: var(--az-text-on-accent);
}
.bank-transactions-list {
display: flex;
flex-direction: column;
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
overflow: hidden;
}
.bank-tx-row {
display: grid;
grid-template-columns: 90px 1fr 110px 160px 80px;
align-items: center;
gap: var(--az-md);
padding: var(--az-sm) var(--az-lg);
border-bottom: 1px solid var(--az-border);
background: var(--az-bg-card);
transition: background var(--az-transition-fast);
}
.bank-tx-row:last-child {
border-bottom: none;
}
.bank-tx-row:hover {
background: var(--az-bg-card-hover);
}
.bank-tx-date {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
font-variant-numeric: tabular-nums;
}
.bank-tx-info {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
min-width: 0;
}
.bank-tx-counterparty {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bank-tx-description {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bank-tx-amount {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-green);
text-align: right;
font-variant-numeric: tabular-nums;
}
.bank-tx-match {
display: flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-xs);
}
.bank-match-unmatched {
color: var(--az-text-muted);
}
.bank-match-suggested {
color: var(--az-amber);
}
.bank-match-confirmed {
color: var(--az-green);
}
.bank-match-rejected {
color: var(--az-red);
}
.bank-tx-match-ref {
font-family: var(--az-font-mono);
font-size: var(--az-text-2xs);
}
.bank-tx-match-label {
font-size: var(--az-text-2xs);
}
.bank-tx-confidence {
font-size: var(--az-text-2xs);
opacity: 0.7;
}
.bank-tx-actions {
display: flex;
align-items: center;
gap: var(--az-xs);
justify-content: flex-end;
}
.bank-tx-accept,
.bank-tx-reject,
.bank-tx-manual {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--az-xl);
height: var(--az-xl);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-sm);
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
cursor: pointer;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast), transform var(--az-transition-fast);
}
.bank-tx-accept:hover {
color: var(--az-green);
border-color: var(--az-green-border);
background: var(--az-green-bg);
}
.bank-tx-reject:hover {
color: var(--az-red);
border-color: var(--az-red-border);
background: var(--az-red-bg);
}
.bank-tx-manual:hover {
color: var(--az-blue);
border-color: var(--az-blue-border);
background: var(--az-blue-bg);
}
.bank-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-xs);
margin-top: var(--az-lg);
}
.bank-page-btn {
min-width: var(--az-2xl);
height: var(--az-2xl);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
border: 1px solid var(--az-border);
cursor: pointer;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast), transform var(--az-transition-fast);
}
.bank-page-btn:hover {
background: var(--az-bg-card-hover);
border-color: var(--az-border-hover);
}
.bank-page-btn.active {
background: var(--az-blue-bg);
color: var(--az-blue);
border-color: var(--az-blue-border);
}
.bank-page-empty-transactions {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--az-3xl) var(--az-xl);
color: var(--az-text-muted);
font-size: var(--az-text-sm);
}
.bank-page-empty-transactions i {
font-size: var(--az-text-3xl);
margin-bottom: var(--az-md);
}
@keyframes bank-spin-anim {
to { transform: rotate(360deg); }
}
.bank-spin {
animation: bank-spin-anim 0.8s linear infinite;
}
.bank-modal-backdrop {
position: fixed;
inset: 0;
z-index: var(--az-z-modal-backdrop);
background: var(--az-overlay-bg);
display: flex;
align-items: center;
justify-content: center;
padding: var(--az-xl);
}
.bank-modal {
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-xl);
box-shadow: var(--az-shadow-modal);
width: 100%;
max-width: 560px;
max-height: 80vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.bank-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-lg) var(--az-xl);
border-bottom: 1px solid var(--az-border);
}
.bank-modal-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.bank-modal-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--az-2xl);
height: var(--az-2xl);
border-radius: var(--az-radius-md);
color: var(--az-text-tertiary);
cursor: pointer;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast), transform var(--az-transition-fast);
}
.bank-modal-close:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.bank-modal-search-wrap {
position: relative;
padding: var(--az-md) var(--az-xl);
}
.bank-modal-search-icon {
position: absolute;
left: calc(var(--az-xl) + var(--az-sm));
top: 50%;
transform: translateY(-50%);
color: var(--az-text-muted);
font-size: var(--az-text-sm);
pointer-events: none;
}
.bank-modal-search {
width: 100%;
padding: var(--az-sm) var(--az-sm) var(--az-sm) var(--az-2xl);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
color: var(--az-text-primary);
font-size: var(--az-text-sm);
}
.bank-modal-search:focus {
outline: none;
border-color: var(--az-border-focus);
box-shadow: var(--az-focus-ring);
}
.bank-institution-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: var(--az-sm);
padding: var(--az-md) var(--az-xl) var(--az-xl);
overflow-y: auto;
max-height: 400px;
}
.bank-institution-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-sm);
padding: var(--az-md);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
cursor: pointer;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast), transform var(--az-transition-fast);
}
.bank-institution-card:hover {
border-color: var(--az-blue-border);
background: var(--az-blue-bg);
}
.bank-institution-logo {
width: 40px;
height: 40px;
border-radius: var(--az-radius-md);
object-fit: contain;
}
.bank-institution-logo-fallback {
width: 40px;
height: 40px;
border-radius: var(--az-radius-md);
background: var(--az-bg-card);
display: flex;
align-items: center;
justify-content: center;
color: var(--az-text-muted);
font-size: var(--az-text-xl);
}
.bank-institution-name {
font-size: var(--az-text-2xs);
color: var(--az-text-secondary);
text-align: center;
line-height: 1.3;
word-break: break-word;
}
.bank-institution-empty {
grid-column: 1 / -1;
text-align: center;
padding: var(--az-xl);
color: var(--az-text-muted);
font-size: var(--az-text-sm);
}
.bank-modal-manual {
max-width: 480px;
}
.bank-manual-list {
display: flex;
flex-direction: column;
max-height: 400px;
overflow-y: auto;
padding: var(--az-sm) var(--az-xl) var(--az-xl);
}
.bank-manual-item {
display: grid;
grid-template-columns: 120px 1fr 100px 80px;
align-items: center;
gap: var(--az-sm);
padding: var(--az-sm) var(--az-md);
border-radius: var(--az-radius-md);
cursor: pointer;
transition: background var(--az-transition-fast);
text-align: left;
}
.bank-manual-item:hover {
background: var(--az-bg-card-hover);
}
.bank-manual-ref {
font-family: var(--az-font-mono);
font-size: var(--az-text-xs);
color: var(--az-text-primary);
font-weight: var(--az-font-medium);
}
.bank-manual-client {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bank-manual-amount {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
text-align: right;
font-variant-numeric: tabular-nums;
}
.bank-manual-date {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
text-align: right;
}
.reconciliation-panel-backdrop {
position: fixed;
inset: 0;
z-index: var(--az-z-modal-backdrop);
background: var(--az-overlay-bg);
display: flex;
align-items: center;
justify-content: center;
padding: var(--az-xl);
}
.reconciliation-panel {
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-xl);
box-shadow: var(--az-shadow-modal);
width: 100%;
max-width: 720px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.reconciliation-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-lg) var(--az-xl);
border-bottom: 1px solid var(--az-border);
}
.reconciliation-panel-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.reconciliation-panel-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--az-2xl);
height: var(--az-2xl);
border-radius: var(--az-radius-md);
color: var(--az-text-tertiary);
cursor: pointer;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast), transform var(--az-transition-fast);
}
.reconciliation-panel-close:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.reconciliation-panel-body {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--az-lg);
padding: var(--az-xl);
}
.reconciliation-side {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.reconciliation-side-title {
display: flex;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.reconciliation-side-title i {
color: var(--az-text-secondary);
}
.reconciliation-divider {
display: flex;
align-items: center;
justify-content: center;
color: var(--az-text-muted);
font-size: var(--az-text-xl);
}
.reconciliation-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--az-sm);
}
.reconciliation-detail {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
}
.reconciliation-detail-full {
grid-column: 1 / -1;
}
.reconciliation-detail-label {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.reconciliation-detail-value {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
}
.reconciliation-amount {
font-weight: var(--az-font-semibold);
font-variant-numeric: tabular-nums;
}
.reconciliation-mono {
font-family: var(--az-font-mono);
font-size: var(--az-text-xs);
}
.reconciliation-confidence {
display: flex;
align-items: center;
gap: var(--az-sm);
margin-top: var(--az-sm);
}
.reconciliation-confidence-bar {
flex: 1;
height: var(--az-xs);
background: var(--az-bg-elevated);
border-radius: var(--az-radius-pill);
overflow: hidden;
}
.reconciliation-confidence-fill {
height: 100%;
width: 0;
background: var(--az-green);
border-radius: var(--az-radius-pill);
transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reconciliation-confidence-label {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
white-space: nowrap;
}
.reconciliation-actions {
display: flex;
gap: var(--az-sm);
margin-top: var(--az-md);
}
.reconciliation-btn {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-sm) var(--az-lg);
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast), transform var(--az-transition-fast);
border: 1px solid transparent;
}
.reconciliation-btn-confirm {
background: var(--az-green);
color: var(--az-text-on-accent);
}
.reconciliation-btn-confirm:hover {
background: var(--az-green-hover);
}
.reconciliation-btn-reject {
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
border-color: var(--az-border);
}
.reconciliation-btn-reject:hover {
color: var(--az-red);
border-color: var(--az-red-border);
}
.reconciliation-btn-search {
background: var(--az-blue-bg);
color: var(--az-blue);
border-color: var(--az-blue-border);
}
.reconciliation-btn-search:hover {
background: var(--az-blue);
color: var(--az-text-on-accent);
}
.reconciliation-no-match {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--az-xl);
text-align: center;
gap: var(--az-md);
color: var(--az-text-muted);
}
.reconciliation-no-match i {
font-size: var(--az-text-3xl);
}
.reconciliation-no-match p {
font-size: var(--az-text-sm);
}
#tracking {
position: relative;
gap: var(--az-lg);
}
#tracking .trk-kpi-card:hover {
cursor: default;
}
.trk-kpi-unit {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
margin-left: var(--az-2xs);
}
.trk-kpi-footer {
display: flex;
align-items: center;
gap: var(--az-sm);
min-height: var(--az-lg);
}
.trk-kpi-sub {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
font-weight: var(--az-font-medium);
}
.trk-tabs {
display: flex;
flex-wrap: wrap;
gap: var(--az-xs);
border-bottom: 1px solid var(--az-border);
padding-bottom: 0;
}
.trk-tab {
padding: var(--az-sm) var(--az-lg);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: color var(--az-transition-fast), border-color var(--az-transition-fast);
}
.trk-tab:hover {
color: var(--az-text-primary);
}
.trk-tab.active {
color: var(--az-blue);
border-bottom-color: var(--az-blue);
}
.trk-tab-count {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
font-weight: var(--az-font-medium);
}
.trk-tab.active .trk-tab-count {
color: var(--az-blue);
}
#tracking .dl-primary .mobile-client-detail,
#tracking .trk-tracking-dots-mobile { display: none; }
.trk-tracking-dots {
display: flex;
gap: var(--az-2xs);
align-items: center;
}
.trk-tracking-dot {
width: 6px;
height: 6px;
border-radius: var(--az-radius-pill);
background: var(--az-border);
transition: background var(--az-transition-fast);
}
.trk-tracking-dot.active-sent {
background: var(--az-blue);
}
.trk-tracking-dot.active-opened {
background: var(--az-amber);
}
.trk-tracking-dot.active-viewed {
background: var(--az-green);
}
#tracking .data-list .row-actions-trigger {
min-width: var(--az-3xl);
min-height: var(--az-3xl);
width: var(--az-3xl);
height: var(--az-3xl);
}
.trk-secondary-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--az-lg);
align-items: stretch;
}
.trk-funnel {
padding: var(--az-xl);
}
.trk-funnel-header {
margin-bottom: var(--az-lg);
}
.trk-funnel-body {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.trk-funnel-row {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: var(--az-md);
}
.trk-funnel-label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
min-width: 80px;
}
.trk-funnel-bar-wrap {
height: var(--az-xl);
background: var(--az-bg-elevated);
border-radius: var(--az-radius-md);
overflow: hidden;
position: relative;
}
.trk-funnel-bar {
height: 100%;
border-radius: var(--az-radius-md);
transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
min-width: var(--az-xs);
width: var(--bar-w, 2%);
background: var(--bar-c, var(--az-text-tertiary));
}
.trk-funnel-value {
font-size: var(--az-text-sm);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
min-width: var(--az-xl);
text-align: right;
font-variant-numeric: tabular-nums;
}
.trk-funnel-pct {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
font-weight: var(--az-font-medium);
min-width: var(--az-3xl);
text-align: right;
font-variant-numeric: tabular-nums;
}
.trk-dot-red {
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
background: var(--az-red);
flex-shrink: 0;
}
.trk-dot-amber {
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
background: var(--az-amber);
flex-shrink: 0;
}
.trk-dot-blue {
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
background: var(--az-blue);
flex-shrink: 0;
}
.trk-dot-green {
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
background: var(--az-green);
flex-shrink: 0;
}
.trk-dot-gray {
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
background: var(--az-text-muted);
flex-shrink: 0;
}
.trk-live-feed {
padding: var(--az-xl);
}
.trk-feed-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--az-lg);
}
.trk-feed-count {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
font-weight: var(--az-font-medium);
}
.trk-feed-list {
display: flex;
flex-direction: column;
max-height: 320px;
overflow-y: auto;
}
.trk-feed-item {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-sm) var(--az-xs);
border-bottom: 1px solid var(--az-glass-border);
cursor: pointer;
transition: background var(--az-transition-fast);
}
.trk-feed-item:last-child {
border-bottom: none;
}
.trk-feed-item:hover {
background: var(--az-glass-bg-hover);
border-radius: var(--az-radius-md);
}
.trk-feed-dot {
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
flex-shrink: 0;
}
.trk-feed-time {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
font-weight: var(--az-font-medium);
min-width: 80px;
flex-shrink: 0;
}
.trk-feed-body {
display: flex;
align-items: center;
gap: var(--az-xs);
flex: 1;
min-width: 0;
font-size: var(--az-text-xs);
}
.trk-feed-icon {
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
flex-shrink: 0;
}
.trk-feed-client {
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}
.trk-feed-verb {
color: var(--az-text-secondary);
white-space: nowrap;
}
.trk-feed-ref {
color: var(--az-blue);
font-weight: var(--az-font-medium);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.trk-feed-duration {
color: var(--az-text-tertiary);
font-size: var(--az-text-2xs);
white-space: nowrap;
}
.trk-empty-hint {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--az-sm);
padding: var(--az-xl);
color: var(--az-text-muted);
font-size: var(--az-text-sm);
text-align: center;
}
.trk-empty-hint i {
font-size: var(--az-text-2xl);
}
.trk-empty-cta {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-sm) var(--az-lg);
margin-top: var(--az-sm);
background: var(--az-blue);
color: var(--az-text-on-accent);
border: none;
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: background var(--az-transition-fast);
}
.trk-empty-cta:hover {
background: var(--az-blue-hover);
}
.trk-doc-type {
display: inline-block;
padding: var(--az-2xs) var(--az-xs-plus);
margin-right: var(--az-xs);
border-radius: var(--az-radius-xs);
background: var(--az-bg-elevated);
color: var(--az-text-muted);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
text-transform: capitalize;
vertical-align: middle;
letter-spacing: 0.02em;
}
.trk-search-wrap {
max-width: 320px;
}
.trk-history-header {
margin-bottom: var(--az-md);
}
.trk-history-header-top {
display: flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
}
.trk-history-client {
color: var(--az-text-muted);
font-weight: var(--az-font-normal);
}
.trk-history-amount {
display: block;
margin-top: var(--az-2xs);
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.trk-history-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
margin-bottom: var(--az-md);
background: var(--az-border-subtle);
border-radius: var(--az-radius-sm);
overflow: hidden;
}
.trk-history-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: var(--az-sm) var(--az-xs);
background: var(--az-bg-surface);
}
.trk-history-stat-value {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
}
.trk-history-stat-label {
font-size: var(--az-text-3xs);
color: var(--az-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: var(--az-font-medium);
}
.trk-history-stat-status .trk-history-stat-value {
font-size: var(--az-text-xs);
}
.trk-history-stat-paid .trk-history-stat-value {
color: var(--az-green);
}
.trk-history-stat-opened .trk-history-stat-value,
.trk-history-stat-sent .trk-history-stat-value {
color: var(--az-text-primary);
}
.trk-history-stat-viewed .trk-history-stat-value {
color: var(--az-blue);
}
.trk-history-timeline-title {
font-size: var(--az-text-3xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--az-sm);
}
.trk-history-timeline {
display: flex;
flex-direction: column;
gap: 0;
}
.trk-history-event {
display: flex;
align-items: flex-start;
gap: var(--az-sm);
padding: var(--az-sm) 0;
border-bottom: 1px solid var(--az-border-subtle);
font-size: var(--az-text-xs);
}
.trk-history-event:last-child {
border-bottom: none;
}
.trk-history-dot {
width: 6px;
height: 6px;
border-radius: var(--az-radius-pill);
background: var(--dot-c, var(--az-text-muted));
flex-shrink: 0;
margin-top: var(--az-xs);
}
.trk-history-event-body {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.trk-history-date {
color: var(--az-text-muted);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-normal);
}
.trk-history-label {
color: var(--az-text-secondary);
font-weight: var(--az-font-medium);
}
.trk-history-meta {
font-size: var(--az-text-3xs);
color: var(--az-text-muted);
font-variant-numeric: tabular-nums;
}
.trk-history-empty {
color: var(--az-text-muted);
font-size: var(--az-text-xs);
text-align: center;
padding: var(--az-lg) 0;
}
.trk-history-rgpd {
margin-top: var(--az-lg);
padding-top: var(--az-md);
border-top: 1px solid var(--az-border);
font-size: var(--az-text-3xs);
line-height: 1.5;
color: var(--az-text-muted);
}
.trk-kpi-hint {
display: inline-flex;
margin-left: var(--az-xs);
color: var(--az-text-muted);
cursor: pointer;
position: relative;
}
.trk-kpi-hint i {
font-size: var(--az-text-xs);
}
.trk-kpi-hint-bubble {
display: none;
position: absolute;
bottom: calc(100% + var(--az-sm));
left: 50%;
transform: translateX(-50%);
width: 240px;
padding: var(--az-sm) var(--az-md);
background: var(--az-bg-card);
color: var(--az-text-secondary);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
line-height: 1.4;
border-radius: var(--az-radius-md);
border: 1px solid var(--az-glass-border);
box-shadow: var(--az-shadow-sm);
z-index: var(--az-z-sticky);
pointer-events: none;
white-space: normal;
}
.trk-kpi-hint:hover .trk-kpi-hint-bubble,
.trk-kpi-hint:focus .trk-kpi-hint-bubble {
display: block;
}
.trk-resend-badge {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: var(--az-2xs);
color: var(--az-text-muted);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-normal);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.trk-empty-state {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--az-3xl) var(--az-xl);
text-align: center;
}
.trk-empty-icon {
font-size: var(--az-3xl);
color: var(--az-text-muted);
margin-bottom: var(--az-lg);
}
.trk-empty-title {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin-bottom: var(--az-sm);
}
.trk-empty-desc {
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
max-width: 440px;
line-height: 1.5;
margin-bottom: var(--az-xl);
}
.trk-empty-steps {
display: flex;
flex-direction: column;
gap: var(--az-md);
margin-bottom: var(--az-xl);
}
.trk-empty-step {
display: flex;
align-items: center;
gap: var(--az-md);
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.trk-empty-step-num {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: var(--az-radius-pill);
background: var(--az-blue-bg);
color: var(--az-blue);
font-size: var(--az-text-xs);
font-weight: var(--az-font-bold);
flex-shrink: 0;
}
@media (max-width: 1024px) {
#trk-kpi-row {
grid-template-columns: repeat(2, 1fr);
}
.trk-secondary-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
#trk-kpi-row {
grid-template-columns: 1fr;
}
.trk-tabs {
gap: var(--az-2xs);
}
.trk-tab {
padding: var(--az-sm) var(--az-md);
font-size: var(--az-text-xs);
}
.trk-th,
.trk-td {
padding: var(--az-sm) var(--az-md);
font-size: var(--az-text-xs);
}
.trk-td-client {
max-width: 120px;
}
.trk-funnel-row {
grid-template-columns: 1fr;
gap: var(--az-xs);
}
.trk-funnel-label {
min-width: auto;
}
.trk-funnel-value,
.trk-funnel-pct {
display: block;
font-size: var(--az-text-xs);
}
.trk-feed-list {
max-height: 200px;
}
.trk-feed-body {
flex-wrap: wrap;
}
.trk-feed-client {
max-width: 140px;
}
.trk-history-summary {
grid-template-columns: repeat(2, 1fr);
}
.trk-empty-steps {
align-items: flex-start;
text-align: left;
}
}
.admin-diag-summary {
display: flex;
align-items: center;
gap: var(--az-lg);
padding: var(--az-lg) var(--az-xl);
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
margin-bottom: var(--az-xl);
}
.admin-diag-summary-score {
font-size: var(--az-text-lg-plus);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
}
.admin-diag-summary-bar {
flex: 1;
height: var(--az-sm);
background: var(--az-glass-border);
border-radius: var(--az-radius-pill);
overflow: hidden;
}
.admin-diag-summary-fill {
width: 0;
height: 100%;
border-radius: var(--az-radius-pill);
transition: width 0.6s ease;
background: var(--az-green);
}
.admin-diag-summary-fill[data-level="fail"] { background: var(--az-red); }
.admin-diag-summary-fill[data-level="warn"] { background: var(--az-amber); }
.admin-diag-summary-details {
display: flex;
gap: var(--az-lg);
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
}
.admin-diag-summary-details span {
display: flex;
align-items: center;
gap: var(--az-xs);
}
.admin-diag-summary-dot {
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
display: inline-block;
}
.admin-diag-summary-dot--ok { background: var(--az-green); }
.admin-diag-summary-dot--warn { background: var(--az-amber); }
.admin-diag-summary-dot--fail { background: var(--az-red); }
.admin-diag-recs {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.admin-diag-rec {
padding: var(--az-sm) var(--az-md);
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
color: var(--az-text-primary);
border-left: 3px solid var(--az-border);
background: var(--az-bg-elevated);
}
.admin-diag-rec--critical { border-left-color: var(--az-red); background: var(--az-red-bg); }
.admin-diag-rec--high { border-left-color: var(--az-amber); background: var(--az-amber-bg); }
.admin-diag-rec--medium { border-left-color: var(--az-blue); }
.admin-diag-rec--low { border-left-color: var(--az-text-muted); }
.admin-diag-rec-severity {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-bold);
letter-spacing: 0.05em;
text-transform: uppercase;
padding: var(--az-2xs) var(--az-xs);
border-radius: var(--az-radius-xs);
margin-right: var(--az-sm);
}
.admin-diag-rec--critical .admin-diag-rec-severity { color: var(--az-red); background: rgba(255,59,48,0.12); }
.admin-diag-rec--high .admin-diag-rec-severity { color: var(--az-amber); background: rgba(255,149,0,0.12); }
.admin-diag-rec--medium .admin-diag-rec-severity { color: var(--az-blue); background: var(--az-blue-bg); }
.admin-diag-rec--low .admin-diag-rec-severity { color: var(--az-text-muted); background: var(--az-bg-surface); }
.admin-diag-category {
margin-bottom: var(--az-xl);
}
.admin-diag-category-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--az-md);
}
.admin-diag-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--az-md);
}
.admin-diag-card {
display: flex;
align-items: flex-start;
gap: var(--az-md);
padding: var(--az-lg);
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-lg);
transition: border-color var(--az-transition-ease), opacity var(--az-transition);
opacity: 0;
animation: adminDiagFadeIn 0.3s ease forwards;
animation-delay: var(--diag-delay, 0ms);
}
@keyframes adminDiagFadeIn {
from { opacity: 0; transform: translateY(var(--az-sm)); }
to { opacity: 1; transform: translateY(0); }
}
.admin-diag-card-icon {
width: var(--az-2xl);
height: var(--az-2xl);
border-radius: var(--az-radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: var(--az-text-lg);
}
.admin-diag-card-body {
flex: 1;
min-width: 0;
}
.admin-diag-card-name {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
margin-bottom: var(--az-xs);
}
.admin-diag-card-detail {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
word-break: break-word;
}
.admin-diag-card-ms {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
margin-top: var(--az-xs);
}
.admin-diag-card[data-status="pending"] {
border-color: var(--az-glass-border);
}
.admin-diag-card[data-status="pending"] .admin-diag-card-icon {
background: var(--az-glass-bg);
color: var(--az-text-muted);
}
.admin-diag-card[data-status="ok"] {
border-color: var(--az-green-border);
}
.admin-diag-card[data-status="ok"] .admin-diag-card-icon {
background: var(--az-green-bg);
color: var(--az-green);
}
.admin-diag-card[data-status="warn"] {
border-color: var(--az-amber-border);
}
.admin-diag-card[data-status="warn"] .admin-diag-card-icon {
background: var(--az-amber-bg);
color: var(--az-amber);
}
.admin-diag-card[data-status="fail"] {
border-color: var(--az-red-border);
}
.admin-diag-card[data-status="fail"] .admin-diag-card-icon {
background: var(--az-red-bg);
color: var(--az-red);
}
.admin-diag-terminal {
display: none;
margin-top: var(--az-xl);
padding: var(--az-lg);
background: var(--az-bg-input);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-lg);
max-height: 280px;
overflow-y: auto;
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
font-size: var(--az-text-xs);
line-height: 1.6;
}
.admin-diag-terminal--visible {
display: block;
}
.admin-diag-log-line {
display: flex;
gap: var(--az-sm);
padding: var(--az-xs) 0;
}
.admin-diag-log-ts {
color: var(--az-text-muted);
flex-shrink: 0;
}
.admin-diag-log-msg {
word-break: break-word;
}
.admin-diag-log-line[data-type="info"] .admin-diag-log-msg { color: var(--az-text-secondary); }
.admin-diag-log-line[data-type="ok"] .admin-diag-log-msg { color: var(--az-green); }
.admin-diag-log-line[data-type="warn"] .admin-diag-log-msg { color: var(--az-amber); }
.admin-diag-log-line[data-type="fail"] .admin-diag-log-msg { color: var(--az-red); }
@media (max-width: 768px) {
.admin-diag-grid {
grid-template-columns: 1fr;
}
.admin-diag-summary {
flex-wrap: wrap;
gap: var(--az-md);
}
.admin-diag-summary-details {
width: 100%;
justify-content: space-between;
}
.admin-diag-terminal {
max-height: 200px;
}
}
.dashboard-welcome-card {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-xl);
}
.welcome-card-content {
display: flex;
flex-direction: column;
gap: var(--az-xl);
}
.welcome-card-header {
display: flex;
align-items: center;
gap: var(--az-lg);
}
.welcome-card-header > i {
font-size: var(--az-text-3xl);
color: var(--az-blue);
flex-shrink: 0;
}
.welcome-card-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
letter-spacing: var(--az-tracking-heading);
}
.welcome-card-text {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
margin-top: var(--az-2xs);
}
.welcome-card-steps {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.welcome-step {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-md) var(--az-lg);
border-radius: var(--az-radius-lg);
transition: background var(--az-transition-fast);
}
.welcome-step:hover {
background: var(--az-bg-card-hover);
}
.welcome-step-number {
width: var(--az-xl);
height: var(--az-xl);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--az-radius-pill);
background: var(--az-blue-bg);
color: var(--az-blue);
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
flex-shrink: 0;
}
.welcome-step.completed .welcome-step-number {
background: var(--az-green-bg);
color: var(--az-green);
}
.welcome-step-info {
flex: 1;
min-width: 0;
}
.welcome-step-label {
display: block;
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
}
.welcome-step-desc {
display: block;
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
margin-top: var(--az-2xs);
}
.welcome-step .btn {
flex-shrink: 0;
}
.wiz-optional-badge {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
font-weight: var(--az-font-normal);
margin-left: var(--az-sm);
}
.wiz-skip-btn {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
background: none;
border: none;
cursor: pointer;
padding: var(--az-xs) var(--az-sm);
border-radius: var(--az-radius-sm);
transition: color var(--az-transition-fast), background var(--az-transition-fast);
}
.wiz-skip-btn:hover {
color: var(--az-text-primary);
background: var(--az-bg-card-hover);
}
.wiz-vat-hint {
display: flex;
align-items: flex-start;
gap: var(--az-xs);
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
margin-top: var(--az-sm);
line-height: 1.5;
}
.wiz-vat-hint > i {
flex-shrink: 0;
margin-top: var(--az-2xs);
color: var(--az-blue);
}
.wiz-hint-detail {
display: block;
margin-top: var(--az-2xs);
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
}
.wiz-payment-hint {
display: flex;
align-items: flex-start;
gap: var(--az-xs);
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
margin-top: var(--az-sm);
line-height: 1.5;
}
.wiz-payment-hint > i {
flex-shrink: 0;
margin-top: var(--az-2xs);
color: var(--az-blue);
}
.wiz-required {
color: var(--az-red);
font-weight: var(--az-font-normal);
}
.wiz-recent-docs {
margin-bottom: var(--az-lg);
padding: var(--az-md);
border-radius: var(--az-radius-md);
background: var(--az-bg-input);
}
.wiz-recent-docs-label {
display: flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--az-sm);
}
.wiz-recent-docs-label i {
font-size: var(--az-text-sm);
}
.wiz-recent-docs-chips {
display: flex;
flex-wrap: wrap;
gap: var(--az-xs-plus);
}
.wiz-recent-doc-chip {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs-plus) var(--az-md);
border-radius: var(--az-radius-3xl);
border: 1px solid var(--az-border);
background: var(--az-bg-card);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition), transform var(--az-transition);
font-family: inherit;
min-height: var(--az-touch-min);
}
.wiz-recent-doc-chip:hover {
border-color: var(--az-blue);
background: var(--az-blue-bg);
}
.wiz-recent-doc-chip:active {
filter: brightness(0.92);
}
.wiz-recent-doc-type {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-bold);
color: var(--az-blue);
text-transform: uppercase;
}
.wiz-recent-doc-client {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
}
.wiz-recent-doc-meta {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
}
.wiz-client-hint {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
margin-top: var(--az-xs);
}
.wiz-create-client-link {
color: var(--az-blue);
cursor: pointer;
font-weight: var(--az-font-medium);
}
.wiz-create-client-link:hover {
text-decoration: underline;
}
.settings-completion-bar {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-md) var(--az-lg);
margin-bottom: var(--az-lg);
border-radius: var(--az-radius-lg);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
}
.settings-completion-track {
flex: 1;
height: var(--az-xs);
background: var(--az-border);
border-radius: var(--az-radius-pill);
overflow: hidden;
}
.settings-completion-fill {
height: 100%;
border-radius: var(--az-radius-pill);
background: var(--az-green);
transition: width 0.4s ease;
}
.settings-completion-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
white-space: nowrap;
}
.settings-nav-dot {
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
flex-shrink: 0;
}
.settings-nav-dot-incomplete {
background: var(--az-amber);
}
.settings-nav-dot-complete {
background: var(--az-green);
}
.dash-action-btn:focus-visible,
.dash-shortcut:focus-visible,
.rapports-tab-btn:focus-visible,
.settings-nav-link:focus-visible,
.sub-toggle-btn:focus-visible,
.sub-cta:focus-visible,
.offer-btn:focus-visible,
.onboarding-btn-back:focus-visible,
.onboarding-btn-next:focus-visible,
.onboarding-btn-skip:focus-visible,
.vault-view-btn:focus-visible,
.vault-purge-trash-btn:focus-visible,
.charge-type-toggle-add-btn:focus-visible,
.line-row__btn:focus-visible,
.line-item-control-btn:focus-visible,
.line-item-control-remove:focus-visible,
.logo-delete-btn:focus-visible,
.editor-settings-btn:focus-visible,
.editor-wizard-btn:focus-visible {
box-shadow: var(--az-focus-ring);
outline: none;
}
.threshold-overlay {
position: fixed;
inset: 0;
z-index: var(--az-z-loader);
background: var(--az-overlay-bg);
display: flex;
align-items: center;
justify-content: center;
padding: var(--az-xl);
}
.threshold-card {
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-xl);
padding: var(--az-xl) var(--az-xl) var(--az-lg);
max-width: 340px;
width: 100%;
box-shadow: var(--az-shadow-xl);
}
.threshold-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: var(--az-xl);
}
.threshold-icon {
width: 36px;
height: 36px;
border-radius: var(--az-radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--az-md);
}
.threshold-title {
margin: 0 0 var(--az-xs-plus) 0;
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
letter-spacing: -0.01em;
}
.threshold-description {
margin: 0;
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
line-height: 1.45;
text-wrap: balance;
}
.threshold-stats {
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-md) var(--az-lg);
margin-bottom: var(--az-lg-plus);
}
.threshold-stat-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--az-xs-plus);
}
.threshold-stat-row:last-child {
margin-bottom: 0;
}
.threshold-stat-row-border {
border-top: 1px solid var(--az-border);
padding-top: var(--az-sm-plus);
margin-bottom: 0;
}
.threshold-stat-label {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.threshold-stat-value {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
font-variant-numeric: tabular-nums;
}
.threshold-stat-value-lg {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
font-variant-numeric: tabular-nums;
}
.threshold-progress {
margin-top: var(--az-sm-plus);
height: 4px;
background: var(--az-border);
border-radius: var(--az-radius-xs);
overflow: hidden;
}
.threshold-progress-fill {
height: 100%;
border-radius: var(--az-radius-xs);
}
.threshold-progress-labels {
display: flex;
justify-content: space-between;
margin-top: var(--az-xs);
}
.threshold-legal {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
line-height: 1.5;
margin: 0 0 var(--az-lg-plus) 0;
text-wrap: balance;
}
.threshold-footer {
display: flex;
gap: var(--az-sm);
}
.threshold-cancel {
flex: 1;
padding: var(--az-sm-plus) var(--az-md);
border-radius: var(--az-radius-md);
border: 1px solid var(--az-border);
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: background var(--az-transition-fast);
}
.threshold-cancel:hover {
background: var(--az-bg-surface);
}
.threshold-confirm {
flex: 1;
padding: var(--az-sm-plus) var(--az-md);
border-radius: var(--az-radius-md);
border: 1px solid var(--az-border);
background: var(--az-text-primary);
color: var(--az-bg-app);
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
cursor: pointer;
transition: opacity var(--az-transition-fast);
}
.threshold-confirm:hover {
opacity: 0.9;
}
.stripe-section-margin { margin-bottom: var(--az-2xl); }
.stripe-btn-block { margin-top: var(--az-md); text-align: center; display: block; }
.stripe-icon-row { display: flex; align-items: center; justify-content: center; gap: var(--az-xs-plus); margin-bottom: var(--az-sm); }
.stripe-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--az-xl); }
.stripe-modal-title { font-size: var(--az-text-xl); font-weight: var(--az-font-medium); color: var(--az-text-primary); margin: 0; }
.stripe-modal-close { background: none; border: none; color: var(--az-text-tertiary); cursor: pointer; padding: var(--az-sm); min-height: var(--az-touch-min); min-width: var(--az-touch-min); display: flex; align-items: center; justify-content: center; border-radius: var(--az-radius-md); transition: color var(--az-transition-fast); }
.stripe-modal-close:hover { color: var(--az-text-primary); }
.stripe-modal-close i { font-size: var(--az-text-xl-plus); }
.stripe-payment-container { min-height: 280px; }
.stripe-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 200px; color: var(--az-text-muted); }
.stripe-spinner { width: var(--az-xl); height: var(--az-xl); border: 2px solid var(--az-border); border-top-color: var(--az-text-primary); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: var(--az-lg); }
.stripe-loader-text { font-size: var(--az-text-sm); }
.stripe-pay-btn-wrap { margin-top: var(--az-xl); }
.stripe-error-box { text-align: center; padding: var(--az-lg-plus); color: var(--az-red); }
.stripe-error-text { margin-bottom: var(--az-sm); }
.stripe-error-retry { margin-top: var(--az-lg); width: auto; padding: var(--az-sm) var(--az-lg); }
.stripe-cancel-center { text-align: center; padding: var(--az-sm) 0; }
.stripe-cancel-text { margin: 0; font-size: var(--az-text-md); color: var(--az-text-secondary); }
.stripe-success-icon { width: 64px; height: 64px; margin: 0 auto var(--az-xl); }
.stripe-success-section { margin-bottom: var(--az-xl); }
.stripe-plan-details { display: grid; grid-template-columns: 1fr 1fr; gap: var(--az-lg); padding-top: var(--az-lg); border-top: 1px solid var(--az-border); }
.stripe-plan-detail-label { color: var(--az-text-tertiary); font-size: var(--az-text-xs); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--az-xs); }
.stripe-plan-detail-value { color: var(--az-text-primary); font-size: var(--az-text-md); font-weight: var(--az-font-medium); }
.stripe-status-active { color: var(--az-green); font-size: var(--az-text-md); font-weight: var(--az-font-medium); display: flex; align-items: center; gap: var(--az-xs-plus); }
.stripe-status-dot { width: 6px; height: 6px; background: var(--az-green); border-radius: 50%; display: inline-block; }
.stripe-success-footer { margin-top: var(--az-lg-plus); padding-top: var(--az-lg-plus); border-top: 1px solid var(--az-border); }
.stripe-success-help { margin-top: var(--az-lg); }
.stripe-help-link { display: flex; align-items: center; gap: var(--az-xs-plus); }
.trial-plans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--az-lg); margin-bottom: var(--az-2xl); width: 100%; }
.trial-plan-content { padding: var(--az-lg-plus); cursor: pointer; transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s; }
.trial-plan-header { text-align: center; margin-bottom: var(--az-lg); }
.trial-plan-label { color: var(--az-text-tertiary); font-size: var(--az-text-xs); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--az-sm); }
.trial-plan-price-wrap { margin-bottom: var(--az-xs); }
.trial-plan-savings { color: var(--az-green); font-size: var(--az-text-sm); margin-top: var(--az-xs); font-weight: var(--az-font-medium); }
.trial-plan-subtitle { color: var(--az-text-secondary); font-size: var(--az-text-sm); margin-top: var(--az-xs); }
.trial-plan-badge { position: absolute; top: -10px; right: var(--az-md); background: var(--az-blue); color: var(--az-bg-app); font-size: var(--az-text-xs-plus); font-weight: var(--az-font-semibold); padding: var(--az-xs) var(--az-sm-plus); border-radius: var(--az-radius-pill); }
.trial-plan-btn { font-size: var(--az-text-sm); padding: var(--az-sm-plus) var(--az-lg); }
.trial-features { background: var(--az-bg-card); border: 1px solid var(--az-glass-border); border-radius: var(--az-radius-md); padding: var(--az-xl); margin-bottom: var(--az-xl); text-align: left; }
.trial-features-title { font-size: var(--az-text-sm); font-weight: var(--az-font-medium); color: var(--az-text-primary); margin-bottom: var(--az-lg); }
.trial-features-list { grid-template-columns: 1fr; }
.trial-feature-icon { font-size: var(--az-text-lg-plus); }
.trial-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--az-md); width: 100%; }
.trial-action-link { text-align: center; text-decoration: none; }
.trial-footer-wrap { margin-top: var(--az-2xl); }
.trial-footer-inner { display: flex; align-items: center; justify-content: center; gap: var(--az-xs-plus); }
.trial-footer-icon { font-size: var(--az-text-xs); }
.trial-icon-box { width: 64px; height: 64px; margin: 0 auto var(--az-xl); }
.trial-badge-warning { background: var(--az-amber-bg); border-color: var(--az-amber-border); color: var(--az-amber); }
.trial-icon-size { font-size: var(--az-text-3xl-plus); }
#stripe-trial-expired-container { position: fixed; inset: 0; z-index: var(--az-z-loader); overflow-y: auto; }
#pending-approval-overlay {
position: fixed; inset: 0; z-index: var(--az-z-loader);
background: var(--az-bg-app);
display: grid; grid-template-columns: 1fr 1fr;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-webkit-font-smoothing: antialiased;
overflow: hidden;
}
#pending-approval-overlay * { box-sizing: border-box; }
.pending-logo {
position: absolute;
top: 28px; left: 32px;
z-index: 1;
display: flex; align-items: center; gap: var(--az-sm-plus);
font-size: var(--az-text-lg-plus); font-weight: var(--az-font-semibold);
letter-spacing: -0.01em;
}
.pending-logo-bold { color: var(--az-text-primary); }
.pending-logo-light { color: var(--az-text-tertiary); font-weight: var(--az-font-normal); }
.pending-left {
position: relative;
display: flex; align-items: center; justify-content: center;
background: var(--az-bg-app);
overflow: hidden;
}
.pending-video-wrap {
position: relative;
width: 94%;
max-height: 80vh;
border-radius: var(--az-radius-md);
overflow: hidden;
}
.pending-video-wrap video {
display: block; width: 100%; height: 100%;
object-fit: cover;
border-radius: var(--az-radius-md);
}
.pending-right {
display: flex; align-items: center; justify-content: center;
padding: 48px 56px;
border-left: 1px solid var(--az-border);
background: var(--az-bg-app);
}
.pending-right-inner {
max-width: 360px; width: 100%;
text-align: center;
}
.pending-title {
font-size: var(--az-text-xl-plus); font-weight: var(--az-font-semibold); color: var(--az-text-primary);
margin: 0 0 var(--az-sm-plus); line-height: 1.35;
letter-spacing: -0.025em;
white-space: nowrap;
}
.pending-desc {
font-size: var(--az-text-md); color: var(--az-text-tertiary); line-height: 1.7;
margin: 0 0 28px;
}
.pending-mobile-video {
display: none;
border-radius: var(--az-radius-md);
overflow: hidden;
margin-bottom: 28px;
}
.pending-mobile-video video {
display: block; width: 100%; height: auto;
border-radius: var(--az-radius-md);
}
.pending-email-card {
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
padding: var(--az-md) var(--az-lg);
margin-bottom: var(--az-lg);
display: inline-flex; align-items: center; gap: var(--az-md);
}
.pending-email-avatar {
width: 32px; height: 32px;
background: var(--az-blue-bg);
border-radius: var(--az-radius-lg);
display: flex; align-items: center; justify-content: center;
font-size: var(--az-text-sm); font-weight: var(--az-font-semibold); color: var(--az-blue);
flex-shrink: 0;
text-transform: uppercase;
}
.pending-email-info {
min-width: 0;
overflow: hidden;
}
.pending-email-label {
font-size: var(--az-text-xs-plus); color: var(--az-text-muted);
margin-bottom: 2px;
}
.pending-email-value {
font-size: var(--az-text-sm); color: var(--az-text-secondary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pending-logout-btn {
display: block; width: 100%;
padding: var(--az-sm-plus) var(--az-lg);
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm); font-weight: var(--az-font-medium);
cursor: pointer;
border: 1px solid var(--az-border);
background: transparent;
color: var(--az-text-muted);
transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s;
text-align: center;
}
.pending-logout-btn:hover {
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
border-color: var(--az-border);
}
.pending-auto-check {
display: flex; align-items: center; justify-content: center; gap: var(--az-xs-plus);
font-size: var(--az-text-xs); color: var(--az-text-muted);
margin-top: var(--az-lg);
}
.pending-spinner {
width: 10px; height: 10px;
border: 1.5px solid var(--az-border);
border-top-color: var(--az-text-muted);
border-radius: 50%;
animation: pending-spin 1s linear infinite;
}
@keyframes pending-spin {
to { transform: rotate(360deg); }
}
@media (max-width: 900px) {
#pending-approval-overlay {
grid-template-columns: 1fr;
overflow-y: auto;
}
.pending-logo {
position: relative;
top: auto; left: auto;
justify-content: center;
font-size: var(--az-text-md);
padding: var(--az-xl) var(--az-xl) 0;
}
.pending-left { display: none; }
.pending-mobile-video { display: block; }
.pending-video-wrap {
width: 100%;
border-radius: var(--az-radius-md);
}
.pending-video-wrap video { border-radius: var(--az-radius-md); }
.pending-right {
border-left: none;
padding: var(--az-xl);
align-items: flex-start;
}
.pending-right-inner { max-width: 100%; }
.pending-title {
font-size: var(--az-text-xl);
white-space: normal;
}
.pending-desc { font-size: var(--az-text-sm); }
.pending-features { margin-bottom: var(--az-xl); }
.pending-email-card { margin-bottom: var(--az-md); }
}
@media (max-height: 500px) and (orientation: landscape) {
#pending-approval-overlay {
grid-template-columns: 1fr 1fr;
overflow-y: auto;
}
.pending-logo {
top: var(--az-lg); left: var(--az-lg-plus);
font-size: var(--az-text-sm);
}
.pending-left {
display: flex;
}
.pending-video-wrap {
width: 88%;
}
.pending-right {
padding: var(--az-lg-plus) 28px;
overflow-y: auto;
}
.pending-title {
font-size: var(--az-text-lg-plus);
white-space: normal;
margin-bottom: var(--az-xs-plus);
}
.pending-desc {
font-size: var(--az-text-xs);
margin-bottom: var(--az-lg);
}
.pending-separator { margin-bottom: var(--az-md); }
.pending-features-label {
font-size: var(--az-text-2xs);
margin-bottom: var(--az-sm-plus);
}
.pending-features {
gap: var(--az-sm);
margin-bottom: var(--az-lg);
}
.pending-feature { font-size: var(--az-text-xs); }
.pending-email-card {
padding: var(--az-sm-plus) var(--az-md);
margin-bottom: var(--az-sm-plus);
}
.pending-auto-check {
margin-top: var(--az-sm-plus);
font-size: var(--az-text-xs-plus);
}
}
html:not(.dark-mode) .edit-section,
html:not(.dark-mode) .editor-section {
box-shadow: var(--az-shadow-sm);
}
html:not(.dark-mode) .editor-section-title,
html:not(.dark-mode) .edit-section-title {
color: var(--az-text-tertiary);
}
html:not(.dark-mode) .invoice-preview-toolbar {
background: var(--az-bg-elevated);
}
html:not(.dark-mode) .editor-section-segmented {
background: var(--az-segment-track-bg);
border-color: var(--az-glass-border);
}
html:not(.dark-mode) .invoice-preview {
box-shadow: var(--az-shadow-sm);
}
html:not(.dark-mode) .settings-section {
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.08);
}
html:not(.dark-mode) .settings-section-header {
border-bottom-color: rgba(60, 60, 67, 0.10);
}
html:not(.dark-mode) .subscription-info-card {
box-shadow: var(--az-shadow-sm);
}
html:not(.dark-mode) .vault-chip {
background: var(--az-bg-elevated);
}
html:not(.dark-mode) .vault-storage {
box-shadow: var(--az-shadow-sm);
}
html:not(.dark-mode) .vault-category-picker {
box-shadow: var(--az-shadow-sm);
}
html:not(.dark-mode) .vault-category-card {
box-shadow: var(--az-shadow-sm);
}
html:not(.dark-mode) .vault-drop-zone {
border-color: var(--az-border);
}
html:not(.dark-mode) .trk-tracking-dot {
background: var(--az-border);
}
html:not(.dark-mode) .dashboard-welcome-card,
html:not(.dark-mode) .dash-overdue {
box-shadow: var(--az-shadow-sm);
}
html:not(.dark-mode) .urssaf-hero-premium,
html:not(.dark-mode) .monthly-period-card,
html:not(.dark-mode) .urssaf-timeline-section,
html:not(.dark-mode) .urssaf-detail-card,
html:not(.dark-mode) .urssaf-chart-section,
html:not(.dark-mode) .premium-tips,
html:not(.dark-mode) .fiscal-overview-card,
html:not(.dark-mode) .fiscal-ir-card,
html:not(.dark-mode) .charge-pro-card,
html:not(.dark-mode) .recettes-stats-premium,
html:not(.dark-mode) .export-premium-header,
html:not(.dark-mode) .export-card,
html:not(.dark-mode) .fiscal-regime-card {
box-shadow: var(--az-shadow-sm);
}
html:not(.dark-mode) .finance-kpi-card,
html:not(.dark-mode) .form-accordion,
html:not(.dark-mode) .charges-picker-card,
html:not(.dark-mode) .charge-type-card {
box-shadow: var(--az-shadow-sm);
}
html:not(.dark-mode) .offer-card,
html:not(.dark-mode) .premium-value-card,
html:not(.dark-mode) .sub-card,
html:not(.dark-mode) .sub-status-card,
html:not(.dark-mode) .trial-features {
box-shadow: var(--az-shadow-sm);
}
html:not(.dark-mode) .onboarding-activity-card,
html:not(.dark-mode) .onboarding-regime-card,
html:not(.dark-mode) .onboarding-recap-section {
box-shadow: var(--az-shadow-sm);
}
html:not(.dark-mode) .settings-legal-preview {
box-shadow: var(--az-shadow-sm);
}
html:not(.dark-mode) .admin-section,
html:not(.dark-mode) .admin-user-card,
html:not(.dark-mode) .admin-diag-summary,
html:not(.dark-mode) .admin-diag-card {
box-shadow: var(--az-shadow-sm);
}
html:not(.dark-mode) .comm-template-preview,
html:not(.dark-mode) .reminder-level-item,
html:not(.dark-mode) .bank-connection-card {
box-shadow: var(--az-shadow-sm);
}
.simulateur-content {
display: flex;
flex-direction: column;
gap: var(--az-md);
padding: 0 var(--az-xl) var(--az-3xl);
}
.sim-section { padding: var(--az-lg-plus) var(--az-xl); }
.sim-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
margin-bottom: var(--az-md);
flex-wrap: wrap;
}
.sim-section-head .edit-section-title { margin: 0; }
.sim-section-actions {
display: flex;
align-items: center;
gap: var(--az-sm);
flex-wrap: wrap;
}
.sim-project-status {
display: flex;
align-items: center;
gap: var(--az-sm);
margin-top: var(--az-sm);
}
.sim-status-badge {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: 4px 10px;
border-radius: var(--az-radius-pill);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
white-space: nowrap;
transition: var(--az-transition-fast);
}
.sim-status-badge i { font-size: var(--az-text-md); line-height: 1; }
.sim-status-badge.is-ok { background: var(--az-green-bg); color: var(--az-green); border: 1px solid var(--az-green-border); }
.sim-status-badge.is-warn { background: var(--az-amber-bg); color: var(--az-amber); border: 1px solid var(--az-amber-border); }
.sim-status-badge.is-neutral { background: var(--az-bg-elevated); color: var(--az-text-tertiary); border: 1px solid var(--az-border); }
.sim-project-quick-actions {
display: flex;
align-items: center;
gap: var(--az-xs);
flex-shrink: 0;
}
.btn.btn-icon {
padding: 0;
width: var(--az-touch-min);
justify-content: center;
}
.sim-empty-section { display: flex; align-items: center; justify-content: center; min-height: 180px; }
.sim-empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--az-lg); text-align: center; padding: var(--az-xl); }
.sim-empty-label { font-size: var(--az-text-sm); color: var(--az-text-secondary); }
.sim-empty-ctas { display: flex; gap: var(--az-md); flex-wrap: wrap; justify-content: center; }
.sim-params-compact-section .sim-section-head { margin-bottom: var(--az-sm); }
.sim-params-tags { display: flex; flex-wrap: wrap; gap: var(--az-xs); }
.sim-params-tag {
display: inline-flex;
align-items: center;
height: 28px;
padding: 0 var(--az-md);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
font-weight: var(--az-font-medium);
}
.sim-sheet-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--az-lg);
}
.sim-sheet-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin: 0;
text-align: center;
width: 100%;
}
.sim-sheet-fields {
display: flex;
flex-direction: column;
gap: var(--az-lg);
}
.sim-sheet-field {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.sim-sheet-item-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.sim-sheet-item-sub {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
font-weight: var(--az-font-regular);
}
.sim-charges-compact-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
padding: var(--az-sm) 0;
}
.sim-charges-compact-summary .sim-charges-summary-value {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.sim-charges-annual {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.sim-charges-sheet-footer {
margin-top: var(--az-lg);
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.sim-charge-row {
display: flex;
flex-direction: column;
gap: var(--az-xs);
padding: var(--az-md) 0;
border-bottom: 1px solid var(--az-border);
}
.sim-charge-label-input {
width: 100%;
height: var(--az-touch-min);
padding: 0 var(--az-md);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
font-size: var(--az-text-md);
color: var(--az-text-primary);
}
.sim-charge-row-controls {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.sim-charge-amount-input {
flex: 1;
height: var(--az-touch-min);
padding: 0 var(--az-md);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
font-size: var(--az-text-md);
color: var(--az-text-primary);
min-width: 0;
}
.sim-charge-row select {
height: var(--az-touch-min);
padding: 0 var(--az-sm);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
flex-shrink: 0;
}
.sim-charge-delete {
display: flex;
align-items: center;
justify-content: center;
width: var(--az-touch-min);
height: var(--az-touch-min);
background: none;
border: none;
color: var(--az-red);
cursor: pointer;
border-radius: var(--az-radius-md);
flex-shrink: 0;
}
.sim-charge-delete:active { background: var(--az-red-bg); }
.sim-save-group {
display: inline-flex;
align-items: stretch;
gap: 0;
}
.sim-save-group .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sim-save-group .sim-save-as {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: none;
padding: 0 var(--az-sm-plus);
}
.sim-save-group .sim-save-as i { font-size: var(--az-text-md); }
.sim-section-hint {
margin-top: var(--az-md);
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
font-style: italic;
}
.sim-fields-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--az-md) var(--az-lg);
}
.sim-field {
display: flex;
flex-direction: column;
gap: var(--az-xs);
min-width: 0;
}
.sim-field-label {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
font-weight: var(--az-font-medium);
}
.sim-fields-stack {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.sim-field-row {
display: grid;
grid-template-columns: 200px 1fr;
gap: var(--az-md);
align-items: center;
}
.sim-field-row > .sim-field-label { font-size: var(--az-text-xs); color: var(--az-text-secondary); font-weight: var(--az-font-medium); }
.sim-field-static {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
}
.sim-project-actions {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.sim-combo { position: relative; }
.sim-combo-input { padding-right: var(--az-2xl); }
.sim-combo-clear {
position: absolute;
right: var(--az-sm);
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--az-text-tertiary);
cursor: pointer;
border-radius: var(--az-radius-pill);
transition: var(--az-transition-fast);
}
.sim-combo-clear:hover { background: var(--az-bg-elevated); color: var(--az-text-primary); }
.sim-combo-clear i { font-size: var(--az-text-md); }
.sim-popover-wrap { position: relative; }
.sim-popover {
position: absolute;
top: calc(100% + var(--az-xs));
left: 0;
right: 0;
min-width: 260px;
max-height: 320px;
overflow-y: auto;
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
box-shadow: var(--az-shadow-dropdown);
padding: var(--az-xs);
z-index: var(--az-z-dropdown);
}
.sim-popover-wide {
min-width: 320px;
right: auto;
left: auto;
right: 0;
}
.sim-popover-empty {
padding: var(--az-md);
text-align: center;
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.sim-popover-header {
padding: var(--az-sm) var(--az-md) var(--az-xs);
font-size: var(--az-text-2xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--az-text-tertiary);
font-weight: var(--az-font-medium);
}
.sim-popover-list { display: flex; flex-direction: column; gap: 2px; }
.sim-popover-row {
display: flex;
align-items: center;
gap: var(--az-xs);
border-radius: var(--az-radius-md);
transition: var(--az-transition-fast);
}
.sim-popover-row:hover { background: var(--az-bg-card-hover); }
.sim-popover-item, .sim-project-load-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: var(--az-sm) var(--az-md);
border: none;
background: transparent;
cursor: pointer;
text-align: left;
border-radius: var(--az-radius-md);
font-family: inherit;
transition: var(--az-transition-fast);
width: 100%;
}
.sim-popover-item:hover { background: var(--az-bg-card-hover); }
.sim-popover-item-main {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
font-weight: var(--az-font-medium);
}
.sim-popover-item-sub {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.sim-popover-delete {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--az-text-tertiary);
cursor: pointer;
border-radius: var(--az-radius-sm);
margin-right: var(--az-xs);
transition: var(--az-transition-fast);
}
.sim-popover-delete:hover { color: var(--az-red); background: var(--az-red-bg); }
.sim-popover-delete i { font-size: var(--az-text-md); }
.sim-count-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 6px;
margin-left: var(--az-xs);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
border-radius: var(--az-radius-pill);
}
.sim-card {
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-card-radius);
overflow: hidden;
}
.sim-kpi-section .sim-kpi-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--az-md);
}
.sim-kpi-section .sim-kpi-strong .sim-kpi-value { font-size: var(--az-text-2xl); }
.sim-kpi-section .sim-kpi-strong { background: var(--az-bg-elevated); border-right: none; border-radius: var(--az-radius-lg); padding: var(--az-md); }
.sim-row-frais td { border-bottom: 1px solid var(--az-border); }
.sim-frais-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-right: var(--az-xs);
color: var(--az-text-muted);
vertical-align: middle;
}
.sim-frais-icon i { font-size: var(--az-text-md); line-height: 1; }
.sim-input-frais {
font-weight: var(--az-font-regular);
color: var(--az-text-primary);
}
.sim-frais-tag {
display: inline-flex;
align-items: center;
padding: var(--az-xs) var(--az-sm);
font-size: var(--az-text-2xs);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--az-amber);
background: var(--az-bg-card);
border: 1px solid var(--az-amber-border);
border-radius: var(--az-radius-pill);
font-weight: var(--az-font-medium);
}
.sim-c-frais-tag { text-align: left; }
.sim-kpi-section .sim-kpi {
background: transparent;
border: none;
border-right: 1px solid var(--az-border);
border-radius: 0;
padding: 0 var(--az-lg) 0 0;
display: flex;
flex-direction: column;
gap: var(--az-xs);
min-width: 0;
}
.sim-kpi-section .sim-kpi:last-child { border-right: none; padding-right: 0; }
.sim-kpi-label {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
font-weight: var(--az-font-medium);
}
.sim-kpi-value {
font-size: var(--az-text-2xl-plus);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
line-height: 1.1;
font-variant-numeric: tabular-nums;
letter-spacing: var(--az-tracking-tight);
}
.sim-kpi-sub {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
letter-spacing: 0.01em;
}
.sim-kpi-charge { color: var(--az-text-secondary); }
.sim-kpi-net.is-positive { color: var(--az-green); }
.sim-kpi-net.is-negative { color: var(--az-red); }
.sim-kpi-pct.is-good { color: var(--az-green); }
.sim-kpi-pct.is-mid { color: var(--az-amber); }
.sim-kpi-pct.is-low { color: var(--az-red); }
.sim-params-chips {
display: flex;
align-items: center;
gap: var(--az-xs);
flex-wrap: wrap;
min-width: 0;
}
.sim-chip {
display: inline-flex;
align-items: center;
height: 26px;
padding: 0 var(--az-sm-plus);
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
white-space: nowrap;
transition: var(--az-transition-fast);
}
.sim-chip-tva-on {
background: var(--az-green-bg);
color: var(--az-green);
border: 1px solid var(--az-green-border);
}
.sim-chip-tva-off {
background: var(--az-bronze-bg);
color: var(--az-bronze);
border: 1px solid var(--az-bronze-border);
}
.sim-params-actions {
display: flex;
align-items: center;
gap: var(--az-md);
flex-wrap: wrap;
}
.sim-tax-field {
display: inline-flex;
align-items: center;
gap: var(--az-md);
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
padding-left: var(--az-sm);
border-left: 1px solid var(--az-border);
margin-left: var(--az-xs);
}
.sim-tax-input-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.sim-tax-input {
width: 70px;
height: 32px;
border: 1px solid var(--az-border);
background: transparent;
color: var(--az-text-primary);
border-radius: var(--az-radius-lg);
padding: 0 var(--az-lg) 0 var(--az-sm-plus);
font-size: var(--az-text-sm);
font-family: inherit;
font-variant-numeric: tabular-nums;
text-align: right;
transition: border-color var(--az-transition-fast), box-shadow var(--az-transition-fast);
}
.sim-tax-input:focus {
outline: none;
border-color: var(--az-border-focus);
background: var(--az-bg-input-focus);
box-shadow: var(--az-focus-ring);
}
.sim-tax-suffix {
position: absolute;
right: var(--az-sm-plus);
pointer-events: none;
color: var(--az-text-tertiary);
font-size: var(--az-text-xs);
}
.sim-link {
color: var(--az-blue);
text-decoration: none;
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
}
.sim-link:hover { text-decoration: underline; }
.sim-toggle-field { display: inline-flex; align-items: center; }
.sim-switch {
display: inline-flex;
align-items: center;
gap: var(--az-sm);
cursor: pointer;
user-select: none;
}
.sim-switch-input {
position: absolute;
opacity: 0;
width: 0; height: 0;
pointer-events: none;
}
.sim-switch-track {
position: relative;
width: 36px;
height: 22px;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-pill);
transition: var(--az-transition-fast);
flex-shrink: 0;
}
.sim-switch-track::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: var(--az-text-tertiary);
border-radius: var(--az-radius-pill);
transition: var(--az-transition-fast);
}
.sim-switch-input:checked + .sim-switch-track {
background: var(--az-green-bg);
border-color: var(--az-green);
}
.sim-switch-input:checked + .sim-switch-track::after {
transform: translateX(14px);
background: var(--az-green);
}
.sim-switch-input:focus-visible + .sim-switch-track {
box-shadow: 0 0 0 2px var(--az-blue-bg);
}
.sim-switch-label {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
font-weight: var(--az-font-medium);
}
.sim-select-field {
display: inline-flex;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
padding-left: var(--az-md);
border-left: 1px solid var(--az-border);
}
.sim-select-label { white-space: nowrap; }
.sim-select {
height: 32px;
padding: 0 36px 0 var(--az-md);
background: transparent 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='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
background-size: 14px 14px;
color: var(--az-text-primary);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
font-size: var(--az-text-sm);
font-family: inherit;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
text-align: left;
transition: border-color var(--az-transition-fast), box-shadow var(--az-transition-fast);
}
.sim-select:hover { border-color: var(--az-border-hover); }
.sim-select:focus { outline: none; border-color: var(--az-border-focus); background-color: var(--az-bg-input-focus); box-shadow: var(--az-focus-ring); }
.sim-charts-row {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: var(--az-md);
}
.sim-chart-block {
display: flex;
flex-direction: column;
gap: var(--az-md);
min-width: 0;
}
.sim-chart-header { display: flex; flex-direction: column; gap: var(--az-xs); }
.sim-chart-title {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.sim-chart-sub {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.sim-chart-canvas-wrap {
position: relative;
height: 240px;
}
.sim-chart-legend {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.sim-legend-item {
display: grid;
grid-template-columns: 12px 1fr auto auto;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-xs);
padding: var(--az-xs) 0;
}
.sim-legend-dot {
width: 10px; height: 10px;
border-radius: var(--az-radius-pill);
display: inline-block;
}
.sim-legend-label { color: var(--az-text-secondary); }
.sim-legend-value { color: var(--az-text-primary); font-variant-numeric: tabular-nums; }
.sim-legend-pct { color: var(--az-text-tertiary); font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }
.sim-table-scroll { overflow-x: auto; }
.sim-table {
width: 100%;
border-collapse: collapse;
font-size: var(--az-text-sm);
table-layout: auto;
}
.sim-table thead th {
text-align: left;
font-size: var(--az-text-2xs);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: var(--az-font-medium);
color: var(--az-text-tertiary);
padding: var(--az-sm-plus) var(--az-sm);
border-bottom: 1px solid var(--az-border);
background: var(--az-bg-card);
white-space: nowrap;
}
.sim-table thead th.sim-c-num,
.sim-table thead th.sim-c-qte,
.sim-table thead th.sim-c-input-num,
.sim-table thead th.sim-c-tva,
.sim-table thead th.sim-c-achat,
.sim-table thead th.sim-c-vente-col { text-align: right; }
.sim-table tbody td {
padding: var(--az-sm-plus) var(--az-sm);
border-bottom: 1px solid var(--az-border);
color: var(--az-text-primary);
vertical-align: middle;
white-space: nowrap;
}
.sim-table tbody tr:last-child td { border-bottom: none; }
.sim-table tbody tr:hover td { background: var(--az-bg-card-hover); }
.sim-c-num { text-align: right; font-variant-numeric: tabular-nums; }
.sim-c-cb { width: 28px; text-align: center; padding: 0; }
.sim-c-libelle { width: 18%; min-width: 170px; text-align: left; }
.sim-c-qte { width: 5%; text-align: right; min-width: 48px; }
.sim-c-input-num { width: 7%; text-align: right; min-width: 60px; }
.sim-c-tva { width: 7%; text-align: right; min-width: 64px; }
.sim-c-achat { width: 10%; text-align: right; min-width: 88px; }
.sim-c-vente-col { width: 10%; text-align: right; min-width: 88px; }
.sim-c-actions { width: 52px; text-align: center; }
.sim-c-num { width: 8%; min-width: 76px; }
.sim-input-vente { font-weight: var(--az-font-semibold); }
.sim-c-derived { color: var(--az-text-tertiary); }
.sim-stacked {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1px;
}
.sim-stacked-sub {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
text-align: right;
padding-right: var(--az-sm-plus);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
white-space: nowrap;
font-weight: var(--az-font-medium);
line-height: 1.2;
}
.sim-stacked-sub.sim-cell-empty { color: var(--az-text-disabled); font-weight: var(--az-font-regular); }
.sim-c-achat .sim-input-suffix,
.sim-c-vente-col .sim-input-suffix { width: 100%; }
.sim-c-achat .sim-input,
.sim-c-vente-col .sim-input { text-align: right; }
.sim-table tbody tr.sim-row-category td {
background: transparent;
border-top: 1px solid var(--az-border);
border-bottom: none;
padding-top: var(--az-md);
padding-bottom: 2px;
}
.sim-table tbody tr.sim-row-category:hover td { background: transparent; }
.sim-table tbody td.sim-c-cat { padding-left: var(--az-sm); }
.sim-table tbody .sim-input-cat {
width: 100%;
height: 24px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--az-radius-sm);
padding: 0 var(--az-xs);
font-weight: var(--az-font-medium);
font-size: var(--az-text-2xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--az-text-tertiary);
font-family: inherit;
line-height: 1;
}
.sim-table tbody .sim-input-cat:hover { background: var(--az-bg-elevated); color: var(--az-text-secondary); }
.sim-table tbody .sim-input-cat:focus {
outline: none;
border-color: var(--az-border-focus);
background: var(--az-bg-input-focus);
color: var(--az-text-primary);
}
.sim-table tbody tr.sim-row-category .sim-btn-icon { opacity: 0; transition: opacity var(--az-transition-fast); }
.sim-table tbody tr.sim-row-category:hover .sim-btn-icon { opacity: 1; }
.sim-table tbody tr.sim-row-main td {
border-bottom: none;
padding-top: var(--az-md);
padding-bottom: var(--az-2xs);
}
.sim-table tbody tr.sim-row-detail td {
padding-top: 2px;
padding-bottom: 2px;
border-bottom: none;
background: transparent;
}
.sim-table tbody tr.sim-row-detail.sim-row-vente td {
padding-bottom: var(--az-md);
border-bottom: 1px solid var(--az-border);
}
.sim-row-main:hover td,
.sim-row-main:hover ~ tr.sim-row-detail[data-id]:not(.sim-row-detail-other) td { background: var(--az-bg-card-hover); }
.sim-row-detail.is-selected td,
.sim-row-main.is-selected td { background: var(--az-blue-bg); }
.sim-detail-cell {
padding: 4px 0 4px var(--az-xl);
font-size: var(--az-text-xs);
white-space: normal;
position: relative;
}
.sim-detail-cell::before {
content: "";
position: absolute;
left: var(--az-md);
top: 4px;
bottom: 4px;
width: 2px;
border-radius: 1px;
background: var(--az-border);
}
.sim-detail-row {
display: inline-flex;
align-items: center;
gap: var(--az-sm-plus);
flex-wrap: nowrap;
max-width: 100%;
}
.sim-detail-label {
display: inline-block;
min-width: 120px;
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
font-weight: var(--az-font-medium);
}
.sim-detail-cell .sim-input-suffix.sim-detail-input {
display: inline-flex;
width: 96px;
flex: 0 0 96px;
}
.sim-detail-cell .sim-detail-input .sim-input { width: 100%; height: 28px; text-align: right; padding-right: var(--az-xl); font-weight: var(--az-font-semibold); }
.sim-detail-num { font-variant-numeric: tabular-nums; }
.sim-detail-meta {
display: inline-flex;
align-items: baseline;
gap: var(--az-md);
margin-left: var(--az-sm-plus);
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
white-space: nowrap;
}
.sim-detail-meta-item { display: inline-flex; align-items: baseline; gap: var(--az-2xs); }
.sim-detail-meta-label { color: var(--az-text-muted); font-size: var(--az-text-2xs); }
.sim-detail-meta-val { color: var(--az-text-secondary); font-variant-numeric: tabular-nums; }
.sim-detail-meta-strong { color: var(--az-text-primary); font-weight: var(--az-font-semibold); }
.sim-c-frais-cell {
padding-left: var(--az-md);
}
.sim-frais-row {
display: flex;
align-items: center;
gap: var(--az-md);
flex-wrap: wrap;
}
.sim-frais-row .sim-input-frais { flex: 1 1 200px; min-width: 180px; }
.sim-frais-field {
display: inline-flex;
flex-direction: column;
gap: 2px;
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sim-frais-field > span:first-child { font-weight: var(--az-font-medium); }
.sim-frais-field .sim-input { height: 28px; width: 80px; text-align: right; }
.sim-frais-field .sim-input-suffix { width: 90px; }
.sim-frais-field .sim-select-row { width: 70px; }
.sim-frais-total {
margin-left: auto;
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
}
.sim-frais-total strong {
color: var(--az-text-primary);
font-weight: var(--az-font-semibold);
margin-left: var(--az-xs);
}
.sim-subtotal-extra {
margin-left: var(--az-md);
font-weight: var(--az-font-regular);
color: var(--az-text-tertiary);
font-size: var(--az-text-xs);
text-transform: none;
letter-spacing: 0;
}
.sim-table tbody tr.is-dragging { opacity: 0.4; }
.sim-table tbody tr.is-drop-target-above > td { box-shadow: inset 0 2px 0 0 var(--az-blue); }
.sim-table tbody tr.is-drop-target-below > td { box-shadow: inset 0 -2px 0 0 var(--az-blue); }
.sim-table tbody tr[draggable="true"] { cursor: default; }
.sim-table tbody tr[draggable="true"] > td.sim-c-cb { cursor: grab; }
.sim-table tbody tr[draggable="true"] > td.sim-c-cb:active { cursor: grabbing; }
.sim-cb {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
}
.sim-cb input {
position: absolute;
opacity: 0;
width: 0; height: 0;
pointer-events: none;
}
.sim-cb-mark {
display: inline-block;
width: 16px;
height: 16px;
border: 1.5px solid var(--az-border-hover);
border-radius: var(--az-radius-sm);
background: var(--az-bg-card);
position: relative;
transition: var(--az-transition-fast);
}
.sim-cb input:checked + .sim-cb-mark {
background: var(--az-blue);
border-color: var(--az-blue);
}
.sim-cb input:checked + .sim-cb-mark::after {
content: "";
position: absolute;
left: 4px; top: 1px;
width: 5px; height: 9px;
border: solid var(--az-text-on-accent);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.sim-cb input:indeterminate + .sim-cb-mark {
background: var(--az-blue);
border-color: var(--az-blue);
}
.sim-cb input:indeterminate + .sim-cb-mark::after {
content: "";
position: absolute;
left: 3px; top: 6px;
width: 8px; height: 2px;
background: var(--az-text-on-accent);
border-radius: 1px;
}
.sim-cb:hover .sim-cb-mark { border-color: var(--az-blue); }
.sim-cb input:focus-visible + .sim-cb-mark { box-shadow: 0 0 0 2px var(--az-blue-bg); }
@media (max-width: 768px) {
.simulateur-content { padding: 0 var(--az-md) var(--az-3xl); gap: var(--az-md); }
.sim-project-bar { padding: var(--az-md); flex-direction: column; align-items: stretch; gap: var(--az-md); }
.sim-project-fields { grid-template-columns: 1fr; gap: var(--az-sm); }
.sim-project-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; }
.sim-project-actions .sim-popover-wrap { flex: 1; min-width: 140px; }
.sim-project-actions .sim-btn-ghost { width: 100%; justify-content: center; }
.sim-section-head { flex-direction: row; align-items: center; }
.sim-project-quick-actions { flex-shrink: 0; }
.sim-fields-grid { grid-template-columns: 1fr; gap: var(--az-sm); }
.sim-combo { display: flex; flex-direction: column; width: 100%; }
.sim-combo-input { width: 100%; }
.sim-field-row { grid-template-columns: 1fr; gap: var(--az-xs-plus); }
.sim-fields-stack { gap: var(--az-lg); }
.vat-segmented { flex-wrap: wrap; gap: var(--az-xs); }
.vat-option { flex: 1 1 auto; min-height: var(--az-touch-min); padding: var(--az-sm) var(--az-md); }
#sim-vat-rate-segmented, #sim-ir-segmented { display: grid; grid-template-columns: repeat(5, 1fr); }
#sim-vat-rate-segmented .vat-option, #sim-ir-segmented .vat-option { padding: var(--az-sm) var(--az-xs-plus); font-size: var(--az-text-xs); text-align: center; }
.sim-kpi-section .sim-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--az-sm); }
.sim-kpi { padding: var(--az-md); }
.sim-kpi-value { font-size: var(--az-text-xl-plus); }
.sim-kpi-strong { grid-column: 1 / -1; }
.sim-kpi-section .sim-kpi { border-right: none; padding-right: 0; }
#sim-project-save span { display: none; }
#sim-project-save { width: var(--az-touch-min); padding: 0; }
.sim-plafond-link, #sim-open-settings, #sim-onboard-blank,
#sim-open-params-sheet, #sim-charges-manage-btn {
display: inline-flex; align-items: center;
min-height: var(--az-touch-min); padding: var(--az-sm) 0;
}
#simulateur .page-dot { display: none; }
.sim-params-bar { padding: var(--az-md); flex-direction: column; align-items: stretch; }
.sim-chart-canvas-wrap { height: 200px; }
.sim-table-scroll { overflow-x: hidden; }
.sim-table,
.sim-table thead,
.sim-table tbody,
.sim-table tfoot,
.sim-table tr,
.sim-table th,
.sim-table td {
display: block;
width: auto;
min-width: 0;
}
.sim-table thead { display: none !important; }
.sim-table tbody tr.sim-row-main,
.sim-table tbody tr.sim-row-frais {
display: flex !important;
flex-wrap: wrap;
align-items: center;
padding: var(--az-sm) 0;
border-bottom: 1px solid var(--az-border);
background: transparent;
min-width: 0;
}
.sim-table tbody tr:hover td { background: transparent; }
.sim-table tbody tr.sim-row-main:hover,
.sim-table tbody tr.sim-row-frais:hover { background: var(--az-bg-card-hover); }
.sim-row-main td.sim-c-cb,
.sim-row-frais td.sim-c-cb {
flex: 0 0 36px; width: 36px !important;
min-height: 44px; display: flex;
align-items: center; justify-content: center;
padding: 0; order: 0; border: none;
}
.sim-row-main td.sim-c-libelle,
.sim-row-frais td.sim-c-libelle {
flex: 1 1 0; min-width: 0;
padding: 0 var(--az-xs) 0 0;
order: 1; border: none; white-space: normal;
}
.sim-row-main td.sim-c-libelle .sim-input-libelle,
.sim-row-frais td.sim-c-libelle .sim-input-frais {
width: 100%; min-height: 44px;
font-size: var(--az-text-sm); white-space: normal;
}
.sim-row-main td.sim-c-vente-col {
flex: 0 0 auto; padding: 0 var(--az-xs);
order: 2; border: none; white-space: nowrap;
}
.sim-row-main td.sim-c-vente-col .sim-input-num {
min-height: 44px; width: 72px;
font-size: var(--az-text-sm); text-align: right;
}
.sim-row-main td.sim-c-actions,
.sim-row-frais td.sim-c-actions {
flex: 0 0 auto; display: flex;
align-items: center; padding: 0; order: 3; border: none;
}
.sim-btn-icon { width: 44px; height: 44px; }
.sim-row-main td.sim-c-net {
flex: 0 0 auto; order: 10; margin-left: 36px;
padding: 0 0 var(--az-xs); font-size: var(--az-text-xs);
border: none; white-space: nowrap;
}
.sim-row-main td.sim-c-pct {
flex: 1 1 auto; order: 11;
padding: 0 var(--az-xs) var(--az-xs) var(--az-sm);
font-size: var(--az-text-xs); text-align: right;
border: none; white-space: nowrap;
}
.sim-row-main td.sim-c-qte,
.sim-row-main td.sim-c-achat,
.sim-row-main td.sim-c-tva,
.sim-row-main td.sim-c-input-num,
.sim-row-main td.sim-c-charge,
.sim-row-frais td.sim-c-qte,
.sim-row-frais td.sim-c-achat,
.sim-row-frais td.sim-c-tva,
.sim-row-frais td.sim-c-vente-col { display: none !important; }
.sim-row-frais td.sim-c-num.sim-cell-empty {
flex: 1 1 100%; order: 10; margin-left: 36px;
font-size: var(--az-text-xs); padding: 0 0 var(--az-xs);
color: var(--az-text-muted); border: none;
}
.sim-table tbody tr.sim-row-category {
display: flex !important; align-items: center;
padding: var(--az-xs) 0;
border-bottom: 1px solid var(--az-border);
}
.sim-row-category td.sim-c-cb { display: none !important; }
.sim-row-category td.sim-c-cat {
flex: 1; padding: 0; border: none;
font-weight: var(--az-font-semibold);
font-size: var(--az-text-sm); white-space: normal;
}
.sim-row-category td.sim-c-actions {
flex: 0 0 auto; padding: 0; border: none;
display: flex; align-items: center;
}
.sim-table tbody tr.sim-row-subtotal { display: none !important; }
.sim-table tfoot tr.sim-row-totals { display: none !important; }
.sim-card-footer {
flex-direction: column; gap: var(--az-sm);
padding: var(--az-md) 0 0;
border-top: 1px solid var(--az-border);
background: transparent;
}
.sim-card-footer .btn {
width: 100%; min-height: 44px;
justify-content: center; font-size: var(--az-text-sm);
}
.sim-footer-spacer { display: none; }
.sim-undo-host { left: var(--az-md); right: var(--az-md); transform: none; }
.sim-undo-toast { width: 100%; }
}
.sim-table tbody tr.is-selected td {
background: var(--az-blue-bg);
}
.sim-table tbody tr.is-selected:hover td {
background: var(--az-blue-bg);
}
.sim-card-footer {
display: flex;
align-items: center;
gap: var(--az-md);
}
.sim-footer-spacer { flex: 1; }
.sim-selection-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
padding: var(--az-md) var(--az-lg);
background: var(--az-blue-bg);
border-top: 1px solid var(--az-blue-border);
}
.sim-selection-count {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
font-weight: var(--az-font-medium);
}
.sim-selection-actions {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.sim-select-row {
width: auto;
height: 28px;
padding: 0 20px 0 var(--az-xs-plus);
background-color: transparent;
border: 1px solid transparent;
font-size: var(--az-text-xs);
color: var(--az-text-primary);
background-position: right 4px center;
background-size: 12px 12px;
text-align: right;
text-align-last: right;
}
.sim-c-tva, .sim-c-input-num { text-align: right; }
.sim-table tbody td.sim-c-tva, .sim-table tbody td.sim-c-input-num { text-align: right; }
.sim-select-row:hover {
background-color: var(--az-bg-input);
border-color: var(--az-border);
}
.sim-select-row:focus {
background-color: var(--az-bg-input-focus);
border-color: var(--az-border-focus);
}
.sim-c-charge { color: var(--az-text-secondary); }
.sim-c-net.is-positive { color: var(--az-green); font-weight: var(--az-font-semibold); }
.sim-c-net.is-negative { color: var(--az-red); font-weight: var(--az-font-semibold); }
.sim-c-pct { font-weight: var(--az-font-medium); }
.sim-c-pct.is-good { color: var(--az-green); }
.sim-c-pct.is-mid { color: var(--az-amber); }
.sim-c-pct.is-low { color: var(--az-red); }
.sim-cell-empty { color: var(--az-text-disabled); }
.sim-input {
width: 100%;
height: 32px;
border: 1px solid transparent;
background: transparent;
color: var(--az-text-primary);
border-radius: var(--az-radius-sm);
padding: 0 var(--az-sm);
font-size: var(--az-text-sm);
font-family: inherit;
transition: var(--az-transition-fast);
}
.sim-input:hover { background: var(--az-bg-input); }
.sim-input:focus {
outline: none;
border-color: var(--az-border-focus);
background: var(--az-bg-input-focus);
}
.sim-input-num { text-align: right; font-variant-numeric: tabular-nums; }
.sim-input-qte { min-width: 64px; }
.sim-input-suffix {
position: relative;
display: inline-flex;
align-items: center;
width: 100%;
}
.sim-input-suffix .sim-input { padding-right: var(--az-xl); }
.sim-suffix {
position: absolute;
right: var(--az-sm-plus);
pointer-events: none;
color: var(--az-text-tertiary);
font-size: var(--az-text-xs);
}
.sim-table tbody td.sim-c-actions {
padding: 0 var(--az-xs);
text-align: center;
}
.sim-btn-icon {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--az-text-muted);
border-radius: var(--az-radius-sm);
cursor: pointer;
transition: var(--az-transition-fast);
vertical-align: middle;
}
.sim-btn-icon:hover {
color: var(--az-red);
background: var(--az-red-bg);
}
.sim-btn-icon i { font-size: var(--az-text-md); line-height: 1; }
.sim-card-footer {
padding: var(--az-md) var(--az-lg);
border-top: 1px solid var(--az-border);
background: var(--az-bg-card);
}
.sim-btn-ghost {
display: inline-flex;
align-items: center;
gap: var(--az-sm);
height: 36px;
padding: 0 var(--az-md);
background: transparent;
color: var(--az-text-secondary);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
font-family: inherit;
cursor: pointer;
transition: var(--az-transition-fast);
}
.sim-btn-ghost:hover {
color: var(--az-text-primary);
border-color: var(--az-border-hover);
background: var(--az-bg-elevated);
}
.sim-btn-ghost i { font-size: var(--az-text-md); }
.sim-btn-primary {
display: inline-flex;
align-items: center;
gap: var(--az-sm);
height: 40px;
padding: 0 var(--az-lg);
background: var(--az-text-primary);
color: var(--az-bg-app);
border: none;
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
font-family: inherit;
cursor: pointer;
transition: var(--az-transition-fast);
}
.sim-btn-primary:hover { opacity: 0.9; }
.sim-btn-primary i { font-size: var(--az-text-md); }
.sim-empty {
padding: var(--az-3xl) var(--az-xl);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--az-md);
text-align: center;
}
.sim-onboarding {
padding: var(--az-xl) var(--az-md) var(--az-lg);
display: flex;
flex-direction: column;
gap: var(--az-lg);
}
.sim-onboarding-intro {
margin: 0;
text-align: center;
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
}
.sim-onboarding-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--az-md);
}
.sim-onboard-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--az-sm);
padding: var(--az-lg) var(--az-lg-plus);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
text-align: left;
cursor: pointer;
font-family: inherit;
transition: var(--az-transition-fast);
min-height: 160px;
}
.sim-onboard-card:hover {
border-color: var(--az-blue);
background: var(--az-blue-bg);
transform: translateY(-1px);
}
.sim-onboard-icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--az-radius-md);
background: var(--az-bg-elevated);
color: var(--az-text-primary);
}
.sim-onboard-icon i { font-size: var(--az-text-xl); line-height: 1; }
.sim-onboard-card:hover .sim-onboard-icon {
background: var(--az-blue);
color: var(--az-text-on-accent);
}
.sim-onboard-title {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.sim-onboard-desc {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
line-height: 1.45;
flex: 1;
}
.sim-onboard-cta {
font-size: var(--az-text-xs);
color: var(--az-blue);
font-weight: var(--az-font-medium);
margin-top: auto;
}
.sim-onboarding-skip {
text-align: center;
padding-top: var(--az-sm);
}
.sim-row-tag {
display: inline-block;
padding: 2px 6px;
margin-right: var(--az-xs);
background: var(--az-blue-bg);
color: var(--az-blue);
border: 1px solid var(--az-blue-border);
border-radius: var(--az-radius-sm);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
text-transform: uppercase;
letter-spacing: 0.04em;
vertical-align: middle;
}
.sim-cell-na {
color: var(--az-text-disabled);
font-weight: var(--az-font-regular);
}
@media (max-width: 768px) {
.sim-onboarding-grid { grid-template-columns: 1fr; }
}
.sim-empty-icon {
width: 56px; height: 56px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--az-radius-pill);
background: var(--az-bg-elevated);
color: var(--az-text-tertiary);
margin-bottom: var(--az-xs);
}
.sim-empty-icon i { font-size: var(--az-text-2xl); }
.sim-empty-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.sim-empty-sub {
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
max-width: 400px;
}
.sim-table tbody tr.sim-row-subtotal td {
background: transparent;
border-bottom: 1px solid var(--az-border);
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
white-space: nowrap;
padding-top: var(--az-sm);
padding-bottom: var(--az-sm);
}
.sim-table tbody tr.sim-row-subtotal:hover td { background: transparent; }
.sim-subtotal-label {
text-align: right;
color: var(--az-text-secondary);
font-size: var(--az-text-xs);
text-transform: none;
letter-spacing: 0;
font-weight: var(--az-font-medium);
padding-right: var(--az-md);
}
.sim-table tfoot tr.sim-row-totals td {
padding: var(--az-md) var(--az-sm);
border-top: 2px solid var(--az-text-primary);
background: var(--az-bg-card);
font-weight: var(--az-font-semibold);
font-size: var(--az-text-sm);
color: var(--az-text-primary);
white-space: nowrap;
}
.sim-totals-label {
text-align: right;
text-transform: none;
font-size: var(--az-text-sm);
letter-spacing: 0;
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
padding-right: var(--az-md);
}
.btn.is-dirty {
background: var(--az-amber);
border-color: var(--az-amber);
color: var(--az-text-on-accent);
}
.btn.is-dirty:hover { opacity: 0.9; background: var(--az-amber); }
.sim-params-hint {
margin-top: var(--az-xs);
padding: var(--az-xs) var(--az-md) 0;
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
font-style: italic;
}
.sim-undo-host {
position: fixed;
bottom: var(--az-xl);
left: 50%;
transform: translateX(-50%);
z-index: var(--az-z-toast);
display: flex;
flex-direction: column;
gap: var(--az-sm);
pointer-events: none;
}
.sim-undo-toast {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-sm) var(--az-md) var(--az-sm) var(--az-lg);
background: var(--az-text-primary);
color: var(--az-bg-app);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-sm);
box-shadow: var(--az-shadow-toast);
opacity: 0;
transform: translateY(8px);
transition: opacity var(--az-transition-fast), transform var(--az-transition-fast);
pointer-events: auto;
}
.sim-undo-toast.is-visible { opacity: 1; transform: translateY(0); }
.sim-undo-btn {
background: transparent;
border: 1px solid currentColor;
color: inherit;
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
cursor: pointer;
font-family: inherit;
transition: var(--az-transition-fast);
}
.sim-undo-btn:hover { background: var(--az-bg-app); color: var(--az-text-primary); }
@media (max-width: 1100px) {
.sim-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sim-charts-row { grid-template-columns: 1fr; }
}
.sims-shell {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: var(--az-xl);
align-items: start;
}
.sims-card {
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-card-radius);
padding: var(--az-xl);
display: flex;
flex-direction: column;
gap: var(--az-lg);
}
.sims-form-head {
display: flex;
align-items: center;
gap: var(--az-md);
}
.sims-input-name {
flex: 1;
height: 44px;
padding: 0 var(--az-md);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
font-size: var(--az-text-lg-plus);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
transition: var(--az-transition);
}
.sims-input-name::placeholder { color: var(--az-text-muted); font-weight: var(--az-font-regular); }
.sims-input-name:focus {
background: var(--az-bg-input-focus);
border-color: var(--az-border-focus);
outline: none;
}
.sims-new-btn {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
height: 44px;
padding: 0 var(--az-md);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
cursor: pointer;
transition: var(--az-transition);
}
.sims-new-btn:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.sims-section {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.sims-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 0 var(--az-xs);
}
.sims-section-title {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
letter-spacing: 0.4px;
text-transform: uppercase;
}
.sims-section-total {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
}
.sims-lines {
display: flex;
flex-direction: column;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
overflow: hidden;
}
.sims-lines .sims-line:first-child { border-top: none; }
.sims-lines .sims-line:last-child { border-bottom: none; }
.sims-line {
display: grid;
grid-template-columns: minmax(0, 1fr) 60px 140px 36px;
gap: var(--az-sm);
align-items: center;
padding: var(--az-sm) var(--az-md);
background: transparent;
border: none;
border-bottom: 1px solid var(--az-border);
border-radius: 0;
transition: var(--az-transition-fast);
}
.sims-line:first-child { border-top: 1px solid var(--az-border); }
.sims-line:hover { background: var(--az-bg-card-hover); }
.sims-line-qty-inline {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.sims-qty-x {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
font-weight: var(--az-font-regular);
}
.sims-line-qte {
width: 100%;
background: transparent;
text-align: left;
padding: 0;
border: none;
font-variant-numeric: tabular-nums;
font-weight: var(--az-font-medium);
font-size: var(--az-text-sm);
color: var(--az-text-primary);
}
.sims-line:hover {
border-color: var(--az-border-hover);
}
.sims-line:focus-within {
border-color: var(--az-border-focus);
background: var(--az-bg-input-focus);
}
.sims-line-label,
.sims-line-input {
width: 100%;
height: 32px;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
font-size: var(--az-text-sm);
color: var(--az-text-primary);
transition: var(--az-transition-fast);
min-width: 0;
outline: none;
}
.sims-line-label {
font-weight: var(--az-font-medium);
}
.sims-line-label::placeholder,
.sims-line-input::placeholder { color: var(--az-text-muted); font-weight: var(--az-font-regular); }
.sims-line-label:focus,
.sims-line-input:focus {
outline: none;
}
.sims-line-amount {
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: 2px;
}
.sims-line-amount .sims-line-input {
flex: 1;
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: var(--az-font-semibold);
}
.sims-line-suffix {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
font-weight: var(--az-font-regular);
white-space: nowrap;
}
.sims-line-suffix.is-toggle {
appearance: none;
background: transparent;
border: 1px solid transparent;
border-radius: var(--az-radius-sm);
padding: var(--az-2xs) var(--az-xs);
margin-left: var(--az-2xs);
cursor: pointer;
transition: var(--az-transition-fast);
font-family: inherit;
line-height: 1;
}
.sims-line-suffix.is-toggle:hover {
color: var(--az-text-primary);
background: var(--az-bg-input);
border-color: var(--az-border);
}
.sims-line-suffix.is-toggle:focus-visible {
outline: none;
border-color: var(--az-border-focus);
}
.sims-line-suffix.is-toggle[aria-pressed="true"] {
color: var(--az-blue);
background: var(--az-blue-bg);
border-color: var(--az-blue-border);
font-weight: var(--az-font-medium);
}
.sims-line-qty {
display: flex;
align-items: center;
gap: 0;
background: var(--az-bg-input);
border-radius: var(--az-radius-md);
overflow: hidden;
}
.sims-line-qte {
width: 100%;
background: transparent;
text-align: center;
border-radius: 0;
font-variant-numeric: tabular-nums;
font-weight: var(--az-font-semibold);
}
.sims-qty-btn {
width: 32px;
height: 36px;
background: transparent;
border: none;
cursor: pointer;
font-size: var(--az-text-md);
color: var(--az-text-secondary);
transition: var(--az-transition-fast);
}
.sims-qty-btn:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.sims-line-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: transparent;
border: none;
border-radius: var(--az-radius-md);
color: var(--az-text-muted);
cursor: pointer;
font-size: var(--az-text-md);
opacity: 0;
transition: var(--az-transition-fast);
}
.sims-line:hover .sims-line-remove,
.sims-line:focus-within .sims-line-remove { opacity: 1; }
.sims-line-remove:hover {
background: var(--az-red-bg);
color: var(--az-red);
}
@media (hover: none) {
.sims-line-remove { opacity: 0.5; }
}
.sims-add-line {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: var(--az-xs);
height: 36px;
padding: 0 var(--az-md);
background: transparent;
border: 1px dashed var(--az-border);
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
cursor: pointer;
transition: var(--az-transition-fast);
}
.sims-add-line:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
border-color: var(--az-border-hover);
border-style: solid;
}
.sims-tva-row {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.sims-tva-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
letter-spacing: 0.2px;
text-transform: uppercase;
padding: 0 var(--az-xs);
}
.sims-tva-seg {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: var(--az-2xs);
padding: var(--az-2xs);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
}
.sims-tva-chip {
height: 36px;
padding: 0 var(--az-xs);
background: transparent;
border: none;
border-radius: var(--az-radius-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
cursor: pointer;
transition: var(--az-transition-fast);
}
.sims-tva-chip:hover {
color: var(--az-text-primary);
}
.sims-tva-chip.is-active {
background: var(--az-bg-card);
color: var(--az-text-primary);
font-weight: var(--az-font-semibold);
box-shadow: var(--az-shadow-sm);
}
.sims-grid-cells {
display: grid;
grid-template-columns: 1fr 1fr 120px;
gap: var(--az-md);
}
.sims-cell {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.sims-cell-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
letter-spacing: 0.2px;
text-transform: uppercase;
}
.sims-cell-input {
width: 100%;
height: 44px;
padding: 0 var(--az-md);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
font-size: var(--az-text-lg-plus);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
transition: var(--az-transition);
}
.sims-cell-input:focus {
background: var(--az-bg-input-focus);
border-color: var(--az-border-focus);
outline: none;
}
.sims-cell-hint {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
font-variant-numeric: tabular-nums;
}
.sims-results {
display: flex;
flex-direction: column;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-xl);
padding: var(--az-sm) var(--az-md);
}
.sims-result-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
padding: var(--az-xs-plus) 0;
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
font-weight: var(--az-font-regular);
}
.sims-result-row > span:first-child {
min-width: 0;
}
.sims-amount {
font-variant-numeric: tabular-nums;
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
white-space: nowrap;
flex-shrink: 0;
}
.sims-amount-neg { color: var(--az-text-primary); }
.sims-result-final {
margin-top: var(--az-xs);
padding-top: var(--az-md);
border-top: 1px solid var(--az-border);
font-size: var(--az-text-sm);
color: var(--az-text-primary);
font-weight: var(--az-font-semibold);
align-items: flex-start;
}
.sims-result-period {
display: block;
margin-top: 2px;
font-size: var(--az-text-xs);
font-weight: var(--az-font-regular);
color: var(--az-text-muted);
letter-spacing: 0;
}
.sims-amount-final {
font-size: var(--az-text-lg-plus);
font-weight: var(--az-font-semibold);
font-variant-numeric: tabular-nums;
letter-spacing: -0.2px;
color: var(--az-text-primary);
}
.sims-amount-final.is-negative { color: var(--az-red); }
.sims-result-pct {
margin-top: var(--az-xs);
font-size: var(--az-text-xs);
color: var(--az-text-muted);
text-align: right;
}
.sims-result-pct strong {
color: var(--az-text-secondary);
font-weight: var(--az-font-medium);
}
.sims-actions {
display: flex;
justify-content: flex-end;
}
.sims-save {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
}
.sims-list-head {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.sims-list-title {
margin: 0;
font-size: var(--az-text-lg-plus);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.sims-list-count {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-muted);
background: var(--az-bg-elevated);
padding: 2px var(--az-sm);
border-radius: var(--az-radius-pill);
font-variant-numeric: tabular-nums;
}
.sims-list {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.sims-empty {
padding: var(--az-xl);
text-align: center;
font-size: var(--az-text-sm);
color: var(--az-text-muted);
background: var(--az-bg-elevated);
border-radius: var(--az-radius-lg);
}
.sims-list-item {
display: flex;
align-items: center;
gap: var(--az-xs);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
transition: var(--az-transition);
}
.sims-list-item:hover {
background: var(--az-bg-card-hover);
border-color: var(--az-border-hover);
}
.sims-list-item.is-active {
border-color: var(--az-blue-border);
background: var(--az-blue-bg);
}
.sims-list-main {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--az-md);
background: transparent;
border: none;
text-align: left;
cursor: pointer;
color: inherit;
min-width: 0;
}
.sims-list-name {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sims-list-meta {
display: flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
font-variant-numeric: tabular-nums;
}
.sims-list-sep { opacity: 0.5; }
.sims-list-net.is-positive { color: var(--az-green); font-weight: var(--az-font-semibold); }
.sims-list-net.is-negative { color: var(--az-red); font-weight: var(--az-font-semibold); }
.sims-list-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin-right: var(--az-xs);
background: transparent;
border: none;
border-radius: var(--az-radius-md);
color: var(--az-text-muted);
cursor: pointer;
transition: var(--az-transition);
}
.sims-list-action:hover {
background: var(--az-red-bg);
color: var(--az-red);
}
@media (max-width: 900px) {
.sims-shell {
grid-template-columns: 1fr;
gap: var(--az-md);
}
.sims-card { padding: var(--az-lg); }
.sims-grid-cells {
grid-template-columns: 1fr 1fr;
}
.sims-cell-tva {
grid-column: 1 / -1;
}
.sims-amount-final { font-size: var(--az-text-md); }
}
@media (max-width: 720px) {
.sims-line {
grid-template-columns: minmax(0, 1fr) 44px 110px 28px;
grid-template-areas: none;
gap: var(--az-sm);
padding: var(--az-sm) var(--az-md);
}
.sims-line-label,
.sims-line-input,
.sims-line-qte {
height: 44px;
font-size: var(--az-text-sm);
}
.sims-line-remove {
width: 28px;
height: 28px;
opacity: 0.5;
}
}
.mobile-page-actions,
.mobile-action-circles,
.mobile-details-title,
.toolbar-mobile-icons {
display: none;
}
@media (max-width: 1024px) {
.edit-invoice-container {
grid-template-columns: 1fr;
}
.charts-grid {
grid-template-columns: 1fr;
}
.charts-grid.fiscal-charts-row {
grid-template-columns: 1fr;
}
.quarterly-grid {
grid-template-columns: repeat(2, 1fr);
}
#comptabilite .kpi-grid {
grid-template-columns: repeat(2, 1fr);
}
.fiche-desktop-sections {
grid-template-columns: 1fr;
}
.fiscal-ir-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--az-sm);
}
.fiscal-regime-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
html {
touch-action: manipulation;
}
:root {
--az-widget-body-flex: 0 0 auto;
--az-kpi-pad: var(--az-md);
--az-kpi-pad-lg: var(--az-md);
--az-kpi-pad-compta: var(--az-md);
--az-kpi-value: var(--az-lg);
--az-kpi-value-lg: var(--az-lg);
--az-kpi-gap: var(--az-2xs);
--az-kpi-gap-lg: var(--az-2xs);
--az-kpi-icon: var(--az-2xl);
--az-kpi-icon-lg: var(--az-2xl);
--az-kpi-icon-svg: var(--az-lg);
--az-kpi-icon-radius: var(--az-sm);
--az-kpi-grid-gap: var(--az-sm);
--az-kpi-label-font: var(--az-text-xs);
--az-kpi-card-min-h: auto;
--az-section-gap: 18px;
--az-card-pad: var(--az-lg) var(--az-lg);
--az-card-pad-lg: var(--az-lg);
--az-chart-pad: var(--az-lg);
--az-chart-grid-gap: var(--az-lg);
--az-page-pad: var(--az-lg);
--az-header-pad-top: 28px;
--az-header-pad-bottom: var(--az-lg);
--az-header-gap: var(--az-sm-plus);
--az-touch-min: 44px;
--az-card-btn-size: var(--az-touch-min);
--az-sort-chip-gap: var(--az-xs-plus);
--az-sort-chip-pad: var(--az-sm) var(--az-md-plus);
--az-sort-chip-font: var(--az-text-sm);
}
.mobile-app-header {
display: none;
}
button,
.btn,
a[role="button"],
.nav-link,
.mobile-nav-item,
.bottom-nav-item,
.segment-btn,
.settings-nav-link,
.kpi-card,
.kpi-card-premium,
.mobile-add-btn,
.data-list-row.row-clickable {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
button:active,
.btn:active,
a[role="button"]:active,
.mobile-add-btn:active,
.bottom-nav-item:active,
.segment-btn:active,
.settings-nav-link:active,
.kpi-card:active,
.kpi-card-premium:active,
.data-list-row.row-clickable:active {
filter: brightness(0.92);
}
.sidebar-nav {
display: none;
}
.app-container {
flex-direction: column;
}
.main-content {
padding: 0 var(--az-page-pad);
padding-bottom: calc(var(--az-bottom-nav-h) + var(--az-xl) + env(safe-area-inset-bottom, 0px));
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
.bottom-nav {
display: flex;
}
body.auth-visible .bottom-nav {
display: none;
}
body.edit-view-active .bottom-nav {
display: none;
}
body:has(.row-actions-menu.active) .bottom-nav,
body:has(.bottom-sheet-menu.active) .bottom-nav,
body:has(.filter-dropdown-menu[style*="display: block"]) .bottom-nav,
body:has(.filter-dropdown-menu.active) .bottom-nav,
body:has(.account-menu-dropdown:not(.hidden)) .bottom-nav {
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}
body.keyboard-open .bottom-nav {
opacity: 0;
pointer-events: none;
transform: translateY(100%);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.bottom-sheet-content {
padding-bottom: calc(var(--az-bottom-nav-h) + var(--az-md) + env(safe-area-inset-bottom, 0px));
}
.mobile-nav {
display: none;
}
.page .page-header,
.view .page-header {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
text-align: left;
gap: var(--az-sm);
padding-top: max(var(--az-md), calc(var(--az-xs) + env(safe-area-inset-top, 0px)));
padding-bottom: var(--az-sm);
position: sticky;
top: 0;
z-index: var(--az-z-dropdown);
background: var(--az-bg-app);
transition: transform 0.3s ease, opacity 0.3s ease;
}
.page .page-header.header-hidden,
.view .page-header.header-hidden {
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
}
.page-header-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--az-xs);
text-align: left;
flex: 1;
min-width: 0;
}
.charts-section,
.view-scroll-content {
display: contents;
}
#dashboard .dashboard-header {
display: contents;
}
#dashboard .dash-header-actions {
display: none;
}
#dashboard .page-header-content {
position: sticky;
top: 0;
z-index: var(--az-z-dropdown);
background: var(--az-bg-app);
padding-top: max(var(--az-lg), calc(var(--az-sm) + env(safe-area-inset-top, 0px)));
padding-bottom: var(--az-md);
text-align: center;
-webkit-transform: translateZ(0);
transform: translateZ(0);
backface-visibility: hidden;
}
.dashboard-news-section {
display: block;
max-width: none;
width: 100%;
}
.dashboard-news-section:empty,
.dashboard-news-section.no-slides {
display: none;
}
@supports selector(:has(*)) {
.dashboard-news-section:not(:has(.notification-slide.active)) {
display: none;
}
}
.notification-title {
font-size: var(--az-rev-banner-title);
letter-spacing: var(--az-rev-tracking-banner);
}
.notification-description {
font-size: var(--az-rev-banner-body);
letter-spacing: var(--az-rev-tracking);
}
#dashboard .section-title:not(.mobile-details-title) {
display: none;
}
#dashboard .charts-grid .chart-container:nth-child(2) {
display: none;
}
.quarterly-section.cockpit-widget {
display: none;
}
.dash-evolution-ca .chart-wrapper,
.dash-charts-grid .chart-wrapper {
min-height: 200px;
}
.dash-evolution-ca .chart-wrapper canvas,
.dash-charts-grid .chart-wrapper canvas {
min-height: 180px;
max-height: 240px;
}
#dashboard .dash-toolbar {
display: contents;
}
#dashboard .dash-toolbar-left .filters {
display: none;
}
#dashboard .dash-report-select {
display: none;
}
.page,
.view {
width: 100%;
min-width: 0;
overflow-x: hidden;
}
.page-title {
font-size: var(--az-text-xl);
text-align: left;
margin-bottom: 0;
}
.page-subtitle {
font-size: var(--az-text-lg);
text-align: left;
display: none;
}
.page-subtitle-with-dot {
display: inline-flex;
align-items: center;
justify-content: flex-start;
font-size: var(--az-text-sm);
gap: var(--az-xs);
white-space: nowrap;
}
.header-actions-desktop {
display: none;
}
.dashboard-kpi-grid {
margin-top: var(--az-lg);
}
#dashboard .kpi-card-premium {
padding-top: var(--az-md-plus);
}
.kpi-grid,
.cockpit-widget-grid,
.dashboard-kpi-grid,
.premium-grid,
#comptabilite .kpi-grid,
.stats-grid,
.dashboard-kpi-row {
grid-template-columns: repeat(2, 1fr);
gap: var(--az-kpi-grid-gap);
align-items: stretch;
}
.finance-kpi-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--az-kpi-grid-gap);
align-items: stretch;
}
.finance-kpi-card {
padding: var(--az-lg);
min-width: 0;
overflow: hidden;
}
.finance-kpi-label {
text-transform: none;
font-size: var(--az-kpi-label-font);
letter-spacing: 0.01em;
}
.finance-kpi-card .settings-kpi-editable-value-large {
min-width: 0;
width: 100%;
font-size: var(--az-text-md);
}
.kpi-card-premium {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
position: relative;
padding: var(--az-lg);
padding-top: var(--az-xl);
text-align: center;
min-height: auto;
height: 100%;
}
.kpi-card-premium .kpi-card-icon {
position: static;
margin-bottom: var(--az-xs);
}
.kpi-card-premium .widget-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--az-xs);
text-align: center;
}
.kpi-card-premium .kpi-trend {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
color: var(--az-text-tertiary);
}
.kpi-card-premium .kpi-trend.trend-down {
color: var(--az-red);
}
.kpi-card-premium .kpi-trend.trend-up {
color: var(--az-green);
}
.kpi-card-premium .widget-body {
align-items: center;
text-align: center;
}
.kpi-card-premium .widget-footer {
padding-top: var(--az-sm);
}
.kpi-card-premium .trk-kpi-footer {
justify-content: center;
text-align: center;
}
.kpi-card-premium .trk-kpi-sub {
text-align: center;
}
.trend-indicator {
display: none;
}
.kpi-card-premium .card-label {
font-size: var(--az-kpi-label-font);
font-weight: var(--az-font-semibold);
color: var(--az-kpi-label-color);
line-height: var(--az-kpi-label-lh);
text-align: center;
text-transform: var(--az-label-transform);
letter-spacing: 0.02em;
}
.kpi-card-premium .card-value {
text-align: center;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.kpi-card-premium .card-subtitle {
display: block;
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
margin-top: var(--az-2xs);
line-height: 1.2;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kpi-card-premium .kpi-net-estimate {
flex-direction: column;
align-items: center;
gap: var(--az-2xs);
}
.page-title {
font-weight: var(--az-font-semibold);
letter-spacing: var(--az-tracking-tight);
}
.section-title,
.settings-section-title {
font-size: var(--az-text-md);
}
#documents-view .mobile-doc-details {
display: flex;
}
#transactions .mobile-transaction-details {
display: flex;
}
.table-container,
.documents-table-container {
border: none;
border-radius: 0;
overflow-x: hidden;
background: transparent;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.table {
min-width: 0;
table-layout: auto;
}
.table thead {
display: none;
}
.table tbody tr {
display: flex;
flex-direction: column;
background: transparent;
border: none;
border-radius: 0;
margin-bottom: 0;
padding: var(--az-lg) 0;
}
.table tbody tr + tr {
border-top: 1px solid var(--az-glass-border);
}
.table tbody td {
border: none;
width: 100%;
padding: var(--az-sm);
}
.table-actions-cell {
display: none;
}
.td-select,
.th-select {
display: none;
}
.table-col-month,
.table-col-ref,
.table-col-status,
.table-col-amount,
.table-col-email,
.table-col-actions,
.table-col-date {
display: none;
}
.data-list-header,
.data-list-row > .dl-select,
.data-list-row > .dl-value,
.data-list-row > .dl-detail,
.data-list-row > .dl-ref,
.data-list-row > .dl-date,
.data-list-row > .dl-amount,
.data-list-row > .dl-status-col,
.data-list-row > .dl-rank {
display: none;
}
.data-list-row > .dl-action {
display: none;
}
.mobile-row-chevron {
display: flex;
align-items: center;
justify-content: center;
width: var(--az-touch-min);
min-height: var(--az-touch-min);
color: var(--az-text-muted);
font-size: var(--az-text-sm);
font-weight: 300;
border: none;
background: transparent;
padding: 0;
flex-shrink: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.row-actions-menu {
position: fixed;
top: auto;
right: 0;
bottom: 0;
left: 0;
width: 100%;
min-width: 100%;
max-height: 60vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--az-radius-xl) var(--az-radius-xl) 0 0;
padding: var(--az-sm) var(--az-sm) calc(env(safe-area-inset-bottom, 0px) + var(--az-lg));
z-index: var(--az-z-modal);
box-shadow: var(--az-shadow-sheet);
animation: sheetSlideUp 0.25s cubic-bezier(0.32, 0.72, 0, 1);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.row-actions-menu::before {
content: '';
display: block;
width: 36px;
height: 5px;
border-radius: var(--az-radius-sm);
background: var(--az-grabber-bg);
margin: 0 auto var(--az-md);
}
#az-sheet-backdrop {
position: fixed;
inset: 0;
z-index: var(--az-z-loader);
}
.az-sheet-overlay {
position: absolute;
inset: 0;
background: var(--az-overlay-bg);
animation: fadeIn 0.2s ease;
}
.az-sheet-menu {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
background: var(--az-bg-surface);
border-radius: var(--az-radius-xl) var(--az-radius-xl) 0 0;
padding: var(--az-sm) var(--az-sm) calc(env(safe-area-inset-bottom, 0px) + var(--az-lg));
max-height: 70vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-shadow: var(--az-shadow-sheet);
animation: sheetSlideUp 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.az-sheet-menu::before {
content: '';
display: block;
width: 36px;
height: 5px;
border-radius: var(--az-radius-sm);
background: var(--az-grabber-bg);
margin: 0 auto var(--az-md);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.az-sheet-accordion {
border-bottom: 1px solid var(--az-border);
}
.az-sheet-accordion:last-of-type {
border-bottom: none;
}
.az-sheet-accordion-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--az-md) var(--az-lg);
border: none;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
font-family: inherit;
}
.az-sheet-accordion-header:active {
background: var(--az-bg-elevated);
}
.az-sheet-accordion-icon {
font-size: var(--az-text-sm);
transition: transform 0.2s ease;
color: var(--az-text-muted);
}
.az-sheet-accordion.open .az-sheet-accordion-icon {
transform: rotate(180deg);
}
.az-sheet-accordion-body {
display: none;
padding-bottom: var(--az-xs);
}
.az-sheet-accordion.open .az-sheet-accordion-body {
display: block;
}
.row-action-cancel-sep {
height: 1px;
background: var(--az-border);
margin: var(--az-sm) 0;
}
.row-action-cancel-label {
flex: 1;
text-align: center;
color: var(--az-text-secondary);
font-weight: var(--az-font-semibold);
}
.row-action-item {
padding: var(--az-md) var(--az-lg);
font-size: var(--az-text-md);
border-radius: var(--az-radius-lg);
min-height: var(--az-touch-min);
}
.row-action-item i {
font-size: var(--az-text-xl);
}
.dl-action-wrap {
display: none;
}
.row-actions-submenu {
display: none;
}
@keyframes sheetSlideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.doc-client-cell,
.table-col-client,
.table .table-col-client,
.table tbody td.client-name-cell,
#clients .dl-primary,
#transactions .dl-primary {
display: grid;
grid-template-columns: var(--az-card-grid-cols);
grid-template-rows: auto auto;
gap: var(--az-card-grid-gap-y) var(--az-card-grid-gap-x);
align-items: start;
width: 100%;
overflow: visible;
}
.doc-avatar,
.transaction-avatar,
.client-avatar {
grid-row: 1;
grid-column: 1;
align-self: center;
width: var(--az-touch-min);
height: var(--az-touch-min);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-xs);
}
.doc-client-info,
.transaction-text-wrapper,
.client-info-cell {
grid-row: 1;
grid-column: 2;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--az-xs);
max-width: none;
overflow: visible;
justify-content: center;
}
.client-info-cell .mobile-inline-status {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-tertiary);
line-height: 1.3;
background: none;
border: none;
padding: 0;
border-radius: 0;
}
.client-info-cell .mobile-inline-status::before {
content: '';
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
flex-shrink: 0;
background: var(--az-text-muted);
}
.client-info-cell .mobile-inline-status.rank-gold::before { background: var(--az-rank-gold); }
.client-info-cell .mobile-inline-status.rank-silver::before { background: var(--az-rank-silver); }
.client-info-cell .mobile-inline-status.rank-bronze::before { background: var(--az-bronze); }
.client-info-cell .mobile-inline-status.rank-top10::before { background: var(--az-blue); }
.mobile-tx-date {
display: block;
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
line-height: 1.3;
}
.doc-client-info .client-name,
.client-info-cell .client-name,
.client-info-cell .dl-name,
.transaction-text-wrapper .transaction-name,
.transaction-text-wrapper .dl-name {
font-size: var(--az-text-lg-plus);
font-weight: var(--az-font-semibold);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.client-info-cell .dl-name,
.transaction-text-wrapper .dl-name {
display: block;
}
.doc-client-info .mobile-inline-status {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
line-height: 1.3;
white-space: nowrap;
margin-top: var(--az-xs);
background: none;
border: none;
padding: 0;
border-radius: 0;
width: auto;
max-width: none;
}
.doc-client-info .mobile-inline-status::before {
content: '';
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
flex-shrink: 0;
background: var(--az-text-muted);
}
.doc-client-info .mobile-inline-status.paid::before { background: var(--az-green); }
.doc-client-info .mobile-inline-status.pending::before { background: var(--az-amber); }
.doc-client-info .mobile-inline-status.sent::before { background: var(--az-blue); }
.doc-client-info .mobile-inline-status.draft::before { background: var(--az-text-muted); }
.doc-client-info .mobile-inline-status.viewed::before,
.doc-client-info .mobile-inline-status.opened::before { background: var(--az-cyan); }
.doc-client-info .mobile-inline-status.partial::before { background: var(--az-amber); }
.doc-client-info .mobile-inline-status.credit-note::before { background: var(--az-blue); }
.mobile-right-stack {
display: contents;
}
.mobile-amount-status {
grid-row: 1;
grid-column: 3;
display: flex;
flex-direction: column;
text-align: right;
align-items: flex-end;
gap: var(--az-xs);
justify-content: center;
}
.mobile-amount-status .mobile-inline-status {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
line-height: 1.3;
white-space: nowrap;
background: none;
border: none;
padding: 0;
border-radius: 0;
}
.mobile-amount-status .mobile-inline-status::before {
content: '';
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
flex-shrink: 0;
background: var(--az-text-muted);
}
.mobile-amount-status .mobile-inline-status.paid::before { background: var(--az-green); }
.mobile-amount-status .mobile-inline-status.pending::before { background: var(--az-amber); }
.mobile-amount-status .mobile-inline-status.sent::before { background: var(--az-blue); }
.mobile-amount-status .mobile-inline-status.draft::before { background: var(--az-text-muted); }
.mobile-amount-status .mobile-inline-status.viewed::before,
.mobile-amount-status .mobile-inline-status.opened::before { background: var(--az-cyan); }
.mobile-amount-status .mobile-inline-status.partial::before { background: var(--az-amber); }
.mobile-amount-status .mobile-inline-status.credit-note::before { background: var(--az-blue); }
.mobile-amount-status .mobile-inline-status.rank-gold::before { background: var(--az-amber); }
.mobile-amount-status .mobile-inline-status.rank-silver::before { background: var(--az-text-tertiary); }
.mobile-amount-status .mobile-inline-status.rank-bronze::before { background: var(--az-bronze); }
.mobile-amount-status .mobile-inline-status.rank-top10::before { background: var(--az-indigo); }
.mobile-amount-status .mobile-inline-status.rank-other::before { background: var(--az-text-muted); }
#clients .mobile-actions-row,
#transactions .mobile-actions-row,
#tracking .mobile-actions-row {
display: none;
}
#clients .client-info-cell .dl-sub {
display: none;
}
#documents-view .mobile-actions-row {
display: contents;
}
#documents-view .mobile-actions-row .mobile-doc-ref {
display: block;
grid-row: 2;
grid-column: 2;
font-size: var(--az-text-sm);
color: var(--az-text-muted);
font-weight: var(--az-font-normal);
line-height: 1.3;
}
#documents-view .mobile-actions-row .mobile-status {
display: inline-flex;
grid-row: 2;
grid-column: 3;
justify-self: end;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
font-weight: var(--az-font-medium);
line-height: 1.3;
background: none;
border: none;
padding: 0;
border-radius: 0;
}
#documents-view .mobile-actions-row .mobile-status::before {
content: '';
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
flex-shrink: 0;
background: var(--az-text-muted);
}
#documents-view .mobile-actions-row .mobile-status.paid::before { background: var(--az-green); }
#documents-view .mobile-actions-row .mobile-status.pending::before { background: var(--az-amber); }
#documents-view .mobile-actions-row .mobile-status.sent::before { background: var(--az-blue); }
#documents-view .mobile-actions-row .mobile-status.draft::before { background: var(--az-text-muted); }
#documents-view .mobile-actions-row .mobile-status.viewed::before,
#documents-view .mobile-actions-row .mobile-status.opened::before { background: var(--az-cyan); }
#documents-view .mobile-actions-row .mobile-status.partial::before { background: var(--az-amber); }
#documents-view .mobile-actions-row .badge-overdue-mini {
display: none;
}
#documents-view .data-list-row:has(.badge-overdue-mini) .mobile-status {
color: var(--az-red);
}
#documents-view .data-list-row:has(.badge-overdue-mini) .mobile-status::before {
background: var(--az-red);
}
#documents-view .mobile-actions-row .mobile-actions-btns {
display: none;
}
.table-actions,
.table-actions-mobile {
display: flex;
}
.mobile-doc-details,
.mobile-transaction-details,
.mobile-client-details {
display: flex;
}
.client-secondary-info,
.mobile-client-actions {
display: none;
}
.mobile-amount {
display: block;
font-size: var(--az-text-lg-plus);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
letter-spacing: var(--az-tracking-tight);
line-height: 1.3;
}
.mobile-amount.amount-positive {
color: var(--az-green);
}
.mobile-amount.amount-negative {
color: var(--az-red);
}
.mobile-amount.amount-pending {
color: var(--az-amber);
}
.mobile-amount.amount-finalized {
color: var(--az-blue);
}
.mobile-amount.amount-partial {
color: var(--az-cyan);
}
.mobile-amount.amount-draft {
color: var(--az-text-muted);
}
.mobile-amount.amount-declined {
color: var(--az-red);
}
.mobile-amount.amount-credit-note {
color: var(--az-blue);
}
.doc-client-cell:has(.mobile-status.paid) .mobile-amount {
color: var(--az-green);
}
.doc-client-cell:has(.mobile-status.pending) .mobile-amount,
.doc-client-cell:has(.mobile-status.sent) .mobile-amount {
color: var(--az-amber);
}
.mobile-status,
.mobile-rank {
display: inline-flex;
}
.mobile-actions-row .mobile-doc-ref,
.mobile-actions-row .mobile-detail-ref {
flex: 1;
font-size: var(--az-text-md);
font-weight: var(--az-font-medium);
color: var(--az-text-muted);
white-space: nowrap;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.mobile-detail-stacked {
display: flex;
flex-direction: column;
gap: var(--az-xs);
white-space: normal;
}
.mobile-detail-stacked .mobile-detail-label {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
font-weight: var(--az-font-medium);
text-transform: var(--az-heading-transform);
letter-spacing: 0.02em;
}
.mobile-detail-stacked .mobile-detail-value {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
font-weight: var(--az-font-medium);
}
.mobile-actions-row .mobile-status {
display: none;
}
.mobile-actions-row .mobile-rank {
height: auto;
padding: 0;
display: inline-flex;
align-items: center;
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
border-radius: 0;
background: transparent;
border: none;
}
.mobile-actions-row .mobile-rank.gold { color: var(--az-amber); }
.mobile-actions-row .mobile-rank.silver { color: var(--az-text-tertiary); }
.mobile-actions-row .mobile-rank.bronze { color: var(--az-bronze); }
.mobile-actions-row .mobile-rank.top10 { color: var(--az-indigo); }
.mobile-actions-row .mobile-rank.other { color: var(--az-text-secondary); }
.mobile-doc-date,
.mobile-transaction-date,
.mobile-client-detail {
display: block;
font-size: var(--az-text-md);
color: var(--az-text-secondary);
margin-top: var(--az-xs);
line-height: 1.3;
}
.mobile-inline-status {
display: inline;
line-height: 1.3;
}
.mobile-view-btn,
.mobile-actions-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--az-touch-min);
min-height: var(--az-touch-min);
padding: var(--az-sm);
border-radius: var(--az-radius-lg);
border: 1px solid var(--az-border);
background: var(--az-bg-elevated);
color: var(--az-text-muted);
font-size: var(--az-text-lg-plus);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease, color 0.15s ease;
}
.mobile-view-btn:active,
.mobile-actions-trigger:active {
border-color: var(--az-border-hover);
color: var(--az-text-primary);
}
.mobile-actions-btns {
display: flex;
align-items: center;
gap: var(--az-xs);
}
.table tbody tr.row-clickable {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease;
}
.table tbody tr.row-clickable:active {
background: var(--az-bg-card-hover);
}
.table-toolbar {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
gap: var(--az-sm);
}
.table-toolbar .toolbar-search,
.table-toolbar .search-compact {
flex: 1;
min-width: 0;
max-width: none;
}
.table-toolbar .search-input-compact {
font-size: var(--az-text-lg);
padding: var(--az-sm-plus) var(--az-md-plus) var(--az-sm-plus) var(--az-3xl);
border-radius: var(--az-radius-lg-plus);
min-height: var(--az-touch-min);
width: 100%;
box-sizing: border-box;
}
.table-toolbar .search-input-compact::placeholder {
font-size: var(--az-text-lg);
color: var(--az-text-tertiary);
}
.table-toolbar .filters {
display: flex;
flex-wrap: nowrap;
gap: var(--az-xs-plus);
flex: 1;
min-width: 0;
}
.table-toolbar .filters .action-select {
flex: 1;
min-width: 0;
}
.table-toolbar .action-select-btn {
padding: 0 var(--az-sm);
font-size: var(--az-text-lg);
min-height: var(--az-touch-min);
justify-content: space-between;
}
.filter-dropdown-menu {
position: fixed;
top: auto;
bottom: 0;
left: 0;
right: 0;
width: 100%;
min-width: 100%;
max-height: 60vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--az-radius-xl) var(--az-radius-xl) 0 0;
padding: var(--az-sm) var(--az-sm) calc(env(safe-area-inset-bottom, 0px) + var(--az-lg));
z-index: var(--az-z-modal);
box-shadow: var(--az-shadow-sheet);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.filter-dropdown-menu[style*="display: block"],
.filter-dropdown-menu[style*="display:block"],
.filter-dropdown-menu.active,
.filter-dropdown-menu.show {
animation: sheetSlideUp 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.filter-dropdown-menu.dropdown-above {
top: auto;
bottom: 0;
}
.filter-dropdown-menu::before {
content: '';
display: block;
width: 36px;
height: 5px;
border-radius: var(--az-radius-sm);
background: var(--az-grabber-bg);
margin: 0 auto var(--az-md);
}
.filter-dropdown-menu.with-scroll {
max-height: 70vh;
}
.filter-dropdown-menu > .sheet-head {
position: sticky;
top: calc(-1 * var(--az-sm));
z-index: 2;
display: flex;
margin: 0 calc(-1 * var(--az-sm)) var(--az-xs);
background: inherit;
}
.filter-dropdown-menu > .sheet-head > .sheet-close {
right: calc(var(--az-lg) - 1px + (var(--sheet-close-size) - var(--az-touch-min)) / 2);
}
.filter-dropdown-menu > .filter-option-label {
padding: var(--az-md) var(--az-lg);
min-height: var(--az-touch-min);
font-size: var(--az-text-md);
border-radius: var(--az-radius-lg);
}
.filter-dropdown-menu .filter-option {
gap: var(--az-sm);
padding: var(--az-md) var(--az-lg);
min-height: var(--az-touch-min);
font-size: var(--az-text-md);
border-radius: var(--az-radius-lg);
}
.filter-dropdown-menu input[type="checkbox"] {
width: var(--az-lg-plus);
height: var(--az-lg-plus);
}
.account-menu-dropdown {
position: fixed;
top: auto;
bottom: 0;
left: 0;
right: 0;
width: 100%;
max-height: 70vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--az-radius-xl) var(--az-radius-xl) 0 0;
padding: var(--az-sm) var(--az-sm) calc(env(safe-area-inset-bottom, 0px) + var(--az-lg));
z-index: var(--az-z-modal);
box-shadow: var(--az-shadow-sheet);
animation: sheetSlideUp 0.25s cubic-bezier(0.32, 0.72, 0, 1);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.account-menu-dropdown::before {
content: '';
display: block;
width: 36px;
height: 5px;
border-radius: var(--az-radius-sm);
background: var(--az-grabber-bg);
margin: 0 auto var(--az-md);
}
.ai-cfg-dropdown-menu,
.email-send-dropdown-menu {
position: fixed;
top: auto;
bottom: 0;
left: 0;
right: 0;
width: 100%;
min-width: 100%;
max-height: 60vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--az-radius-xl) var(--az-radius-xl) 0 0;
padding: var(--az-sm) var(--az-sm) calc(env(safe-area-inset-bottom, 0px) + var(--az-lg));
z-index: var(--az-z-modal);
box-shadow: var(--az-shadow-sheet);
animation: sheetSlideUp 0.25s cubic-bezier(0.32, 0.72, 0, 1);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.ai-cfg-dropdown-menu::before,
.email-send-dropdown-menu::before {
content: '';
display: block;
width: 36px;
height: 5px;
border-radius: var(--az-radius-sm);
background: var(--az-grabber-bg);
margin: 0 auto var(--az-md);
}
.ai-cfg-dropdown-item {
padding: var(--az-md) var(--az-lg);
min-height: var(--az-touch-min);
font-size: var(--az-text-md);
border-radius: var(--az-radius-lg);
}
.table-toolbar .actions {
display: none;
}
.table-toolbar-desktop {
display: none;
}
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
select,
.search-input,
.search-input-compact {
font-size: var(--az-text-md);
}
.search-input,
.search-input-compact {
width: 100%;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.search-input:focus,
.search-input-compact:focus {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
border-color: var(--az-blue);
outline: none;
}
.mobile-page-actions {
display: flex;
flex-shrink: 0;
gap: var(--az-sm);
padding: 0;
}
.mobile-page-actions .btn {
flex: 0 0 auto;
min-width: 0;
justify-content: center;
text-align: center;
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
min-height: var(--az-touch-min, 44px);
border-radius: var(--az-radius-pill);
padding: 0 var(--az-md);
white-space: nowrap;
}
.mobile-action-circles {
display: flex;
justify-content: center;
gap: var(--az-4xl);
width: 100%;
padding: 0 0 var(--az-lg);
overflow: visible;
}
.mobile-action-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-xs);
padding: 0;
background: transparent;
border: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
white-space: normal;
transition: opacity 0.2s ease-out;
}
.mobile-action-btn i {
display: flex;
align-items: center;
justify-content: center;
width: var(--az-rev-hero-circle-size, 55px);
height: var(--az-rev-hero-circle-size, 55px);
border-radius: var(--az-rev-hero-circle-radius, 50%);
background: var(--az-action-circle-bg, var(--az-bg-elevated));
border: 1px solid rgba(0, 0, 0, 0.06);
font-size: var(--az-text-xl);
color: var(--az-text-primary);
transition: background 0.2s ease-out;
}
.mobile-action-btn span {
font-size: var(--az-rev-hero-action-label, 15px);
color: var(--az-text-primary);
font-weight: var(--az-font-medium);
white-space: nowrap;
}
.mobile-action-btn:active {
opacity: var(--az-press-opacity);
transition: none;
}
.documents-type-segment {
display: none;
}
.mobile-details-title {
display: block;
font-size: var(--az-text-xs);
font-weight: var(--az-font-bold);
letter-spacing: 0.15em;
text-transform: uppercase;
text-align: center;
color: var(--az-text-muted);
padding: 0;
margin: 0 0 var(--az-md) 0;
}
.table-actions,
.table-actions-mobile {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
gap: var(--az-sort-chip-gap);
padding: 0;
}
.sort-chip,
.sort-chip-compact {
padding: var(--az-sort-chip-pad);
font-size: var(--az-sort-chip-font);
border-radius: var(--az-sort-chip-radius);
}
.show-more-btn {
width: 100%;
margin: var(--az-sm) 0 0 0;
max-width: none;
border-radius: var(--az-radius-xl);
border: 1px solid var(--az-border);
background: var(--az-bg-card);
min-height: var(--az-4xl);
font-size: var(--az-text-md);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
cursor: pointer;
pointer-events: auto;
position: relative;
z-index: 1;
}
.show-more-collapsed + .show-more-btn {
margin-top: var(--az-sm);
border-radius: var(--az-radius-2xl);
border: 1px solid var(--az-border);
position: relative;
z-index: 1;
}
.show-more-expanded + .show-more-btn {
margin-top: var(--az-sm);
border-radius: var(--az-radius-2xl);
border: 1px solid var(--az-border);
}
.action-select-btn {
font-size: var(--az-text-md);
font-weight: var(--az-font-medium);
padding: 0 var(--az-md);
min-height: var(--az-touch-min);
justify-content: space-between;
border-radius: var(--az-radius-lg-plus);
gap: var(--az-xs);
}
.filters .action-select-btn {
justify-content: space-between;
}
.charts-grid,
#dashboard .charts-grid,
.rapports-synthese > .charts-grid {
grid-template-columns: 1fr;
}
.quarterly-grid {
grid-template-columns: 1fr 1fr;
}
#rapports .fiscal-ir-grid {
grid-template-columns: 1fr;
gap: var(--az-sm);
}
#rapports .fiscal-ir-card {
padding: var(--az-md-plus) var(--az-lg);
}
#rapports .rapports-header-toolbar {
display: none;
}
.rapports-filters-premium,
.rapports-tabs {
width: 100%;
}
.rapports-tabs {
display: flex;
gap: 0;
background: transparent;
border: none;
border-bottom: 1px solid var(--az-border);
border-radius: 0;
padding: 0;
}
.rapports-tab-btn {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
padding: var(--az-sm) 0;
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-tertiary);
min-height: var(--az-touch-min);
min-width: 0;
flex: 1;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
transition: color var(--az-transition), border-color var(--az-transition);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--az-2xs);
}
.rapports-tab-btn i {
display: block;
font-size: var(--az-text-lg);
line-height: 1;
}
.rapports-tab-btn.active {
color: var(--az-text-primary);
border-bottom-color: var(--az-text-primary);
text-shadow: 0 0 0.6px currentColor;
}
#comptabilite {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
#comptabilite .page-header {
order: 0;
flex-direction: column;
align-items: stretch;
flex-wrap: nowrap;
gap: var(--az-md);
}
#comptabilite .page-header-content {
width: 100%;
flex: none;
}
#comptabilite .compta-header-gauges {
display: flex;
flex-direction: column;
gap: var(--az-sm);
width: 100%;
order: 2;
}
#comptabilite .compta-header-gauges .fiscal-gauge--inline {
width: 100%;
}
#comptabilite .compta-header-toolbar {
width: 100%;
order: 3;
}
#comptabilite .page-subtitle {
display: none;
}
.page-header-actions {
display: flex;
align-items: center;
gap: var(--az-sm);
flex-shrink: 0;
}
#comptabilite .compta-header-toolbar .filters-desktop,
#comptabilite .compta-header-toolbar .actions {
display: none;
}
#comptabilite .kpi-grid { order: 1; }
#comptabilite .fiscal-gauges-row { order: 2; }
#comptabilite #quarterly-dashboard-container { order: 2; }
#comptabilite .charts-grid,
#comptabilite .charts-section { order: 2; }
#comptabilite .table-container,
#comptabilite .urssaf-detail-card { order: 3; }
#comptabilite .fiscal-gauges-row.cockpit-widget-grid {
grid-template-columns: 1fr;
}
.fiscal-gauge-kpi {
padding: var(--az-md) var(--az-lg);
}
.fiscal-gauge-kpi .fiscal-gauge--inline {
width: auto;
}
#comptabilite .qa-detail {
display: none;
}
#comptabilite .cockpit-widget,
#comptabilite .quarterly-card {
background: var(--az-bg-card);
border-radius: var(--az-rev-card-radius);
box-shadow: var(--az-rev-card-shadow);
border: none;
padding: var(--az-lg);
}
#comptabilite .cockpit-widget > .widget-header {
padding: 0 0 var(--az-sm);
}
#comptabilite .cockpit-widget .chart-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
text-transform: var(--az-heading-transform);
letter-spacing: 0.01em;
color: var(--az-text-secondary);
}
#comptabilite .kpi-grid { gap: var(--az-md); }
#comptabilite .charts-grid {
grid-template-columns: 1fr;
gap: var(--az-lg);
}
#comptabilite .charts-grid .chart-wrapper { min-height: 200px; }
#comptabilite .quarterly-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--az-md);
}
#comptabilite .quarterly-card { padding: var(--az-md-plus) var(--az-lg); }
.qa-card .chart-wrapper { height: 140px; }
.qa-detail { padding-top: var(--az-md); }
.qa-detail-breakdown { gap: var(--az-md); flex-wrap: wrap; }
.qa-detail-total { font-size: var(--az-text-md); }
#edit-view.active {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: var(--az-z-modal);
background: var(--az-bg-app);
display: flex;
flex-direction: column;
overflow: hidden;
padding: var(--az-sm) var(--az-xs);
}
body.wizard-active #edit-view.active {
visibility: hidden;
pointer-events: none;
}
#edit-view .page-title,
#edit-view .invoice-preview-toolbar,
#edit-view .editor-quick-actions {
display: none;
}
#edit-view .edit-header-actions .btn[data-action="save-document"] {
display: none;
}
#edit-view .edit-header-actions .btn>i {
display: none;
}
#edit-view .edit-pdf-menu,
#edit-view .edit-pdf-caret {
display: none;
}
#edit-view .page-header {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
padding: var(--az-sm) 0 var(--az-xs);
margin-bottom: 0;
flex-wrap: nowrap;
flex-shrink: 0;
width: 100%;
}
#edit-view .edit-header-actions {
display: flex;
align-items: center;
justify-content: space-evenly;
gap: 0;
flex-wrap: nowrap;
margin: 0;
width: 100%;
}
#edit-view .edit-header-actions .btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: var(--az-xs-plus);
flex: 0 0 auto;
min-width: 0;
width: auto;
height: auto;
min-height: auto;
padding: 0;
border-radius: 0;
background: none;
border: none;
box-shadow: none;
font-size: 0;
overflow: visible;
transition: transform 0.15s ease;
}
#edit-view .edit-header-actions .btn:hover::before {
background-color: var(--az-bg-card-hover);
border-color: var(--az-border-focus);
box-shadow: var(--az-shadow-sm);
}
#edit-view .edit-header-actions [data-action="start-wizard"]:hover::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z'/%3E%3Cpath d='M5 3v4'/%3E%3Cpath d='M19 17v4'/%3E%3Cpath d='M3 5h4'/%3E%3Cpath d='M17 19h4'/%3E%3C/svg%3E") center/20px 20px no-repeat,
var(--az-blue);
border-color: var(--az-blue);
box-shadow: var(--az-shadow);
}
#edit-view .edit-header-actions .btn:active {
opacity: 0.6;
}
#edit-view .edit-header-actions .btn::before {
content: "";
display: block;
width: var(--az-4xl);
height: var(--az-4xl);
border-radius: var(--az-radius-pill);
flex-shrink: 0;
background-repeat: no-repeat;
background-position: center;
background-size: 20px 20px;
background-color: var(--az-bg-elevated);
border: 1px solid var(--az-border-hover);
transition: color var(--az-transition-ease), background-color var(--az-transition-ease), border-color var(--az-transition-ease), opacity var(--az-transition-ease);
}
#edit-view .edit-header-actions .btn::after {
display: block;
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
letter-spacing: 0.01em;
white-space: nowrap;
color: var(--az-text-secondary);
margin-top: var(--az-xs);
}
#edit-view .edit-header-actions [data-action="start-wizard"]::after {
content: "Assistant";
color: var(--az-text-primary);
font-weight: var(--az-font-semibold);
}
#edit-view .edit-header-actions [data-action="download-pdf"]::after {
content: "PDF";
color: var(--az-text-secondary);
}
#edit-view .edit-header-actions [data-action="share-document"]::after {
content: "Email";
color: var(--az-text-secondary);
}
#edit-view .edit-header-actions [data-action="cancel-edit"]::after {
content: "Fermer";
color: var(--az-text-tertiary);
}
#edit-view .edit-header-actions [data-action="start-wizard"]::before {
width: var(--az-4xl);
height: var(--az-4xl);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z'/%3E%3Cpath d='M5 3v4'/%3E%3Cpath d='M19 17v4'/%3E%3Cpath d='M3 5h4'/%3E%3Cpath d='M17 19h4'/%3E%3C/svg%3E") center/20px 20px no-repeat,
var(--az-blue);
border-color: var(--az-blue);
box-shadow: var(--az-shadow-sm);
}
#edit-view .edit-header-actions [data-action="download-pdf"]::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") center/18px 18px no-repeat,
var(--az-bg-elevated);
border-color: var(--az-border);
}
#edit-view .edit-header-actions [data-action="share-document"]::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center/18px 18px no-repeat,
var(--az-bg-elevated);
border-color: var(--az-border);
}
#edit-view .edit-header-actions [data-action="cancel-edit"] {
min-width: var(--az-touch-min);
min-height: var(--az-touch-min);
}
#edit-view .edit-header-actions [data-action="cancel-edit"]::before {
width: var(--az-4xl);
height: var(--az-4xl);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center/18px 18px no-repeat,
var(--az-bg-elevated);
border-color: var(--az-border);
}
html:not(.dark-mode) #edit-view .edit-header-actions [data-action="download-pdf"]::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2348484A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") center/18px 18px no-repeat,
var(--az-bg-elevated);
}
html:not(.dark-mode) #edit-view .edit-header-actions [data-action="share-document"]::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2348484A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center/18px 18px no-repeat,
var(--az-bg-elevated);
}
html:not(.dark-mode) #edit-view .edit-header-actions [data-action="cancel-edit"]::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2348484A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center/18px 18px no-repeat,
var(--az-bg-elevated);
}
#edit-view .edit-header-actions [data-action="edit-fields"]::after {
content: "Modifier";
color: var(--az-text-secondary);
}
#edit-view .edit-header-actions [data-action="edit-fields"]::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E") center/18px 18px no-repeat,
var(--az-bg-elevated);
border-color: var(--az-border);
}
html:not(.dark-mode) #edit-view .edit-header-actions [data-action="edit-fields"]::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2348484A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E") center/18px 18px no-repeat,
var(--az-bg-elevated);
}
#edit-view.sealed-preview {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
#edit-view.sealed-preview .page-header {
padding: var(--az-sm) 0;
background: var(--az-bg-app);
flex-shrink: 0;
}
#edit-view.sealed-preview .edit-invoice-container {
display: flex;
flex-direction: column;
gap: 0;
}
#edit-view.sealed-preview .invoice-preview-toolbar {
display: none;
}
#edit-view.sealed-preview .invoice-preview-stage {
padding: var(--az-sm);
background: var(--az-bg-app);
}
#edit-view.sealed-preview .invoice-preview-zoom {
border: none;
box-shadow: none;
padding: 0;
border-radius: var(--az-radius-lg);
background: transparent;
}
#edit-view.sealed-preview .invoice-preview-zoom .invoice-iframe {
border-radius: var(--az-radius-lg);
box-shadow: var(--az-shadow-lg);
}
#edit-view .edit-invoice-controls {
display: flex;
flex-direction: column;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: calc(var(--az-z-modal) + 2);
background: var(--az-bg-surface);
border-radius: var(--az-radius-lg) var(--az-radius-lg) 0 0;
box-shadow: var(--az-shadow-lg);
max-height: min(70vh, calc(100vh - 120px));
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
padding: var(--az-lg);
padding-bottom: calc(var(--az-lg) + env(safe-area-inset-bottom));
box-sizing: border-box;
width: 100%;
max-width: 100vw;
}
#edit-view .edit-invoice-controls * {
max-width: 100%;
box-sizing: border-box;
}
#edit-view .edit-invoice-controls.mobile-sheet-open {
transform: translateY(0);
}
#edit-view .edit-invoice-controls.mobile-sheet-open.editor-keyboard-open {
transform: translateY(calc(-1 * var(--editor-keyboard-h, 0px)));
max-height: calc(100vh - var(--editor-keyboard-h, 0px) - 60px);
transition: transform 0.2s ease, max-height 0.2s ease;
}
#edit-view .edit-invoice-controls::before {
content: "";
display: block;
width: 36px;
height: 4px;
border-radius: var(--az-radius-pill);
background: var(--az-text-muted);
margin: 0 auto var(--az-lg);
flex-shrink: 0;
}
#edit-view .editor-sheet-overlay {
display: none;
position: fixed;
inset: 0;
background: var(--az-overlay-bg);
z-index: calc(var(--az-z-modal) + 1);
}
#edit-view .editor-sheet-overlay.active {
display: block;
}
#edit-view .edit-invoice-controls .editor-tabs-row {
margin-bottom: var(--az-md);
display: flex;
align-items: stretch;
gap: var(--az-sm);
}
#edit-view .edit-invoice-controls .editor-section-segmented {
flex: 1;
min-width: 0;
}
#edit-view .editor-section-btn {
min-height: var(--az-touch-min);
padding: var(--az-md) var(--az-md-plus);
font-size: var(--az-text-md);
}
#edit-view .editor-settings-btn {
width: var(--az-touch-min);
min-width: var(--az-touch-min);
min-height: var(--az-touch-min);
flex-shrink: 0;
}
#edit-view .edit-section {
padding: var(--az-md) var(--az-md);
border-radius: var(--az-radius-md);
margin-bottom: var(--az-md);
}
#edit-view .line-input-console-inline {
width: 100%;
overflow: hidden;
}
#edit-view .edit-invoice-container {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
margin-top: 0;
}
.invoice-preview-wrapper {
flex: 1;
min-height: 0;
overflow-y: visible;
overflow-x: hidden;
width: 100%;
}
.invoice-preview-stage {
overflow-x: hidden;
overflow-y: visible;
width: 100%;
padding: var(--az-xs);
display: flex;
justify-content: center;
}
.invoice-preview-zoom {
--az-a4-width: 794px;
--az-preview-scale: 0.47;
transform: scale(var(--az-preview-scale));
transform-origin: top center;
padding: 0;
border-radius: var(--az-radius-md);
width: var(--az-a4-width);
max-width: var(--az-a4-width);
flex-shrink: 0;
border: none;
box-shadow: none;
margin-left: calc(-1 * var(--az-a4-width) * (1 - var(--az-preview-scale)) / 2);
margin-right: calc(-1 * var(--az-a4-width) * (1 - var(--az-preview-scale)) / 2);
}
.invoice-preview-zoom .invoice-iframe {
width: 210mm;
min-height: 297mm;
border-radius: var(--az-radius-sm);
box-shadow: var(--az-shadow-lg);
}
.invoice-preview-toolbar-chip {
display: none;
}
.modal {
padding: var(--az-md);
padding-top: max(var(--az-md), env(safe-area-inset-top, 0px));
align-items: flex-end;
}
.modal-content,
.client-modal {
max-height: calc(90vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
max-height: calc(90dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
border-radius: var(--az-radius-lg) var(--az-radius-lg) 0 0;
}
.modal.modal-fullpage {
align-items: center;
justify-content: center;
padding-inline: var(--az-lg);
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.modal.modal-fullpage .modal-content,
.modal.modal-fullpage .client-modal {
border-radius: var(--az-radius-lg);
}
#settings-view .form-grid-2 {
grid-template-columns: 1fr;
gap: var(--az-sm);
}
.modal .form-grid-2 {
grid-template-columns: 1fr 1fr;
gap: var(--az-sm) var(--az-md);
}
.fiscal-regime-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.fiscal-regime-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
#settings-view .settings-sticky-header {
position: sticky;
top: 0;
z-index: var(--az-z-dropdown);
background: var(--az-bg-app);
border-bottom: none;
}
#settings-view .page-header {
flex-direction: row;
align-items: center;
text-align: left;
gap: var(--az-sm);
margin-bottom: 0;
padding-top: max(var(--az-lg), calc(var(--az-sm) + env(safe-area-inset-top, 0px)));
padding-bottom: var(--az-md);
position: relative;
top: auto;
z-index: auto;
background: transparent;
border-bottom: none;
}
#settings-view .page-header-content {
width: 100%;
margin: 0;
}
#settings-view .page-header .page-title {
text-align: left;
margin-bottom: var(--az-xs);
font-size: var(--az-text-xl);
width: auto;
}
#settings-view .page-header .page-subtitle {
display: inline-flex;
font-size: var(--az-text-sm);
text-align: left;
}
#settings-view .settings-theme-btn-left,
#settings-view .settings-theme-btn-right {
display: none;
}
#settings-view .settings-quick-actions {
display: none;
}
#settings-view .settings-quick-actions .btn-assistant-header {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
padding: 0 var(--az-3xl);
min-height: var(--az-touch-min);
border-radius: var(--az-radius-md);
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
background: var(--az-btn-inv-bg);
border: none;
color: var(--az-btn-inv-text);
}
#settings-view .settings-quick-actions .btn-assistant-header span {
display: inline;
}
#settings-view .settings-quick-actions .btn-assistant-header i {
color: var(--az-btn-inv-text);
}
#settings-view .settings-sidebar {
display: block;
position: static;
top: auto;
left: auto;
right: auto;
z-index: auto;
background: transparent;
padding: var(--az-xs) 0;
margin-bottom: 0;
border-bottom: none;
width: 100%;
}
#settings-view .settings-theme-toggle-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
position: absolute;
right: var(--az-page-pad);
top: var(--az-header-pad-top);
z-index: 2;
}
#settings-view .settings-theme-toggle-nav .theme-option {
width: 36px;
height: 36px;
font-size: var(--az-text-md);
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: var(--az-radius-pill);
background: transparent;
color: var(--az-text-muted);
cursor: pointer;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast);
}
#settings-view .settings-theme-toggle-nav .theme-option:first-child {
border-radius: var(--az-radius-pill);
}
#settings-view .settings-theme-toggle-nav .theme-option:last-child {
border-radius: var(--az-radius-pill);
}
#settings-view .settings-theme-toggle-nav .theme-option.active {
background: var(--az-bg-elevated);
border: none;
color: var(--az-text-primary);
box-shadow: var(--az-shadow-sm);
}
#settings-view .settings-nav-list {
display: flex;
flex-direction: row;
gap: var(--az-xs);
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding: var(--az-segment-track-pad);
margin: 0;
background: var(--az-segment-track-bg);
border-radius: var(--az-radius-pill);
}
#settings-view .settings-nav-list::-webkit-scrollbar { display: none; }
#settings-view .settings-nav-item {
flex: 1;
min-width: 0;
}
#settings-view .settings-nav-link {
padding: var(--az-sm) 0;
min-height: var(--az-touch-min);
width: 100%;
border-radius: var(--az-radius-pill);
justify-content: center;
position: relative;
border: none;
flex-direction: row;
gap: var(--az-xs);
white-space: nowrap;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast);
}
#settings-view .settings-nav-link {
flex-direction: column;
gap: 2px;
padding: var(--az-xs) var(--az-sm);
}
#settings-view .settings-nav-link span:not(.settings-nav-icon):not(.currency-symbol-sm):not(.settings-nav-dot):not(.nav-badge) {
display: block;
font-size: var(--az-text-2xs, 10px);
font-weight: var(--az-font-medium, 500);
line-height: 1;
text-align: center;
white-space: nowrap;
}
#settings-view .settings-nav-icon {
font-size: var(--az-text-lg);
line-height: 1;
}
#settings-view .settings-nav-dot {
display: none;
}
#settings-view .settings-nav-assistant-slot {
width: 100%;
}
#settings-view .settings-nav-assistant-slot .settings-assistant-launcher {
width: 100%;
}
#settings-view .settings-nav-assistant-slot .btn-assistant-settings {
padding: var(--az-xs-plus) var(--az-xs);
min-height: var(--az-touch-min);
width: 100%;
border-radius: var(--az-radius-xl);
font-size: var(--az-text-xs);
gap: var(--az-2xs);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1;
}
#settings-view .settings-nav-assistant-slot .btn-assistant-settings span {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
#settings-view .settings-nav-assistant-slot .btn-assistant-settings {
background: var(--az-btn-inv-bg);
border: none;
color: var(--az-btn-inv-text);
transition: color var(--az-transition-ease), background-color var(--az-transition-ease), border-color var(--az-transition-ease), opacity var(--az-transition-ease);
min-height: var(--az-touch-min);
padding: var(--az-xs-plus) var(--az-sm);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
}
#settings-view .settings-nav-assistant-slot .btn-assistant-settings.active,
#settings-view .settings-nav-assistant-slot .btn-assistant-settings:active {
background: var(--az-btn-inv-bg-hover);
color: var(--az-btn-inv-text);
opacity: 0.85;
}
#settings-view .settings-nav-link.active {
background: var(--az-segment-active-bg);
box-shadow: var(--az-segment-active-shadow);
color: var(--az-segment-active-color);
text-shadow: 0 0 0.6px currentColor;
}
.messagerie-nav {
margin-bottom: 0;
}
.messagerie-nav-list {
display: flex;
flex-direction: row;
gap: var(--az-xs);
width: 100%;
background: var(--az-segment-track-bg);
border-radius: var(--az-radius-pill);
padding: var(--az-segment-track-pad);
}
.messagerie-nav-item {
flex: 1;
min-width: 0;
}
.messagerie-nav-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
gap: var(--az-2xs);
padding: var(--az-sm) var(--az-xs);
min-height: var(--az-touch-min);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-2xs);
text-align: center;
white-space: nowrap;
border: none;
background: transparent;
color: var(--az-text-secondary);
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast);
}
.messagerie-nav-link .messagerie-nav-icon {
font-size: var(--az-text-sm);
}
.messagerie-nav-link.active {
background: var(--az-segment-active-bg);
box-shadow: var(--az-segment-active-shadow);
color: var(--az-segment-active-color);
text-shadow: 0 0 0.6px currentColor;
}
#messagerie .messagerie-tab-content > .form-section,
#messagerie .comm-template-preview,
#messagerie .smtp-status-bar,
#messagerie .reminder-config-section {
background: var(--az-bg-card);
border-radius: var(--az-rev-card-radius);
box-shadow: var(--az-rev-card-shadow);
border: none;
}
#settings-view .settings-section {
padding: var(--az-lg-plus) var(--az-lg);
margin-bottom: 0;
background: var(--az-bg-card);
border-radius: var(--az-rev-card-radius);
box-shadow: var(--az-rev-card-shadow);
border: none;
}
#settings-view .settings-section-header {
margin-bottom: var(--az-lg);
padding-bottom: 0;
border-bottom: none;
align-items: center;
}
#settings-view .settings-section-title {
font-size: var(--az-text-lg);
text-align: left;
white-space: normal;
word-break: break-word;
}
#settings-view .settings-section-header.collapsible {
min-height: var(--az-touch-min);
}
#settings-view .settings-section-description {
font-size: var(--az-text-xs);
text-align: left;
margin-top: var(--az-xs);
white-space: normal;
word-break: break-word;
}
#settings-view .form-label,
#settings-view .form-label-compact {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
text-transform: none;
letter-spacing: normal;
}
#settings-view .form-group {
gap: var(--az-xs);
margin-bottom: var(--az-sm);
}
#settings-view .settings-container {
display: flex;
flex-direction: column;
gap: var(--az-section-gap);
padding-top: var(--az-lg);
}
#settings-view .settings-content {
display: flex;
flex-direction: column;
width: 100%;
}
.settings-sub-nav {
padding: 0 var(--az-md);
gap: var(--az-2xs);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.settings-sub-nav::-webkit-scrollbar { display: none; }
.settings-sub-tab {
flex: 0 0 auto;
white-space: nowrap;
padding: var(--az-sm) var(--az-md);
font-size: var(--az-text-xs);
}
.charges-picker-grid,
.charges-types-list-container {
grid-template-columns: 1fr;
gap: var(--az-sm-plus);
}
.charges-picker-panel {
padding: var(--az-md);
}
.charges-picker-card,
.charge-type-card {
padding: var(--az-md) var(--az-lg);
display: flex;
flex-direction: row;
align-items: center;
gap: var(--az-md);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
min-height: var(--az-5xl);
}
.charges-picker-card-icon,
.charge-type-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: var(--az-3xl);
height: var(--az-3xl);
flex-shrink: 0;
color: var(--az-text-muted);
opacity: 0.6;
}
.charges-picker-card-info,
.charge-type-card-info {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1;
min-width: 0;
}
.charge-type-card-header {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--az-md);
flex: 1;
min-width: 0;
}
.charges-picker-card-label,
.charge-type-card-label {
text-align: left;
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
}
.charges-picker-card-desc,
.charge-type-card-desc {
font-size: var(--az-text-xs);
text-align: left;
color: var(--az-text-muted);
}
.charges-picker-check {
position: static;
flex-shrink: 0;
margin-left: auto;
}
.charge-type-card-amount {
margin-top: 0;
padding: var(--az-xs-plus) var(--az-sm-plus);
min-width: 90px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: flex-end;
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
height: var(--az-touch-min);
}
.charge-amount-tag {
font-size: var(--az-text-xs);
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-sm);
font-weight: var(--az-font-medium);
}
.charge-amount-tag.variable {
background: var(--az-amber-bg);
color: var(--az-amber);
}
.charge-type-toggle-add-btn {
width: var(--az-touch-min);
height: var(--az-touch-min);
}
.charge-type-remove-btn {
position: static;
opacity: 0.4;
width: var(--az-3xl);
height: var(--az-3xl);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin-left: var(--az-xs);
flex-shrink: 0;
}
.charge-amount-input {
width: auto;
max-width: 80px;
padding: 0;
font-size: var(--az-text-lg-plus);
text-align: right;
background: transparent;
border: none;
outline: none;
box-shadow: none;
margin: 0;
color: var(--az-text-primary);
font-weight: var(--az-font-normal);
font-variant-numeric: tabular-nums;
}
.charge-amount-suffix {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
white-space: nowrap;
margin-left: var(--az-xs);
}
#color-picker-modal .modal-content {
max-width: 100%;
}
#color-picker-modal .modal-header {
padding: var(--az-lg);
}
#color-picker-modal .modal-body {
padding: var(--az-lg);
}
#color-picker-modal .modal-footer {
padding: var(--az-md-plus) var(--az-lg);
}
.color-picker-preview {
height: var(--az-touch-min);
}
.color-picker-presets {
gap: var(--az-xs-plus);
}
#documents-sort-chips,
#transactions-sort-chips,
#clients-sort-chips {
min-height: calc(var(--az-touch-min) + var(--az-sm));
padding: var(--az-sm) 0;
justify-content: flex-start;
flex-wrap: wrap;
gap: var(--az-sort-chip-gap);
}
.urssaf-hero-premium {
flex-direction: column;
text-align: center;
}
.urssaf-monthly-grid {
grid-template-columns: repeat(3, 1fr);
}
.urssaf-details-grid {
grid-template-columns: 1fr;
}
.fiscal-overview-grid {
grid-template-columns: 1fr;
}
.fiscal-ir-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--az-sm);
}
.fiscal-ir-card {
padding: var(--az-md-plus);
}
.ir-rate-value {
font-size: var(--az-text-lg);
}
.ir-amount {
flex-wrap: wrap;
}
.ir-amount-value {
font-size: var(--az-text-md);
}
.recettes-header-premium {
flex-direction: column;
}
.recettes-stats-premium {
gap: var(--az-sm);
padding: var(--az-sm-plus) var(--az-md);
}
.recettes-stat-sep {
display: none;
}
.recettes-stat-item {
flex: 1;
flex-direction: column;
gap: var(--az-2xs);
align-items: center;
}
.recettes-stat-value {
font-size: var(--az-text-md);
}
.recettes-stat-label {
font-size: var(--az-text-xs);
}
.chart-subtitle,
.recettes-legal {
text-align: left;
}
.settings-form .form-input,
.settings-form .form-textarea {
padding: var(--az-xs-plus) var(--az-md);
min-height: var(--az-3xl);
}
.settings-form #email-subject,
.settings-form #email-body,
.settings-form #email-signature {
font-size: var(--az-text-md);
}
.comm-template-split { grid-template-columns: 1fr; }
.settings-export-info {
width: 100%;
}
.notification-slide {
border-left: none;
}
.notification-slide.active {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
column-gap: var(--az-md);
row-gap: var(--az-xs);
padding: var(--az-lg) var(--az-lg);
align-items: baseline;
align-content: center;
text-align: left;
}
.notification-slide > .notification-icon {
display: none;
}
.notification-slide > .notification-content {
display: contents;
}
.notification-slide .notification-title {
grid-column: 1;
grid-row: 1;
min-width: 0;
font-size: var(--az-text-md);
text-transform: uppercase;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.notification-slide .notification-amount,
.notification-slide .notification-amount-premium {
grid-column: 2;
grid-row: 1;
font-size: var(--az-text-lg);
text-align: right;
}
.notification-slide .notification-description {
grid-column: 1;
grid-row: 2;
font-size: var(--az-text-sm);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.notification-slide > .notification-badge {
grid-column: 2;
grid-row: 2;
justify-self: end;
align-self: center;
}
[data-tooltip]:active::after,
[data-tooltip]:focus::after {
opacity: 1;
}
.finance-kpi-card [data-tooltip]::after {
left: auto;
right: 0;
transform: none;
}
.recettes-desktop-view {
display: none;
}
.recettes-mobile-view {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.recettes-mobile-show-more {
display: flex;
margin-top: var(--az-sm);
border-radius: var(--az-radius-md);
border: 1px solid var(--az-border);
}
.recette-card {
background: transparent;
border: none;
border-bottom: 1px solid var(--az-border);
border-radius: 0;
padding: var(--az-md-plus) 0;
}
.recette-card-row {
display: flex;
justify-content: space-between;
gap: var(--az-md);
margin-bottom: var(--az-xs-plus);
}
.recette-card-field {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
font-size: var(--az-text-sm);
color: var(--az-text-primary);
}
.recette-card-row .recette-card-field:nth-child(2) {
text-align: right;
align-items: flex-end;
}
.recette-card-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-muted);
}
.recette-card-amount {
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
gap: var(--az-2xs);
padding-top: var(--az-xs-plus);
border-top: none;
margin-top: var(--az-xs);
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
}
.recette-card-total {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--az-md-plus) 0;
background: transparent;
border: none;
border-top: 1px solid var(--az-border);
border-radius: 0;
font-size: var(--az-text-md);
color: var(--az-text-primary);
}
.recettes-mobile-view.show-more-collapsed .recette-card:nth-child(n+6) {
display: none;
}
.recettes-mobile-view.show-more-collapsed .recette-card-total {
display: none;
}
.export-cards-grid {
grid-template-columns: 1fr;
}
.export-stats-overview {
flex-direction: column;
gap: var(--az-md);
}
.export-stat-divider {
width: 100%;
height: 1px;
}
.fiscal-charts-row {
grid-template-columns: 1fr;
gap: var(--az-sm);
}
.chart-doughnut .center-value {
font-size: var(--az-text-md);
}
.fiscal-charts-row .chart-title-group h2,
.fiscal-charts-row .chart-title-group h4 {
font-size: var(--az-text-sm);
}
.fiscal-charts-row .chart-subtitle {
display: none;
}
.charges-pro-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--az-sm);
}
.charge-pro-card {
padding: var(--az-md);
}
.charge-pro-header {
gap: var(--az-sm);
}
.charge-pro-label {
font-size: var(--az-text-sm);
}
.charge-pro-desc {
display: none;
}
.charge-pro-value {
font-size: var(--az-text-md);
}
.charge-pro-value-row {
flex-direction: column;
gap: var(--az-2xs);
}
.onboarding-activity-grid {
grid-template-columns: repeat(2, 1fr);
}
.onboarding-regime-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.onboarding-dual-inputs {
grid-template-columns: 1fr;
}
.premium-wrapper {
flex-direction: column;
}
.premium-left {
padding: var(--az-lg);
}
.premium-right {
display: none;
}
.offer-header {
flex-direction: column;
align-items: flex-start;
gap: var(--az-sm);
}
.premium-value-card {
padding: var(--az-lg);
}
.sub-page-content {
padding: var(--az-lg);
}
.sub-hero {
margin-bottom: var(--az-md);
}
.sub-toggle-wrap {
margin-bottom: var(--az-md);
}
.sub-hero-title {
font-size: var(--az-text-xl);
}
.sub-cards {
grid-template-columns: 1fr;
}
.sub-card {
padding: var(--az-lg);
}
.sub-card-price {
font-size: var(--az-text-2xl);
}
.sub-guarantees {
flex-direction: column;
align-items: center;
gap: var(--az-md);
}
.sub-cta,
.sub-toggle-btn,
.sub-faq-q {
min-height: var(--az-touch-min);
}
.sub-card-badge {
font-size: var(--az-text-3xs);
}
.sub-status-gold-hero {
flex-direction: column;
align-items: flex-start;
gap: var(--az-md);
margin-bottom: var(--az-lg);
}
.sub-status-gold-perks {
gap: var(--az-xs);
}
.sub-cards--triple {
grid-template-columns: 1fr;
}
.sub-gold-header {
flex-direction: column;
align-items: flex-start;
gap: var(--az-md);
}
.sub-gold-features {
grid-template-columns: 1fr;
gap: var(--az-lg);
}
.line-input-inline-fields {
grid-template-columns: 1fr;
}
.fiche-desktop-sections {
display: none;
}
.mobile-accordion-section {
display: block;
}
.fiche-hero-row {
flex-direction: column;
align-items: flex-start;
}
.form-input,
.form-input-compact,
.form-textarea,
.form-select,
.form-select-compact {
font-size: var(--az-text-md);
min-height: var(--az-touch-min);
padding: var(--az-xs) var(--az-md);
}
.onboarding-field .onboarding-input::placeholder,
.onboarding-field .onboarding-textarea::placeholder,
.onboarding-step .onboarding-input::placeholder,
.onboarding-step .onboarding-textarea::placeholder {
font-size: var(--az-text-md);
color: var(--az-text-muted);
}
.btn,
.nav-link,
.settings-nav-link,
.messagerie-nav-link,
.onboarding-activity-card,
.onboarding-regime-card,
.filter-option,
.suggestion-item,
.action-select-btn,
.sort-chip {
min-height: var(--az-touch-min);
}
.btn-icon-premium {
width: var(--az-touch-min);
height: var(--az-touch-min);
}
#clients .data-list-row:not(.mobile-month-group-row),
#transactions .data-list-row:not(.mobile-month-group-row) {
display: grid;
grid-template-columns: var(--az-touch-min) 1fr auto 28px;
gap: 0 var(--az-md);
align-items: center;
padding: var(--az-lg) var(--az-md);
border-bottom: 1px solid var(--az-border);
border-top: none;
margin-bottom: 0;
background: transparent;
border-radius: 0;
}
#documents-view .data-list-row:not(.mobile-month-group-row) {
display: grid;
grid-template-columns: var(--az-touch-min) 1fr auto 28px;
grid-template-rows: auto auto;
row-gap: var(--az-xs);
column-gap: var(--az-md);
align-items: center;
padding: var(--az-lg) var(--az-md);
border-bottom: 1px solid var(--az-border);
border-top: none;
margin-bottom: 0;
background: transparent;
border-radius: 0;
}
#documents-view .data-list-row .doc-avatar {
grid-row: 1 / 3;
grid-column: 1;
align-self: center;
}
#documents-view .dl-primary .dl-name {
grid-row: 1;
grid-column: 2;
}
#documents-view .mobile-amount-status {
grid-row: 1;
grid-column: 3;
}
#documents-view .mobile-actions-row .mobile-doc-ref {
grid-row: 2;
grid-column: 2;
}
#documents-view .mobile-actions-row .mobile-status {
grid-row: 2;
grid-column: 3;
justify-self: end;
}
#documents-view .data-list-row > .mobile-row-chevron {
grid-column: 4;
grid-row: 1 / span 2;
align-self: center;
justify-self: center;
width: 28px;
}
#clients .data-list-row > .mobile-row-chevron,
#transactions .data-list-row > .mobile-row-chevron {
grid-column: 4;
grid-row: 1;
align-self: center;
justify-self: center;
width: 28px;
}
#clients .data-list-row + .data-list-row,
#transactions .data-list-row + .data-list-row,
#documents-view .data-list-row + .data-list-row {
border-top: none;
}
#clients .data-list-wrap.show-more-collapsed .data-list-row:nth-child(n + 6),
#transactions .data-list-wrap.show-more-collapsed .data-list-row:nth-child(n + 6),
#documents-view .data-list-wrap.show-more-collapsed .data-list-row:nth-child(n + 6) {
display: none;
}
#clients .data-list-row > .dl-col,
#transactions .data-list-row > .dl-col,
#documents-view .data-list-row > .dl-col {
padding: 0;
border: none;
width: auto;
}
#clients .dl-primary,
#transactions .dl-primary,
#documents-view .dl-primary {
display: contents;
}
.modal {
align-items: flex-end;
justify-content: flex-end;
padding: 0;
}
.modal-content,
.client-modal {
max-width: 100%;
max-height: 92vh;
max-height: 92dvh;
border-radius: var(--az-radius-xl) var(--az-radius-xl) 0 0;
animation: az-slideUp 0.3s ease;
}
.modal-content:has(.wizard-layout) {
animation: none;
border-radius: 0;
}
.modal-content:has(.wizard-layout)::before {
display: none;
}
@keyframes az-slideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.modal-content::before,
.client-modal::before {
content: "";
display: block;
width: var(--az-3xl);
height: var(--az-xs);
background: var(--az-text-secondary);
border-radius: var(--az-radius-pill);
margin: var(--az-sm) auto var(--az-xs);
opacity: 0.7;
flex-shrink: 0;
}
.modal-body {
overflow-y: auto;
}
.modal-body .form-input:focus,
.modal-body .form-textarea:focus,
.modal-body .form-select:focus {
scroll-margin-block: calc(var(--az-touch-min) + var(--az-lg));
}
.modal-header,
.client-modal-header {
padding: var(--az-sm) var(--az-lg) var(--az-md);
border-bottom: none;
}
.modal-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
}
.modal-body,
.client-modal-body {
padding: var(--az-md) var(--az-lg);
}
.modal-footer,
.client-modal-footer {
padding: var(--az-md) var(--az-lg) calc(var(--az-lg) + env(safe-area-inset-bottom, 0px));
gap: var(--az-sm);
}
.modal-close {
width: var(--az-touch-min);
height: var(--az-touch-min);
font-size: var(--az-text-2xl);
border-radius: var(--az-radius-md);
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
#confirm-modal .modal-content {
max-height: 60vh;
max-height: 60dvh;
}
.modal-body .form-group {
gap: var(--az-xs);
margin-bottom: var(--az-sm-plus);
}
.modal-body .form-label,
.modal-body .form-label-compact {
font-size: var(--az-text-md);
}
.modal-body .form-input,
.modal-body .form-input-compact,
.modal-body .form-textarea,
.modal-body .form-select,
.modal-body .form-select-compact {
padding: var(--az-xs-plus) var(--az-sm-plus);
min-height: var(--az-3xl);
}
select,
select.form-input,
select.form-input-compact,
.form-select,
.form-select-compact {
text-align: left;
-webkit-appearance: menulist;
appearance: menulist;
}
.modal-body .action-select-btn {
justify-content: space-between;
padding: 0 var(--az-md);
font-size: var(--az-text-lg);
}
.mobile-accordion-header {
padding: var(--az-sm-plus) var(--az-md-plus);
min-height: var(--az-touch-min);
}
.mobile-accordion-title {
font-size: var(--az-text-sm);
}
.mobile-accordion-inner {
padding: var(--az-md);
}
.badge,
.kpi-status-pill,
.mini-badge {
font-size: var(--az-text-sm);
min-height: var(--az-lg-plus);
}
.notification-badge {
font-size: var(--az-text-xs);
}
.bottom-nav-label {
font-size: var(--az-text-xs);
}
.legend-item,
.chart-legend-inline,
.chart-period {
font-size: var(--az-text-sm);
}
.urssaf-detail-card,
.quarterly-card,
#comptabilite .kpi-grid .kpi-card-premium,
#comptabilite .kpi-grid .cockpit-widget {
overflow: hidden;
word-break: break-word;
}
.urssaf-detail-card .detail-value,
.urssaf-detail-card .detail-label,
.quarterly-card .quarterly-value {
overflow: hidden;
text-overflow: ellipsis;
}
#clients .table-actions-mobile {
display: none;
}
.filters-desktop {
display: none;
}
#clients .dl-primary {
display: contents;
}
#clients .dl-primary .dl-name,
#documents-view .dl-primary .dl-name {
display: block;
grid-row: 1;
grid-column: 2;
min-width: 0;
max-width: none;
overflow: hidden;
font-weight: var(--az-font-semibold);
font-size: var(--az-text-lg-plus);
line-height: 1.3;
color: var(--az-text-primary);
text-overflow: ellipsis;
}
.mobile-rank-dot {
display: flex;
align-items: center;
justify-content: center;
width: var(--az-xl);
height: var(--az-xl);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-xs);
font-weight: var(--az-font-bold);
margin-top: var(--az-2xs);
align-self: flex-end;
font-variant-numeric: tabular-nums;
}
.mobile-rank-dot.rank-gold {
background: var(--az-amber-bg);
color: var(--az-amber);
}
.mobile-rank-dot.rank-silver {
background: var(--az-bg-card-hover);
color: var(--az-text-tertiary);
}
.mobile-rank-dot.rank-bronze {
background: var(--az-bronze-bg);
color: var(--az-bronze);
}
.mobile-rank-dot.rank-top10 {
background: var(--az-indigo-bg);
color: var(--az-indigo);
}
.mobile-rank-dot.rank-other {
background: var(--az-bg-elevated);
color: var(--az-text-tertiary);
}
.toolbar-mobile-icons {
display: flex;
gap: var(--az-2xs);
flex-shrink: 0;
}
.toolbar-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--az-touch-min);
height: var(--az-touch-min);
background: transparent;
border: none;
border-radius: var(--az-radius-lg);
color: var(--az-text-tertiary);
cursor: pointer;
position: relative;
-webkit-tap-highlight-color: transparent;
}
.toolbar-icon-btn:active {
color: var(--az-text-primary);
}
.toolbar-icon-btn i {
font-size: var(--az-text-xl);
line-height: 1;
}
.toolbar-icon-badge {
display: none;
position: absolute;
top: var(--az-xs);
right: var(--az-xs);
width: var(--az-xs-plus);
height: var(--az-xs-plus);
background: var(--az-blue);
border-radius: var(--az-radius-pill);
}
.toolbar-icon-btn.has-active-filter .toolbar-icon-badge {
display: block;
}
#tracking .data-list .dl-detail,
#tracking .data-list .dl-value {
display: none;
}
#tracking .data-list .dl-primary {
grid-column: 1;
display: grid;
grid-template-columns: var(--az-card-grid-cols);
grid-template-rows: auto auto;
gap: var(--az-card-grid-gap-y) var(--az-card-grid-gap-x);
align-items: start;
width: 100%;
}
#tracking .dl-primary .doc-avatar,
#tracking .dl-primary .client-avatar,
#tracking .dl-primary .client-info-cell .mobile-client-detail,
#tracking .trk-tracking-dots-mobile {
display: block;
}
#tracking .dl-primary .doc-avatar,
#tracking .dl-primary .client-avatar {
grid-row: 1;
grid-column: 1;
align-self: start;
display: flex;
}
#tracking .dl-primary .client-info-cell {
grid-row: 1;
grid-column: 2;
min-width: 0;
}
#tracking .dl-primary .client-info-cell .dl-name {
font-size: var(--az-text-lg-plus);
}
#tracking .dl-primary .mobile-right-stack {
display: contents;
}
#tracking .dl-primary .mobile-amount-status {
grid-row: 1;
grid-column: 3;
text-align: right;
}
#tracking .dl-primary .mobile-actions-row {
display: none;
}
#tracking .trk-tracking-dots-mobile {
display: flex;
align-items: center;
}
#tracking .trk-tracking-dots-mobile .trk-tracking-dots {
gap: var(--az-xs-plus);
}
#tracking .trk-secondary-row {
grid-template-columns: 1fr;
}
#tracking .trk-funnel-row {
grid-template-columns: auto 1fr auto auto;
}
#tracking .trk-funnel-value,
#tracking .trk-funnel-pct {
display: block;
}
#tracking .trk-funnel-label {
min-width: 60px;
font-size: var(--az-text-xs);
}
#tracking .trk-feed-list {
max-height: 260px;
}
#tracking .trk-search-wrap {
max-width: none;
width: 100%;
}
#tracking .trk-search-input {
font-size: var(--az-text-lg);
padding: var(--az-sm-plus) var(--az-md-plus) var(--az-sm-plus) var(--az-3xl);
border-radius: var(--az-radius-lg-plus);
min-height: var(--az-touch-min);
}
#tracking .trk-tabs {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: var(--az-xs);
border-bottom: none;
background: var(--az-segment-track-bg);
border-radius: var(--az-radius-pill);
padding: var(--az-segment-track-pad);
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}
#tracking .trk-tabs::-webkit-scrollbar { display: none; }
#tracking .trk-tab {
flex: 1 0 auto;
white-space: nowrap;
padding: var(--az-xs) var(--az-sm);
font-size: var(--az-text-xs);
min-height: var(--az-touch-min);
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-xs);
border-radius: var(--az-radius-pill);
border: none;
color: var(--az-text-secondary);
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast);
}
#tracking .trk-tab.active {
background: var(--az-segment-active-bg);
box-shadow: var(--az-segment-active-shadow);
color: var(--az-segment-active-color);
text-shadow: 0 0 0.6px currentColor;
}
#tracking .trk-secondary-row .cockpit-widget,
#tracking .trk-funnel-widget,
#tracking .trk-feed-widget {
background: var(--az-bg-card);
border-radius: var(--az-rev-card-radius);
box-shadow: var(--az-rev-card-shadow);
border: none;
}
#coffre-fort .vault-toolbar {
flex-direction: column;
align-items: stretch;
gap: var(--az-sm);
padding: 0;
margin-bottom: 0;
border-bottom: none;
}
#coffre-fort .vault-toolbar-left {
flex-direction: column;
align-items: stretch;
gap: var(--az-sm);
}
#coffre-fort .vault-search-box {
max-width: none;
width: 100%;
}
#coffre-fort .vault-search-box i {
font-size: var(--az-text-lg);
}
#coffre-fort .vault-search-box input {
min-height: var(--az-touch-min);
font-size: var(--az-text-sm);
padding-top: var(--az-sm);
padding-right: var(--az-md);
padding-bottom: var(--az-sm);
padding-left: var(--az-3xl);
border-radius: var(--az-radius-lg);
}
#coffre-fort .vault-filter-chips {
flex-wrap: wrap;
gap: var(--az-sm);
padding-bottom: var(--az-xs);
}
#coffre-fort .vault-chip {
min-height: var(--az-touch-min);
padding: var(--az-sm) var(--az-md);
font-size: var(--az-text-md);
border-radius: var(--az-radius-pill);
}
#coffre-fort .vault-storage {
margin-left: 0;
margin-right: 0;
margin-bottom: var(--az-sm);
}
#coffre-fort .vault-storage-dot {
display: none;
}
#coffre-fort .vault-storage-track {
height: var(--az-sm);
border-radius: var(--az-radius-pill);
}
#coffre-fort .vault-storage-label,
#coffre-fort .vault-storage-value {
font-size: var(--az-text-md);
}
#coffre-fort .vault-drop-compact { display: none; }
#coffre-fort .vault-drop-zone:has(.vault-drop-compact) { display: none; }
#coffre-fort .vault-select-all {
min-height: var(--az-touch-min);
padding: var(--az-sm) 0;
}
#coffre-fort .vault-select-all input[type="checkbox"],
#coffre-fort .vault-item-check input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--az-blue);
}
#coffre-fort .vault-select-all label {
font-size: var(--az-text-sm);
}
#coffre-fort .vault-item {
flex-direction: row;
align-items: center;
gap: var(--az-sm);
padding: var(--az-md) 0;
margin-bottom: 0;
background: transparent;
border: none;
border-bottom: 1px solid var(--az-border);
border-radius: 0;
}
#coffre-fort .vault-item-body {
flex: 1;
min-width: 0;
}
#coffre-fort .vault-item-icon {
background: none;
border-radius: 0;
width: 20px;
height: 20px;
font-size: var(--az-text-lg);
}
#coffre-fort .vault-item-icon[class*="cat-"] {
background: none;
}
#coffre-fort .vault-item-icon.cat-autre {
color: var(--az-blue);
}
#coffre-fort .vault-item-name {
display: flex;
align-items: center;
gap: var(--az-sm);
}
#coffre-fort .vault-item-filename {
display: block;
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
#coffre-fort .vault-item-meta,
#coffre-fort .vault-item-info {
flex-wrap: wrap;
gap: var(--az-xs);
}
#coffre-fort .vault-item-amount {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
#coffre-fort .vault-inline-actions {
opacity: 1;
flex-shrink: 0;
gap: 0;
}
#coffre-fort .vault-inline-actions .btn-icon-premium {
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
background: transparent;
border-radius: 0;
}
#coffre-fort .vault-item-check {
opacity: 1;
flex-shrink: 0;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: flex-start;
}
#coffre-fort .vault-bulk-bar {
padding-bottom: calc(var(--az-md) + env(safe-area-inset-bottom, 0px));
}
#coffre-fort .vault-drop-zone {
padding: var(--az-lg);
}
#coffre-fort .vault-toolbar-right {
display: none;
}
#coffre-fort .vault-group-header {
min-height: var(--az-touch-min);
padding: var(--az-sm) 0;
}
#coffre-fort .page-header .btn.btn-sm {
min-height: var(--az-touch-min);
min-width: var(--az-touch-min);
font-size: var(--az-text-sm);
}
.mobile-action-sheet-item.vault-cat-option {
grid-template-columns: 24px 1fr 20px;
}
.vault-cat-check {
opacity: 0;
color: var(--az-blue);
font-size: var(--az-text-lg);
font-weight: var(--az-font-bold);
text-align: right;
transition: opacity 0.15s ease;
}
.vault-cat-option.selected .vault-cat-check {
opacity: 1;
}
.vault-cat-footer {
display: flex;
flex-direction: column;
gap: var(--az-sm);
padding: var(--az-md) var(--az-lg);
}
.vault-cat-validate {
width: 100%;
padding: var(--az-md);
border: none;
border-radius: var(--az-radius-lg);
background: var(--az-bg-elevated);
color: var(--az-text-muted);
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
min-height: var(--az-touch-min);
cursor: not-allowed;
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.vault-cat-validate--active {
background: var(--az-text-primary);
color: var(--az-bg-primary);
cursor: pointer;
}
.timeline-urssaf {
font-size: var(--az-text-xs);
white-space: nowrap;
}
#recurring .recurring-table thead { display: none; }
#recurring .recurring-td-desktop { display: none; }
#recurring .recurring-mobile-card {
display: grid;
grid-template-columns: var(--az-card-grid-cols);
grid-template-rows: auto auto;
gap: var(--az-card-grid-gap-y) var(--az-card-grid-gap-x);
align-items: start;
width: 100%;
}
#recurring .recurring-mobile-card .client-avatar {
grid-row: 1;
grid-column: 1;
align-self: start;
display: flex;
}
#recurring .recurring-mobile-card .client-info-cell {
grid-row: 1;
grid-column: 2;
min-width: 0;
}
#recurring .recurring-mobile-card .client-info-cell .client-name {
font-size: var(--az-text-lg-plus);
}
#recurring .recurring-mobile-card .mobile-right-stack {
display: contents;
}
#recurring .recurring-mobile-card .mobile-amount-status {
grid-row: 1;
grid-column: 3;
text-align: right;
}
#recurring .recurring-mobile-card .mobile-actions-row {
grid-row: 2;
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-sm);
margin-top: var(--az-xs-plus);
padding-top: 0;
border-top: none;
}
.recurring-transactions { padding: var(--az-md); }
#recurring .recurring-table td {
white-space: normal;
border-bottom: none;
}
#recurring .recurring-table tbody tr {
border-bottom: 1px solid var(--az-border);
}
#recurring .recurring-table tbody tr:last-child {
border-bottom: none;
}
#recurring .table-toolbar {
flex-wrap: nowrap;
gap: var(--az-sm);
}
#recurring .table-toolbar .toolbar-search {
flex: 1;
min-width: 0;
}
#recurring .table-toolbar .filters {
display: none;
}
.admin-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
flex-wrap: nowrap;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab {
flex: 0 0 auto;
padding: var(--az-sm) var(--az-md);
font-size: var(--az-text-xs);
white-space: nowrap;
min-height: var(--az-touch-min);
display: flex;
align-items: center;
}
.admin-tab i {
font-size: var(--az-text-sm);
}
#admin-view .settings-export-buttons {
flex-direction: column;
}
#admin-view .settings-export-buttons .btn {
width: 100%;
justify-content: center;
}
#edit-view .edit-header-actions [data-action="create-recurring-from-editor"] {
display: none;
}
.admin-password-toggle {
width: var(--az-touch-min);
height: var(--az-touch-min);
}
.reminder-params-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--az-xs) var(--az-sm);
}
.reminder-param-label {
white-space: nowrap;
font-weight: var(--az-font-medium);
font-size: var(--az-text-sm);
}
.reminder-param-sep {
display: none;
}
.reminder-param-input {
width: 64px;
min-height: var(--az-touch-min);
font-size: var(--az-text-lg-plus);  
text-align: center;
}
.reminder-param-select {
flex: 1;
min-width: 0;
min-height: var(--az-touch-min);
font-size: var(--az-text-lg-plus);
}
.smtp-status-bar {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--az-sm);
}
.smtp-status-actions {
display: flex;
gap: var(--az-xs);
flex-shrink: 0;
}
.smtp-action-btn {
min-height: var(--az-touch-min);
}
.comm-template-preview {
padding: var(--az-lg);
}
.settings-password-toggle {
min-width: var(--az-touch-min);
min-height: var(--az-touch-min);
display: flex;
align-items: center;
justify-content: center;
}
.fiscal-disclaimer {
flex-direction: column;
align-items: flex-start;
gap: var(--az-xs);
}
#coffre-fort .vault-category-card-wrap {
width: auto;
flex: 1 1 calc(50% - var(--az-sm));
min-width: 100px;
}
#dashboard.page {
position: relative;
}
#dashboard > * { order: 50; }
#dashboard .dashboard-header > * { order: 50; }
#dashboard .dash-toolbar-left             { order: 1; }
#dashboard .page-header-content           { order: 2; display: none; }
#dashboard-mobile-hero                    { order: 3; display: flex; }
#dashboard .dash-toolbar-actions          { order: 4; }
#dashboard-mobile-chips                   { order: 5; }
#dashboard .dash-transactions             { order: 6; }
#dashboard-mobile-minis                   { order: 7; }
#dashboard .dash-objectives               { order: 8; }
#dashboard .dash-evolution-ca             { order: 9; }
#dashboard .dash-charts-grid              { order: 10; }
#dashboard .quarterly-section             { order: 11; }
#dashboard-welcome-card                   { order: 12; }
#dashboard .dash-overdue                  { order: 13; }
#dashboard .dash-shortcuts                { order: 14; }
#dashboard .dash-toolbar-left {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--az-sm);
padding-top: max(var(--az-lg), calc(var(--az-sm) + env(safe-area-inset-top, 0px)));
width: 100%;
position: relative;
}
#dashboard .dash-toolbar-left .search-compact {
flex: 1;
min-width: 0;
max-width: none;
}
#dashboard .dash-toolbar-left .search-input-compact {
width: 100%;
min-height: var(--az-touch-min);
padding: var(--az-sm-plus) var(--az-md-plus) var(--az-sm-plus) var(--az-3xl);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg-plus);
font-size: var(--az-text-lg);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
}
#dashboard .dash-toolbar-left .search-input-compact::placeholder {
color: var(--az-text-muted);
}
#dashboard .dash-toolbar-left .search-icon {
color: var(--az-text-secondary);
}
.rev-topbar-avatar {
display: flex;
align-items: center;
justify-content: center;
width: var(--az-rev-topbar-icon-size);
height: var(--az-rev-topbar-icon-size);
min-width: var(--az-rev-topbar-icon-size);
border-radius: var(--az-rev-topbar-icon-radius);
background: var(--az-avatar-placeholder);
color: var(--az-text-on-accent);
font-size: var(--az-rev-label);
font-weight: var(--az-font-semibold);
flex-shrink: 0;
cursor: pointer;
background-size: cover;
background-position: center;
overflow: hidden;
position: relative;
}
.rev-topbar-avatar.has-photo {
color: transparent;
}
.rev-profile-dropdown {
position: absolute;
top: calc(var(--az-rev-topbar-icon-size) + var(--az-sm));
left: 0;
z-index: var(--az-z-dropdown);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-xl);
box-shadow: var(--az-shadow-dropdown);
min-width: 260px;
overflow: hidden;
animation: revProfileIn 0.18s ease-out;
}
.rev-profile-dropdown.hidden {
display: none;
}
@keyframes revProfileIn {
from { opacity: 0; transform: translateY(calc(var(--az-sm) * -1)) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.rev-profile-header {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-lg);
}
.rev-profile-avatar-lg {
width: var(--az-3xl);
height: var(--az-3xl);
min-width: var(--az-3xl);
border-radius: var(--az-radius-pill);
background: var(--az-blue);
color: var(--az-text-on-accent);
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center;
overflow: hidden;
}
.rev-profile-avatar-lg.has-photo {
color: transparent;
}
.rev-profile-info {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
min-width: 0;
}
.rev-profile-name {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rev-profile-email {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rev-profile-divider {
height: 1px;
background: var(--az-border);
margin: 0 var(--az-lg);
}
.rev-profile-actions {
padding: var(--az-sm) 0;
}
.rev-profile-action {
display: flex;
align-items: center;
gap: var(--az-md);
width: 100%;
padding: var(--az-md) var(--az-lg);
background: none;
border: none;
cursor: pointer;
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
transition: background 0.12s ease;
-webkit-tap-highlight-color: transparent;
}
.rev-profile-action:active {
background: var(--az-bg-card-hover);
}
.rev-profile-action i {
font-size: var(--az-text-lg);
color: var(--az-text-secondary);
width: var(--az-xl);
text-align: center;
}
.rev-profile-logout {
color: var(--az-red);
}
.rev-profile-logout i {
color: var(--az-red);
}
.rev-profile-overlay {
position: fixed;
inset: 0;
z-index: calc(var(--az-z-dropdown) - 1);
background: transparent;
}
.rev-topbar-icon {
display: flex;
align-items: center;
justify-content: center;
width: var(--az-rev-topbar-icon-size);
height: var(--az-rev-topbar-icon-size);
min-width: var(--az-rev-topbar-icon-size);
border-radius: var(--az-rev-topbar-icon-radius);
background: rgba(0,0,0,0.06);
border: none;
cursor: pointer;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
.rev-topbar-icon i {
font-size: var(--az-text-lg);
color: var(--az-text-primary);
}
.rev-topbar-icon:active {
filter: brightness(0.92);
background: var(--az-bg-card-hover);
}
#dashboard .dash-toolbar-actions {
display: flex;
justify-content: space-around;
gap: 0;
width: 100%;
overflow: visible;
padding-bottom: var(--az-lg);
}
#dashboard .dash-toolbar-actions > * {
flex: 1 1 0;
min-width: 0;
}
#dashboard .dash-toolbar-actions .dash-action-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-xs);
padding: 0;
background: transparent;
border: none;
border-radius: 0;
min-height: auto;
backdrop-filter: none;
-webkit-backdrop-filter: none;
white-space: normal;
-webkit-tap-highlight-color: transparent;
}
#dashboard .dash-toolbar-actions .dash-action-btn i {
display: flex;
align-items: center;
justify-content: center;
width: var(--az-rev-hero-circle-size);
height: var(--az-rev-hero-circle-size);
border-radius: var(--az-rev-hero-circle-radius);
background: var(--az-action-circle-bg);
border: none;
font-size: var(--az-text-xl);
color: var(--az-text-primary);
}
#dashboard .dash-toolbar-actions .dash-action-btn span {
font-size: var(--az-rev-hero-action-label);
color: var(--az-text-primary);
font-weight: var(--az-font-medium);
}
#dashboard .dash-toolbar-actions .dash-action-btn:active i {
filter: brightness(0.92);
background: var(--az-bg-card-hover);
}
#dashboard .dash-transactions {
display: block;
background: var(--az-bg-card);
border-radius: var(--az-rev-card-radius);
box-shadow: var(--az-rev-card-shadow);
padding: 0;
}
#dashboard .dash-transactions > .widget-header {
padding: var(--az-rev-card-pad);
padding-bottom: 0;
}
#dashboard .dash-transactions-table thead {
display: none;
}
#dashboard .dash-transactions-table tbody tr {
display: grid;
grid-template-columns: var(--az-rev-avatar) 1fr auto;
gap: 0 var(--az-rev-card-pad);
align-items: center;
padding: var(--az-rev-row-pad);
border-bottom: 1px solid var(--az-border);
}
#dashboard .dash-transactions-table tbody tr:last-child {
border-bottom: none;
}
#dashboard .dash-transactions-table td {
padding: 0;
border: none;
white-space: normal;
font-size: var(--az-rev-row-subtitle);
letter-spacing: var(--az-rev-tracking);
}
#dashboard .dash-transactions-table td:nth-child(1) {
grid-row: 1 / 3;
display: flex;
align-items: center;
justify-content: center;
width: var(--az-rev-avatar);
height: var(--az-rev-avatar);
background: transparent;
border: none;
border-radius: 0;
overflow: visible;
}
#dashboard .dash-transactions-table td:nth-child(1) .transaction-avatar {
width: var(--az-rev-avatar);
height: var(--az-rev-avatar);
font-size: var(--az-text-xs);
}
#dashboard .dash-transactions-table td:nth-child(2) {
grid-column: 2;
grid-row: 1;
font-weight: var(--az-font-semibold);
color: var(--az-rev-text-primary);
font-size: var(--az-rev-row-title);
letter-spacing: var(--az-rev-tracking);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#dashboard .dash-transactions-table td:nth-child(3) {
grid-column: 2;
grid-row: 2;
font-size: var(--az-text-md);
font-weight: var(--az-font-normal);
letter-spacing: var(--az-rev-tracking);
color: var(--az-rev-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#dashboard .dash-transactions-table td:nth-child(4) {
display: none;
}
#dashboard .dash-transactions-table td:nth-child(5) {
grid-column: 3;
grid-row: 1;
text-align: right;
font-weight: var(--az-font-semibold);
font-variant-numeric: tabular-nums;
color: var(--az-text-primary);
font-size: var(--az-text-lg-plus);
letter-spacing: var(--az-rev-tracking);
}
#dashboard .dash-transactions-table td:nth-child(6) {
grid-column: 3;
grid-row: 2;
text-align: right;
font-size: var(--az-text-xs);
}
#dashboard .dashboard-news-section {
background: var(--az-bg-card);
border-radius: var(--az-rev-card-radius);
box-shadow: var(--az-rev-card-shadow);
overflow: hidden;
}
#dashboard .notification-slide.active {
padding: var(--az-rev-banner-pad);
}
#dashboard .notification-slide .notification-title {
font-size: var(--az-rev-banner-title);
font-weight: var(--az-font-medium);
letter-spacing: var(--az-rev-tracking-banner);
color: var(--az-rev-text-banner-title);
text-transform: none;
}
#dashboard .notification-slide .notification-description {
font-size: var(--az-rev-banner-body);
font-weight: var(--az-font-normal);
letter-spacing: var(--az-rev-tracking);
color: var(--az-rev-text-banner);
line-height: 22px;
}
#dashboard .carousel-indicator {
width: var(--az-xs-plus);
height: var(--az-xs-plus);
border-radius: var(--az-radius-pill);
background: var(--az-rev-dot-inactive);
}
#dashboard .carousel-indicator.active {
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
background: var(--az-rev-dot-active);
}
#dashboard.page {
gap: var(--az-section-gap);
}
#dashboard .cockpit-widget,
#dashboard .dash-objectives {
background: var(--az-bg-card);
border-radius: var(--az-rev-card-radius);
box-shadow: var(--az-rev-card-shadow);
border: none;
padding: var(--az-lg);
}
#dashboard .cockpit-widget > .widget-header,
#dashboard .dash-objectives > .widget-header {
padding: 0 0 var(--az-sm);
}
#dashboard .cockpit-widget .chart-title,
#dashboard .dash-objectives .chart-title,
#dashboard .dash-transactions .chart-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
text-transform: none;
letter-spacing: var(--az-rev-tracking);
color: var(--az-text-secondary);
}
#dashboard .cockpit-widget .widget-subtitle {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
text-transform: none;
letter-spacing: normal;
font-weight: normal;
}
#dashboard .dash-widget-link,
#dashboard .cockpit-widget .widget-header a {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
#dashboard .dash-evolution-ca .chart-wrapper,
#dashboard .dash-charts-grid .chart-wrapper {
min-height: 180px;
max-height: 220px;
}
#dashboard .dash-evolution-ca .chart-wrapper canvas,
#dashboard .dash-charts-grid .chart-wrapper canvas {
max-height: 200px;
}
#dashboard .dash-charts-grid {
display: flex;
flex-direction: column;
gap: var(--az-lg);
}
#dashboard .dash-shortcuts-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--az-md);
justify-items: center;
}
#dashboard .dash-shortcut-icon {
width: 56px;
height: 56px;
background: var(--az-bg-elevated);
border: none;
border-radius: 50%;
}
#dashboard .dash-shortcut-icon i {
font-size: 24px;
color: var(--az-text-secondary);
}
#dashboard .dash-shortcut-label {
font-size: var(--az-text-xs);
}
.mobile-chips-empty-state {
padding: var(--az-lg-plus);
text-align: center;
color: var(--az-text-secondary);
}
.mobile-chips-empty-icon {
font-size: var(--az-text-2xl-plus);
margin-bottom: var(--az-sm);
}
.mobile-chips-empty-text {
font-size: var(--az-text-sm);
}
#clients .table-toolbar .filters,
#clients .table-actions-mobile,
#transactions .table-toolbar .filters,
#transactions .table-actions-mobile,
#documents-view .table-toolbar .filters,
#documents-view .table-actions-mobile {
display: none;
}
#documents-view .documents-hero,
#documents-desktop-hero {
display: none;
}
.mobile-hero-kpi {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--az-lg) var(--az-lg) var(--az-sm);
text-align: center;
gap: var(--az-2xs);
}
.mobile-hero-kpi .hero-value {
font-size: clamp(var(--az-text-2xl), 9vw, var(--az-text-4xl));
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
letter-spacing: -1.5px;
line-height: 1;
}
.mobile-hero-kpi .hero-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
letter-spacing: 0.4px;
color: var(--az-text-secondary);
opacity: 0.8;
text-transform: uppercase;
}
.mobile-hero-kpi .hero-label .hero-label-period {
margin-left: var(--az-xs);
padding-left: var(--az-sm);
border-left: 1px solid var(--az-border);
text-transform: uppercase;
letter-spacing: 0.4px;
color: inherit;
}
.mobile-hero-kpi .hero-trend {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-xs);
font-weight: var(--az-font-normal);
margin-top: var(--az-xs);
color: var(--az-text-tertiary);
}
.mobile-hero-kpi .hero-trend.positive { color: var(--az-green); }
.mobile-hero-kpi .hero-trend.negative { color: var(--az-red); }
.mobile-hero-kpi .hero-trend.neutral { color: var(--az-text-muted); }
.hero-period-pill {
appearance: none;
border: 1px solid var(--az-border);
background: var(--az-bg-tertiary);
color: var(--az-text-secondary);
font-family: inherit;
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
letter-spacing: -0.2px;
padding: 4px var(--az-md);
border-radius: var(--az-radius-pill);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--az-xs);
margin-top: var(--az-md);
min-height: 32px;
transition: background 0.15s ease, border-color 0.15s ease;
-webkit-tap-highlight-color: transparent;
white-space: nowrap;
}
.hero-period-pill i {
font-size: 10px;
color: var(--az-text-muted);
transition: transform 0.2s ease;
}
.hero-period-pill:active {
background: var(--az-bg-card-hover);
border-color: var(--az-text-muted);
}
.mobile-period-chips {
display: none;
}
#dashboard-mobile-minis .mobile-section-title {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
letter-spacing: var(--az-tracking-tight);
color: var(--az-text-primary);
margin-bottom: var(--az-lg);
}
.mobile-mini-kpis {
display: flex;
overflow-x: auto;
gap: var(--az-sm);
padding: 0 0 var(--az-sm);
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.mobile-mini-kpis::-webkit-scrollbar {
display: none;
}
.mobile-mini-kpis .mobile-mini-kpi {
flex: none;
min-width: 0;
width: auto;
}
.mobile-mini-kpi {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: var(--az-md) var(--az-lg);
scroll-snap-align: start;
background: var(--az-bg-card);
border: none;
border-radius: var(--az-rev-card-radius);
box-shadow: var(--az-rev-card-shadow);
text-align: left;
gap: var(--az-xs);
flex: 1 1 0%;
min-width: 0;
min-height: auto;
}
.mobile-mini-kpi .mini-value {
font-size: var(--az-rev-kpi-value);
font-weight: var(--az-font-semibold);
color: var(--az-rev-text-primary);
font-variant-numeric: tabular-nums;
letter-spacing: var(--az-rev-tracking-tight);
white-space: nowrap;
}
.mobile-mini-kpi .mini-label {
font-size: var(--az-rev-label);
font-weight: var(--az-font-normal);
color: var(--az-rev-text-secondary);
letter-spacing: var(--az-rev-tracking);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.mobile-mini-kpi .mini-trend {
font-size: var(--az-rev-banner-body);
font-weight: var(--az-font-normal);
}
.mobile-mini-kpi .mini-trend.positive { color: var(--az-green); }
.mobile-mini-kpi .mini-trend.negative { color: var(--az-red); }
.skeleton-chip {
width: var(--az-4xl);
height: var(--az-3xl);
border-radius: var(--az-radius-pill);
}
.skeleton-hero-value {
width: 60%;
height: var(--az-4xl);
border-radius: var(--az-radius-lg);
margin: 0 auto;
}
.skeleton-hero-label {
width: 40%;
height: var(--az-lg);
border-radius: var(--az-radius-sm);
margin: var(--az-sm) auto 0;
}
.skeleton-mini-value {
width: 70%;
height: var(--az-xl);
border-radius: var(--az-radius-sm);
}
.skeleton-mini-label {
width: 50%;
height: var(--az-md);
border-radius: var(--az-radius-sm);
margin-top: var(--az-xs);
}
.mini-sparkline {
width: 100%;
height: var(--az-xl);
margin-top: auto;
border-radius: var(--az-radius-sm);
}
#dashboard .kpi-grid,
#dashboard .cockpit-widget-grid,
#dashboard .dash-kpi-row,
#clients .kpi-grid,
#clients .cockpit-widget-grid,
#transactions .kpi-grid,
#transactions .cockpit-widget-grid,
#documents-view .kpi-grid,
#documents-view .cockpit-widget-grid {
display: none;
}
#clients .page-subtitle,
#transactions .page-subtitle,
#documents-view .page-subtitle,
#rapports .page-subtitle {
display: inline-flex;
}
.mobile-details-title,
.section-title-mobile-details {
display: none;
}
.mobile-subtitle-stats {
display: flex;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
font-weight: var(--az-font-normal);
flex-wrap: wrap;
}
.mobile-subtitle-stats .stat-separator {
color: var(--az-text-muted);
}
.mobile-search-toolbar {
display: flex;
align-items: center;
gap: var(--az-sm);
margin-bottom: var(--az-lg);
}
.mobile-search-toolbar .search-input-compact {
flex: 1;
min-height: var(--az-touch-min);
font-size: var(--az-text-lg);
padding: var(--az-sm-plus) var(--az-md-plus) var(--az-sm-plus) var(--az-3xl);
border-radius: var(--az-radius-lg-plus);
}
.mobile-search-toolbar .mobile-add-btn {
display: flex;
align-items: center;
justify-content: center;
width: var(--az-touch-min);
height: var(--az-touch-min);
border-radius: var(--az-radius-pill);
background: var(--az-blue);
color: var(--az-text-primary);
border: none;
cursor: pointer;
flex-shrink: 0;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast);
font-size: var(--az-text-xl);
}
.mobile-search-toolbar .mobile-add-btn:active {
filter: brightness(0.92);
}
.mobile-segment-control {
display: flex;
background: rgba(0,0,0,0.06);
border-radius: var(--az-radius-lg-plus);
padding: var(--az-xs);
margin-bottom: var(--az-sm);
gap: 0;
}
.mobile-segment-control .segment-btn {
flex: 1;
padding: var(--az-xs) var(--az-sm);
border-radius: var(--az-radius-lg);
border: none;
background: transparent;
color: var(--az-text-tertiary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: color 0.2s ease, text-shadow 0.2s ease;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
line-height: 1;
}
.mobile-segment-control .segment-btn.active {
background: var(--az-bg-card, #fff);
color: var(--az-text-primary);
text-shadow: 0 0 0.6px currentColor;
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}
.mobile-month-group {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
padding: var(--az-xl) 0 var(--az-sm) 0;
}
.mobile-month-group .month-group-label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
text-transform: var(--az-heading-transform);
letter-spacing: 0.01em;
white-space: nowrap;
}
.mobile-month-group .month-group-line {
display: none;
}
.mobile-month-group-row {
display: block;
grid-column: 1 / -1;
background: transparent;
border: none;
padding: 0;
}
.mobile-month-group-row td {
padding: var(--az-lg) 0 var(--az-sm) 0;
border: none;
background: transparent;
display: block;
width: 100%;
}
.mobile-month-group-row:first-child td {
padding-top: var(--az-sm);
}
.mobile-month-group-row.is-orphan {
display: none;
}
#documents-view #documents-content-wrapper {
display: flex;
flex-direction: column;
gap: 0;
}
#documents-view #documents-mobile-chips {
order: 1;
margin-bottom: var(--az-md);
}
#documents-view #documents-mobile-segment {
order: 2;
margin-bottom: var(--az-lg);
}
#documents-view #documents-content-wrapper > .table-toolbar {
order: 3;
margin-bottom: var(--az-md);
}
#documents-view #documents-content-wrapper > .table-container,
#documents-view #documents-content-wrapper > .data-list-wrap {
order: 4;
}
#documents-view #documents-content-wrapper > .kpi-grid {
order: 99;
}
#documents-view #documents-content-wrapper > .mobile-details-title {
order: 99;
}
#documents-view #documents-content-wrapper > .table-actions-mobile {
order: 99;
}
#documents-view #documents-content-wrapper > .show-more-btn {
order: 5;
}
#documents-view #documents-filter-sheet,
#documents-view #documents-sort-sheet {
order: 100;
}
#documents-view .table-toolbar {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--az-sm);
flex-wrap: nowrap;
}
#documents-view .table-toolbar .toolbar-search {
flex: 1;
min-width: 0;
}
#documents-view .table-toolbar .search-input-compact {
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg-plus);
min-height: var(--az-touch-min);
font-size: var(--az-text-lg);
padding: var(--az-sm-plus) var(--az-md-plus) var(--az-sm-plus) var(--az-3xl);
width: 100%;
box-sizing: border-box;
color: var(--az-text-primary);
}
#documents-view .table-toolbar .search-input-compact::placeholder {
color: var(--az-text-tertiary);
}
#documents-view .table-toolbar .filters.filters-desktop {
display: none;
}
#documents-view .table-toolbar .actions {
display: none;
}
#documents-view .table-toolbar .filter-reset-btn {
display: none;
}
#documents-view .table-container {
border: none;
border-radius: 0;
overflow-x: hidden;
background: transparent;
box-shadow: none;
}
#documents-view .doc-avatar {
grid-column: 1;
grid-row: 1;
width: var(--az-touch-min);
height: var(--az-touch-min);
border-radius: var(--az-radius-pill);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
margin-right: 0;
}
#documents-view .doc-client-info {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
min-width: 0;
gap: var(--az-xs);
max-width: none;
overflow: hidden;
}
#documents-view .doc-client-info .client-name {
font-size: var(--az-text-lg-plus);
font-weight: var(--az-font-semibold);
line-height: 1.3;
max-width: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#documents-view .mobile-doc-date {
font-size: var(--az-text-md);
color: var(--az-text-secondary);
font-weight: var(--az-font-normal);
line-height: 1.3;
margin-top: 0;
}
#documents-view .mobile-right-stack {
display: contents;
}
#documents-view .mobile-amount-status {
grid-row: 1;
grid-column: 3;
text-align: right;
}
#documents-view .mobile-amount.amount-positive {
color: var(--az-green);
}
#documents-view .mobile-amount.amount-negative {
color: var(--az-red);
}
#documents-view .mobile-month-group {
padding: var(--az-md) 0 var(--az-sm) 0;
justify-content: center;
}
#documents-view .mobile-month-group .month-group-label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
text-transform: var(--az-heading-transform);
letter-spacing: 0.01em;
color: var(--az-text-tertiary);
}
#documents-view .mobile-month-group .month-group-line {
display: none;
}
.mobile-see-all {
display: flex;
justify-content: center;
padding: var(--az-rev-row-pad);
border-top: 1px solid var(--az-border);
}
.mobile-see-all a,
.mobile-see-all button {
font-size: var(--az-rev-link);
font-weight: var(--az-font-medium);
color: var(--az-rev-accent);
background: none;
border: none;
cursor: pointer;
transition: color var(--az-transition-fast);
-webkit-tap-highlight-color: transparent;
}
.mobile-see-all a:active,
.mobile-see-all button:active {
filter: brightness(0.92);
}
@supports (padding: env(safe-area-inset-top)) {
.main-content {
padding-top: 0;
padding-bottom: calc(var(--az-bottom-nav-h) + var(--az-sm-plus) + env(safe-area-inset-bottom));
padding-left: calc(var(--az-page-pad) + env(safe-area-inset-left));
padding-right: calc(var(--az-page-pad) + env(safe-area-inset-right));
}
.page-header {
padding-top: calc(var(--az-lg) + env(safe-area-inset-top));
}
.bottom-nav {
padding-bottom: env(safe-area-inset-bottom);
}
.modal {
padding-bottom: env(safe-area-inset-bottom);
}
}
.toast-container {
left: var(--az-md);
right: var(--az-md);
max-width: none;
}
.toast-container.top-right,
.toast-container.top-left,
.toast-container.top-center {
top: calc(var(--az-md) + env(safe-area-inset-top));
transform: none;
}
.toast-container.bottom-right,
.toast-container.bottom-left,
.toast-container.bottom-center {
bottom: calc(var(--az-md) + env(safe-area-inset-bottom, 0px));
transform: none;
}
.toast-premium {
min-width: auto;
max-width: none;
}
.plafond-alert-toast {
bottom: calc(var(--az-bottom-nav-h) + var(--az-lg));
right: var(--az-lg);
left: var(--az-lg);
max-width: none;
}
.premium-page {
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
#rapports .rapports-content,
#rapports #rapports-tab-content {
display: flex;
flex-direction: column;
gap: var(--az-section-gap);
}
#rapports .rapports-synthese,
#rapports .rapports-fiscal-premium,
#rapports .rapports-urssaf-premium {
display: flex;
flex-direction: column;
gap: var(--az-section-gap);
}
#rapports .fiscal-ir-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--az-kpi-grid-gap);
}
#rapports .fiscal-ir-card {
background: var(--az-bg-card);
border-radius: var(--az-rev-card-radius);
box-shadow: var(--az-rev-card-shadow);
padding: var(--az-lg);
border: none;
}
#rapports .fiscal-charts-row {
grid-template-columns: 1fr;
gap: var(--az-kpi-grid-gap);
}
#rapports .charges-pro-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--az-kpi-grid-gap);
}
#rapports .charge-pro-card {
background: var(--az-bg-card);
border-radius: var(--az-rev-card-radius);
box-shadow: var(--az-rev-card-shadow);
padding: var(--az-lg);
border: none;
}
#rapports .urssaf-detail-card {
background: var(--az-bg-card);
border-radius: var(--az-rev-card-radius);
box-shadow: var(--az-rev-card-shadow);
padding: var(--az-lg);
border: none;
}
#rapports .urssaf-monthly-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--az-xs-plus);
}
#rapports .monthly-period-card {
background: var(--az-bg-elevated);
border: none;
border-radius: var(--az-radius-md);
padding: var(--az-sm);
}
#rapports .monthly-period-card.active {
background: var(--az-segment-active-bg);
border: none;
}
#rapports .monthly-period-card.past {
opacity: 0.5;
}
#rapports .monthly-period-ca {
font-size: var(--az-text-xs);
display: block;
}
#rapports .monthly-period-urssaf {
font-size: 0.65rem;
}
#rapports .monthly-period-header {
margin-bottom: var(--az-2xs);
}
#rapports .export-cards-grid {
grid-template-columns: 1fr;
gap: var(--az-section-gap);
}
#rapports .export-cards-grid .export-card {
background: var(--az-bg-card);
border-radius: var(--az-rev-card-radius);
box-shadow: var(--az-rev-card-shadow);
padding: var(--az-lg);
border: none;
}
#rapports {
scrollbar-width: none;
}
#rapports::-webkit-scrollbar {
display: none;
}
#rapports .card-subtitle {
color: var(--az-text-secondary);
}
#rapports .recette-card .recette-card-row:first-child {
display: none;
}
#rapports .recette-card .recette-card-row:nth-child(3) {
display: none;
}
#rapports .recette-card .recette-card-row:nth-child(2) {
margin-bottom: var(--az-2xs);
}
#rapports .recette-card .recette-card-amount {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-top: 0;
margin-top: 0;
border-top: none;
}
#rapports .recette-card .recette-card-amount .recette-card-label {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
#rapports .recette-card .recette-card-amount span:last-child {
font-weight: var(--az-font-semibold);
font-size: var(--az-text-md);
}
#tracking,
#recurring,
#messagerie {
display: flex;
flex-direction: column;
gap: var(--az-section-gap);
}
.cockpit-widget {
background: var(--az-bg-card);
border-radius: var(--az-rev-card-radius);
box-shadow: var(--az-rev-card-shadow);
border: none;
}
.form-input,
.form-input-compact,
.form-textarea,
.form-textarea-compact,
.form-select,
.form-select-compact,
select.form-input,
select.form-input-compact {
background: var(--az-bg-elevated);
border-color: transparent;
border-radius: var(--az-radius-lg-plus);
}
.form-input:focus,
.form-input-compact:focus,
.form-textarea:focus,
.form-textarea-compact:focus,
.form-select:focus,
.form-select-compact:focus,
select:focus,
.action-select-btn:focus-visible {
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.25);
outline: none;
}
.action-select-btn {
background: var(--az-bg-elevated);
border-color: transparent;
border-radius: var(--az-radius-pill);
}
.action-select-btn:hover,
.action-select-btn:active {
border-color: transparent;
background: var(--az-bg-card-hover);
}
.rapports-tabs {
border: none;
background: transparent;
}
#coffre-fort .page-title,
#recurring .page-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.kpi-card-premium {
box-shadow: var(--az-rev-card-shadow);
border-radius: var(--az-rev-card-radius);
border: none;
}
#coffre-fort,
#comptabilite,
#rapports {
display: flex;
flex-direction: column;
gap: var(--az-section-gap);
}
#messagerie .form-section,
#messagerie .reminder-config-section,
#messagerie .comm-template-preview,
#messagerie .smtp-status-bar {
background: var(--az-bg-card);
border-radius: var(--az-rev-card-radius);
box-shadow: var(--az-rev-card-shadow);
border: none;
padding: var(--az-lg);
}
#settings-view .btn-secondary,
#settings-view .btn-outline {
border-radius: var(--az-radius-pill);
border-color: transparent;
background: var(--az-bg-elevated);
min-height: var(--az-touch-min);
padding: var(--az-sm) var(--az-lg);
}
#settings-view .settings-completion-bar.hidden {
display: none;
}
#settings-view .settings-completion-bar {
border: none;
border-radius: var(--az-rev-card-radius);
box-shadow: var(--az-rev-card-shadow);
background: var(--az-bg-card);
}
#settings-view .settings-section {
background: var(--az-bg-card);
border-radius: var(--az-rev-card-radius);
box-shadow: var(--az-rev-card-shadow);
border: none;
}
#settings-view .settings-sub-nav {
display: flex;
gap: var(--az-xs);
background: var(--az-segment-track-bg);
border-radius: var(--az-radius-pill);
padding: var(--az-segment-track-pad);
border: none;
margin-bottom: var(--az-md);
}
#settings-view .settings-sub-tab {
flex: 1;
background: transparent;
border: none;
border-radius: var(--az-radius-pill);
padding: var(--az-xs-plus) var(--az-md);
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
min-height: var(--az-touch-min);
display: flex;
align-items: center;
justify-content: center;
}
#settings-view .settings-sub-tab.active {
background: var(--az-segment-active-bg);
color: var(--az-segment-active-color);
box-shadow: var(--az-segment-active-shadow);
text-shadow: 0 0 0.6px currentColor;
border-bottom: none;
}
#settings-view .settings-section .btn,
#settings-view .settings-section button[type="submit"] {
width: 100%;
min-height: var(--az-touch-min);
border-radius: var(--az-radius-lg-plus);
margin-top: var(--az-sm);
}
#settings-view .settings-content-section.active {
gap: var(--az-md);
padding: 0 var(--az-lg);
}
#settings-view .settings-section + .settings-section {
margin-top: 0;
}
#settings-view .settings-section label,
#settings-view .settings-section .form-label,
#settings-view .settings-section .form-label-compact,
#settings-view .settings-section .field-label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
text-transform: none;
letter-spacing: normal;
color: var(--az-text-primary);
margin-bottom: 0;
}
#settings-view .settings-section input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not(.rate-edit-value),
#settings-view .settings-section select,
#settings-view .settings-section textarea {
background: var(--az-bg-elevated);
border: none;
border-radius: var(--az-radius-lg-plus);
padding: var(--az-md) var(--az-lg);
font-size: var(--az-text-md);
color: var(--az-text-primary);
min-height: var(--az-touch-min);
width: 100%;
}
#settings-view .settings-section input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not(.rate-edit-value):focus,
#settings-view .settings-section select:focus,
#settings-view .settings-section textarea:focus {
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
outline: none;
}
#settings-view .fiscal-year-pill {
border: none;
background: var(--az-bg-elevated);
border-radius: var(--az-radius-pill);
min-height: var(--az-touch-min);
}
#settings-view .fiscal-year-pill.active {
background: var(--az-segment-active-bg);
color: var(--az-segment-active-color);
box-shadow: var(--az-segment-active-shadow);
}
#settings-view .fiscal-regime-card {
border: none;
background: var(--az-bg-elevated);
border-radius: var(--az-rev-card-radius);
box-shadow: var(--az-rev-card-shadow);
}
#settings-view .fiscal-regime-card.active {
background: rgba(74, 108, 247, 0.08);
box-shadow: 0 0 0 1.5px rgba(74, 108, 247, 0.4), var(--az-rev-card-shadow);
}
#tracking #trk-kpi-row {
grid-template-columns: repeat(2, 1fr);
gap: var(--az-md);
}
#tracking .kpi-grid,
#tracking .cockpit-widget-grid {
gap: var(--az-md);
}
#coffre-fort .vault-search-box input {
background: var(--az-bg-elevated);
border: none;
}
#coffre-fort .vault-search-box input:focus {
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
outline: none;
}
#coffre-fort .vault-chip.active {
background: var(--az-segment-active-bg);
color: var(--az-segment-active-color);
box-shadow: var(--az-segment-active-shadow);
text-shadow: 0 0 0.6px currentColor;
}
#recurring .kpi-grid,
#recurring .cockpit-widget-grid,
#recurring .stats-grid {
gap: var(--az-md);
}
.compta-section-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--az-text-secondary);
margin: 0 0 var(--az-md) 0;
}
.cockpit-widget + .cockpit-widget:not(.kpi-grid .cockpit-widget),
.form-section + .form-section,
.reminder-config-section + .reminder-config-section {
margin-top: var(--az-sm);
}
.kpi-grid .cockpit-widget,
.cockpit-widget-grid .cockpit-widget {
margin-top: 0;
}
html:not(.dark-mode) #dashboard .dash-toolbar-actions .dash-action-btn i {
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
html:not(.dark-mode) #messagerie .messagerie-tab-content > .form-section,
html:not(.dark-mode) #messagerie .comm-template-preview,
html:not(.dark-mode) #messagerie .smtp-status-bar,
html:not(.dark-mode) #messagerie .reminder-config-section {
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
html:not(.dark-mode) #settings-view .settings-section {
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
}
@media (max-width: 600px) {
.form-grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.table-toolbar {
flex-direction: row;
flex-wrap: nowrap;
gap: var(--az-xs-plus);
}
.header-actions {
flex-wrap: wrap;
}
}
@media (max-width: 480px) {
:root {
--az-text-xs: 12px;
--az-text-sm: 13px;
--az-text-md: 14px;
--az-text-xl: 17px;
--az-kpi-pad: var(--az-sm-plus);
--az-kpi-pad-lg: var(--az-sm-plus);
--az-kpi-pad-compta: var(--az-sm-plus);
--az-kpi-value: var(--az-md-plus);
--az-kpi-value-lg: var(--az-md-plus);
--az-kpi-gap: var(--az-2xs);
--az-kpi-gap-lg: var(--az-2xs);
--az-kpi-icon: 26px;
--az-kpi-icon-lg: 26px;
--az-kpi-icon-svg: 13px;
--az-kpi-icon-radius: var(--az-xs-plus);
--az-kpi-label-font: var(--az-text-xs);
--az-kpi-card-min-h: auto;
--az-section-gap: var(--az-lg);
--az-card-pad: var(--az-md) var(--az-md-plus);
--az-card-pad-lg: var(--az-md-plus);
--az-chart-pad: var(--az-md-plus);
--az-header-pad-top: var(--az-xl);
--az-header-pad-bottom: var(--az-md);
--az-sort-chip-gap: var(--az-xs);
--az-sort-chip-pad: var(--az-xs-plus) var(--az-md);
--az-sort-chip-font: 11px;
--az-page-pad: var(--az-lg);
}
.main-content {
padding: 0 var(--az-page-pad);
padding-bottom: calc(var(--az-bottom-nav-h) + var(--az-sm-plus) + env(safe-area-inset-bottom, 0px));
}
.page-title {
letter-spacing: -0.02em;
}
.kpi-grid,
.cockpit-widget-grid,
.dashboard-kpi-grid,
.premium-grid,
#comptabilite .kpi-grid,
.finance-kpi-grid,
.stats-grid,
.dashboard-kpi-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.quarterly-grid {
grid-template-columns: 1fr;
}
.urssaf-monthly-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.doc-col-date,
.doc-col-ref {
display: none;
}
.kpi-card-premium .card-value {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 932px) {
:root {
--az-section-gap: var(--az-sm);
--az-kpi-pad: var(--az-sm) var(--az-sm-plus);
--az-kpi-pad-lg: var(--az-sm) var(--az-sm-plus);
--az-kpi-pad-compta: var(--az-sm) var(--az-sm-plus);
--az-kpi-value: var(--az-md-plus);
--az-kpi-value-lg: var(--az-md-plus);
--az-kpi-gap: var(--az-2xs);
--az-kpi-gap-lg: var(--az-2xs);
--az-kpi-grid-gap: var(--az-xs-plus);
--az-kpi-icon: 22px;
--az-kpi-icon-lg: 22px;
--az-kpi-icon-svg: 11px;
--az-kpi-icon-radius: var(--az-xs-plus);
--az-kpi-label-font: var(--az-text-xs);
--az-kpi-card-min-h: auto;
--az-widget-body-flex: 0 0 auto;
--az-header-pad-top: var(--az-xs);
--az-header-pad-bottom: var(--az-xs);
--az-header-gap: var(--az-xs-plus);
--az-page-pad: var(--az-lg);
--az-card-pad: var(--az-sm) var(--az-sm-plus);
--az-card-pad-lg: var(--az-sm-plus);
--az-chart-pad: var(--az-sm-plus);
--az-chart-grid-gap: var(--az-sm);
--az-sort-chip-pad: var(--az-xs-plus) var(--az-sm-plus);
--az-sort-chip-font: 11px;
--az-text-xs: 12px;
--az-text-sm: 13px;
--az-text-md: 14px;
--az-text-xl: 17px;
}
.mobile-hero-kpi .hero-value {
font-size: var(--az-text-2xl);
}
.app-container {
flex-direction: column;
}
.sidebar-nav {
display: none;
}
.main-content {
padding: 0 var(--az-page-pad);
padding-left: calc(var(--az-page-pad) + env(safe-area-inset-left, 0px));
padding-right: calc(var(--az-page-pad) + env(safe-area-inset-right, 0px));
padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
height: auto;
min-height: 0;
overflow-y: auto;
}
.bottom-nav {
display: flex;
bottom: var(--az-xs);
left: calc(var(--az-xs) + env(safe-area-inset-left, 0px));
right: calc(var(--az-xs) + env(safe-area-inset-right, 0px));
padding: var(--az-2xs) var(--az-xs);
padding-bottom: calc(var(--az-2xs) + env(safe-area-inset-bottom, 0px));
}
.bottom-nav-item {
min-height: var(--az-touch-min);
padding: var(--az-xs) var(--az-sm);
gap: 0;
}
.bottom-nav-label {
display: none;
}
.bottom-nav-icon {
font-size: var(--az-text-2xl);
line-height: 1;
}
body.auth-visible .bottom-nav,
body.edit-view-active .bottom-nav {
display: none;
}
body.keyboard-open .bottom-nav {
opacity: 0;
pointer-events: none;
transform: translateY(100%);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.mobile-app-header {
display: none;
}
.page .page-header,
.view .page-header {
flex-direction: row;
align-items: center;
text-align: left;
gap: var(--az-sm);
padding-top: var(--az-sm);
padding-bottom: var(--az-sm);
margin-bottom: 0;
position: sticky;
top: 0;
z-index: var(--az-z-dropdown);
background: var(--az-bg-app);
}
#dashboard .page-header-content {
flex-direction: row;
text-align: left;
padding-top: var(--az-sm);
padding-bottom: var(--az-sm);
}
.dashboard-news-section {
display: none;
}
.page-header-content {
align-items: flex-start;
text-align: left;
}
.page-title {
font-size: var(--az-text-xl);
margin-bottom: 0;
}
.page-subtitle {
display: none;
}
.cockpit-widget {
padding: var(--az-kpi-pad);
gap: var(--az-kpi-gap);
}
.kpi-card-premium {
padding: var(--az-kpi-pad);
row-gap: var(--az-kpi-gap);
}
.kpi-card-icon {
width: auto;
height: auto;
}
.kpi-card-icon i {
font-size: var(--az-kpi-icon-svg);
line-height: 1;
}
.widget-body {
gap: var(--az-2xs);
}
.card-value {
font-size: var(--az-kpi-value);
}
.card-label {
font-size: var(--az-kpi-label-font);
}
.card-subtitle {
font-size: var(--az-text-2xs);
}
.widget-footer {
padding-top: var(--az-xs);
}
.trend-indicator {
font-size: var(--az-text-2xs);
}
.dashboard-notifications {
margin-bottom: var(--az-xs);
}
.notification-card {
padding: var(--az-sm) var(--az-md);
gap: var(--az-sm);
}
.kpi-grid,
.cockpit-widget-grid,
.dashboard-kpi-grid,
.premium-grid,
#comptabilite .kpi-grid,
.stats-grid,
.finance-kpi-grid,
.dashboard-kpi-row {
grid-template-columns: repeat(4, 1fr);
gap: var(--az-kpi-grid-gap);
align-items: start;
}
.dashboard-kpi-grid {
margin-top: var(--az-sm);
}
.charts-grid,
#dashboard .charts-grid {
grid-template-columns: 1fr 1fr;
}
.quarterly-grid {
grid-template-columns: repeat(4, 1fr);
}
.quarterly-card .quarterly-value {
font-size: var(--az-text-md);
white-space: nowrap;
}
.doc-table th,
.doc-table td {
padding: var(--az-sm) var(--az-sm-plus);
font-size: var(--az-text-xs);
}
.modal {
padding: var(--az-sm);
padding-left: calc(var(--az-sm) + env(safe-area-inset-left, 0px));
padding-right: calc(var(--az-sm) + env(safe-area-inset-right, 0px));
align-items: center;
justify-content: center;
}
.modal-content,
.client-modal {
max-height: calc(100dvh - 16px);
max-width: 600px;
width: 100%;
border-radius: var(--az-radius-lg);
}
.modal-body {
max-height: none;
overflow-y: auto;
}
.form-grid-2 {
grid-template-columns: 1fr 1fr;
}
.settings-sticky-header {
padding: var(--az-sm) var(--az-md);
}
.mobile-action-sheet {
left: 50%;
right: auto;
transform: translate(-50%, 100%);
width: calc(100% - var(--az-2xl) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
max-width: 400px;
border-radius: var(--az-radius-2xl);
bottom: calc(var(--az-sm) + env(safe-area-inset-bottom, 0px));
}
.mobile-action-sheet.active {
transform: translate(-50%, 0);
}
#edit-view.active {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: var(--az-z-modal);
background: var(--az-bg-app);
display: flex;
flex-direction: column;
overflow: hidden;
padding: var(--az-xs);
padding-left: calc(var(--az-xs) + env(safe-area-inset-left, 0px));
padding-right: calc(var(--az-xs) + env(safe-area-inset-right, 0px));
}
#edit-view .page-title,
#edit-view .edit-invoice-controls,
#edit-view .invoice-preview-toolbar,
#edit-view .editor-quick-actions {
display: none;
}
#edit-view .edit-header-actions .btn[data-action="save-document"] {
display: none;
}
#edit-view .edit-header-actions .btn>i {
display: none;
}
#edit-view .edit-pdf-menu,
#edit-view .edit-pdf-caret {
display: none;
}
#edit-view .page-header {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: center;
padding: var(--az-xs) 0;
margin-bottom: 0;
flex-shrink: 0;
}
#edit-view .edit-header-actions {
display: flex;
align-items: flex-end;
justify-content: center;
gap: var(--az-md);
flex-wrap: nowrap;
margin: 0;
width: 100%;
}
#edit-view .edit-invoice-container {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
}
.invoice-preview-wrapper {
flex: 1;
min-height: 0;
overflow-y: visible;
overflow-x: hidden;
width: 100%;
}
.invoice-preview-stage {
overflow-x: hidden;
overflow-y: visible;
width: 100%;
padding: var(--az-xs);
display: flex;
justify-content: center;
}
@supports (padding: env(safe-area-inset-top)) {
.page-header {
padding-top: calc(var(--az-sm) + env(safe-area-inset-top));
}
.modal {
padding-bottom: env(safe-area-inset-bottom);
}
}
}
@media (orientation: landscape) and (max-height: 380px) and (max-width: 932px) {
:root {
--az-kpi-value: var(--az-text-xs);
--az-kpi-value-lg: var(--az-text-md);
--az-kpi-pad: var(--az-xs-plus) var(--az-sm-plus);
--az-kpi-pad-lg: var(--az-sm) var(--az-sm-plus);
--az-kpi-icon: var(--az-xl);
--az-kpi-icon-lg: var(--az-xl);
--az-kpi-icon-svg: var(--az-text-xs-plus);
--az-kpi-label-font: var(--az-text-xs);
--az-page-pad: var(--az-sm);
--az-section-gap: var(--az-xs-plus);
}
.page .page-header,
.view .page-header {
padding-top: var(--az-xs);
padding-bottom: var(--az-xs);
}
#dashboard .page-header-content {
padding-top: var(--az-xs);
padding-bottom: var(--az-xs);
}
.page-title {
font-size: var(--az-text-md);
}
.kpi-grid,
.cockpit-widget-grid,
.dashboard-kpi-grid,
.premium-grid,
#comptabilite .kpi-grid,
.stats-grid,
.dashboard-kpi-row {
grid-template-columns: repeat(2, 1fr);
}
.finance-kpi-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 932px) {
body.keyboard-open .page .page-header,
body.keyboard-open .view .page-header,
body.keyboard-open #dashboard .page-header-content {
display: none;
}
body.keyboard-open .kpi-grid,
body.keyboard-open .cockpit-widget-grid,
body.keyboard-open .dashboard-kpi-grid,
body.keyboard-open .charts-grid,
body.keyboard-open .dashboard-kpi-row {
display: none;
}
body.keyboard-open .form-input:focus,
body.keyboard-open .form-textarea:focus,
body.keyboard-open input:focus,
body.keyboard-open textarea:focus,
body.keyboard-open select:focus {
scroll-margin-block: 8px;
}
body.keyboard-open .main-content {
padding-bottom: var(--az-sm);
}
}
.mobile-action-sheet-overlay {
position: fixed;
inset: 0;
background: var(--az-bg-overlay);
z-index: var(--az-z-toast);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s ease;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.mobile-action-sheet-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.mobile-action-sheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: var(--az-bg-elevated);
border-radius: var(--az-radius-2xl) var(--az-radius-2xl) 0 0;
z-index: calc(var(--az-z-toast) + 1);
transform: translateY(100%);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
opacity 0.2s ease,
visibility 0.2s ease;
box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.3);
overflow: hidden;
max-height: 85vh;
max-height: 85dvh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-action-sheet.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.mobile-action-sheet-header {
position: relative;
display: flex;
align-items: center;
min-height: var(--az-touch-min);
padding: var(--az-md) calc(var(--az-lg) + var(--az-touch-min)) var(--az-md) var(--az-xl);
border-bottom: 1px solid var(--az-border);
}
.mobile-action-sheet-header span {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
}
.mobile-action-sheet-item {
display: grid;
grid-template-columns: 24px 1fr;
align-items: center;
gap: var(--az-md);
width: 100%;
padding: var(--az-md) var(--az-lg);
border: none;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.15s ease;
text-align: left;
min-height: 44px;
}
.mobile-action-sheet-item:active {
background: var(--az-bg-card-hover);
}
.mobile-action-sheet-item:not(:last-child) {
border-bottom: 1px solid var(--az-border);
}
.mobile-action-sheet-item i {
font-size: var(--az-text-lg);
line-height: 1;
min-width: 22px;
flex-shrink: 0;
margin: 0 auto;
display: block;
color: var(--az-text-secondary);
}
.mobile-action-sheet-item span {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
}
.mobile-action-sheet-item.danger i,
.mobile-action-sheet-item.danger span {
color: var(--az-red);
}
.mobile-action-sheet-footer {
padding: 0 var(--az-sm) var(--az-sm);
}
.mobile-action-sheet-cancel {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: var(--az-lg) var(--az-lg-plus);
margin-top: var(--az-sm);
border: none;
border-radius: var(--az-radius-xl);
background: var(--az-bg-elevated);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.mobile-action-sheet-cancel:active {
background: var(--az-bg-card-hover);
}
.action-sheet-grabber {
width: 36px;
height: 5px;
border-radius: var(--az-radius-pill);
background: var(--az-border);
margin: var(--az-sm) auto 0;
}
.action-sheet-ctx-header {
padding: var(--az-lg-plus) calc(var(--az-lg) + var(--az-touch-min)) var(--az-lg) var(--az-xl);
position: sticky;
top: 0;
z-index: 1;
background: var(--az-bg-elevated);
}
.action-sheet-ctx-header > .sheet-close,
.mobile-action-sheet-header > .sheet-close {
right: calc(var(--az-lg) + (var(--sheet-close-size) - var(--az-touch-min)) / 2);
}
.action-sheet-ctx-header > .sheet-close {
top: calc(var(--az-lg-plus) + 0.65 * var(--az-text-lg-plus));
}
.action-sheet-ctx-line1 {
font-size: var(--az-text-lg-plus);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
line-height: 1.3;
letter-spacing: -0.02em;
}
.action-sheet-ctx-ref {
color: var(--az-text-tertiary);
font-weight: var(--az-font-medium);
}
.action-sheet-ctx-dot {
color: var(--az-text-muted);
}
.action-sheet-ctx-line2 {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
margin-top: var(--az-xs-plus);
display: flex;
align-items: center;
gap: var(--az-sm);
}
.action-sheet-ctx-amount {
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-size: var(--az-text-md);
}
.action-sheet-ctx-status {
font-weight: var(--az-font-medium);
font-size: var(--az-text-2xs);
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 3px var(--az-sm);
border-radius: var(--az-radius-pill);
}
.action-sheet-ctx-status.status-paid { color: var(--az-green); background: var(--az-green-bg); }
.action-sheet-ctx-status.status-pending,
.action-sheet-ctx-status.status-sent { color: var(--az-amber); background: var(--az-amber-bg); }
.action-sheet-ctx-status.status-draft { color: var(--az-text-muted); background: var(--az-bg-surface); }
.action-sheet-ctx-status.status-accepted { color: var(--az-green); background: var(--az-green-bg); }
.action-sheet-ctx-status.status-declined { color: var(--az-red); background: var(--az-red-bg); }
.action-sheet-ctx-status.status-partial { color: var(--az-cyan); background: var(--az-cyan-bg); }
.action-sheet-ctx-status.status-finalized { color: var(--az-blue); background: var(--az-blue-bg); }
.action-sheet-list {
padding: var(--az-sm) var(--az-lg);
}
.action-sheet-group {
background: var(--az-bg-card);
border-radius: var(--az-radius-xl);
overflow: hidden;
}
.action-sheet-group + .action-sheet-group {
margin-top: var(--az-sm);
}
.action-sheet-row {
display: flex;
align-items: center;
gap: var(--az-lg);
width: 100%;
padding: 0 var(--az-lg);
height: 48px;
border: none;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 0.1s ease, background-color 0.08s ease;
position: relative;
}
.action-sheet-row:active {
filter: brightness(0.92);
background: var(--az-bg-card-hover);
}
.action-sheet-row + .action-sheet-row::before {
content: '';
position: absolute;
top: 0;
left: calc(var(--az-lg) + 24px + var(--az-lg));
right: 0;
height: 1px;
background: var(--az-border);
}
.action-sheet-row-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
flex-shrink: 0;
}
.action-sheet-row-icon i {
font-size: 22px;
line-height: 1;
color: var(--az-text-secondary);
}
.action-sheet-row-label {
font-size: var(--az-text-lg);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
letter-spacing: -0.01em;
}
.action-sheet-row.primary .action-sheet-row-icon i { color: var(--az-green); }
.action-sheet-row.primary .action-sheet-row-label { color: var(--az-green); font-weight: var(--az-font-semibold); }
.action-sheet-row.danger .action-sheet-row-icon i { color: var(--az-red); }
.action-sheet-row.danger .action-sheet-row-label { color: var(--az-red); }
.action-sheet-divider { display: none; }
.az-fullscreen {
min-height: 100svh;
}
.az-dynamic-height {
height: 100dvh;
}
@supports (view-transition-name: none) {
.page-header {
view-transition-name: page-header;
}
.bottom-nav {
view-transition-name: bottom-nav;
}
::view-transition-old(page-header),
::view-transition-old(bottom-nav) {
animation: 0.2s var(--az-ease-snappy) both az-vt-fade-out;
}
::view-transition-new(page-header),
::view-transition-new(bottom-nav) {
animation: 0.2s var(--az-ease-snappy) both az-vt-fade-in;
}
@keyframes az-vt-fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes az-vt-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
}
@media (max-width: 768px) {
.sim-toolbar {
display: flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-sm) 0;
flex-wrap: nowrap;
overflow: hidden;
}
.sim-toolbar-left {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: var(--az-xs);
overflow: hidden;
}
.sim-toolbar-right {
display: flex;
align-items: center;
gap: var(--az-xs);
flex-shrink: 0;
}
.sim-project-name-display {
font-size: var(--az-text-sm);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
}
.sim-toolbar .sim-save-label {
display: none;
}
.sim-kpi-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--az-sm);
}
.sim-kpi {
padding: var(--az-md);
border-radius: var(--az-radius-lg);
min-width: 0;
}
.sim-kpi-label {
font-size: var(--az-text-xs);
line-height: 1.3;
margin-bottom: var(--az-2xs);
}
.sim-kpi-value {
font-size: var(--az-text-xl-plus);
line-height: 1.2;
font-weight: var(--az-font-semibold);
letter-spacing: -0.02em;
}
.sim-kpi-sub {
font-size: var(--az-text-xs);
margin-top: var(--az-2xs);
line-height: 1.3;
}
.sim-kpi-strong {
grid-column: auto;
}
.sim-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.sim-table,
.sim-table thead,
.sim-table tbody,
.sim-table tfoot,
.sim-table tr,
.sim-table th,
.sim-table td {
display: block;
}
.sim-table thead {
display: none;
}
.sim-table tbody tr.sim-row-main,
.sim-table tbody tr.sim-row-frais {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
padding: var(--az-sm) 0;
border-bottom: 1px solid var(--az-border);
}
.sim-row-main .sim-c-cb,
.sim-row-frais .sim-c-cb {
flex: 0 0 32px;
width: 32px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin-right: var(--az-xs);
order: 0;
}
.sim-row-main .sim-c-libelle,
.sim-row-frais .sim-c-libelle {
flex: 1 1 0;
min-width: 0;
padding: 0 var(--az-xs) 0 0;
order: 1;
}
.sim-row-main .sim-c-libelle .sim-input-libelle,
.sim-row-main .sim-c-libelle .sim-input-frais,
.sim-row-frais .sim-c-libelle .sim-input-libelle,
.sim-row-frais .sim-c-libelle .sim-input-frais {
width: 100%;
font-size: var(--az-text-sm);
min-height: 44px;
padding: 0;
background: transparent;
border: none;
border-bottom: 1px solid var(--az-border);
}
.sim-row-main .sim-c-vente-col {
flex: 0 0 auto;
padding: 0 var(--az-xs);
order: 2;
}
.sim-row-main .sim-c-vente-col .sim-input-suffix {
display: flex;
align-items: center;
}
.sim-row-main td.sim-c-vente-col .sim-input-num,
.sim-row-main .sim-c-vente-col .sim-input-num {
font-size: var(--az-text-sm);
min-height: 44px;
width: 90px;
text-align: right;
}
.sim-row-main .sim-row-tag,
.sim-row-frais .sim-row-tag {
display: none;
}
.sim-card-footer #sim-add-category,
.sim-card-footer #sim-add-frais {
display: none;
}
.sim-row-main .sim-c-actions,
.sim-row-frais .sim-c-actions {
flex: 0 0 auto;
display: flex;
align-items: center;
padding: 0;
order: 3;
}
.sim-row-main .sim-c-net,
.sim-row-main .sim-c-pct {
display: none;
}
.sim-row-main .sim-c-qte,
.sim-row-main .sim-c-achat,
.sim-row-main .sim-c-tva,
.sim-row-main .sim-c-input-num,
.sim-row-main .sim-c-charge,
.sim-row-frais .sim-c-qte,
.sim-row-frais .sim-c-achat,
.sim-row-frais .sim-c-tva,
.sim-row-frais .sim-c-vente-col {
display: none;
}
.sim-row-frais .sim-c-num.sim-cell-empty {
flex: 1 1 100%;
order: 10;
margin-left: 32px;
font-size: var(--az-text-xs);
padding: var(--az-2xs) 0 0;
color: var(--az-text-muted);
}
.sim-row-category {
display: flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs) 0;
border-bottom: 1px solid var(--az-border);
}
.sim-row-category .sim-c-cb {
display: none;
}
.sim-row-category .sim-c-cat {
flex: 1;
padding: 0;
font-weight: var(--az-font-semibold);
font-size: var(--az-text-sm);
}
.sim-row-category .sim-c-actions {
flex: 0 0 auto;
padding: 0;
}
.sim-row-subtotal,
.sim-row-totals {
display: none;
}
tr.sim-row-totals {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--az-sm) 0;
border-top: 1px solid var(--az-border);
flex-wrap: wrap;
gap: var(--az-xs);
}
.sim-btn-icon {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--az-text-lg);
}
.sim-card-footer {
display: flex;
flex-direction: column;
gap: var(--az-sm);
padding: var(--az-md) 0 0;
}
.sim-card-footer .btn {
width: 100%;
min-height: 44px;
justify-content: center;
font-size: var(--az-text-sm);
}
.sim-footer-spacer {
display: none;
}
.sim-add-row-toolbar,
.sim-footer-actions {
display: flex;
flex-direction: column;
gap: var(--az-sm);
padding: var(--az-md) 0;
}
.sim-add-row-toolbar .btn,
.sim-footer-actions .btn {
width: 100%;
min-height: 44px;
justify-content: center;
}
.sim-empty-ctas {
display: flex;
flex-direction: column;
gap: var(--az-sm);
width: 100%;
}
.sim-empty-ctas .btn {
width: 100%;
min-height: 44px;
justify-content: center;
}
.sim-empty-label {
font-size: var(--az-text-sm);
text-align: center;
margin-bottom: var(--az-md);
}
.sim-params-tags {
display: flex;
flex-wrap: wrap;
gap: var(--az-xs);
}
.sim-params-tag {
font-size: var(--az-text-xs);
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-full);
white-space: nowrap;
}
.vat-segmented {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: var(--az-xs);
padding-bottom: var(--az-xs);
}
.vat-option {
flex-shrink: 0;
min-height: 44px;
padding: 0 var(--az-md);
white-space: nowrap;
font-size: var(--az-text-sm);
}
.sim-charge-row {
display: flex;
flex-direction: column;
gap: var(--az-xs);
padding: var(--az-md) 0;
border-bottom: 1px solid var(--az-border);
}
.sim-charge-row-controls {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.sim-charge-amount-input {
flex: 1;
min-height: 44px;
}
.sim-charge-delete {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.sim-templates-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--az-sm);
}
.sim-template-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--az-xs);
padding: var(--az-md);
min-height: 80px;
border-radius: var(--az-radius-lg);
text-align: left;
}
.sim-template-card-name {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
line-height: 1.2;
}
.sim-template-card-desc {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sim-plafond-bars {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.sim-plafond-bar-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--az-sm);
flex-wrap: wrap;
margin-bottom: var(--az-xs);
}
.sim-plafond-bar-label {
font-size: var(--az-text-xs);
}
.sim-plafond-bar-values {
font-size: var(--az-text-xs);
text-align: right;
}
.sim-scenarios-compare {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.sim-scenario-card {
border-radius: var(--az-radius-lg);
padding: var(--az-md);
}
.sim-scenario-card-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--az-xs) 0;
font-size: var(--az-text-sm);
}
.sim-section-actions {
display: flex;
gap: var(--az-xs);
flex-wrap: wrap;
}
.sim-section-actions .btn {
min-height: 44px;
font-size: var(--az-text-sm);
}
.sim-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-sm);
margin-bottom: var(--az-sm);
}
.sim-section-head .edit-section-title {
margin-bottom: 0;
}
html:not(.dark-mode) .simulateur-content .edit-section-title,
html:not(.dark-mode) #simulateur .edit-section-title,
.simulateur-content .edit-section-title,
#simulateur .edit-section-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
text-transform: none;
letter-spacing: normal;
color: var(--az-text-primary);
margin-bottom: var(--az-sm);
}
.sim-kpi:has(.sim-cell-na) {
display: none;
}
.sim-kpi-sub {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
margin-top: var(--az-2xs);
line-height: 1.3;
}
#simulateur .page-header,
.simulateur-content .page-header {
margin-bottom: var(--az-sm);
}
#simulateur-subtitle,
.simulateur-content #simulateur-subtitle {
display: none;
}
#simulateur .page-title,
.simulateur-content .page-title {
font-size: var(--az-text-xl);
margin-bottom: 0;
}
.sim-section-hint {
font-size: var(--az-text-xs);
line-height: 1.4;
margin-bottom: var(--az-sm);
}
.sim-charges-compact-summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-sm);
}
.sim-row-tag {
font-size: var(--az-text-2xs);
padding: 2px var(--az-xs);
border-radius: var(--az-radius-sm);
margin-right: var(--az-xs);
vertical-align: middle;
display: inline-block;
line-height: 1.4;
}
.sim-section-charts { display: none; }
.sim-project-status { display: none; }
.sim-section-hint { display: none; }
.sim-empty-section { display: none; }
.sim-kpi-section { order: 1; }
.sim-empty-section { order: 2; }
.sim-section-table { order: 2; }
.sim-totaux-section { order: 3; }
.sim-section-project { order: 4; }
.sim-plafond-section { order: 5; }
.sim-params-compact-section { order: 6; }
.sim-charges-section { order: 7; }
.edit-section.sim-section {
padding: var(--az-md);
border-radius: var(--az-radius-xl);
margin-bottom: var(--az-sm);
}
.sim-chart-section .chart-wrapper,
.sim-analysis-section .chart-wrapper {
min-height: 200px;
max-height: 280px;
}
.sim-sticky-add {
position: sticky;
bottom: calc(var(--az-bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--az-sm));
z-index: 10;
background: var(--az-bg-app);
padding: var(--az-sm) 0;
display: flex;
flex-direction: row;
gap: var(--az-sm);
border-top: 1px solid var(--az-border);
}
.sim-sticky-add .btn {
flex: 1;
min-height: 44px;
font-size: var(--az-text-sm);
justify-content: center;
}
.sim-kpi-section {
text-align: center;
padding: var(--az-xl) var(--az-md) var(--az-lg);
}
.sim-kpi-section .edit-section-title {
display: none;
}
.sim-kpi-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--az-lg) var(--az-md);
}
.sim-kpi-section .sim-kpi-strong {
grid-column: 1 / -1;
padding: 0;
background: transparent;
border: none;
order: -1;
}
.sim-kpi-section .sim-kpi-strong .sim-kpi-label {
font-size: var(--az-text-2xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--az-text-tertiary);
margin-bottom: var(--az-xs);
}
.sim-kpi-section .sim-kpi-strong .sim-kpi-value {
font-size: 44px;
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1;
}
.sim-kpi-section .sim-kpi:not(.sim-kpi-strong) {
padding: 0;
background: transparent;
border: none;
}
.sim-kpi-section .sim-kpi:not(.sim-kpi-strong) .sim-kpi-label {
font-size: var(--az-text-2xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--az-text-tertiary);
margin-bottom: var(--az-2xs);
}
.sim-kpi-section .sim-kpi:not(.sim-kpi-strong) .sim-kpi-value {
font-size: var(--az-text-lg-plus);
font-weight: var(--az-font-semibold);
letter-spacing: -0.02em;
}
.sim-kpi-section .sim-kpi:has(.sim-kpi-pct) {
grid-column: 1 / -1;
text-align: center;
padding: var(--az-sm);
background: var(--az-bg-elevated);
border-radius: var(--az-radius-pill);
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
order: 10;
}
.sim-kpi-section .sim-kpi:has(.sim-kpi-pct) .sim-kpi-label {
margin: 0;
font-size: var(--az-text-2xs);
}
.sim-kpi-section .sim-kpi:has(.sim-kpi-pct) .sim-kpi-value {
margin: 0;
font-size: var(--az-text-md);
}
.sim-table tbody tr.sim-row-main,
.sim-table tbody tr.sim-row-frais {
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-xl);
padding: var(--az-sm) var(--az-md);
margin-bottom: var(--az-sm);
box-shadow: var(--az-shadow-sm);
transition: var(--az-transition);
}
.sim-table tbody tr.sim-row-main:focus-within,
.sim-table tbody tr.sim-row-frais:focus-within {
border-color: var(--az-border-focus);
box-shadow: 0 0 0 3px var(--az-blue-bg);
}
.sim-table tbody tr.sim-row-main,
.sim-table tbody tr.sim-row-frais {
border-bottom: 1px solid var(--az-border);
}
.sim-row-main .sim-c-libelle .sim-input-libelle,
.sim-row-main .sim-c-libelle .sim-input-frais,
.sim-row-frais .sim-c-libelle .sim-input-libelle,
.sim-row-frais .sim-c-libelle .sim-input-frais {
border-bottom: none;
font-weight: var(--az-font-medium);
}
.sim-row-meta {
display: block;
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
margin-top: var(--az-2xs);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.sim-row-main .sim-c-vente-col .sim-suffix,
.sim-row-frais .sim-c-vente-col .sim-suffix {
margin-left: var(--az-2xs);
color: var(--az-text-tertiary);
font-size: var(--az-text-sm);
}
.sim-row-tva-badge {
display: block;
margin-top: var(--az-2xs);
font-size: var(--az-text-3xs);
color: var(--az-text-tertiary);
text-align: right;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: var(--az-font-medium);
}
.sim-row-tva-badge.is-override {
color: var(--az-blue);
}
.sim-section-table .edit-section-title {
display: none;
}
.simulateur-content .sim-section-table,
#simulateur .sim-section-table {
padding: var(--az-sm) 0;
background: transparent;
border: none;
box-shadow: none;
}
.sim-card-footer {
display: none;
}
.sim-section-table::after {
content: "";
display: block;
height: 60px;
}
.sim-mobile-fab {
position: fixed;
bottom: calc(var(--az-bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--az-md));
right: var(--az-md);
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--az-text-primary);
color: var(--az-text-on-accent);
border: none;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.08);
z-index: 50;
cursor: pointer;
transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s;
}
.sim-mobile-fab:active {
transform: scale(0.92);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.sim-mobile-fab i {
font-size: 28px;
}
.sim-fab-sheet {
position: fixed;
bottom: calc(var(--az-bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--az-md));
left: var(--az-md);
right: var(--az-md);
background: var(--az-bg-card);
border-radius: var(--az-radius-xl);
box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid var(--az-border);
z-index: 51;
overflow: hidden;
transform-origin: bottom center;
animation: sim-fab-pop 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes sim-fab-pop {
from { opacity: 0; transform: scale(0.92) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.sim-fab-sheet button {
display: flex;
align-items: center;
gap: var(--az-md);
width: 100%;
padding: var(--az-md) var(--az-lg);
border: none;
background: transparent;
text-align: left;
font-size: var(--az-text-md);
color: var(--az-text-primary);
cursor: pointer;
min-height: 48px;
transition: background 0.12s;
}
.sim-fab-sheet button:hover,
.sim-fab-sheet button:active {
background: var(--az-bg-elevated);
}
.sim-fab-sheet button + button {
border-top: 1px solid var(--az-border);
}
.sim-fab-sheet button i {
font-size: 20px;
color: var(--az-text-secondary);
}
.sim-fab-sheet .sim-fab-primary {
font-weight: var(--az-font-medium);
}
.sim-fab-sheet .sim-fab-primary:nth-child(1) i { color: var(--az-green); }
.sim-fab-sheet .sim-fab-primary:nth-child(2) i { color: var(--az-red); }
.sim-fab-sheet .sim-fab-secondary {
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
min-height: 44px;
}
.sim-fab-divider {
height: 1px;
background: var(--az-border);
}
.sim-fab-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.18);
z-index: 49;
animation: sim-fab-fade 0.18s ease-out;
}
@keyframes sim-fab-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.simulateur-content .sim-section-project,
#simulateur .sim-section-project {
padding: var(--az-md);
}
.sim-section-project .sim-section-head {
margin-bottom: var(--az-sm);
}
#simulateur .page-title,
.simulateur-content .page-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
}
.sim-row-main,
.sim-row-frais {
animation: sim-row-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes sim-row-in {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.sim-kpi-value {
font-variant-numeric: tabular-nums;
}
.sim-kpi-empty {
text-align: center;
padding: var(--az-2xl) var(--az-lg);
}
.sim-kpi-empty-content {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-md);
}
.sim-kpi-empty-icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: var(--az-bg-elevated);
border-radius: 50%;
}
.sim-kpi-empty-icon i {
font-size: 32px;
color: var(--az-text-secondary);
}
.sim-kpi-empty-title {
font-size: var(--az-text-lg-plus);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.sim-kpi-empty-text {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
max-width: 280px;
line-height: 1.4;
}
.sim-kpi-icon {
font-size: 0.7em;
margin-right: var(--az-2xs);
vertical-align: baseline;
opacity: 0.7;
}
.sim-totaux-section {
padding: var(--az-md);
}
.sim-totaux-section .edit-section-title {
margin-bottom: var(--az-md);
}
.sim-totaux-grid {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.sim-totaux-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--az-md);
padding: var(--az-xs) 0;
border-bottom: 1px solid var(--az-border);
}
.sim-totaux-row:last-child {
border-bottom: none;
}
.sim-totaux-label {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
display: flex;
flex-direction: column;
gap: var(--az-2xs);
}
.sim-totaux-label small {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
font-weight: var(--az-font-regular);
}
.sim-totaux-values {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--az-2xs);
text-align: right;
}
.sim-totaux-ht,
.sim-totaux-ttc {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
display: flex;
align-items: baseline;
gap: var(--az-xs);
}
.sim-totaux-ttc {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
font-weight: var(--az-font-medium);
}
.sim-totaux-ht small,
.sim-totaux-ttc small {
font-size: var(--az-text-3xs);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--az-text-tertiary);
font-weight: var(--az-font-medium);
}
.sim-totaux-ht.is-positive { color: var(--az-green); }
.sim-totaux-ht.is-negative { color: var(--az-red); }
.sim-totaux-net {
margin-top: var(--az-sm);
padding-top: var(--az-md);
border-top: 1px solid var(--az-border);
}
.sim-totaux-net .sim-totaux-label {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.sim-totaux-net .sim-totaux-ht {
font-size: var(--az-text-xl);
font-weight: var(--az-font-bold);
letter-spacing: -0.02em;
}
.sim-cta-devis-sticky {
position: fixed;
bottom: calc(var(--az-bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--az-md));
left: var(--az-md);
right: calc(var(--az-md) + 56px + var(--az-sm));
z-index: 48;
height: 56px;
border-radius: var(--az-radius-pill);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
color: var(--az-text-primary);
font-size: var(--az-text-md);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: var(--az-transition);
}
.sim-cta-devis-sticky:active {
transform: scale(0.98);
}
.sim-cta-devis-sticky i {
font-size: 18px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms;
transition-duration: 0.01ms;
}
.scroll-reveal,
.page-header-shrinkable,
.card-stack-item {
animation: none;
}
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none;
}
}
@media (max-width: 768px) {
.unsaved-doc-banner {
align-items: flex-start;
flex-wrap: wrap;
padding: var(--az-md);
}
.unsaved-doc-banner-body {
flex: 1 1 100%;
order: 1;
}
.unsaved-doc-banner-icon {
order: 0;
margin-right: var(--az-sm);
}
.unsaved-doc-banner-actions {
order: 2;
flex: 1 1 100%;
margin-top: var(--az-md);
gap: var(--az-sm);
}
.unsaved-doc-banner-actions .btn {
flex: 1 1 0;
min-height: var(--az-touch-min);
}
}
:root {
--bg-page: var(--az-bg-app);
--bg-surface: var(--az-bg-card);
--bg-surface-hover: var(--az-bg-card-hover);
--bg-overlay: var(--az-bg-overlay);
--border-subtle: var(--az-border);
--border-light: var(--az-border-hover);
--border-hover: var(--az-border-focus);
--text-main: var(--az-text-primary);
--text-secondary: var(--az-text-secondary);
--text-tertiary: var(--az-text-tertiary);
--text-muted: var(--az-text-muted);
--accent-primary: var(--az-blue);
--accent-hover: #6E7AE2; 
--accent-glow: rgba(91, 95, 199, 0.25); 
--font-sans: var(--az-font);
--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
--shadow-card: none;
--shadow-button:
0 0 0 1px rgba(255, 255, 255, 0.06),
0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-glow: none;
--shadow-modal:
0 16px 48px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.06);
--radius-sm: var(--az-radius-lg);
--radius-md: var(--az-radius-lg);
--radius-lg: var(--az-radius-xl);
--radius-xl: var(--az-radius-xl);
--radius-pill: var(--az-radius-pill);
--anim-fast: 0.15s;
--anim-mid: 0.3s;
--anim-slow: 0.6s;
--ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
--nav-height: 65px;
--container-width: 1400px;
--btn-inv-bg: var(--az-text-primary);
--btn-inv-bg-hover: #ffffff;
--btn-inv-text: var(--az-bg-app);
--btn-outline-bg: rgba(255, 255, 255, 0.04);
--btn-outline-border: var(--az-border-hover);
--btn-outline-bg-hover: rgba(255, 255, 255, 0.06);
--btn-outline-border-hover: var(--az-border-focus);
}
html:not(.dark-mode),
html.light-mode,
body.light-mode {
--bg-page: #fafafa;
--bg-surface: #ffffff;
--bg-surface-hover: #f4f4f5;
--bg-overlay: rgba(255, 255, 255, 0.85);
--border-subtle: rgba(0, 0, 0, 0.07);
--border-light: rgba(0, 0, 0, 0.12);
--border-hover: rgba(0, 0, 0, 0.2);
--text-main: #09090b;
--text-secondary: #3f3f46;
--text-tertiary: #52525b;
--text-muted: #a1a1aa;
--accent-glow: rgba(91, 95, 199, 0.1);
--shadow-glow: none;
--shadow-card:
0 1px 3px rgba(0, 0, 0, 0.04),
0 0 0 1px rgba(0, 0, 0, 0.04);
--shadow-button:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 1px 3px rgba(0, 0, 0, 0.06);
--shadow-modal:
0 24px 64px rgba(0, 0, 0, 0.12),
0 0 0 1px rgba(0, 0, 0, 0.06);
--btn-inv-bg: #18181b;
--btn-inv-bg-hover: #27272a;
--btn-inv-text: #fafafa;
--btn-outline-bg: #ffffff;
--btn-outline-border: rgba(0, 0, 0, 0.12);
--btn-outline-bg-hover: #f4f4f5;
--btn-outline-border-hover: rgba(0, 0, 0, 0.2);
}
html:not(.dark-mode) .landing-header,
html.light-mode .landing-header {
background: rgba(250, 250, 250, 0.75);
}
html:not(.dark-mode) .landing-hero-badge,
html.light-mode .landing-hero-badge {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.08);
}
html:not(.dark-mode) .landing-btn:not(.landing-btn-primary):not(.landing-btn-accent):not(.landing-btn-outline),
html.light-mode .landing-btn:not(.landing-btn-primary):not(.landing-btn-accent):not(.landing-btn-outline) {
background: var(--btn-outline-bg);
border-color: var(--btn-outline-border);
}
html:not(.dark-mode) .step-number,
html.light-mode .step-number {
background: transparent;
color: var(--text-tertiary);
}
html:not(.dark-mode) .landing-features-grid,
html.light-mode .landing-features-grid {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.06);
}
html:not(.dark-mode) .landing-feature-card,
html.light-mode .landing-feature-card {
background: #ffffff;
}
html:not(.dark-mode) .landing-feature-card-icon,
html.light-mode .landing-feature-card-icon {
color: var(--text-tertiary);
}
html:not(.dark-mode) .landing-pricing-card,
html.light-mode .landing-pricing-card {
box-shadow: var(--shadow-card);
}
html:not(.dark-mode) .landing-pricing-card.popular,
html.light-mode .landing-pricing-card.popular {
background: #ffffff;
border-color: var(--border-light);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.06),
0 0 0 1px rgba(0, 0, 0, 0.06);
}
html:not(.dark-mode) .landing-modal-close:hover,
html.light-mode .landing-modal-close:hover {
background: rgba(0, 0, 0, 0.05);
}
html:not(.dark-mode) .landing-modal-overlay,
html.light-mode .landing-modal-overlay {
background: rgba(0, 0, 0, 0.4);
}
html:not(.dark-mode) .landing-input,
html.light-mode .landing-input {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.12);
color: var(--text-main);
color-scheme: light;
}
html:not(.dark-mode) .landing-input::placeholder,
html.light-mode .landing-input::placeholder {
color: rgba(0, 0, 0, 0.35);
}
html:not(.dark-mode) .landing-input:focus,
html.light-mode .landing-input:focus {
border-color: var(--border-hover);
background: rgba(0, 0, 0, 0.02);
}
html:not(.dark-mode) .landing-google-btn,
html.light-mode .landing-google-btn {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.12);
}
html:not(.dark-mode) .landing-google-btn:hover,
html.light-mode .landing-google-btn:hover {
background: rgba(0, 0, 0, 0.06);
border-color: rgba(0, 0, 0, 0.18);
}
html:not(.dark-mode) .landing-separator-text,
html.light-mode .landing-separator-text {
background: var(--bg-surface);
color: var(--text-muted);
}
html:not(.dark-mode) .landing-separator::before,
html:not(.dark-mode) .landing-separator::after,
html.light-mode .landing-separator::before,
html.light-mode .landing-separator::after {
background: rgba(0, 0, 0, 0.1);
}
html:not(.dark-mode) .landing-password-toggle,
html.light-mode .landing-password-toggle {
color: var(--text-muted);
}
.landing-page .reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.landing-page .reveal.visible {
opacity: 1;
transform: translateY(0);
}
.landing-page .reveal-stagger > * {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.landing-page .reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.landing-page .reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.08s; }
.landing-page .reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.16s; }
.landing-page .reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.24s; }
.landing-page .reveal-stagger.visible > * {
opacity: 1;
transform: translateY(0);
}
.proof-number[data-count] {
font-variant-numeric: tabular-nums;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-sans);
font-optical-sizing: auto;
font-feature-settings: var(--font-feature-settings);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: var(--text-main);
line-height: 1.5;
margin: 0;
}
a {
text-decoration: none;
color: inherit;
transition: color 0.2s ease;
}
ul {
list-style: none;
}
button {
font-family: inherit;
border: none;
background: none;
cursor: pointer;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.landing-page {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
overflow-x: hidden;
background-color: var(--bg-page);
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: var(--font-feature-settings);
}
html body #preact-border-shadow-host,
html body [class*="animate-breathing"],
html body [class*="border-shadow"] {
display: none;
visibility: hidden;
opacity: 0;
pointer-events: none;
}
html body::before,
html body::after,
html::before,
html::after {
content: none;
display: none;
}
.landing-container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 24px;
position: relative;
z-index: 2;
}
.landing-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--nav-height);
z-index: var(--az-z-modal);
border-bottom: 1px solid var(--border-subtle);
background: rgba(8, 9, 10, 0.6);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition: background 0.3s ease;
}
.landing-header-content {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 24px;
}
.landing-logo {
display: flex;
align-items: center;
gap: var(--az-sm-plus);
font-weight: var(--az-font-semibold);
font-size: var(--az-text-lg-plus);
letter-spacing: -0.01em;
color: var(--text-main);
min-height: 44px; 
}
.landing-logo .logo-bold {
color: var(--text-main);
}
.landing-logo .logo-light {
color: var(--text-tertiary);
font-weight: var(--az-font-normal);
}
.landing-nav {
display: flex;
gap: var(--az-2xl);
}
.landing-nav-link {
font-size: var(--az-text-md);
font-weight: var(--az-font-medium);
color: var(--text-secondary);
letter-spacing: -0.01em;
transition: color 0.15s ease;
position: relative;
padding: 12px 0; 
min-height: 44px;
display: flex;
align-items: center;
}
.landing-nav-link:hover {
color: var(--text-main);
}
.landing-nav-link::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: var(--text-main);
transition: width 0.2s ease;
}
.landing-nav-link:hover::after {
width: 100%;
}
.landing-header-actions {
display: flex;
gap: var(--az-md);
}
.landing-header-actions .landing-btn {
height: 36px;
font-size: var(--az-text-sm);
padding: 0 var(--az-lg);
border-radius: var(--radius-sm);
}
.landing-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 36px;
padding: 0 16px;
font-weight: 500;
border-radius: var(--radius-sm);
font-size: var(--az-text-sm);
line-height: 1;
transition: color var(--anim-fast) var(--ease-snap), background var(--anim-fast) var(--ease-snap), border-color var(--anim-fast) var(--ease-snap);
border: 1px solid var(--btn-outline-border);
background: var(--btn-outline-bg);
color: var(--text-main);
gap: var(--az-xs-plus);
letter-spacing: -0.006em;
cursor: pointer;
}
.landing-btn:hover {
background: var(--btn-outline-bg-hover);
border-color: var(--btn-outline-border-hover);
}
.landing-btn:active {
filter: brightness(0.92);
}
.landing-btn-primary,
.landing-btn-primary:focus,
.landing-btn-primary:focus-visible {
background: var(--btn-inv-bg);
color: var(--btn-inv-text);
border: 1px solid var(--btn-inv-bg);
}
.landing-btn-primary:hover {
background: var(--btn-inv-bg-hover);
border-color: var(--btn-inv-bg-hover);
}
.landing-btn-outline {
background: var(--btn-outline-bg);
color: var(--text-main);
border: 0.5px solid var(--btn-outline-border);
}
.landing-btn-outline:hover {
background: var(--btn-outline-bg-hover);
border-color: var(--btn-outline-border-hover);
}
.landing-btn-ghost {
background: transparent;
border: 1px solid transparent;
color: var(--text-secondary);
font-weight: var(--az-font-normal);
}
.landing-btn-ghost:hover {
color: var(--text-main);
background: rgba(255, 255, 255, 0.06);
border-color: transparent;
box-shadow: none;
}
html:not(.dark-mode) .landing-btn-ghost:hover,
html.light-mode .landing-btn-ghost:hover {
background: rgba(0, 0, 0, 0.04);
}
.landing-btn-accent,
.landing-btn-accent:focus,
.landing-btn-accent:focus-visible {
background: var(--btn-inv-bg);
color: var(--btn-inv-text);
border: 1px solid var(--btn-inv-bg);
}
.landing-btn-accent:hover {
background: var(--btn-inv-bg-hover);
border-color: var(--btn-inv-bg-hover);
}
.landing-hero {
position: relative;
padding-top: 180px;
padding-bottom: 80px;
text-align: center;
overflow: hidden;
}
.landing-stars { display: none; }
.landing-hero-badge {
display: inline-flex;
align-items: center;
gap: var(--az-xs-plus);
padding: 6px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-pill);
color: var(--text-secondary);
font-size: var(--az-text-xs);
font-weight: 500;
margin-bottom: 24px;
letter-spacing: -0.006em;
}
.landing-hero-title {
font-size: clamp(40px, 5.5vw, 76px);
font-weight: 600;
letter-spacing: -0.036em;
line-height: 1.05;
color: var(--text-main);
margin-bottom: 28px;
position: relative;
}
.landing-hero-title .highlight {
color: var(--text-tertiary);
}
.landing-hero-subtitle {
font-size: var(--az-text-xl);
font-weight: 400;
line-height: 1.5;
color: var(--text-secondary);
max-width: 580px;
margin: 0 auto 44px;
letter-spacing: -0.01em;
}
.landing-hero-subtitle strong {
color: var(--text-main);
font-weight: var(--az-font-medium);
}
.landing-hero-ctas {
display: flex;
justify-content: center;
gap: var(--az-md);
margin-bottom: 44px;
}
.landing-hero-cta-primary {
height: 48px;
padding: 0 var(--az-xl);
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
border-radius: var(--radius-md);
}
section {
padding: 80px 0; 
}
.landing-section-header {
text-align: center;
margin-bottom: 60px;
}
.landing-section-badge {
font-size: var(--az-text-xs);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-tertiary);
display: block;
margin-bottom: 16px;
}
.landing-section-title {
font-size: var(--az-text-4xl);
font-weight: 600;
color: var(--text-main);
letter-spacing: -0.022em;
line-height: 1.1;
margin-bottom: 12px;
}
.landing-section-title .highlight {
color: var(--text-tertiary);
}
.landing-section-subtitle {
font-size: var(--az-text-lg-plus);
color: var(--text-secondary);
max-width: 500px;
margin: 0 auto;
line-height: 1.6;
letter-spacing: -0.006em;
}
.landing-features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--border-subtle);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
overflow: hidden;
}
.landing-feature-card {
background: var(--bg-surface);
padding: var(--az-xl) var(--az-xl);
}
.landing-feature-card-icon {
display: block;
font-size: 1.25rem;
color: var(--text-tertiary);
margin-bottom: var(--az-md);
}
.landing-feature-card-title {
font-size: var(--az-text-md);
font-weight: 600;
color: var(--text-main);
margin-bottom: var(--az-sm);
letter-spacing: -0.011em;
}
.landing-feature-card-desc {
font-size: var(--az-text-sm);
font-weight: 400;
color: var(--text-secondary);
line-height: 1.6;
letter-spacing: -0.006em;
}
@media (max-width: 768px) {
.landing-features-grid {
grid-template-columns: 1fr;
}
}
.landing-showcase {
padding: 0 0 var(--az-3xl);
}
.showcase-browser-frame {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
overflow: hidden;
pointer-events: none;
user-select: none;
}
.showcase-browser-chrome {
display: flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-md) var(--az-lg);
background: var(--bg-surface-hover);
border-bottom: 1px solid var(--border-subtle);
}
.showcase-dot {
width: var(--az-sm);
height: var(--az-sm);
border-radius: 50%;
}
.showcase-dot--red { background: #ff5f57; }
.showcase-dot--yellow { background: #febc2e; }
.showcase-dot--green { background: #28c840; }
.showcase-screenshot {
display: block;
width: 100%;
height: auto;
}
.landing-deepdive {
padding: 80px 0; 
}
.landing-deepdive-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--az-3xl);
align-items: center;
margin-bottom: var(--az-3xl);
}
.landing-deepdive-row:last-child {
margin-bottom: 0;
}
.landing-deepdive-row.reversed {
direction: rtl;
}
.landing-deepdive-row.reversed > * {
direction: ltr;
}
.landing-deepdive-title {
font-size: var(--az-text-2xl);
font-weight: 600;
color: var(--text-main);
letter-spacing: -0.022em;
margin-bottom: var(--az-md);
line-height: 1.2;
}
.landing-deepdive-desc {
font-size: var(--az-text-sm);
color: var(--text-secondary);
line-height: 1.6;
letter-spacing: -0.006em;
}
.showcase-mini {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
pointer-events: none;
user-select: none;
}
.showcase-mini .showcase-browser-chrome {
padding: var(--az-sm) var(--az-md);
}
.showcase-mini .showcase-dot {
width: 6px;
height: 6px;
}
.showcase-mini .showcase-screenshot {
display: block;
width: 100%;
height: auto;
}
.landing-pricing-feature--highlight {
color: var(--text-main);
font-weight: 500;
}
.landing-pricing-feature--highlight .landing-pricing-feature-check {
color: var(--text-secondary);
}
.landing-pricing-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-xs);
margin-bottom: var(--az-2xl);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--az-radius-pill);
padding: var(--az-xs);
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.landing-pricing-toggle-btn {
padding: var(--az-sm) var(--az-xl);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--text-muted);
background: transparent;
border: none;
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease;
display: flex;
align-items: center;
gap: var(--az-sm);
min-height: var(--az-touch-min);
}
.landing-pricing-toggle-btn.active {
background: var(--bg-surface-hover);
color: var(--text-main);
border: 1px solid var(--border-light);
}
.landing-pricing-toggle-badge {
font-size: var(--az-text-xs);
color: var(--text-secondary);
font-weight: var(--az-font-medium);
}
.landing-pricing-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--az-xl);
max-width: 720px;
margin: 0 auto;
}
.landing-pricing-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--az-xl);
position: relative;
display: flex;
flex-direction: column;
transition: border-color var(--anim-fast) ease;
}
.landing-pricing-card:hover {
border-color: var(--border-light);
}
.landing-pricing-features {
flex: 1;
}
.landing-pricing-card.popular {
background: var(--bg-surface-hover);
border-color: var(--accent-primary);
transform: scale(1.03);
box-shadow: 0 0 0 1px var(--accent-primary), 0 8px 32px rgba(91, 95, 199, 0.12);
}
.landing-pricing-popular-badge {
position: absolute;
top: var(--az-lg);
right: var(--az-lg);
background: var(--accent-primary);
color: #ffffff;
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
padding: var(--az-xs) var(--az-md);
border-radius: var(--az-radius-pill);
text-transform: none;
letter-spacing: -0.01em;
}
.landing-pricing-name {
font-size: var(--az-text-md);
font-weight: 600;
color: var(--text-main);
margin-bottom: var(--az-xs);
text-transform: none;
letter-spacing: -0.011em;
}
.landing-pricing-price {
margin-bottom: 24px;
display: flex;
align-items: baseline;
gap: var(--az-xs);
}
.landing-pricing-amount {
font-size: var(--az-text-3xl-plus);
font-weight: 600;
color: var(--text-main);
letter-spacing: -0.025em;
}
.landing-pricing-period {
font-size: var(--az-text-md);
color: var(--text-muted);
}
.landing-pricing-original {
font-size: var(--az-text-lg);
color: var(--text-muted);
text-decoration: line-through;
margin-right: var(--az-sm);
font-weight: var(--az-font-normal);
}
.landing-pricing-description {
font-size: var(--az-text-md);
color: var(--text-secondary);
margin-bottom: 16px;
letter-spacing: -0.01em;
line-height: 1.4;
}
.landing-pricing-features {
margin-bottom: 24px;
}
.landing-pricing-feature {
display: flex;
gap: var(--az-sm);
font-size: var(--az-text-sm);
color: var(--text-secondary);
margin-bottom: 10px;
letter-spacing: -0.006em;
}
.landing-pricing-feature-check {
width: 16px;
min-width: 16px;
color: var(--text-tertiary);
}
.landing-pricing-cta {
width: 100%;
height: 36px;
}
.landing-contact {
padding: 80px 0; 
}
.landing-contact-single {
max-width: 480px;
margin: 0 auto;
}
.landing-contact-card {
background: var(--bg-surface);
border: none;
border-radius: var(--radius-xl);
padding: var(--az-xl);
display: flex;
align-items: center;
gap: var(--az-lg);
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.landing-contact-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-card);
}
.landing-contact-card > i:first-child {
color: var(--text-secondary);
flex-shrink: 0;
}
.landing-contact-info {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
flex: 1;
min-width: 0;
}
.landing-contact-name {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--text-main);
}
.landing-contact-desc {
font-size: var(--az-text-sm);
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.landing-final-cta {
padding: 80px 0; 
text-align: center;
border-top: 1px solid var(--border-subtle);
}
.final-cta-content {
max-width: 600px;
margin: 0 auto;
}
.final-cta-title {
font-size: var(--az-text-4xl);
font-weight: 600;
letter-spacing: -0.022em;
color: var(--text-main);
margin-bottom: 16px;
line-height: 1.1;
}
.final-cta-subtitle {
font-size: var(--az-text-md);
color: var(--text-secondary);
margin-bottom: 40px;
line-height: 1.6;
letter-spacing: -0.006em;
}
.final-cta-buttons {
display: flex;
justify-content: center;
gap: var(--az-lg);
margin-bottom: 24px;
}
.final-cta-hint {
font-size: var(--az-text-sm);
color: var(--text-muted);
}
.landing-footer {
border-top: 1px solid var(--border-subtle);
padding: 48px 0 24px;
background: var(--bg-surface);
}
.landing-footer-top {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px 24px;
padding-bottom: 32px;
}
.landing-footer-brand {
display: flex;
align-items: center;
gap: 6px;
}
.landing-footer-logo {
display: flex;
align-items: center;
gap: 6px;
}
.landing-footer-logo-bold {
font-size: 13px;
font-weight: 700;
color: var(--text-main);
letter-spacing: -0.01em;
}
.landing-footer-logo-light {
font-size: 13px;
font-weight: 400;
color: var(--text-muted);
letter-spacing: 0.02em;
}
.landing-footer-link {
font-size: 13px;
color: var(--text-tertiary);
padding: 3px 0;
transition: color 0.15s ease;
line-height: 1.4;
}
.landing-footer-link:hover {
color: var(--text-main);
}
.landing-footer-text {
font-size: 12px;
color: var(--text-muted);
}
.landing-workflow {
padding: 80px 0; 
position: relative;
}
.steps-grid {
display: flex;
flex-direction: column;
gap: 0;
max-width: 640px;
margin: 0 auto;
}
.step-card {
background: transparent;
border: none;
border-bottom: 1px solid var(--border-subtle);
border-radius: 0;
padding: var(--az-xl) 0;
display: grid;
grid-template-columns: 32px 1fr;
grid-template-rows: auto auto;
column-gap: var(--az-lg);
}
.step-card:first-child {
border-top: 1px solid var(--border-subtle);
}
.step-number {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 0;
background: transparent;
color: var(--text-muted);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
margin-bottom: 0;
grid-row: 1 / -1;
align-self: start;
padding-top: 2px;
}
.step-title {
font-size: var(--az-text-md);
font-weight: var(--az-font-medium);
color: var(--text-main);
margin-bottom: var(--az-xs);
letter-spacing: -0.01em;
}
.step-desc {
font-size: var(--az-text-sm);
font-weight: var(--az-font-normal);
color: var(--text-secondary);
line-height: 1.5;
letter-spacing: -0.01em;
}
.landing-hero-cta-primary {
height: var(--az-touch-min);
padding: 0 var(--az-xl);
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
border-radius: var(--radius-lg);
}
.landing-hero-cta-primary i[class*="ph-"] {
font-size: var(--az-text-lg-plus);
}
.landing-hero-badge-dot {
width: var(--az-sm);
height: var(--az-sm);
border-radius: 50%;
background: #22c55e;
display: inline-block;
animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.landing-testimonials {
padding: 80px 0;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--az-xl);
margin-top: 48px;
}
.testimonial-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--az-xl);
display: flex;
flex-direction: column;
gap: var(--az-lg);
transition: border-color var(--anim-fast) ease;
}
.testimonial-card:hover {
border-color: var(--border-light);
}
.testimonial-quote {
font-size: var(--az-text-sm);
color: var(--text-secondary);
line-height: 1.7;
letter-spacing: -0.006em;
flex: 1;
}
.testimonial-author {
display: flex;
align-items: center;
gap: var(--az-md);
}
.testimonial-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bg-surface-hover);
border: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--text-tertiary);
flex-shrink: 0;
}
.testimonial-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.testimonial-name {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--text-main);
}
.testimonial-role {
font-size: var(--az-text-2xs);
color: var(--text-muted);
}
.testimonial-stars {
display: flex;
gap: 2px;
color: #fbbf24;
font-size: var(--az-text-xs);
}
@media (max-width: 768px) {
.testimonials-grid {
grid-template-columns: 1fr;
gap: var(--az-md);
}
.landing-testimonials {
padding: var(--az-4xl) 0;
}
.testimonial-quote {
font-size: var(--az-text-md);
}
}
.landing-proof {
padding: var(--az-3xl) 0;
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.proof-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--az-xl);
text-align: center;
}
.proof-item {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.proof-number {
font-size: var(--az-text-3xl-plus);
font-weight: 600;
color: var(--text-main);
letter-spacing: -0.03em;
line-height: 1;
}
.proof-label {
font-size: var(--az-text-sm);
color: var(--text-secondary);
line-height: 1.4;
letter-spacing: -0.006em;
}
@media (max-width: 768px) {
.proof-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--az-2xl) var(--az-lg);
}
.proof-number {
font-size: var(--az-text-4xl-plus);
}
.proof-label {
font-size: var(--az-text-md);
line-height: 1.5;
}
.landing-proof {
padding: var(--az-3xl) 0;
}
}
.landing-page section[id] {
scroll-margin-top: calc(var(--nav-height) + 20px);
}
.landing-menu-toggle {
display: none;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
background: none;
color: var(--text-secondary);
cursor: pointer;
border-radius: var(--radius-sm);
transition: color 0.15s ease;
}
.landing-menu-toggle:hover {
color: var(--text-main);
}
.landing-mobile-menu {
display: flex;
position: fixed;
inset: 0;
z-index: var(--az-z-loader);
background: var(--bg-overlay);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--az-sm);
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.landing-mobile-menu.active {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.landing-mobile-menu-close {
position: absolute;
top: 16px;
right: 16px;
width: var(--az-touch-min);
height: var(--az-touch-min);
display: flex;
align-items: center;
justify-content: center;
border: none;
background: none;
color: var(--text-secondary);
cursor: pointer;
border-radius: var(--radius-sm);
}
.landing-mobile-menu-link {
font-size: var(--az-text-xl-plus);
font-weight: var(--az-font-medium);
color: var(--text-main);
padding: 12px 24px;
border-radius: var(--radius-md);
transition: background 0.15s ease;
}
.landing-mobile-menu-link:hover {
background: var(--bg-surface-hover);
}
.landing-mobile-menu-cta {
margin-top: 16px;
}
.landing-compliance {
padding: 80px 0; 
}
.landing-compliance-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--az-xl);
margin-top: 48px;
}
.landing-compliance-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--az-xl) var(--az-xl);
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.landing-compliance-card:hover {
background: var(--bg-surface-hover);
border-color: var(--border-hover);
transform: translateY(-2px);
}
.landing-compliance-icon {
display: block;
font-size: 1.25rem;
color: var(--text-tertiary);
margin-bottom: var(--az-md);
}
.landing-compliance-title {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--text-main);
margin-bottom: var(--az-sm);
letter-spacing: var(--az-tracking-tight);
}
.landing-compliance-desc {
font-size: var(--az-text-md);
color: var(--text-secondary);
line-height: 1.7;
}
.landing-compliance-disclaimer {
margin-top: 32px;
padding: var(--az-lg) var(--az-xl);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
font-size: var(--az-text-sm);
color: var(--text-muted);
line-height: 1.6;
text-align: center;
}
.landing-why {
padding: 80px 0; 
}
.landing-why-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--az-2xl) var(--az-xl);
margin-top: 48px;
}
.landing-why-item {
display: flex;
gap: var(--az-lg);
align-items: flex-start;
}
.landing-why-item > i {
flex-shrink: 0;
color: var(--az-blue);
margin-top: var(--az-xs);
}
.landing-why-item strong {
display: block;
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--text-main);
margin-bottom: var(--az-xs);
letter-spacing: var(--az-tracking-tight);
}
.landing-why-item p {
font-size: var(--az-text-md);
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
}
.landing-faq {
padding: 80px 0; 
}
.landing-faq-list {
max-width: 800px;
margin: 48px auto 0;
display: flex;
flex-direction: column;
gap: 0;
}
.landing-faq-item {
background: transparent;
border: none;
border-bottom: 1px solid var(--border-subtle);
border-radius: 0;
overflow: hidden;
transition: none;
}
.landing-faq-item:first-child {
border-top: 1px solid var(--border-subtle);
}
.landing-faq-item:hover {
background: transparent;
}
.landing-faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-lg) 0;
background: none;
border: none;
cursor: pointer;
color: var(--text-main);
font-size: var(--az-text-sm);
font-weight: 500;
letter-spacing: -0.006em;
text-align: left;
gap: var(--az-lg);
font-family: var(--az-font);
transition: color var(--anim-fast) var(--ease-snap);
}
.landing-faq-question:hover {
color: var(--text-secondary);
}
.landing-faq-question i {
flex-shrink: 0;
color: var(--text-muted);
transition: transform var(--anim-mid) var(--ease-snap);
}
.landing-faq-item.open .landing-faq-question i {
transform: rotate(180deg);
}
.landing-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.landing-faq-item.open .landing-faq-answer {
max-height: 1200px;
}
.landing-faq-answer p,
.landing-faq-answer ol {
padding: 0 0 var(--az-lg);
font-size: var(--az-text-sm);
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
letter-spacing: -0.006em;
}
.landing-faq-answer ol {
padding-left: var(--az-3xl);
}
.landing-faq-answer li {
margin-bottom: var(--az-sm);
}
.landing-faq-answer strong {
color: var(--text-tertiary);
}
.landing-footer-section-title {
font-size: 11px;
font-weight: 600;
color: var(--text-main);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 12px;
}
.landing-footer-links-col {
display: flex;
flex-direction: column;
gap: 2px;
}
.landing-footer-bottom {
border-top: 1px solid var(--border-subtle);
padding-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.faq-grid {
max-width: 700px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--az-2xs);
}
.faq-item {
background: var(--bg-surface);
border: none;
border-radius: var(--radius-xl);
overflow: hidden;
transition: background 0.2s ease;
}
.faq-item:hover {
background: var(--bg-surface-hover);
}
.faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
background: none;
border: none;
cursor: pointer;
color: var(--text-main);
font-size: var(--az-text-lg);
font-weight: var(--az-font-medium);
letter-spacing: -0.01em;
text-align: left;
}
.faq-chevron {
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--text-muted);
transition: transform 0.2s ease;
}
.faq-item.open .faq-chevron {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.open .faq-answer {
max-height: 1200px;
}
.faq-answer p {
padding: 0 24px 20px;
font-size: var(--az-text-md);
line-height: 1.6;
color: var(--text-secondary);
}
@media (max-width: 1024px) {
.landing-hero-title {
font-size: var(--az-text-5xl);
}
}
@media (max-width: 768px) {
.landing-hero {
padding-top: 120px;
padding-bottom: var(--az-3xl);
}
.landing-hero-title {
font-size: var(--az-text-4xl);
line-height: 1.05;
margin-bottom: var(--az-xl);
}
.landing-hero-subtitle {
font-size: var(--az-text-xl-plus);
max-width: 100%;
margin-bottom: var(--az-2xl);
}
.landing-hero-badge {
font-size: var(--az-text-sm);
padding: var(--az-sm) var(--az-lg);
margin-bottom: var(--az-xl);
}
.landing-hero-ctas {
flex-direction: column;
align-items: center;
gap: var(--az-md);
}
.landing-hero-ctas .landing-btn {
width: 100%;
max-width: 340px;
white-space: nowrap;
padding: var(--az-lg) var(--az-xl);
font-size: var(--az-text-lg-plus);
border-radius: var(--radius-lg);
}
.landing-hero-cta-primary {
min-height: 52px;
height: auto;
font-size: var(--az-text-lg-plus);
padding: 0 var(--az-2xl);
border-radius: var(--radius-lg);
}
.landing-section-title {
font-size: var(--az-text-4xl-plus);
margin-bottom: var(--az-md);
}
.landing-section-subtitle {
font-size: var(--az-text-lg-plus);
max-width: 100%;
}
.landing-section-header {
margin-bottom: var(--az-3xl);
}
.landing-section-badge {
font-size: var(--az-text-sm);
margin-bottom: var(--az-md);
}
.landing-features-grid {
grid-template-columns: 1fr;
}
.landing-feature-card {
padding: var(--az-xl) var(--az-xl);
}
.landing-feature-card-icon {
font-size: var(--az-text-xl);
margin-bottom: var(--az-md);
}
.landing-feature-card-title {
font-size: var(--az-text-lg-plus);
margin-bottom: var(--az-sm);
}
.landing-feature-card-desc {
font-size: var(--az-text-md);
line-height: 1.6;
}
.landing-pricing-grid {
grid-template-columns: 1fr;
}
.landing-pricing-cta {
min-height: 48px;
height: auto;
font-size: var(--az-text-lg-plus);
}
.landing-nav {
display: none;
}
.landing-menu-toggle {
display: flex;
width: var(--az-touch-min);
height: var(--az-touch-min);
}
.landing-header-actions {
display: none;
}
.steps-grid {
max-width: 100%;
}
.step-title {
font-size: var(--az-text-lg-plus);
}
.step-desc {
font-size: var(--az-text-md);
}
.step-number {
font-size: var(--az-text-xl);
}
.landing-footer {
padding: 32px 0 20px;
}
.landing-footer-top {
grid-template-columns: 1fr 1fr;
gap: 24px 16px;
}
.landing-footer-section-title {
margin-bottom: 8px;
font-size: 10px;
}
.landing-footer-link {
font-size: 12px;
padding: 3px 0;
}
.landing-footer-bottom {
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
padding-top: 16px;
}
.landing-footer-brand,
.landing-footer-logo {
justify-content: center;
}
.landing-footer-logo-bold,
.landing-footer-logo-light {
font-size: 12px;
}
.landing-footer-text {
font-size: 11px;
}
.landing-compliance-grid {
grid-template-columns: 1fr;
gap: var(--az-md);
}
.landing-why-grid {
grid-template-columns: 1fr;
gap: var(--az-xl);
}
.landing-why-item {
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--az-sm);
}
.landing-faq-question {
font-size: var(--az-text-lg-plus);
padding: var(--az-lg);
}
.landing-faq-answer p,
.landing-faq-answer ol {
padding: 0 var(--az-lg) var(--az-lg);
font-size: var(--az-text-md);
}
.final-cta-title {
font-size: var(--az-text-3xl-plus);
}
.final-cta-buttons {
flex-direction: column;
align-items: center;
}
.final-cta-buttons .landing-btn {
font-size: var(--az-text-lg-plus);
padding: var(--az-lg) var(--az-xl);
min-height: 52px;
}
section {
padding: var(--az-4xl) 0;
}
.landing-workflow,
.landing-why,
.landing-faq {
padding: var(--az-4xl) 0;
}
.landing-deepdive-row,
.landing-deepdive-row.reversed {
grid-template-columns: 1fr;
direction: ltr;
gap: var(--az-xl);
}
.landing-deepdive-title {
font-size: var(--az-text-2xl);
}
.landing-deepdive-desc {
font-size: var(--az-text-md);
}
}
@media (max-width: 480px) {
.landing-footer-top {
grid-template-columns: 1fr 1fr;
gap: 20px 12px;
}
.landing-footer-link {
font-size: 12px;
}
}
@media (max-height: 500px) and (orientation: landscape) and (max-width: 932px) {
.landing-hero {
padding-top: 80px;
padding-bottom: var(--az-3xl);
}
.landing-hero-title {
font-size: var(--az-text-3xl-plus);
}
section {
padding: var(--az-3xl) 0;
}
}
html body .landing-page .landing-modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: var(--az-z-loader);
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
align-items: center;
justify-content: center;
padding: max(var(--az-xl), env(safe-area-inset-top, 0px)) var(--az-xl) max(var(--az-xl), env(safe-area-inset-bottom, 0px));
}
html body .landing-page .landing-modal-overlay.active {
display: flex;
}
.landing-modal {
width: 100%;
max-width: 400px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--az-3xl) var(--az-2xl);
position: relative;
box-shadow:
0 24px 48px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.04);
animation: modal-appear 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modal-appear {
from {
opacity: 0;
transform: translateY(12px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.landing-modal-close {
position: absolute;
top: var(--az-md);
right: var(--az-md);
width: var(--az-touch-min);
height: var(--az-touch-min);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--az-radius-lg);
color: rgba(255, 255, 255, 0.3);
transition: color 0.2s ease, background 0.2s ease;
}
.landing-modal-close:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--text-main);
}
.auth-modal-logo {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-xs);
margin-bottom: 28px;
}
.auth-modal-logo .logo-bold {
font-size: var(--az-text-xl-plus);
font-weight: var(--az-font-bold);
color: var(--text-main);
letter-spacing: -0.02em;
}
.auth-modal-logo .logo-light {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
color: var(--text-tertiary);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.landing-modal-title {
font-size: var(--az-text-xl);
font-weight: var(--az-font-semibold);
color: var(--text-main);
text-align: center;
margin-bottom: var(--az-xs);
letter-spacing: -0.02em;
}
.landing-modal-subtitle {
font-size: var(--az-text-sm);
color: var(--text-muted);
text-align: center;
margin-bottom: var(--az-xl);
line-height: 1.5;
}
.auth-trial-badge {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
padding: 8px 16px;
border-radius: var(--az-radius-3xl);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
margin-bottom: 20px;
}
.landing-google-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
width: 100%;
padding: var(--az-md) var(--az-lg);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--text-main);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
min-height: var(--az-touch-min);
transition: background 0.15s ease, border-color 0.15s ease;
}
.landing-google-btn:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.12);
}
.landing-separator {
display: flex;
align-items: center;
gap: var(--az-lg);
margin: var(--az-lg) 0;
}
.landing-separator::before,
.landing-separator::after {
content: '';
flex: 1;
height: 1px;
background: var(--border-subtle);
}
.landing-separator-text {
font-size: var(--az-text-sm);
color: rgba(255, 255, 255, 0.25);
}
.landing-form-group {
margin-bottom: var(--az-sm);
}
.landing-input {
width: 100%;
padding: var(--az-md) var(--az-lg);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--text-main);
font-size: var(--az-text-sm);
font-family: inherit;
outline: none;
transition: border-color 0.15s ease, background 0.15s ease;
min-height: var(--az-touch-min);
-webkit-appearance: none;
appearance: none;
color-scheme: dark;
}
@media (max-width: 768px) {
.landing-input {
font-size: var(--az-text-lg-plus);
min-height: calc(var(--az-touch-min) + var(--az-sm-plus));
}
}
.landing-input::placeholder {
color: rgba(255, 255, 255, 0.3);
}
.landing-input:focus {
border-color: var(--border-hover);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.08);
}
.landing-input:-webkit-autofill,
.landing-input:-webkit-autofill:hover,
.landing-input:-webkit-autofill:focus,
.landing-input:-webkit-autofill:active {
-webkit-background-clip: text;
-webkit-text-fill-color: var(--text-main);
background-clip: text;
caret-color: var(--text-main);
}
.landing-password-wrapper {
position: relative;
}
.landing-password-wrapper .landing-input {
padding-right: var(--az-touch-min);
}
.landing-password-toggle {
position: absolute;
right: var(--az-xs);
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
width: var(--az-touch-min);
height: var(--az-touch-min);
padding: var(--az-sm);
cursor: pointer;
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--az-radius-md);
transition: color 0.15s ease;
}
.landing-password-toggle:hover {
color: var(--text-main);
}
.landing-submit-btn {
width: 100%;
margin-top: var(--az-md);
padding: var(--az-md);
background: var(--text-main);
color: var(--bg-page);
border: none;
border-radius: var(--radius-sm);
font-size: var(--az-text-sm);
min-height: var(--az-touch-min);
font-weight: var(--az-font-semibold);
cursor: pointer;
transition: opacity 0.15s ease, background 0.15s ease;
}
.landing-submit-btn:hover {
opacity: 0.9;
}
.landing-submit-btn:active {
filter: brightness(0.92);
}
.landing-submit-btn:disabled,
.landing-submit-btn[disabled] {
opacity: 0.7;
cursor: not-allowed;
pointer-events: none;
}
.landing-google-btn:disabled,
.landing-google-btn[disabled] {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.auth-loader {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--az-xs-plus);
}
.auth-loader.hidden {
display: none;
}
.auth-loader span {
display: block;
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
opacity: 0.6;
animation: auth-dot-pulse 1.4s ease-in-out infinite;
}
.auth-loader span:nth-child(2) {
animation-delay: 0.2s;
}
.auth-loader span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes auth-dot-pulse {
0%, 80%, 100% {
opacity: 0.6;
transform: scale(0.8);
}
40% {
opacity: 1;
transform: scale(1);
}
}
.landing-forgot-link {
display: inline-block;
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--text-main);
text-decoration: none;
margin-bottom: 12px;
transition: color 0.15s ease;
}
.landing-forgot-link:hover {
color: var(--text-main);
}
.landing-link {
color: var(--text-secondary);
text-decoration: none;
transition: color 0.15s ease;
}
.landing-link:hover {
color: var(--text-main);
}
.auth-email-chip {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
padding: 8px 14px;
margin-bottom: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--az-radius-lg);
animation: authStepSlideIn 0.25s ease-out;
}
.auth-email-chip.hidden {
display: none;
}
.auth-email-chip i:first-child {
color: var(--text-muted);
flex-shrink: 0;
}
.auth-email-chip span {
font-size: var(--az-text-sm);
color: var(--text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.auth-email-chip-btn {
background: none;
border: none;
padding: 4px;
cursor: pointer;
color: var(--text-muted);
display: flex;
align-items: center;
border-radius: var(--az-radius-sm);
transition: color 0.15s ease;
flex-shrink: 0;
}
.auth-email-chip-btn:hover {
color: var(--text-main);
}
.auth-tooltip {
text-align: center;
margin-top: 8px;
animation: authTooltipIn 0.3s ease-out;
}
.auth-tooltip span {
display: inline-block;
font-size: var(--az-text-xs-plus);
color: var(--text-muted);
padding: 4px 10px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--az-radius-md);
}
.auth-tooltip.hint-info span {
color: var(--text-muted);
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.06);
}
@keyframes authTooltipIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.auth-error-message {
text-align: center;
margin-top: 8px;
margin-bottom: 4px;
font-size: var(--az-text-sm);
color: var(--az-red, #ef4444);
padding: 8px 14px;
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: var(--az-radius-lg);
animation: authTooltipIn 0.3s ease-out;
}
.auth-error-message.success {
color: var(--az-green, #22c55e);
background: rgba(34, 197, 94, 0.08);
border-color: rgba(34, 197, 94, 0.2);
}
.auth-step-enter {
animation: authStepSlideIn 0.25s ease-out;
}
@keyframes authStepSlideIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.landing-modal-footer {
margin-top: var(--az-xl);
text-align: center;
}
.landing-modal-legal {
font-size: var(--az-text-2xs);
color: var(--text-muted);
line-height: 1.5;
}
html body .landing-page--login-only > :not(#login-modal) {
display: none;
}
html body .landing-page.landing-page--login-only .landing-modal-overlay {
background: var(--az-bg-app);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.landing-page--login-only .landing-modal-close,
.landing-page--login-only .landing-modal-legal {
display: none;
}
.landing-page--login-only .landing-modal-footer {
margin-top: 0;
}
.landing-page--login-only .landing-forgot-link {
margin: var(--az-xl) 0 0;
}
.landing-page--login-only .landing-modal {
box-shadow: var(--az-shadow-lg);
}
@media (max-width: 768px) {
html body .landing-page .landing-modal-overlay {
background: rgba(0, 0, 0, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.landing-modal {
padding: var(--az-3xl) var(--az-xl);
max-width: 100%;
border-radius: var(--az-radius-xl);
}
.landing-modal-title {
font-size: var(--az-text-2xl);
}
.landing-input {
font-size: var(--az-text-lg-plus);
min-height: 54px;
padding: var(--az-lg);
}
.landing-google-btn {
font-size: var(--az-text-lg-plus);
min-height: 54px;
}
.landing-submit-btn {
font-size: var(--az-text-lg-plus);
min-height: 54px;
}
.auth-modal-logo .logo-bold {
font-size: var(--az-text-2xl);
}
.auth-modal-logo .logo-light {
font-size: var(--az-text-xs-plus);
}
}
@media (prefers-reduced-motion: reduce) {
.landing-page *,
.landing-page *::before,
.landing-page *::after {
animation-duration: 0.01ms;
animation-iteration-count: 1;
transition-duration: 0.01ms;
scroll-behavior: auto;
}
}
.landing-page .hidden {
display: none;
}
#wizard-overlay.wiz {
display: flex;
flex-direction: column;
background: var(--az-bg-card);
z-index: var(--az-z-modal);
position: fixed;
inset: 0;
}
.wiz__header {
padding: 0 16px;
border-bottom: none;
background: transparent;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--az-xs);
padding-top: max(12px, env(safe-area-inset-top, 0px));
padding-bottom: 8px;
flex-shrink: 0;
}
.wiz__title {
font-size: 17px;
font-weight: 600;
color: var(--az-text-primary);
letter-spacing: -0.02em;
text-align: center;
}
.wiz__stepper-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.wiz__step-label {
font-size: 17px;
font-weight: 600;
color: var(--az-text-primary);
letter-spacing: -0.02em;
transition: opacity 0.15s ease;
}
.wiz__step-counter {
display: none;
}
.wiz__ctx-title {
font-size: 17px;
font-weight: 600;
color: var(--az-text-primary);
letter-spacing: -0.02em;
transition: opacity 0.15s ease;
display: flex;
align-items: center;
gap: var(--az-sm);
}
.wiz__step-num {
width: 22px;
height: 22px;
border-radius: var(--az-radius-pill);
background: var(--az-text-primary);
color: var(--az-bg-card);
font-size: 11px;
font-weight: var(--az-font-bold);
display: none;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
@media (min-width: 769px) {
.wiz__step-num {
display: flex;
}
}
.wiz__progress-track {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: rgba(0, 0, 0, 0.06);
border-radius: 0;
overflow: hidden;
}
.wiz__progress-fill {
height: 100%;
background: var(--az-text-primary);
border-radius: 0;
transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cmp-ios-row > .cmp-toggle-header {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.cmp-ios-row .cmp-toggle-title {
flex: 0 0 auto;
font-size: var(--az-text-sm);
font-weight: var(--az-font-normal);
color: var(--az-text-primary);
text-align: left;
}
.cmp-ios-row .cmp-toggle-value {
flex: 1;
text-align: right;
font-size: var(--az-text-sm);
font-weight: var(--az-font-normal);
color: var(--az-text-tertiary);
}
.cmp-ios-row .cmp-toggle-chevron {
font-size: var(--az-text-xs);
color: var(--az-text-disabled);
flex-shrink: 0;
transition: transform var(--az-transition);
}
.cmp-ios-row[data-toggle].open .cmp-toggle-chevron {
transform: rotate(90deg);
}
.wiz__header .wiz__close {
position: absolute;
right: var(--az-lg);
top: 50%;
transform: translateY(-50%);
z-index: var(--az-z-sticky);
}
.wiz__header--composer .wiz__close {
right: auto;
left: var(--az-lg);
}
.wiz__header--composer .wiz__title {
display: none;
}
.wiz__close {
width: 36px;
height: 36px;
font-size: 20px;
border-radius: 50%;
transition: background 0.15s ease;
color: var(--az-text-secondary);
display: flex;
align-items: center;
justify-content: center;
background: var(--az-bg-card-hover);
}
.wiz__close:hover {
background: var(--az-bg-elevated);
}
.wizard-layout {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.wizard-progress-section {
padding: 0 max(24px, calc(50% - 400px));
flex-shrink: 0;
background: transparent;
}
.wizard-scroll-content {
flex: 1;
overflow-y: auto;
padding: 24px 20px;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
}
.wizard-nav-section {
flex-shrink: 0;
padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
border-top: 0.5px solid var(--az-border);
background: var(--az-bg-card);
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--az-sm);
}
.wizard-step-body {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
body.wizard-active {
overflow: hidden;
}
body.wizard-active #confirm-modal,
body.wizard-active .modal-backdrop {
z-index: calc(var(--az-z-toast) + 10);
}
.wiz-step-header {
margin-bottom: var(--az-sm-plus);
padding-bottom: var(--az-xs-plus);
}
.wiz-step-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
letter-spacing: -0.01em;
line-height: 1.4;
}
.wiz-step-subtitle {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
margin-top: var(--az-2xs);
line-height: 1.4;
}
.wiz-modal-logo {
display: flex;
align-items: baseline;
gap: var(--az-xs-plus);
}
.wiz-modal-logo .logo-bold {
font-size: var(--az-text-sm);
font-weight: var(--az-font-bold);
letter-spacing: 1.5px;
color: var(--az-text-primary);
}
.wiz-modal-logo .logo-light {
font-size: var(--az-text-sm);
font-weight: var(--az-font-normal);
letter-spacing: 0.5px;
color: var(--az-text-tertiary);
}
.wiz-form {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.wiz-field {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.wiz-field-relative {
position: relative;
}
.wiz-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--az-md);
}
.wizard-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-normal);
color: var(--az-text-secondary);
}
.wizard-input,
.wiz-input-compact {
width: 100%;
padding: var(--az-sm) var(--az-md);
background: transparent;
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
color: var(--az-text-primary);
font-size: var(--az-text-sm);
line-height: 1.4;
outline: none;
transition: border-color var(--az-transition), background var(--az-transition), box-shadow var(--az-transition);
min-height: var(--az-input-h);
}
.wizard-input:focus,
.wiz-input-compact:focus {
border-color: var(--az-border-focus);
background: var(--az-bg-input-focus);
box-shadow: var(--az-focus-ring);
}
.wizard-input::placeholder,
.wiz-input-compact::placeholder {
color: var(--az-text-muted);
font-size: var(--az-text-xs);
}
.wiz-input-compact {
padding: var(--az-sm) var(--az-md);
font-size: var(--az-text-xs);
}
.wizard-input:disabled,
.wiz-input-compact:disabled {
opacity: 0.6;
cursor: not-allowed;
background: var(--az-bg-card);
}
.wiz-type-buttons {
display: flex;
gap: var(--az-sm);
}
.wiz-type-select {
flex: 1;
padding: var(--az-sm) var(--az-md);
border-radius: var(--az-radius-lg);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
color: var(--az-text-secondary);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
text-align: center;
min-height: var(--az-input-h);
-webkit-tap-highlight-color: transparent;
}
.wiz-type-select:hover {
border-color: var(--az-border-hover);
color: var(--az-text-primary);
}
.wiz-type-select:active {
filter: brightness(0.92);
}
.wiz-type-select.active {
background: var(--az-segment-active-bg);
border-color: transparent;
color: var(--az-segment-active-color);
box-shadow: var(--az-segment-active-shadow);
}
.wizard-layout .validity-visible {
display: flex;
}
.validity-hidden {
display: none;
}
.wiz-section-title {
font-size: var(--az-text-xs-plus);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--az-xs);
padding-top: var(--az-xs);
}
.wiz-vat-segmented {
display: flex;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-segment-track-pad);
gap: var(--az-2xs);
}
.wiz-vat-option {
flex: 1;
padding: var(--az-xs-plus) var(--az-sm);
border-radius: var(--az-radius-sm);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
background: transparent;
border: none;
cursor: pointer;
transition: color var(--az-transition), background var(--az-transition), box-shadow var(--az-transition), transform var(--az-transition);
text-align: center;
-webkit-tap-highlight-color: transparent;
}
.wiz-vat-option:hover {
color: var(--az-text-primary);
}
.wiz-vat-option:active {
filter: brightness(0.92);
}
.wiz-vat-option.active {
background: var(--az-segment-active-bg);
color: var(--az-segment-active-color);
box-shadow: var(--az-segment-active-shadow);
}
.wiz-vat-custom {
display: flex;
align-items: center;
gap: var(--az-xs);
}
.wiz-vat-custom-input {
width: 48px;
padding: var(--az-xs) var(--az-xs-plus);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-sm);
color: var(--az-text-primary);
font-size: var(--az-text-xs-plus);
text-align: center;
outline: none;
transition: border-color var(--az-transition), background var(--az-transition);
}
.wiz-vat-custom-input:focus {
border-color: var(--az-border-focus);
background: var(--az-bg-input-focus);
}
.wiz-vat-option.active .wiz-vat-custom-input {
background: transparent;
border: none;
color: var(--az-segment-active-color);
}
.wizard-lines-compact {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.wiz-lines-list,
.wizard-lines-list-compact {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.wizard-lines-empty {
text-align: center;
padding: var(--az-md);
color: var(--az-text-muted);
font-size: var(--az-text-xs-plus);
background: var(--az-bg-card-hover);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-xl);
}
.wizard-line-item,
.wiz-dnd-row {
display: flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-md) var(--az-lg);
background: var(--az-bg-card);
border: none;
border-radius: var(--az-radius-xl);
transition: background var(--az-transition), transform var(--az-transition);
min-height: 56px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.03);
}
.wizard-line-item:hover {
background: var(--az-bg-card-hover);
}
.wizard-line-just-added {
animation: wizLineIn 0.3s ease;
}
.cmp-lines-list:has(:only-child) .wiz-dnd-handle,
.cmp-lines-list:has(:only-child) .wizard-line-grip {
visibility: hidden;
}
.wiz-dnd-handle,
.wizard-line-grip {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
cursor: grab;
color: var(--az-text-muted);
flex-shrink: 0;
}
.wiz-dnd-handle:active,
.wizard-line-grip:active {
cursor: grabbing;
}
.wizard-grip-icon {
width: var(--az-lg);
height: var(--az-lg);
}
.wizard-line-category {
background: var(--az-bg-elevated);
}
.wizard-line-category-icon {
width: var(--az-xl);
height: var(--az-xl);
display: flex;
align-items: center;
justify-content: center;
color: var(--az-text-muted);
flex-shrink: 0;
}
.wizard-line-category-label,
.wizard-line-category-input {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
letter-spacing: 0.02em;
}
.wizard-line-category-input {
width: 100%;
background: transparent;
border: none;
padding: 0;
font-family: var(--az-font);
outline: none;
}
.wizard-line-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--az-2xs);
}
.wizard-line-designation {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wizard-line-details {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.wizard-line-total {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
white-space: nowrap;
flex-shrink: 0;
}
.wizard-line-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--az-2xs);
}
.wizard-line-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-lg);
}
.wizard-line-name {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.wizard-line-amount {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
white-space: nowrap;
flex-shrink: 0;
}
.wizard-line-meta {
font-size: var(--az-text-2xs);
color: var(--az-text-secondary);
}
.wizard-line-actions {
display: flex;
align-items: center;
gap: var(--az-xs);
opacity: 0;
transition: opacity var(--az-transition-fast);
pointer-events: none;
}
.wizard-line-item:hover .wizard-line-actions,
.wizard-line-item:focus-within .wizard-line-actions,
.wizard-line-item:active .wizard-line-actions,
.wiz-dnd-row:hover .wizard-line-actions,
.wiz-dnd-row:active .wizard-line-actions {
opacity: 1;
pointer-events: auto;
}
@media (hover: none) {
.wizard-line-actions {
opacity: 0.6;
pointer-events: auto;
}
.wizard-line-item:active .wizard-line-actions,
.wiz-dnd-row:active .wizard-line-actions {
opacity: 1;
}
}
.wizard-edit-btn,
.wizard-duplicate-btn,
.wizard-delete-btn,
.wizard-action-btn {
display: flex;
align-items: center;
justify-content: center;
width: var(--az-2xl);
height: var(--az-2xl);
border-radius: var(--az-radius-sm);
color: var(--az-text-tertiary);
flex-shrink: 0;
transition: color var(--az-transition), background var(--az-transition), transform var(--az-transition);
background: none;
border: none;
cursor: pointer;
}
.wizard-edit-btn:hover {
color: var(--az-blue);
background: var(--az-blue-bg);
}
.wizard-edit-btn:active {
filter: brightness(0.92);
}
.wizard-duplicate-btn:hover {
color: var(--az-indigo);
background: var(--az-indigo-bg);
}
.wizard-duplicate-btn:active {
filter: brightness(0.92);
}
.wizard-delete-btn:hover {
color: var(--az-red);
background: var(--az-red-bg);
}
.wizard-delete-btn:active {
filter: brightness(0.92);
}
.wizard-action-btn:hover {
color: var(--az-text-primary);
background: var(--az-bg-card-hover);
}
.wizard-action-btn:active {
filter: brightness(0.92);
}
.wizard-edit-btn i,
.wizard-duplicate-btn i,
.wizard-delete-btn i,
.wizard-action-btn i {
font-size: var(--az-text-lg-plus);
line-height: 1;
}
.wizard-line-move-btns {
display: flex;
flex-direction: column;
gap: 0;
flex-shrink: 0;
align-self: stretch;
justify-content: center;
}
.wizard-move-btn {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 20px;
border-radius: var(--az-radius-sm);
color: var(--az-text-muted);
background: none;
border: none;
cursor: pointer;
transition: color var(--az-transition);
padding: 0;
-webkit-tap-highlight-color: transparent;
opacity: 0.4;
}
.wizard-move-btn:active:not(:disabled) {
opacity: 1;
color: var(--az-text-primary);
}
.wizard-move-btn:disabled {
opacity: 0.1;
pointer-events: none;
}
.wizard-move-btn i {
font-size: var(--az-text-sm);
line-height: 1;
}
.wizard-total-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-sm) var(--az-md);
background: var(--az-blue-bg);
border: 1px solid var(--az-blue-border);
border-radius: var(--az-radius-lg);
margin-top: 0;
}
.wizard-total-label {
font-size: var(--az-text-xs-plus);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
}
.wizard-total-amount,
.wizard-total-value {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.wiz-accordion {
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
overflow: hidden;
}
.wiz-accordion-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--az-sm) var(--az-md);
cursor: pointer;
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
transition: color var(--az-transition), background var(--az-transition);
min-height: var(--az-input-h);
-webkit-tap-highlight-color: transparent;
text-align: left;
background: none;
border: none;
box-sizing: border-box;
}
.wiz-accordion-header:hover {
color: var(--az-text-primary);
}
.wiz-accordion-header:active {
background: var(--az-bg-elevated);
}
.wiz-accordion-icon {
width: var(--az-lg);
height: var(--az-lg);
color: var(--az-text-tertiary);
transition: transform var(--az-transition);
}
.wiz-accordion.is-open .wiz-accordion-icon {
transform: rotate(180deg);
}
.wiz-accordion-content {
display: block;
max-height: 0;
padding: 0 var(--az-md-plus) var(--az-sm-plus);
transition: max-height 0.25s ease, padding 0.25s ease;
overflow: hidden;
}
.wiz-accordion.is-open .wiz-accordion-content {
max-height: 1000px;
padding: 0 var(--az-md-plus) var(--az-md);
}
.wiz-mentions-form {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.wiz-mentions-form .wiz-accordion {
border-radius: var(--az-radius-lg);
}
.wiz-mentions-form .wiz-accordion+.wiz-accordion {
border-top: 1px solid var(--az-border);
}
.wiz-discount-form {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.wiz-discount-toggle-card {
display: flex;
flex-direction: column;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-md-plus) var(--az-lg);
transition: border-color 0.2s ease, background 0.2s ease;
}
.wiz-discount-toggle-card.is-active {
border-color: var(--az-blue-border);
background: var(--az-blue-bg);
}
.wiz-discount-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
}
.wiz-discount-toggle-info {
display: flex;
align-items: center;
gap: var(--az-sm-plus);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
}
.wiz-discount-toggle-info i {
font-size: var(--az-text-xl-plus);
line-height: 1;
color: var(--az-text-secondary);
flex-shrink: 0;
}
.wiz-discount-toggle-card.is-active .wiz-discount-toggle-info i {
color: var(--az-blue);
}
.wiz-toggle {
position: relative;
display: inline-flex;
cursor: pointer;
flex-shrink: 0;
}
.wiz-toggle input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.wiz-toggle-track {
width: var(--az-touch-min);
height: 24px;
background: var(--az-border);
border-radius: var(--az-radius-xl);
position: relative;
transition: background 0.2s ease;
}
.wiz-toggle-track::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: var(--az-text-secondary);
border-radius: var(--az-radius-pill);
transition: transform 0.2s ease, background 0.2s ease;
}
.wiz-toggle input:checked + .wiz-toggle-track {
background: var(--az-blue);
}
.wiz-toggle input:checked + .wiz-toggle-track::after {
transform: translateX(20px);
background: var(--az-text-on-accent);
}
.wiz-discount-fields {
display: flex;
flex-direction: column;
gap: var(--az-md);
animation: wiz-discount-slide-in 0.2s ease;
}
@keyframes wiz-discount-slide-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.wiz-discount-type-segmented {
display: flex;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-segment-track-pad);
gap: var(--az-segment-track-pad);
}
.wiz-discount-type-option {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-xs-plus);
padding: var(--az-sm) var(--az-md);
border-radius: calc(var(--az-radius-lg) - 2px);
border: none;
background: transparent;
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
min-height: 40px;
}
.wiz-discount-type-option i {
flex-shrink: 0;
}
.wiz-discount-type-option:hover {
color: var(--az-text-primary);
background: var(--az-bg-card-hover);
}
.wiz-discount-type-option.active {
background: var(--az-btn-inv-bg-gradient);
color: var(--az-btn-inv-text);
box-shadow: var(--az-shadow);
}
.wiz-discount-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.wiz-discount-input-wrap .wizard-input {
padding-right: 36px;
}
.wiz-discount-input-suffix {
position: absolute;
right: 12px;
color: var(--az-text-muted);
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
pointer-events: none;
}
.wiz-discount-preview {
display: flex;
flex-direction: column;
gap: var(--az-sm);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-md-plus) var(--az-lg);
}
.wiz-discount-preview-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.wiz-discount-preview-label {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
}
.wiz-discount-preview-value {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
}
.wiz-discount-preview-discount .wiz-discount-preview-value {
color: var(--az-red);
font-weight: var(--az-font-semibold);
}
.wiz-discount-preview-divider {
height: 1px;
background: var(--az-border);
}
.wiz-discount-preview-total .wiz-discount-preview-label {
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.wiz-discount-preview-total .wiz-discount-preview-value {
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
}
#wiz-navigation-buttons,
.wiz-navigation-buttons {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
width: 100%;
}
#wiz-prev {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--az-xs);
padding: 0 16px;
border-radius: 12px;
font-size: 15px;
font-weight: 500;
color: var(--az-text-secondary);
background: transparent;
border: none;
cursor: pointer;
transition: background 0.15s ease;
height: 48px;
}
#wiz-prev:active {
filter: brightness(0.92);
}
#wiz-prev:focus-visible {
box-shadow: var(--az-focus-ring);
outline: none;
}
#wiz-next {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
padding: 0 24px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
background: var(--az-text-primary);
color: var(--az-bg-card);
border: none;
cursor: pointer;
transition: opacity 0.15s ease;
height: 48px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
#wiz-next:active:not(:disabled) {
opacity: 0.85;
}
#wiz-next:focus-visible {
box-shadow: var(--az-focus-ring);
outline: none;
}
#wiz-next:disabled {
opacity: 0.4;
cursor: not-allowed;
background: var(--az-bg-elevated);
color: var(--az-text-muted);
}
#wiz-prev i,
#wiz-next i {
font-size: var(--az-text-md);
line-height: 1;
}
.wiz-btn-validate {
display: flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-sm) var(--az-md);
border-radius: var(--az-radius-lg);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
background: var(--az-green);
border: 1px solid var(--az-green);
color: var(--az-btn-inv-text);
cursor: pointer;
transition: background var(--az-transition), border-color var(--az-transition), transform var(--az-transition);
}
.wiz-btn-validate:hover {
background: var(--az-green-hover);
border-color: var(--az-green-hover);
color: var(--az-btn-inv-text);
}
.wiz-btn-validate:active {
filter: brightness(0.92);
}
.wiz-btn-validate i {
font-size: var(--az-text-lg-plus);
line-height: 1;
}
.wizard-download-overlay {
position: absolute;
inset: 0;
z-index: var(--az-z-loader);
background: var(--az-bg-overlay);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--az-radius-xl);
--az-loader-size: 128px;
}
.wizard-download-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.wizard-download-overlay .az-loader__ring--a,
.wizard-download-overlay .az-loader__ring--d { stroke: var(--az-text-on-accent); opacity: 0.5; }
.wizard-download-overlay .az-loader__ring--b { stroke: var(--az-text-on-accent); opacity: 0.35; }
.wizard-download-overlay .az-loader__ring--c { stroke: var(--az-text-on-accent); opacity: 0.65; }
.wizard-download-text {
margin-top: var(--az-xl);
font-family: var(--az-font);
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--az-text-on-accent); opacity: 0.7;
}
.wiz-client-suggestions,
.wizard-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--az-bg-surface);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
max-height: 200px;
overflow-y: auto;
z-index: var(--az-z-dropdown);
box-shadow: var(--az-shadow-lg);
}
.wizard-suggestion-item {
padding: var(--az-sm-plus) var(--az-md-plus);
font-size: var(--az-text-xs);
color: var(--az-text-primary);
cursor: pointer;
transition: background var(--az-transition);
}
.wizard-suggestion-item:hover {
background: var(--az-bg-card-hover);
}
.wizard-suggestion-item:active {
background: var(--az-bg-elevated);
}
.wizard-toast {
position: fixed;
top: calc(var(--az-xl) + env(safe-area-inset-top, 0px));
left: 50%;
transform: translateX(-50%) translateY(-120%);
opacity: 0;
max-width: calc(100vw - var(--az-xl) * 2);
padding: var(--az-sm) var(--az-lg);
border-radius: var(--az-radius-pill);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
z-index: var(--az-z-modal);
display: inline-flex;
align-items: center;
gap: var(--az-sm);
pointer-events: auto;
cursor: pointer;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
white-space: nowrap;
}
.wizard-toast--visible {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.wizard-toast__icon {
display: flex;
font-size: var(--az-text-md);
flex-shrink: 0;
}
.wizard-toast__msg {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
}
.wizard-toast--success .wizard-toast__icon { color: var(--az-green); }
.wizard-toast--error .wizard-toast__icon { color: var(--az-red); }
.wizard-toast--warning .wizard-toast__icon { color: var(--az-amber); }
.wizard-toast--info .wizard-toast__icon { color: var(--az-text-muted); }
.wizard-undo-toast {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.wizard-undo-btn {
padding: var(--az-xs) var(--az-sm-plus);
border-radius: var(--az-radius-sm);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
background: var(--az-bg-elevated);
color: inherit;
border: none;
cursor: pointer;
text-decoration: underline;
}
.wizard-form-submitting {
opacity: 0.6;
pointer-events: none;
}
@keyframes wizLineIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes wizLineOut {
from {
opacity: 1;
transform: translateX(0);
max-height: 80px;
}
to {
opacity: 0;
transform: translateX(-24px);
max-height: 0;
padding: 0;
margin: 0;
border-width: 0;
}
}
.wizard-line-removing {
animation: wizLineOut 0.25s ease forwards;
overflow: hidden;
pointer-events: none;
}
.wizard-lines-empty-premium {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-sm);
padding: var(--az-xl) var(--az-lg);
text-align: center;
}
.wizard-lines-empty-premium.cmp-empty-cta {
width: 100%;
min-height: auto;
border: none;
border-radius: 0;
background: transparent;
background: var(--az-bg-card-hover);
cursor: pointer;
color: inherit;
font-family: inherit;
padding: var(--az-xl) var(--az-lg);
gap: var(--az-sm);
-webkit-tap-highlight-color: transparent;
transition: border-color 0.15s ease, background 0.15s ease;
justify-content: center;
}
.wizard-lines-empty-premium.cmp-empty-cta:active {
background: var(--az-bg-elevated);
border-color: var(--az-blue);
}
.wizard-lines-empty-premium.cmp-empty-cta .wiz-empty-icon {
color: var(--az-blue);
opacity: 0.85;
font-size: 28px;
}
.wizard-lines-empty-premium.cmp-empty-cta .wiz-empty-title {
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
}
.cmp-lines-area:has(.cmp-empty-cta) .cmp-add-line {
display: none;
}
.wizard-lines-empty-premium .wiz-empty-icon {
font-size: 24px;
color: var(--az-text-tertiary);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--az-bg-card-hover);
border-radius: 50%;
margin-bottom: 4px;
}
.wizard-lines-empty-premium .wiz-empty-title {
font-size: 15px;
font-weight: 500;
color: var(--az-text-secondary);
letter-spacing: -0.01em;
}
.wiz-onboarding-tooltip {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: var(--az-sm);
padding: var(--az-md) var(--az-lg);
background: var(--az-bg-elevated);
border: 1px solid var(--az-blue-border);
border-radius: var(--az-radius-md);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
z-index: var(--az-z-sticky);
max-width: 280px;
text-align: center;
animation: wizTooltipIn 0.3s ease;
}
.wiz-onboarding-tooltip::before {
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 10px;
height: 10px;
background: var(--az-bg-elevated);
border-top: 1px solid var(--az-blue-border);
border-left: 1px solid var(--az-blue-border);
}
.wiz-onboarding-text {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
line-height: 1.5;
margin-bottom: var(--az-sm);
}
.wiz-onboarding-dismiss {
font-size: var(--az-text-2xs);
color: var(--az-blue);
cursor: pointer;
background: none;
border: none;
font-weight: var(--az-font-medium);
}
@keyframes wizTooltipIn {
from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.wiz-notes-section {
margin-top: var(--az-lg);
}
.wiz-notes-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
margin-bottom: var(--az-sm);
display: flex;
align-items: center;
gap: var(--az-sm);
}
.wiz-notes-textarea {
width: 100%;
min-height: 72px;
padding: var(--az-md);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
color: var(--az-text-primary);
font-size: var(--az-text-xs);
font-family: inherit;
resize: vertical;
transition: border-color var(--az-transition-fast);
}
.wiz-notes-textarea:focus {
outline: none;
border-color: var(--az-blue);
}
.wiz-notes-textarea::placeholder {
color: var(--az-text-muted);
}
@media (min-width: 769px) {
#wizard-overlay.wiz {
padding: var(--az-xl);
align-items: center;
justify-content: center;
background: var(--az-bg-overlay);
}
#wizard-overlay .wizard-layout {
max-width: 600px;
width: 100%;
height: auto;
max-height: 85vh;
border-radius: var(--az-radius-2xl);
margin: 0;
border: 1px solid var(--az-border);
overflow: hidden;
display: flex;
flex-direction: column;
background: var(--az-bg-app);
}
#wizard-overlay .wiz__header {
padding: var(--az-md-plus) var(--az-xl) var(--az-sm-plus);
border-bottom: none;
background: var(--az-bg-app);
position: relative;
justify-content: center;
flex-shrink: 0;
}
#wizard-overlay .wiz__header .wiz__close {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
}
#wizard-overlay .wizard-layout {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
#wizard-overlay .wizard-progress-section {
padding: var(--az-sm) var(--az-xl) 0;
flex-shrink: 0;
}
#wizard-overlay .wizard-scroll-content {
flex: 1;
overflow-y: auto;
padding: var(--az-lg-plus) var(--az-xl) var(--az-lg);
}
#wizard-overlay .wiz-step-header {
margin-bottom: var(--az-md);
padding-bottom: var(--az-sm);
}
#wizard-overlay .wiz-step-title {
font-size: var(--az-text-lg-plus);
font-weight: var(--az-font-semibold);
}
#wizard-overlay .wiz-step-subtitle {
font-size: var(--az-text-xs);
margin-top: var(--az-2xs);
}
#wizard-overlay .wizard-nav-section {
padding: var(--az-md) var(--az-xl);
border-top: 1px solid var(--az-border);
flex-shrink: 0;
}
#wizard-overlay #wiz-prev {
padding: var(--az-sm) var(--az-lg);
font-size: var(--az-text-sm);
min-height: 36px;
border-radius: var(--az-radius-lg);
}
#wizard-overlay #wiz-next {
padding: var(--az-sm) var(--az-lg-plus);
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
min-height: 36px;
border-radius: var(--az-radius-lg);
}
#wizard-overlay .wiz-btn-validate {
padding: var(--az-sm) var(--az-lg-plus);
font-size: var(--az-text-sm);
min-height: 36px;
border-radius: var(--az-radius-lg);
}
#wizard-overlay .wizard-input,
#wizard-overlay .wiz-input-compact {
font-size: var(--az-text-xs);
min-height: 38px;
padding: var(--az-sm) var(--az-md);
border-radius: var(--az-radius-lg);
}
#wizard-overlay .wizard-label {
font-size: var(--az-text-xs);
}
#wizard-overlay .wiz-grid-2 {
grid-template-columns: 1fr 1fr;
gap: var(--az-md);
}
#wizard-overlay .wiz-section-title {
font-size: var(--az-text-xs-plus);
margin-bottom: var(--az-xs-plus);
padding-top: var(--az-xs);
}
#wizard-overlay .wiz-modal-logo .logo-bold {
font-size: var(--az-text-xs);
letter-spacing: 1.5px;
}
#wizard-overlay .wiz-modal-logo .logo-light {
font-size: var(--az-text-xs);
letter-spacing: 0.5px;
}
}
.wiz-bottom-sheet-overlay {
position: fixed;
inset: 0;
background: var(--az-bg-overlay);
z-index: var(--az-z-toast);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s ease, visibility 0.25s ease;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.wiz-bottom-sheet-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.wiz-bottom-sheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: var(--az-bg-elevated);
border-radius: var(--az-radius-3xl) var(--az-radius-3xl) 0 0;
z-index: calc(var(--az-z-toast) + 1);
transform: translateY(100%);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
opacity 0.25s ease,
visibility 0.25s ease;
box-shadow: var(--az-shadow-modal);
padding: 0 var(--az-xl) calc(var(--az-xl) + env(safe-area-inset-bottom, 0px));
max-height: 85vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.wiz-bottom-sheet.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.wiz-bottom-sheet-handle {
width: var(--az-3xl);
height: var(--az-xs);
background: var(--az-text-tertiary);
border-radius: var(--az-radius-pill);
margin: var(--az-md) auto var(--az-lg);
}
.wiz-bottom-sheet-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin-bottom: var(--az-xl);
}
.wiz-bottom-sheet-fields {
display: flex;
flex-direction: column;
gap: var(--az-lg);
}
.wiz-bottom-sheet-field {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.wiz-bottom-sheet-field .wizard-label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
text-transform: none;
letter-spacing: normal;
color: var(--az-text-primary);
}
.wiz-bottom-sheet-field .wizard-input {
height: var(--az-touch-min);
min-height: var(--az-touch-min);
font-size: var(--az-text-md);
padding: 0 var(--az-lg);
border-radius: var(--az-radius-lg);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
color: var(--az-text-primary);
width: 100%;
box-sizing: border-box;
}
.wiz-bottom-sheet-field .wizard-input:focus {
border-color: var(--az-text-primary);
background: var(--az-bg-input-focus);
outline: none;
}
.wiz-bottom-sheet-field .wizard-input::placeholder {
color: var(--az-text-disabled);
}
.wiz-bottom-sheet-field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--az-lg);
}
.wiz-bottom-sheet-submit {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
margin-top: var(--az-xl);
padding: var(--az-md) var(--az-xl);
border-radius: var(--az-radius-pill);
background: var(--az-btn-inv-bg-gradient);
border: none;
color: var(--az-btn-inv-text);
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: opacity var(--az-transition-fast), transform var(--az-transition-fast);
}
.wiz-bottom-sheet-submit:active {
opacity: 0.9;
filter: brightness(0.92);
}
.wiz-bottom-sheet-submit:focus-visible {
outline: 2px solid var(--az-text-primary);
outline-offset: 2px;
}
.wiz-bottom-sheet.wiz-sheet-keyboard-open {
transform: translateY(calc(-1 * var(--wiz-keyboard-offset, 0px)));
max-height: calc(100vh - var(--wiz-keyboard-offset, 0px));
transition: transform var(--az-transition), max-height var(--az-transition);
}
.wiz-line-sheet-delete {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
width: 100%;
min-height: var(--az-touch-min);
margin-top: var(--az-md);
padding: var(--az-md) var(--az-xl);
border-radius: var(--az-radius-lg);
background: transparent;
border: 1px solid var(--az-red-border);
color: var(--az-red);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
font-family: inherit;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background var(--az-transition-fast), transform var(--az-transition-fast);
}
.wiz-line-sheet-delete:active {
background: var(--az-red-bg);
filter: brightness(0.92);
}
.wiz-ls-recents {
padding: 0 0 var(--az-md);
border-bottom: 1px solid var(--az-border);
margin-bottom: var(--az-md);
}
.wiz-ls-recents-label {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--az-sm);
}
.wiz-ls-recents-chips {
display: flex;
flex-wrap: wrap;
gap: var(--az-xs-plus);
}
.wiz-ls-recent-chip {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs-plus) var(--az-md);
border-radius: var(--az-radius-pill);
border: 1px solid var(--az-border);
background: var(--az-bg-card);
color: var(--az-text-primary);
font-size: var(--az-text-xs);
font-family: inherit;
cursor: pointer;
transition: transform var(--az-transition-fast), border-color var(--az-transition-fast), background var(--az-transition-fast);
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.wiz-ls-recent-chip:active {
filter: brightness(0.92);
border-color: var(--az-blue);
background: var(--az-blue-bg);
}
.wiz-ls-recent-chip--used {
opacity: 0.35;
pointer-events: none;
}
.wiz-ls-recent-chip-price {
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
font-size: var(--az-text-2xs);
}
.cmp-toggle-edit-icon {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
opacity: 0.5;
flex-shrink: 0;
}
.wiz-payment-sheet-options {
display: flex;
flex-direction: column;
gap: var(--az-sm);
margin-bottom: var(--az-lg);
}
.wiz-payment-sheet-option {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-md) var(--az-lg);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
color: var(--az-text-primary);
font-size: var(--az-text-sm);
min-height: 44px;
cursor: pointer;
transition: border-color 0.15s, background-color 0.15s;
-webkit-tap-highlight-color: transparent;
}
.wiz-payment-sheet-option:active {
filter: brightness(0.92);
}
.wiz-payment-sheet-check {
color: var(--az-text-secondary);
font-size: var(--az-text-md);
flex-shrink: 0;
}
.wiz-payment-sheet-option.active {
border-color: var(--az-text-muted);
background: rgba(255, 255, 255, 0.04);
}
.wiz-line-input-bar {
display: flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-md) var(--az-lg);
background: var(--az-bg-card-hover);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-xl);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: border-color var(--az-transition-fast), background var(--az-transition-fast), transform var(--az-transition-fast);
min-height: var(--az-touch-min);
}
.wiz-line-input-bar:hover {
border-color: var(--az-text-muted);
background: var(--az-bg-card-hover);
}
.wiz-line-input-bar:active {
filter: brightness(0.92);
border-color: var(--az-text-tertiary);
}
.wiz-line-input-icon {
font-size: var(--az-text-md);
color: var(--az-text-tertiary);
flex-shrink: 0;
line-height: 1;
}
.wiz-line-input-placeholder {
font-size: var(--az-text-sm);
color: var(--az-text-muted);
font-weight: var(--az-font-medium);
}
@media (prefers-reduced-motion: reduce) {
.wizard-step-body,
.wizard-line-just-added,
.wizard-line-removing,
.wiz-onboarding-tooltip {
animation: none;
}
.wiz-accordion-content,
.wiz-step-dot,
.wiz-step-line,
.wiz-accordion-icon,
.wiz-bottom-sheet,
.wiz-bottom-sheet-overlay,
.cmp-toggle-body,
.cmp-toggle-chevron,
.wiz-options-accordion-body,
.wiz-options-accordion-chevron,
.wiz-options-accordion-summary {
transition: none;
}
.wiz-stepper-circle,
.wizard-input,
.wiz-input-compact,
.wiz-type-select,
.wiz-vat-option,
.wizard-line-item,
.wiz-dnd-row,
.wizard-edit-btn,
.wizard-duplicate-btn,
.wizard-delete-btn,
.wizard-action-btn,
.wizard-move-btn,
.wiz-discount-type-option,
#wiz-prev,
#wiz-next,
#wiz-save,
.wiz-btn-validate,
.wizard-undo-toast-btn,
.wiz-bottom-sheet-submit,
.wiz-line-sheet-delete,
.wiz-ls-recent-chip,
.wiz-line-input-bar,
.cmp-type-btn,
.cmp-validity-btn,
.cmp-recent-chip,
.cmp-empty-cta,
.cmp-tab,
.cmp-steps-track,
.wiz__close {
transition: none;
}
}
.wiz-stepper-2 {
max-width: 200px;
margin: 0 auto;
justify-content: center;
gap: var(--az-sm);
}
.wiz-stepper-2 .wiz-stepper-step {
flex: 0 0 auto;
}
.wiz-stepper-2 .wiz-stepper-connector {
display: none;
}
.wiz-check-svg {
display: block;
}
.wiz-check-path {
stroke-dasharray: 24;
stroke-dashoffset: 24;
animation: wiz-check-draw 0.35s ease forwards;
}
@keyframes wiz-check-draw {
to { stroke-dashoffset: 0; }
}
.wiz-stepper-2 + .wiz-progress-text {
display: none;
}
.wiz-options-accordion {
margin-top: var(--az-lg);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
overflow: hidden;
background: var(--az-bg-card);
}
.wiz-options-accordion-header {
width: 100%;
display: flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-md) var(--az-lg);
background: none;
border: none;
cursor: pointer;
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
transition: background var(--az-transition);
}
.wiz-options-accordion-header:hover {
background: var(--az-bg-elevated);
}
.wiz-options-accordion-title {
display: flex;
align-items: center;
gap: var(--az-xs);
flex-shrink: 0;
}
.wiz-options-accordion-summary {
flex: 1;
text-align: right;
font-size: var(--az-text-xs);
color: var(--az-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity var(--az-transition);
}
.wiz-options-accordion.is-open .wiz-options-accordion-summary {
opacity: 0;
pointer-events: none;
}
.wiz-options-accordion-chevron {
flex-shrink: 0;
font-size: var(--az-text-md);
color: var(--az-text-tertiary);
transition: transform var(--az-transition);
}
.wiz-options-accordion.is-open .wiz-options-accordion-chevron {
transform: rotate(180deg);
}
.wiz-options-accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
padding: 0 var(--az-lg);
}
.wiz-options-accordion.is-open .wiz-options-accordion-body {
max-height: 800px;
padding: 0 var(--az-lg) var(--az-lg);
}
@keyframes wiz-total-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.wizard-total-amount.pulse {
animation: wiz-total-pulse 0.3s ease;
}
.wiz-recent-docs-scroll {
margin-bottom: 0;
margin-top: var(--az-md);
padding: var(--az-sm) 0;
background: transparent;
border-radius: 0;
border-top: 1px solid var(--az-border);
}
.wiz-recent-docs-scroll .wiz-recent-docs-label {
margin-bottom: var(--az-xs);
}
.wiz-recent-docs-scroll .wiz-recent-docs-chips {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: var(--az-sm);
padding-bottom: var(--az-xs);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.wiz-recent-docs-scroll .wiz-recent-docs-chips::-webkit-scrollbar {
display: none;
}
.wiz-recent-docs-scroll .wiz-recent-doc-chip {
flex-shrink: 0;
white-space: nowrap;
}
.wiz-address-auto {
resize: none;
min-height: 38px;
field-sizing: content;
}
.wiz__body {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.composer-layout {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
}
.cmp-steps-track {
display: flex;
flex: 1;
min-height: 0;
height: 100%;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cmp-step {
flex: 0 0 100%;
min-width: 0;
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
}
.cmp-step-body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: var(--az-xl) var(--az-lg) var(--az-lg);
display: flex;
flex-direction: column;
gap: var(--az-lg);
}
.cmp-step-body--client {
gap: var(--az-xl);
}
.cmp-client-center {
display: flex;
flex-direction: column;
gap: var(--az-lg);
}
.cmp-client-center > .cmp-client-block {
background: var(--az-bg-card);
border-radius: var(--az-radius-xl) var(--az-radius-xl) 0 0;
padding: var(--az-md) var(--az-lg) var(--az-md);
margin-bottom: 0;
box-shadow: none;
}
.cmp-client-center > .cmp-address-block {
background: var(--az-bg-card);
border-radius: 0 0 var(--az-radius-xl) var(--az-radius-xl);
padding: 0 var(--az-lg) var(--az-md);
margin-top: calc(-1 * var(--az-lg));
position: relative;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.03);
}
.cmp-client-center > .cmp-address-block::before {
content: '';
position: absolute;
top: 0;
left: var(--az-lg);
right: 0;
height: 0.5px;
background: var(--az-border);
}
.cmp-options-inline {
display: flex;
flex-direction: column;
gap: 0;
background: var(--az-bg-card);
border-radius: var(--az-radius-xl);
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.03);
}
.cmp-meta-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--az-lg);
background: var(--az-bg-card);
border-radius: var(--az-radius-xl);
padding: var(--az-md) var(--az-lg);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.03);
}
.cmp-meta-field {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.cmp-meta-field--end {
align-items: flex-end;
text-align: right;
}
.cmp-meta-row .az-date-wrap {
width: auto;
flex: 0 0 auto;
gap: var(--az-xs);
background: transparent;
border: none;
border-radius: 0;
padding: 0;
}
.cmp-meta-row .az-date-input {
width: 7em;
padding: 0;
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
background: transparent;
border: none;
letter-spacing: 0.02em;
}
.cmp-meta-row .az-date-input:focus {
outline: none;
}
.cmp-meta-row .az-date-cal-btn {
position: static;
transform: none;
width: var(--az-xl);
height: var(--az-xl);
flex-shrink: 0;
color: var(--az-text-tertiary);
}
.cmp-meta-row .az-date-cal-btn i {
font-size: var(--az-text-sm);
}
.cmp-meta-row .flatpickr-wrapper {
position: static;
display: contents;
}
.cmp-meta-row .az-date-cal-btn + input.flatpickr-input,
.cmp-meta-row .flatpickr-wrapper > input.flatpickr-input {
position: absolute;
width: 0;
height: 0;
padding: 0;
border: none;
opacity: 0;
pointer-events: none;
}
.cmp-meta-ref {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-tertiary);
letter-spacing: 0.02em;
}
.cmp-section-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-normal);
color: var(--az-text-tertiary);
text-transform: none;
letter-spacing: normal;
}
.cmp-client-block > .cmp-section-label,
.cmp-address-block > .cmp-section-label {
padding: 0;
margin-bottom: 0;
}
.cmp-options-inline > .cmp-section-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-normal);
text-transform: none;
letter-spacing: normal;
padding: var(--az-md) var(--az-lg) 0;
}
.cmp-options-inline > .cmp-section-label + .cmp-toggle-section {
border-bottom: none;
}
.cmp-options-inline > .cmp-section-label:not(:first-child) {
position: relative;
}
.cmp-options-inline > .cmp-section-label:not(:first-child)::before {
content: '';
position: absolute;
top: 0;
left: var(--az-lg);
right: 0;
height: 0.5px;
background: var(--az-border);
}
.cmp-step-body--lines {
padding-bottom: var(--az-sm);
}
.cmp-step-body--toggles {
gap: var(--az-sm);
}
.cmp-step-body--recap {
gap: var(--az-sm);
}
.cmp-branding {
display: none;
}
.cmp-step-label {
display: none;
}
.cmp-ghost-name {
width: 100%;
background: transparent;
border: none;
border-radius: 0;
padding: var(--az-xs) var(--az-md) var(--az-xs) var(--az-3xl);
font-size: var(--az-text-md);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
font-family: var(--az-font);
outline: none;
min-height: var(--az-touch-min);
transition: background var(--az-transition-fast);
}
.wiz-field-relative {
position: relative;
}
.wiz-search-wrap .wiz-search-icon {
position: absolute;
left: var(--az-md);
top: 50%;
transform: translateY(-50%);
font-size: var(--az-text-md);
color: var(--az-text-tertiary);
pointer-events: none;
z-index: 1;
}
.cmp-ghost-address {
width: 100%;
background: transparent;
border: none;
border-radius: 0;
padding: var(--az-xs) var(--az-md);
font-size: var(--az-text-sm);
font-weight: var(--az-font-normal);
color: var(--az-text-primary);
font-family: var(--az-font);
outline: none;
transition: background var(--az-transition-fast);
height: auto;
line-height: 1.4;
-webkit-appearance: none;
appearance: none;
}
.cmp-ghost-name::placeholder,
.cmp-ghost-address::placeholder {
color: var(--az-text-muted);
font-weight: var(--az-font-normal);
}
.cmp-ghost-name:focus {
background: var(--az-blue-bg);
}
.cmp-ghost-address:focus {
background: var(--az-blue-bg);
}
.cmp-ghost-address {
resize: none;
field-sizing: content;
min-height: var(--az-touch-min);
}
.cmp-client-block {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.cmp-address-block {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.cmp-date-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
padding: var(--az-sm) var(--az-lg);
background: var(--az-bg-card);
border-radius: var(--az-radius-xl);
min-height: var(--az-touch-min);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.03);
}
.cmp-date-label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
}
.cmp-date-input {
background: transparent;
border: none;
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
text-align: right;
font-family: var(--az-font);
outline: none;
-webkit-appearance: none;
appearance: none;
min-width: 0;
}
.cmp-validity {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-md);
padding: var(--az-md) var(--az-lg);
background: var(--az-bg-card);
border-radius: var(--az-radius-lg);
border: 1px solid var(--az-border);
min-height: var(--az-touch-min);
}
.cmp-validity-label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
}
.cmp-validity-tabs {
display: flex;
gap: var(--az-xs);
}
.cmp-validity-btn {
padding: var(--az-xs) var(--az-md);
border-radius: var(--az-radius-md);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
background: transparent;
border: 1px solid var(--az-border);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition);
font-family: var(--az-font);
min-height: 32px;
}
.cmp-validity-btn.active,
.cmp-validity-btn:active {
background: var(--az-blue-bg);
color: var(--az-blue);
border-color: var(--az-blue-border);
}
.cmp-recent-section {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.cmp-recent-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-normal);
color: var(--az-text-tertiary);
text-transform: none;
letter-spacing: normal;
padding-left: var(--az-xs);
}
.cmp-recent-clients {
display: flex;
flex-wrap: wrap;
gap: var(--az-sm);
}
.cmp-recent-chip {
padding: var(--az-xs-plus) var(--az-md);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
background: var(--az-bg-card);
border: none;
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition);
font-family: var(--az-font);
white-space: nowrap;
box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.06);
}
.cmp-recent-chip:active {
background: var(--az-blue-bg);
color: var(--az-blue);
border-color: var(--az-blue-border);
}
.cmp-recent-chip--used {
background: var(--az-blue-bg);
color: var(--az-blue);
border-color: var(--az-blue-border);
}
.cmp-total {
display: flex;
align-items: center;
justify-content: space-between;
}
.cmp-total-label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
}
.cmp-total-amount {
font-size: var(--az-text-xl);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
letter-spacing: var(--az-tracking-tight);
}
.cmp-lines-list {
display: flex;
flex-direction: column;
gap: var(--az-sm);
flex: 1;
}
.cmp-toggle-section {
background: transparent;
border-radius: 0;
border: none;
overflow: hidden;
}
.cmp-step-body > .cmp-toggle-section {
background: var(--az-bg-card);
border-radius: var(--az-radius-xl);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.03);
}
.cmp-toggle-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--az-md) var(--az-lg);
background: transparent;
border: none;
cursor: pointer;
font-family: var(--az-font);
min-height: var(--az-touch-min);
gap: var(--az-sm);
}
.cmp-toggle-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
text-align: left;
}
.cmp-toggle-value {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
margin-right: auto;
white-space: nowrap;
text-align: left;
}
.cmp-toggle-chevron {
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
transition: transform 0.3s ease;
flex-shrink: 0;
}
.cmp-toggle-section.is-open .cmp-toggle-chevron {
transform: rotate(180deg);
}
.cmp-toggle-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.cmp-toggle-section.is-open .cmp-toggle-body {
max-height: 600px;
}
.cmp-toggle-inner {
padding: 0 var(--az-lg) var(--az-lg);
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.cmp-recap-title {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
text-transform: uppercase;
letter-spacing: 0.08em;
text-align: center;
margin-bottom: var(--az-lg);
}
.cmp-step-body--recap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
}
.cmp-recap-card {
background: var(--az-bg-elevated);
border-radius: var(--az-radius-xl);
padding: var(--az-xl);
display: flex;
flex-direction: column;
gap: var(--az-lg);
width: 100%;
}
.cmp-recap-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--az-sm);
}
.cmp-recap-type {
font-size: var(--az-text-md);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
}
.cmp-recap-date {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.cmp-recap-row {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.cmp-recap-row-label {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.cmp-recap-row-value {
display: flex;
flex-direction: column;
gap: 2px;
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
}
.cmp-recap-row-sub {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
font-weight: normal;
}
.cmp-recap-lines {
display: flex;
flex-direction: column;
}
.cmp-recap-line {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-sm) 0;
border-bottom: 1px solid var(--az-border);
gap: var(--az-sm);
}
.cmp-recap-line:last-of-type {
border-bottom: none;
}
.cmp-recap-line-name {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
flex: 1;
min-width: 0;
}
.cmp-recap-line-amount {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
white-space: nowrap;
}
.cmp-recap-line-meta {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
padding-bottom: var(--az-xs);
}
.cmp-recap-chips {
display: flex;
flex-wrap: wrap;
gap: var(--az-sm);
}
.cmp-recap-chip {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
background: rgba(255, 255, 255, 0.06);
padding: var(--az-xs) var(--az-md);
border-radius: var(--az-radius-pill);
white-space: nowrap;
}
.cmp-recap-totals {
display: flex;
flex-direction: column;
gap: var(--az-xs);
border-top: 1px solid var(--az-border);
padding-top: var(--az-md);
}
.cmp-recap-total-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.cmp-recap-discount {
color: var(--az-green);
}
.cmp-recap-grand-total {
font-size: var(--az-text-lg);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
letter-spacing: var(--az-tracking-tight);
padding-top: var(--az-xs);
}
.cmp-cta {
width: 100%;
padding: var(--az-sm-plus) var(--az-lg);
border-radius: var(--az-radius-xl);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-bg-app);
background: var(--az-text-primary);
border: none;
cursor: pointer;
font-family: var(--az-font);
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast);
min-height: var(--az-touch-min);
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
letter-spacing: var(--az-tracking-tight);
}
.cmp-cta:active {
filter: brightness(0.92);
}
.cmp-cta--secondary {
background: transparent;
color: var(--az-text-primary);
border: 1px solid var(--az-border);
}
.cmp-add-actions {
display: flex;
gap: var(--az-sm);
padding: var(--az-xs) 0;
justify-content: center;
}
.cmp-add-actions--empty {
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: var(--az-lg);
flex: 0;
padding-top: 48px;
padding: 0;
}
.cmp-empty-icon {
font-size: 48px;
color: var(--az-text-tertiary);
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: var(--az-bg-card-hover);
border-radius: 50%;
}
.cmp-empty-hint {
font-size: 15px;
font-weight: 500;
color: var(--az-text-secondary);
text-align: center;
margin: 0;
line-height: 1.5;
}
.cmp-empty-sub {
display: none;
}
.cmp-empty-btns {
display: flex;
flex-direction: row;
gap: var(--az-sm);
width: 100%;
margin-top: 16px;
}
.cmp-empty-btns .cmp-add-action-btn {
flex: 1;
}
.cmp-empty-btns .cmp-add-action-btn--secondary {
order: -1;
}
.cmp-add-action-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--az-xs);
padding: 0 var(--az-lg);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-bg-card);
background: var(--az-text-primary);
border: none;
cursor: pointer;
font-family: var(--az-font);
transition: opacity 0.15s ease;
height: 48px;
-webkit-tap-highlight-color: transparent;
}
.cmp-add-action-btn:active {
opacity: 0.85;
}
.cmp-add-action-btn--secondary {
background: transparent;
color: var(--az-text-secondary);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-pill);
}
.cmp-add-action-btn--secondary:active {
border-color: var(--az-text-primary);
color: var(--az-text-primary);
}
.cmp-add-action-btn--compact {
flex: 0 0 auto;
}
.cmp-type-btn {
padding: var(--az-sm) var(--az-lg);
border-radius: var(--az-radius-lg);
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition);
font-family: var(--az-font);
min-height: 36px;
}
.cmp-type-btn.active {
color: var(--az-blue);
background: var(--az-blue-bg);
border-color: var(--az-blue-border);
}
.wizard-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--az-bg-surface);
border: 1px solid var(--az-border-hover);
border-radius: var(--az-radius-lg);
margin-top: var(--az-xs);
max-height: 200px;
overflow-y: auto;
z-index: var(--az-z-dropdown);
box-shadow: var(--az-shadow-dropdown);
}
.wizard-suggestions.hidden {
display: none;
}
.cmp-empty-cta {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--az-md);
padding: var(--az-3xl) var(--az-lg);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-xl);
background: var(--az-bg-card-hover);
cursor: pointer;
transition: color var(--az-transition), background-color var(--az-transition), border-color var(--az-transition), opacity var(--az-transition);
min-height: 120px;
}
.cmp-empty-cta:active {
border-color: var(--az-blue-border);
background: var(--az-blue-bg);
}
.cmp-tab-bar {
display: flex;
flex-shrink: 0;
border-top: 0.5px solid var(--az-border);
background: var(--az-bg-app);
padding: var(--az-sm) 0;
padding-bottom: max(var(--az-sm), env(safe-area-inset-bottom, 0px));
}
.cmp-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-2xs);
padding: var(--az-xs) 0;
background: transparent;
border: none;
cursor: pointer;
font-family: var(--az-font);
color: var(--az-text-secondary);
transition: color var(--az-transition-fast);
-webkit-tap-highlight-color: transparent;
}
.cmp-tab i {
font-size: var(--az-text-xl);
line-height: 1;
}
.cmp-tab span {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
letter-spacing: 0.02em;
}
.cmp-tab.active {
color: var(--az-text-primary);
}
.cmp-tab.active i {
text-shadow: 0 0 0.6px currentColor;
}
.cmp-tab.active span {
text-shadow: 0 0 0.6px currentColor;
}
.cmp-tab.active::after {
content: '';
width: 5px;
height: 5px;
border-radius: var(--az-radius-pill);
background: var(--az-blue);
}
.cmp-tab {
position: relative;
}
.cmp-tab-badge {
position: absolute;
top: 0;
right: 50%;
transform: translateX(calc(50% + 12px));
min-width: var(--az-lg);
height: var(--az-lg);
border-radius: var(--az-radius-pill);
background: var(--az-blue);
color: white;
font-size: 9px;
font-weight: var(--az-font-bold);
display: flex;
align-items: center;
justify-content: center;
padding: 0 var(--az-xs);
}
.cmp-tab-badge.hidden {
display: none;
}
.cmp-step-footer {
flex-shrink: 0;
display: flex;
align-items: center;
padding: var(--az-md) var(--az-lg);
padding-bottom: max(var(--az-md), env(safe-area-inset-bottom, 0px));
gap: var(--az-md);
background: var(--az-bg-card);
border-top: 0.5px solid var(--az-border);
}
.cmp-step-footer.hidden {
display: none;
}
.cmp-nav-spacer {
flex: 1;
}
.cmp-nav-back {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: 0;
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-tertiary);
background: transparent;
border: none;
cursor: pointer;
font-family: var(--az-font);
transition: color 0.15s ease;
-webkit-tap-highlight-color: transparent;
height: 48px;
}
.cmp-nav-back:active {
color: var(--az-text-primary);
}
.cmp-nav-back.hidden {
visibility: hidden;
pointer-events: none;
}
.cmp-nav-next {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--az-xs);
padding: 0 var(--az-xl);
font-size: var(--az-text-md);
font-weight: var(--az-font-medium);
color: var(--az-bg-card);
background: var(--az-text-primary);
border: none;
cursor: pointer;
font-family: var(--az-font);
border-radius: var(--az-radius-pill);
transition: opacity 0.15s ease;
-webkit-tap-highlight-color: transparent;
height: 48px;
white-space: nowrap;
}
.cmp-nav-next:active {
opacity: 0.85;
}
.cmp-nav-next:disabled {
opacity: 0.3;
pointer-events: none;
}
.cmp-nav-next.hidden {
display: none;
}
.cmp-tab-total {
display: none;
flex-shrink: 0;
padding: var(--az-md) var(--az-lg);
border-top: 0.5px solid var(--az-border);
background: var(--az-bg-app);
}
.cmp-tab-total.visible {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
}
.cmp-tab-total .cmp-total-label {
font-size: var(--az-text-md);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.cmp-tab-total .cmp-total-amount {
font-size: var(--az-text-lg);
}
.cmp-recap-cta-wrap {
flex-shrink: 0;
padding: var(--az-lg) var(--az-lg) var(--az-xl);
display: flex;
justify-content: center;
gap: var(--az-sm);
}
.cmp-recap-btn {
display: inline-flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-sm) var(--az-lg);
border-radius: var(--az-radius-pill);
border: 1px solid var(--az-border);
background: transparent;
color: var(--az-text-primary);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
font-family: var(--az-font);
cursor: pointer;
min-height: 36px;
transition: background var(--az-transition-fast), border-color var(--az-transition-fast);
-webkit-tap-highlight-color: transparent;
}
.cmp-recap-btn i {
font-size: var(--az-text-sm);
opacity: 0.6;
}
.cmp-recap-btn:active {
background: rgba(255, 255, 255, 0.06);
filter: brightness(0.92);
}
.cmp-hero-search {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-md);
padding-top: var(--az-md);
}
.cmp-hero-label {
font-size: var(--az-text-xl);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
text-align: center;
}
.cmp-hero-input-wrap {
width: 100%;
}
.cmp-hero-search .cmp-hero-name {
font-size: var(--az-text-sm);
min-height: 48px;
background: var(--az-bg-card);
border-radius: var(--az-radius-md);
border: 1px solid var(--az-border);
padding-left: var(--az-3xl);
transition: border-color 0.15s ease;
}
.cmp-hero-search .cmp-hero-name:focus {
border-color: var(--az-text-primary);
outline: none;
}
.cmp-recent-cards {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.cmp-recent-card {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-md) var(--az-lg);
background: var(--az-bg-card);
border-radius: var(--az-radius-xl);
border: none;
cursor: pointer;
font-family: var(--az-font);
min-height: var(--az-touch-min);
transition: background var(--az-transition-fast);
-webkit-tap-highlight-color: transparent;
text-align: left;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.03);
}
.cmp-recent-card:active {
background: var(--az-blue-bg);
}
.cmp-recent-card-avatar {
width: var(--az-touch-min);
height: var(--az-touch-min);
min-width: var(--az-touch-min);
border-radius: var(--az-radius-pill);
background: var(--az-blue-bg);
color: var(--az-blue);
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
display: flex;
align-items: center;
justify-content: center;
}
.cmp-recent-card-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--az-2xs);
}
.cmp-recent-card-name {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cmp-recent-card-sub {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cmp-recent-card-chevron {
color: var(--az-text-disabled);
font-size: var(--az-text-xs);
flex-shrink: 0;
}
.cmp-step-body--finalize {
gap: var(--az-xl);
}
.cmp-step-body--finalize > .wizard-input,
.cmp-step-body--finalize > .az-date-wrap,
.cmp-step-body--finalize > input[data-datepicker],
.cmp-step-body--finalize .flatpickr-wrapper {
position: absolute;
opacity: 0;
pointer-events: none;
height: 0;
overflow: hidden;
}
.cmp-finalize-recap-card {
background: var(--az-bg-card);
border-radius: var(--az-radius-xl);
padding: var(--az-xl);
display: flex;
flex-direction: column;
gap: var(--az-sm);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.03);
}
.cmp-finalize-recap-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.cmp-finalize-recap-type {
font-size: var(--az-text-md);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
}
.cmp-finalize-recap-total {
font-size: var(--az-text-lg);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
}
.cmp-finalize-recap-client {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
}
.cmp-finalize-recap-detail {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.cmp-finalize-options {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.cmp-options-card {
background: var(--az-bg-card);
border-radius: var(--az-radius-xl);
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.03);
}
.cmp-options-card > .cmp-ios-row + .cmp-ios-row {
position: relative;
}
.cmp-options-card > .cmp-ios-row + .cmp-ios-row::before,
.cmp-options-card > .cmp-toggle-section + .cmp-toggle-section::before,
.cmp-options-card > .cmp-ios-row + .cmp-toggle-section::before,
.cmp-options-card > .cmp-toggle-section + .cmp-ios-row::before {
content: '';
position: absolute;
top: 0;
left: var(--az-lg);
right: 0;
height: 0.5px;
background: var(--az-border);
}
.cmp-options-card > .cmp-toggle-section + .cmp-toggle-section,
.cmp-options-card > .cmp-ios-row + .cmp-toggle-section,
.cmp-options-card > .cmp-toggle-section + .cmp-ios-row {
position: relative;
}
.cmp-finalize-cta {
flex-shrink: 0;
padding: var(--az-md) var(--az-lg);
padding-bottom: max(var(--az-md), env(safe-area-inset-bottom, 0px));
display: flex;
flex-direction: column;
gap: var(--az-md);
background: var(--az-bg-card);
border-top: 0.5px solid var(--az-border);
}
.cmp-finalize-cta-row {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.cmp-btn-primary {
flex: 1;
height: 48px;
border-radius: var(--az-radius-pill);
background: var(--az-text-primary);
color: var(--az-bg-card);
font-size: var(--az-text-md);
font-weight: var(--az-font-medium);
font-family: var(--az-font);
border: none;
cursor: pointer;
transition: opacity 0.15s ease;
-webkit-tap-highlight-color: transparent;
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-xs);
}
.cmp-btn-primary:active {
opacity: 0.85;
}
.cmp-btn-primary:disabled {
opacity: 0.3;
pointer-events: none;
}
.cmp-btn-outline {
flex: 0 0 auto;
height: 48px;
padding: 0 var(--az-xl);
border-radius: var(--az-radius-pill);
background: var(--az-bg-card);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
color: var(--az-text-primary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
font-family: var(--az-font);
border: 1px solid var(--az-border);
cursor: pointer;
transition: color var(--az-transition-fast), background-color var(--az-transition-fast), border-color var(--az-transition-fast), opacity var(--az-transition-fast);
-webkit-tap-highlight-color: transparent;
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-xs);
}
.cmp-btn-outline:active {
background: var(--az-bg-elevated);
filter: brightness(0.92);
}
.wiz-single-page {
display: flex;
flex-direction: column;
height: 100%;
background: var(--az-bg-app);
}
.wiz-sp-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-md) var(--az-lg);
padding-top: max(var(--az-md), env(safe-area-inset-top, 0px));
background: var(--az-bg-card);
border-bottom: 1px solid var(--az-border);
position: sticky;
top: 0;
z-index: var(--az-z-sticky);
min-height: 44px;
}
.wiz-sp-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
min-width: 44px;
min-height: 44px;
border: none;
background: transparent;
color: var(--az-text-primary);
font-size: 20px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
padding: 0;
}
.wiz-sp-title {
font-size: 17px;
font-weight: 600;
color: var(--az-text-primary);
margin: 0;
text-align: center;
flex: 1;
}
.wiz-sp-submit {
border: none;
background: transparent;
color: var(--az-text-primary);
font-size: 17px;
font-weight: 600;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
padding: 0 4px;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.wiz-sp-submit:disabled {
color: var(--az-text-disabled);
cursor: default;
}
.wiz-sp-submit:not(:disabled):active {
opacity: 0.5;
}
.wiz-sp-scroll {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
}
.wiz-sp-section {
padding: 20px 16px;
border-bottom: 8px solid var(--az-bg-elevated, rgba(0,0,0,0.03));
}
.wiz-sp-section:last-child {
border-bottom: none;
}
.wiz-sp-section-title {
font-size: 17px;
font-weight: 700;
color: var(--az-text-primary);
margin: 0 0 16px;
}
.wiz-sp-type-toggle {
display: flex;
background: rgba(0,0,0,0.06);
border-radius: var(--az-radius-lg-plus);
padding: 2px;
gap: 0;
}
.wiz-sp-type-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: 36px;
min-height: 44px;
border: none;
background: transparent;
border-radius: var(--az-radius-lg);
font-size: 14px;
font-weight: 500;
color: var(--az-text-tertiary);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: color 0.2s ease, text-shadow 0.2s ease;
}
.wiz-sp-type-btn.active {
background: var(--az-bg-card, #fff);
color: var(--az-text-primary);
text-shadow: 0 0 0.6px currentColor;
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}
.wiz-sp-type-btn:active:not(.active) {
opacity: 0.5;
}
.wiz-sp-client-add {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 16px;
border: 1.5px dashed var(--az-border);
border-radius: 12px;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.wiz-sp-client-add-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--az-blue-bg);
color: var(--az-blue);
font-size: 20px;
font-weight: 300;
}
.wiz-sp-client-add-label {
font-size: 15px;
font-weight: 500;
color: var(--az-blue);
}
.wiz-sp-client-add:active {
background: var(--az-blue-bg);
}
.wiz-sp-client-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: 12px;
}
.wiz-sp-client-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--az-blue-bg);
color: var(--az-blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
flex-shrink: 0;
}
.wiz-sp-client-info {
flex: 1;
min-width: 0;
}
.wiz-sp-client-name {
font-size: 15px;
font-weight: 600;
color: var(--az-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wiz-sp-client-address {
font-size: 13px;
color: var(--az-text-tertiary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
}
.wiz-sp-client-address-field {
margin-top: var(--az-sm);
}
.wiz-sp-client-address-field.hidden {
display: none;
}
.wiz-sp-client-address-label {
display: block;
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
margin-bottom: var(--az-xs);
}
.wiz-sp-client-address-input {
width: 100%;
padding: var(--az-sm) var(--az-md);
font-size: var(--az-text-sm);
font-family: inherit;
color: var(--az-text-primary);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
resize: none;
transition: var(--az-transition);
line-height: 1.5;
}
.wiz-sp-client-address-input:focus {
outline: none;
border-color: var(--az-border-focus);
background: var(--az-bg-input-focus);
}
.wiz-sp-client-address-input::placeholder {
color: var(--az-text-muted);
}
.wiz-sp-client-edit,
.wiz-sp-client-remove {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
min-width: 44px;
min-height: 44px;
border: none;
background: transparent;
color: var(--az-text-tertiary);
font-size: 18px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
flex-shrink: 0;
}
.wiz-sp-client-edit:active {
color: var(--az-blue);
}
.wiz-sp-client-remove:active {
color: var(--az-red);
}
.wiz-sp-meta-row {
display: flex;
gap: 12px;
margin-top: 14px;
}
.wiz-sp-meta-item {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.wiz-sp-meta-label {
font-size: 12px;
font-weight: 500;
color: var(--az-text-tertiary);
}
.wiz-sp-meta-value {
font-size: 15px;
font-weight: 500;
color: var(--az-text-primary);
padding: 8px 0;
border: none;
background: transparent;
font-family: inherit;
cursor: pointer;
}
.wiz-single-page .az-date-wrap {
position: relative;
display: flex;
align-items: center;
overflow: hidden;
}
.wiz-sp-date-input {
min-height: 44px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
width: 100%;
}
.wiz-single-page .az-date-cal-btn {
display: none;
}
.wiz-single-page .flatpickr-mobile {
position: absolute;
inset: 0;
opacity: 0;
width: 100%;
height: 100%;
min-height: 44px;
cursor: pointer;
}
.wiz-sp-meta-ref {
color: var(--az-text-tertiary);
font-variant-numeric: tabular-nums;
}
.wiz-sp-validity-row {
display: flex;
align-items: center;
gap: 12px;
margin-top: 12px;
}
.wiz-sp-validity-row .wiz-sp-meta-label {
flex-shrink: 0;
}
.wiz-sp-validity-segmented {
display: flex;
gap: 8px;
flex: 1;
}
.wiz-sp-client-search-wrap {
display: flex;
align-items: center;
gap: 10px;
padding: 0 14px;
height: 48px;
border: 1px solid var(--az-border);
border-radius: 12px;
background: var(--az-bg-card);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: border-color 0.15s ease;
}
.wiz-sp-client-search-wrap:active {
border-color: var(--az-text-tertiary);
}
.wiz-sp-client-search-icon {
font-size: 17px;
color: var(--az-text-tertiary);
flex-shrink: 0;
}
.wiz-sp-client-search-input {
flex: 1;
border: none;
background: transparent;
font-size: 15px;
color: var(--az-text-tertiary);
font-family: inherit;
cursor: pointer;
-webkit-appearance: none;
outline: none;
height: 100%;
min-height: 44px;
}
.wiz-sp-field {
margin-bottom: 16px;
}
.wiz-sp-field:last-child {
margin-bottom: 0;
}
.wiz-sp-label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--az-text-tertiary);
margin-bottom: 6px;
}
.wiz-sp-input,
.wiz-sp-select {
width: 100%;
height: 44px;
padding: 0 12px;
border: 1px solid var(--az-border);
border-radius: 10px;
background: var(--az-bg-card);
color: var(--az-text-primary);
font-size: 15px;
font-family: inherit;
-webkit-appearance: none;
appearance: none;
}
.wiz-sp-input:focus,
.wiz-sp-select:focus {
outline: none;
border-color: var(--az-blue);
}
.wiz-sp-select {
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2348484A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
.wiz-sp-pills {
display: flex;
gap: 8px;
}
.wiz-sp-pill {
flex: 1;
height: 36px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--az-border);
border-radius: 10px;
background: transparent;
color: var(--az-text-secondary);
font-size: 14px;
font-weight: 500;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.wiz-sp-pill.active {
background: var(--az-blue-bg);
border-color: var(--az-blue-border);
color: var(--az-blue);
text-shadow: 0 0 0.6px currentColor;
}
.wiz-sp-pill:active:not(.active) {
background: rgba(0,0,0,0.04);
}
.wiz-sp-add-row {
display: flex;
gap: 8px;
margin-top: 8px;
}
.wiz-sp-add-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 44px;
border: 1px solid var(--az-border);
border-radius: 10px;
background: transparent;
color: var(--az-text-primary);
font-size: 14px;
font-weight: 500;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease;
font-family: inherit;
}
.wiz-sp-add-btn i {
font-size: 16px;
}
.wiz-sp-add-btn:active {
background: rgba(0,0,0,0.04);
}
.wiz-sp-add-btn--secondary {
border-style: dashed;
color: var(--az-text-secondary);
}
.wiz-single-page .hidden {
display: none;
}
body.wiz-scroll-locked {
overflow: hidden;
}
.wiz-sp-options-row {
display: flex;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--az-border);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
gap: 8px;
}
.wiz-sp-options-row:last-child {
border-bottom: none;
}
.wiz-sp-options-row:active {
opacity: 0.6;
}
.wiz-sp-options-label {
font-size: 15px;
font-weight: 500;
color: var(--az-text-primary);
flex-shrink: 0;
}
.wiz-sp-options-value {
flex: 1;
text-align: right;
font-size: 15px;
color: var(--az-text-tertiary);
font-weight: 400;
}
.wiz-sp-options-chevron {
color: var(--az-text-tertiary);
font-size: 14px;
flex-shrink: 0;
}
.wiz-sp-lines-list {
display: flex;
flex-direction: column;
}
.wiz-sp-lines-list:empty {
display: none;
}
.wiz-sp-line-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid var(--az-border);
}
.wiz-sp-line-item:last-child {
border-bottom: none;
}
.wiz-sp-line-info {
flex: 1;
min-width: 0;
}
.wiz-sp-line-name {
font-size: 15px;
font-weight: 600;
color: var(--az-text-primary);
}
.wiz-sp-line-desc {
font-size: 13px;
color: var(--az-text-tertiary);
margin-top: 2px;
}
.wiz-sp-line-qty {
font-size: 13px;
color: var(--az-text-tertiary);
margin-top: 4px;
}
.wiz-sp-line-amount {
font-size: 15px;
font-weight: 600;
color: var(--az-text-primary);
flex-shrink: 0;
margin-left: 12px;
}
.wiz-sp-line-actions {
display: flex;
align-items: center;
margin-left: 8px;
}
.wiz-sp-line-action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
min-width: 44px;
min-height: 44px;
border: none;
background: transparent;
color: var(--az-text-tertiary);
font-size: 18px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.wiz-sp-line-action-btn:active {
color: var(--az-text-primary);
}
.wiz-sp-add-line {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 14px 0;
border: none;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.wiz-sp-add-icon {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--az-blue-bg);
color: var(--az-blue);
font-size: 18px;
font-weight: 300;
}
.wiz-sp-add-line span:last-child {
font-size: 15px;
font-weight: 500;
color: var(--az-blue);
}
.wiz-sp-add-line:active {
opacity: 0.5;
}
.wiz-sp-add-line .wiz-sp-add-icon {
background: rgba(0,0,0,0.06);
color: var(--az-text-secondary);
}
.wiz-sp-add-line span:last-child {
color: var(--az-text-secondary);
}
.wiz-sp-option-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
border-bottom: 1px solid var(--az-border);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.wiz-sp-option-row:last-child {
border-bottom: none;
}
.wiz-sp-option-label {
font-size: 15px;
color: var(--az-text-primary);
}
.wiz-sp-option-value {
font-size: 15px;
color: var(--az-blue);
font-weight: 500;
}
.wiz-sp-option-row:active {
opacity: 0.6;
}
.wiz-sp-totals {
background: var(--az-bg-card);
}
.wiz-sp-total-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
}
.wiz-sp-total-row span:first-child {
font-size: 15px;
color: var(--az-text-secondary);
}
.wiz-sp-total-row span:last-child {
font-size: 15px;
font-weight: 500;
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
}
.wiz-sp-total-row .wiz-sp-total-action {
color: var(--az-blue);
font-weight: 500;
cursor: pointer;
}
.wiz-sp-total-final {
padding-top: 12px;
margin-top: 4px;
border-top: 1px solid var(--az-border);
}
.wiz-sp-total-final span:first-child {
font-size: 17px;
font-weight: 700;
color: var(--az-text-primary);
}
.wiz-sp-total-final span:last-child {
font-size: 17px;
font-weight: 700;
color: var(--az-text-primary);
}
.wiz-sp-sheet-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.3);
z-index: var(--az-z-toast);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.wiz-sp-sheet-backdrop.open {
opacity: 1;
pointer-events: auto;
}
.wiz-sp-sheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--az-bg-card);
border-radius: 12px 12px 0 0;
z-index: var(--az-z-toast);
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
max-height: 85vh;
display: flex;
flex-direction: column;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.wiz-sp-sheet-backdrop.open .wiz-sp-sheet {
transform: translateY(0);
}
.wiz-sp-sheet-handle {
width: 36px;
height: 5px;
border-radius: 3px;
background: rgba(60,60,67,0.3);
margin: 8px auto 12px;
}
.wiz-sp-sheet-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px 12px;
}
.wiz-sp-sheet-title {
font-size: 17px;
font-weight: 600;
color: var(--az-text-primary);
}
.wiz-sp-sheet-close {
font-size: 15px;
font-weight: 500;
color: var(--az-blue);
border: none;
background: transparent;
cursor: pointer;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.wiz-sp-sheet-search {
margin: 0 16px 12px;
height: 44px;
padding: 0 12px 0 36px;
border: 1px solid var(--az-border);
border-radius: 10px;
background: var(--az-bg-card);
font-size: 15px;
font-family: inherit;
color: var(--az-text-primary);
width: calc(100% - 32px);
-webkit-appearance: none;
}
.wiz-sp-sheet-search:focus {
outline: none;
border-color: var(--az-blue);
}
.wiz-sp-sheet-list {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.wiz-sp-sheet-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--az-border);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.wiz-sp-sheet-item:active {
background: rgba(0,0,0,0.04);
}
.wiz-sp-sheet-item-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--az-blue-bg);
color: var(--az-blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
flex-shrink: 0;
}
.wiz-sp-sheet-item-info {
flex: 1;
min-width: 0;
}
.wiz-sp-sheet-item-name {
font-size: 15px;
font-weight: 600;
color: var(--az-text-primary);
}
.wiz-sp-sheet-item-detail {
font-size: 13px;
color: var(--az-text-tertiary);
margin-top: 1px;
}
.wiz-sp-sheet-item-chevron {
color: var(--az-text-tertiary);
font-size: 14px;
flex-shrink: 0;
}
.wiz-sp-sheet-section-title {
font-size: 13px;
font-weight: 600;
color: var(--az-text-tertiary);
padding: var(--az-md) var(--az-lg) var(--az-sm);
}
.wiz-sp-sheet-create {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-top: 1px solid var(--az-border);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.wiz-sp-sheet-create-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--az-green-bg);
color: var(--az-green);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.wiz-sp-sheet-create-label {
font-size: 15px;
font-weight: 500;
color: var(--az-green);
}
.wiz-sp-sheet-create:active {
background: var(--az-green-bg);
}
.wiz-sp-empty-state {
text-align: center;
padding: 24px 16px;
color: var(--az-text-tertiary);
font-size: 15px;
}
.wiz-sp-avatar--pappers {
background: rgba(124, 58, 237, 0.1);
color: #7c3aed;
}
body.wiz-v2-active {
overflow: hidden;
}
body.wiz-v2-scroll-locked {
overflow: hidden;
}
body.wiz-v2-child-modal-open #client-modal {
z-index: calc(var(--az-z-modal, 1000) + 50);
}
.wiz-v2 {
position: fixed;
inset: 0;
z-index: var(--az-z-modal, 1000);
display: flex;
flex-direction: column;
background: var(--az-bg-app, #F5F5F7);
font-family: var(--az-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
color: var(--az-text-primary, #1C1C1E);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.25s ease, transform 0.25s ease;
width: 100%;
max-width: 100vw;
overflow: hidden;
}
.wiz-v2.wiz-v2--open {
opacity: 1;
transform: none;
}
.wiz-v2-meta-input[type="date"] {
line-height: 44px;
}
.wiz-v2-meta-input[type="date"]::-webkit-date-and-time-value {
margin: 0;
text-align: left;
}
.wiz-v2 .hidden {
display: none;
}
@media (min-width: 769px) {
.wiz-v2 {
align-items: center;
}
.wiz-v2-header,
.wiz-v2-scroll,
.wiz-v2-footer {
width: 100%;
max-width: 600px;
}
}
.wiz-v2-header {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
column-gap: var(--az-xs, 4px);
position: sticky;
top: 0;
padding: var(--az-xs, 4px) var(--az-sm, 8px);
padding-top: max(var(--az-xs, 4px), env(safe-area-inset-top, 0px));
background: var(--az-bg-app, #F5F5F7);
z-index: var(--az-z-sticky);
flex-shrink: 0;
min-height: 52px;
}
.wiz-v2-close {
justify-self: start;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
min-width: 44px;
border: none;
background: transparent;
cursor: pointer;
color: var(--az-text-secondary, #48484A);
font-size: var(--az-text-xl, 17px);
border-radius: var(--az-radius-pill, 9999px);
transition: background 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.wiz-v2-close:active {
background: var(--az-bg-elevated, rgba(120, 120, 128, 0.12));
}
.wiz-v2-title {
justify-self: center;
pointer-events: none;
font-size: var(--az-text-xl, 17px);
font-weight: var(--az-font-semibold, 600);
letter-spacing: var(--az-tracking-tight, -0.011em);
color: var(--az-text-primary, #1C1C1E);
margin: 0;
padding: 0;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.wiz-v2-submit {
justify-self: end;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
height: 44px;
padding: 0 var(--az-md, 12px);
border: none;
background: transparent;
cursor: pointer;
font-size: var(--az-text-lg, 15px);
font-weight: var(--az-font-semibold, 600);
color: var(--az-blue, #007AFF);
border-radius: var(--az-radius-lg, 8px);
transition: opacity 0.15s ease;
-webkit-tap-highlight-color: transparent;
white-space: nowrap;
}
.wiz-v2-submit:disabled {
color: var(--az-text-disabled, rgba(60, 60, 67, 0.30));
cursor: default;
pointer-events: none;
}
.wiz-v2-submit:not(:disabled):active {
opacity: 0.6;
}
.wiz-v2-scroll {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
padding: var(--az-md, 12px) var(--az-md, 12px) max(var(--az-2xl, 32px), env(safe-area-inset-bottom, 0px));
display: flex;
flex-direction: column;
gap: var(--az-md, 12px);
}
.wiz-v2-section {
background: var(--az-bg-card, #FFFFFF);
border: 1px solid rgba(0, 0, 0, 0.04);
border-radius: var(--az-radius-xl, 14px);
padding: var(--az-md-plus, 14px) var(--az-md-plus, 14px);
min-width: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.02);
}
.wiz-v2-section.wiz-v2-totals {
background: transparent;
border: none;
box-shadow: none;
padding: var(--az-md, 12px) var(--az-sm, 8px) var(--az-sm, 8px);
}
.wiz-v2 * {
box-sizing: border-box;
}
.wiz-v2 input,
.wiz-v2 select,
.wiz-v2 textarea {
font-size: 16px;
}
.wiz-v2-section-title {
font-size: var(--az-text-lg, 15px);
font-weight: var(--az-font-semibold, 600);
color: var(--az-text-primary, #1C1C1E);
margin: 0 0 var(--az-sm, 8px) 0;
letter-spacing: var(--az-tracking-tight, -0.011em);
line-height: 1.25;
}
.wiz-v2-type-toggle {
display: flex;
background: rgba(0, 0, 0, 0.06);
border-radius: var(--az-radius-lg-plus);
padding: 3px;
gap: 0;
}
.wiz-v2-type-btn {
flex: 1;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: var(--az-radius-lg);
font-size: var(--az-text-sm, 13px);
font-weight: var(--az-font-medium, 500);
color: var(--az-text-secondary, #48484A);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.wiz-v2-type-btn.active {
background: var(--az-bg-card, #ffffff);
color: var(--az-text-primary, #1C1C1E);
text-shadow: 0 0 0.6px currentColor;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.wiz-v2-meta-row {
display: flex;
flex-wrap: wrap;
gap: var(--az-md, 12px);
}
.wiz-v2-type-btn:disabled {
opacity: 1;
cursor: default;
}
.wiz-v2-type-btn:disabled:not(.active) {
opacity: 0.5;
}
.wiz-v2-type-lock {
margin: var(--az-sm, 8px) 0 0 0;
font-size: var(--az-text-xs, 12px);
color: var(--az-text-tertiary);
line-height: 1.3;
}
.wiz-v2-type-toggle:not(.hidden) ~ .wiz-v2-meta-row {
margin-top: var(--az-md, 12px);
}
.wiz-v2-meta {
display: flex;
flex-direction: column;
gap: var(--az-xs, 4px);
flex: 1 1 150px;
min-width: 120px;
}
.wiz-v2-meta--ref {
min-width: max-content;
}
.wiz-v2-meta-label {
font-size: var(--az-text-sm, 13px);
font-weight: var(--az-font-medium, 500);
color: var(--az-text-tertiary, rgba(60, 60, 67, 0.65));
line-height: 1.2;
}
.wiz-v2-meta-value {
display: block;
box-sizing: border-box;
height: 44px;
line-height: 44px;
padding: 0 var(--az-md, 12px);
border: 1px solid transparent;
border-radius: var(--az-radius-lg-plus, 10px);
background: var(--az-bg-elevated, rgba(120, 120, 128, 0.08));
font-size: 16px;
font-weight: var(--az-font-medium, 500);
color: var(--az-text-primary, #1C1C1E);
font-variant-numeric: tabular-nums;
white-space: nowrap;
cursor: default;
user-select: text;
}
.wiz-v2-meta-input {
width: 100%;
height: 44px;
padding: 0 var(--az-md, 12px);
border: 1px solid transparent;
border-radius: var(--az-radius-lg-plus, 10px);
background: var(--az-bg-elevated, rgba(120, 120, 128, 0.08));
font-size: 16px; 
font-weight: var(--az-font-medium, 500);
color: var(--az-text-primary, #1C1C1E);
font-family: inherit;
-webkit-appearance: none;
appearance: none;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.wiz-v2-meta-input:focus {
outline: none;
background: var(--az-bg-card, #ffffff);
border-color: var(--az-blue, #007AFF);
box-shadow: 0 0 0 3px var(--az-blue-bg, rgba(0, 122, 255, 0.12));
}
.wiz-v2-meta-select {
width: 100%;
height: 44px;
padding: 0 var(--az-md, 12px);
border: 1px solid transparent;
border-radius: var(--az-radius-lg-plus, 10px);
background: var(--az-bg-elevated, rgba(120, 120, 128, 0.08));
font-size: 16px; 
font-weight: var(--az-font-medium, 500);
color: var(--az-text-primary, #1C1C1E);
font-family: inherit;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2348484A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
.wiz-v2-meta-select:focus {
outline: none;
background: var(--az-bg-card, #ffffff);
border-color: var(--az-blue, #007AFF);
box-shadow: 0 0 0 3px var(--az-blue-bg, rgba(0, 122, 255, 0.12));
}
.wiz-v2-client-placeholder {
display: flex;
align-items: center;
gap: var(--az-sm-plus, 10px);
width: 100%;
height: var(--az-4xl, 48px);
padding: 0 var(--az-md, 12px);
border: none;
border-radius: var(--az-radius-lg-plus, 10px);
background: var(--az-bg-elevated, rgba(120, 120, 128, 0.08));
cursor: pointer;
font-size: var(--az-text-lg, 15px);
font-weight: var(--az-font-medium, 500);
color: var(--az-blue, #007AFF);
font-family: inherit;
transition: background 0.15s ease, filter 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.wiz-v2-client-placeholder i {
font-size: var(--az-text-xl-plus, 20px);
color: var(--az-blue, #007AFF);
}
.wiz-v2-client-placeholder:active {
filter: brightness(0.92);
}
.wiz-v2-client-card {
display: flex;
align-items: center;
gap: var(--az-md, 12px);
padding: 0;
border: none;
border-radius: 0;
background: transparent;
cursor: pointer;
transition: opacity 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.wiz-v2-client-card:active {
filter: brightness(0.92);
}
.wiz-v2-client-avatar {
width: 40px;
height: 40px;
min-width: 40px;
border-radius: var(--az-radius-pill, 9999px);
background: var(--az-blue-bg, rgba(0, 122, 255, 0.12));
color: var(--az-blue, #007AFF);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--az-text-sm, 13px);
font-weight: var(--az-font-semibold, 600);
letter-spacing: 0.02em;
}
.wiz-v2-client-info {
flex: 1;
min-width: 0;
}
.wiz-v2-client-name {
font-size: var(--az-text-lg, 15px);
font-weight: var(--az-font-semibold, 600);
color: var(--az-text-primary, #1C1C1E);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wiz-v2-client-address {
font-size: var(--az-text-sm, 13px);
color: var(--az-text-tertiary, rgba(60, 60, 67, 0.65));
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 2px;
}
.wiz-v2-client-remove {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
min-width: 44px;
border: none;
background: transparent;
cursor: pointer;
color: var(--az-text-tertiary, rgba(60, 60, 67, 0.65));
font-size: var(--az-text-lg, 15px);
border-radius: var(--az-radius-lg, 8px);
transition: background 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.wiz-v2-client-remove:active {
background: var(--az-red-bg, rgba(215, 0, 21, 0.10));
color: var(--az-red, #D94F57);
}
.wiz-v2-note-label {
display: block;
font-size: var(--az-text-sm, 13px);
font-weight: var(--az-font-medium, 500);
color: var(--az-text-tertiary, rgba(60, 60, 67, 0.65));
margin: var(--az-md, 12px) 0 var(--az-xs-plus, 6px);
line-height: 1.2;
}
.wiz-v2-note-input {
width: 100%;
min-height: 60px;
padding: var(--az-sm-plus, 10px) var(--az-md, 12px);
border: 1px solid var(--az-border, rgba(0, 0, 0, 0.12));
border-radius: var(--az-radius-lg-plus, 10px);
background: var(--az-bg-input, #ffffff);
font-size: 16px; 
font-weight: var(--az-font-normal, 400);
color: var(--az-text-primary, #1C1C1E);
font-family: inherit;
line-height: 1.4;
resize: none;
-webkit-appearance: none;
appearance: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wiz-v2-note-input::placeholder {
color: var(--az-text-muted, rgba(60, 60, 67, 0.65));
}
.wiz-v2-note-input:focus {
outline: none;
border-color: var(--az-blue, #007AFF);
box-shadow: 0 0 0 3px var(--az-blue-bg, rgba(0, 122, 255, 0.12));
}
.wiz-v2-line {
display: flex;
align-items: center;
padding: var(--az-md, 12px) 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
gap: var(--az-sm, 8px);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
min-width: 0;
}
.wiz-v2-line:last-child {
border-bottom: none;
}
.wiz-v2-line:active {
background: rgba(120, 120, 128, 0.05);
filter: none;
}
.wiz-v2-line-reorder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--az-2xs);
flex-shrink: 0;
}
.wiz-v2-line-move {
display: flex;
align-items: center;
justify-content: center;
width: var(--az-touch-min);
height: 28px;
padding: 0;
border: none;
background: none;
color: var(--az-text-muted);
cursor: pointer;
border-radius: var(--az-radius-sm);
transition: var(--az-transition-fast);
-webkit-tap-highlight-color: transparent;
}
.wiz-v2-line-move:active {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.wiz-v2-line-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--az-2xs, 2px);
}
.wiz-v2-confirm-message {
font-size: var(--az-text-lg, 15px);
line-height: 1.45;
color: var(--az-text-secondary, #48484A);
margin: 0 0 var(--az-lg, 16px) 0;
padding: 0;
}
.wiz-v2-confirm-actions {
display: flex;
gap: var(--az-sm, 8px);
margin: 0;
padding: 0;
}
.wiz-v2-confirm-btn {
flex: 1;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--az-radius-lg-plus, 10px);
font-size: var(--az-text-lg, 15px);
font-weight: var(--az-font-semibold, 600);
font-family: inherit;
cursor: pointer;
border: none;
transition: filter 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.wiz-v2-confirm-btn:active {
filter: brightness(0.92);
}
.wiz-v2-confirm-btn--cancel {
background: var(--az-bg-elevated, rgba(120, 120, 128, 0.12));
color: var(--az-text-primary, #1C1C1E);
}
.wiz-v2-confirm-btn--danger {
background: var(--az-red, #D94F57);
color: #fff;
}
.wiz-v2-sheet--confirm .wiz-v2-sheet-header {
justify-content: center;
}
.wiz-v2-sheet--confirm .wiz-v2-sheet-title {
text-align: center;
flex: 1;
}
.wiz-v2-line-label {
font-size: var(--az-text-lg, 15px);
font-weight: var(--az-font-semibold, 600);
color: var(--az-text-primary, #1C1C1E);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wiz-v2-line--category {
padding-top: var(--az-lg, 16px);
padding-bottom: var(--az-xs, 4px);
border-bottom: none;
cursor: pointer;
}
.wiz-v2-line--category:first-child {
padding-top: var(--az-xs, 4px);
}
.wiz-v2-line--category + .wiz-v2-line {
border-top: 1px solid var(--az-border, rgba(0, 0, 0, 0.08));
}
.wiz-v2-line--category .wiz-v2-line-label {
font-size: var(--az-text-xs, 12px);
font-weight: var(--az-font-semibold, 600);
color: var(--az-text-tertiary, rgba(60, 60, 67, 0.65));
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.2;
}
.wiz-v2-line--category:active {
background: transparent;
filter: none;
}
.wiz-v2-line--category .wiz-v2-line-content {
padding-left: 0;
}
.wiz-v2-line-meta {
font-size: var(--az-text-sm, 13px);
color: var(--az-text-tertiary, rgba(60, 60, 67, 0.65));
line-height: 1.3;
}
.wiz-v2-line-total {
font-size: var(--az-text-lg, 15px);
font-weight: var(--az-font-semibold, 600);
color: var(--az-text-primary, #1C1C1E);
text-align: right;
white-space: nowrap;
flex-shrink: 0;
}
.wiz-v2-line-delete {
display: flex;
align-items: center;
justify-content: center;
width: var(--az-touch-min, 44px);
height: var(--az-touch-min, 44px);
min-width: var(--az-touch-min, 44px);
border: none;
background: transparent;
cursor: pointer;
color: var(--az-text-muted, rgba(60, 60, 67, 0.5));
font-size: var(--az-text-lg, 15px);
border-radius: var(--az-radius-lg, 8px);
transition: background 0.15s ease, color 0.15s ease;
-webkit-tap-highlight-color: transparent;
flex-shrink: 0;
}
.wiz-v2-line-delete:active {
background: var(--az-red-bg, rgba(215, 0, 21, 0.10));
color: var(--az-red, #D94F57);
}
.wiz-v2-add-row {
display: flex;
gap: var(--az-sm, 8px);
margin-top: var(--az-md, 12px);
padding-top: var(--az-md, 12px);
border-top: 1px solid var(--az-border, rgba(0, 0, 0, 0.06));
}
.wiz-v2-add-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-xs, 4px);
height: 40px;
padding: 0 var(--az-md, 12px);
border: none;
border-radius: var(--az-radius-lg, 8px);
background: var(--az-bg-elevated, rgba(120, 120, 128, 0.08));
cursor: pointer;
font-size: var(--az-text-md, 14px);
font-weight: var(--az-font-semibold, 600);
color: var(--az-blue, #007AFF);
font-family: inherit;
transition: filter 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.wiz-v2-add-btn:active {
filter: brightness(0.92);
}
.wiz-v2-add-btn--secondary {
color: var(--az-text-secondary);
}
.wiz-v2-add-btn--secondary:active {
filter: brightness(0.92);
}
.wiz-v2-add-btn--primary {
width: 100%;
margin-top: var(--az-md, 12px);
background: var(--az-blue, #007AFF);
color: var(--az-text-on-accent, #ffffff);
}
.wiz-v2-add-btn--ghost {
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-xs, 4px);
width: 100%;
height: 36px;
margin-top: var(--az-xs, 4px);
border: none;
background: transparent;
cursor: pointer;
font-family: inherit;
font-size: var(--az-text-sm, 13px);
font-weight: var(--az-font-medium, 500);
color: var(--az-text-tertiary, #8E8E93);
-webkit-tap-highlight-color: transparent;
transition: color 0.15s ease;
}
.wiz-v2-add-btn--ghost:active {
color: var(--az-text-secondary, #48484A);
}
.wiz-v2-lines-empty {
margin: 0 0 var(--az-sm, 8px);
font-size: var(--az-text-sm, 13px);
line-height: 1.4;
color: var(--az-text-tertiary, #8E8E93);
}
.wiz-v2-required {
display: inline-block;
margin-left: var(--az-sm, 8px);
padding: 1px var(--az-xs-plus, 6px);
font-size: var(--az-text-2xs, 10px);
font-weight: var(--az-font-medium, 500);
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--az-text-tertiary, #8E8E93);
background: var(--az-bg-elevated, rgba(120, 120, 128, 0.12));
border-radius: var(--az-radius-sm, 4px);
vertical-align: middle;
}
.wiz-v2-section--attention {
animation: wiz-v2-attention 1.2s ease;
}
@keyframes wiz-v2-attention {
0%, 100% { box-shadow: var(--az-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04)); }
15%, 60% { box-shadow: 0 0 0 2px var(--az-red, #FF3B30); }
}
.wiz-v2-submit--incomplete {
opacity: 0.45;
}
.wiz-v2-footer {
flex-shrink: 0;
padding: var(--az-md, 12px) var(--az-lg, 16px);
padding-bottom: max(var(--az-md, 12px), env(safe-area-inset-bottom, 0px));
background: var(--az-bg-card, #ffffff);
border-top: 1px solid var(--az-border, rgba(0, 0, 0, 0.08));
}
.wiz-v2-footer-breakdown {
margin-bottom: var(--az-xs, 4px);
}
.wiz-v2-footer .wiz-v2-total-final {
font-size: var(--az-text-lg-plus, 16px);
font-weight: var(--az-font-bold, 700);
}
.wiz-v2-option {
display: flex;
align-items: center;
padding: var(--az-md-plus, 14px) 0;
border-bottom: 1px solid var(--az-border, rgba(0, 0, 0, 0.12));
cursor: pointer;
-webkit-tap-highlight-color: transparent;
gap: var(--az-sm, 8px);
transition: transform 0.1s ease, background 0.15s ease;
}
.wiz-v2-option:last-child {
border-bottom: none;
}
.wiz-v2-option:active {
filter: brightness(0.92);
background: var(--az-bg-elevated, #EDEDF0);
}
.wiz-v2-option-label {
font-size: var(--az-text-lg, 15px);
font-weight: var(--az-font-medium, 500);
color: var(--az-text-primary, #1C1C1E);
line-height: 1.3;
}
.wiz-v2-option-value {
flex: 1;
text-align: right;
font-size: var(--az-text-lg, 15px);
color: var(--az-text-secondary, rgba(60, 60, 67, 0.85));
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wiz-v2-option-chevron {
color: var(--az-text-muted, rgba(60, 60, 67, 0.65));
font-size: var(--az-text-md, 14px);
flex-shrink: 0;
}
.wiz-v2-total-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--az-xs, 4px) 0;
font-size: var(--az-text-md, 14px);
color: var(--az-text-secondary, #48484A);
line-height: 1.4;
font-variant-numeric: tabular-nums;
}
.wiz-v2-total-final {
border-top: 1px solid var(--az-border, rgba(0, 0, 0, 0.08));
font-size: var(--az-text-xl-plus, 20px);
font-weight: var(--az-font-bold, 700);
color: var(--az-text-primary, #1C1C1E);
margin-top: var(--az-sm, 8px);
padding-top: var(--az-md, 12px);
letter-spacing: var(--az-tracking-tight, -0.011em);
}
.wiz-v2-sheet-backdrop {
position: fixed;
inset: 0;
z-index: var(--az-z-toast, 1100);
background: rgba(0, 0, 0, 0.55);
opacity: 0;
transition: opacity 0.3s ease;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.wiz-v2-sheet-backdrop.open {
opacity: 1;
}
.wiz-v2-sheet-backdrop.open .wiz-v2-sheet {
transform: translateY(0);
}
.wiz-v2-sheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: calc(var(--az-z-toast, 1100) + 1);
background: var(--az-bg-card, #ffffff);
border-radius: var(--az-radius-xl, 12px) var(--az-radius-xl, 12px) 0 0;
max-height: 85dvh;
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
padding-bottom: max(var(--az-lg, 16px), env(safe-area-inset-bottom, 0px));
}
.wiz-v2-sheet-handle {
width: 36px;
height: 5px;
border-radius: var(--az-radius-pill, 9999px);
background: var(--az-bg-elevated, #EDEDF0);
margin: var(--az-sm, 8px) auto var(--az-xs, 4px);
flex-shrink: 0;
}
.wiz-v2-sheet-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-md, 12px) var(--az-lg, 16px);
flex-shrink: 0;
}
.wiz-v2-sheet-title {
font-size: var(--az-text-xl, 17px);
font-weight: var(--az-font-semibold, 600);
color: var(--az-text-primary, #1C1C1E);
margin: 0;
line-height: 1.25;
}
.wiz-v2-sheet-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: none;
background: var(--az-bg-elevated, rgba(120, 120, 128, 0.12));
cursor: pointer;
font-size: var(--az-text-xl-plus, 20px);
color: var(--az-text-secondary, rgba(60, 60, 67, 0.85));
border-radius: var(--az-radius-pill, 9999px);
font-family: inherit;
-webkit-tap-highlight-color: transparent;
}
.wiz-v2-sheet-close i {
line-height: 1;
}
.wiz-v2-sheet-close:active {
opacity: 0.6;
}
.wiz-v2-sheet-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
padding: 0 var(--az-lg, 16px) var(--az-lg, 16px);
padding-bottom: calc(var(--az-3xl, 40px) + env(safe-area-inset-bottom, 0));
scroll-padding-bottom: var(--az-3xl, 40px);
}
.wiz-v2-sheet-search-sticky {
position: sticky;
top: 0;
z-index: 2;
padding: var(--az-md, 12px) 0 var(--az-sm, 8px);
background: var(--az-bg-card, #ffffff);
border-bottom: 1px solid var(--az-border-hover, rgba(0, 0, 0, 0.12));
margin: 0 calc(var(--az-lg, 16px) * -1) var(--az-sm, 8px);
padding-left: var(--az-lg, 16px);
padding-right: var(--az-lg, 16px);
}
.wiz-v2-sheet-search-wrap {
position: relative;
display: flex;
align-items: center;
}
.wiz-v2-sheet-search-icon {
position: absolute;
left: var(--az-md, 12px);
font-size: var(--az-text-xl, 17px);
color: var(--az-text-secondary, rgba(60, 60, 67, 0.85));
pointer-events: none;
z-index: 1;
}
.wiz-v2-sheet-client-item {
display: flex;
align-items: center;
gap: var(--az-md, 12px);
padding: var(--az-md, 12px) 0;
border-bottom: 1px solid var(--az-border-hover, rgba(0, 0, 0, 0.18));
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.wiz-v2-sheet-client-item:last-child {
border-bottom: none;
}
.wiz-v2-sheet-client-item:active {
opacity: 0.6;
}
.wiz-v2-sheet-client-avatar {
width: 40px;
height: 40px;
min-width: 40px;
border-radius: var(--az-radius-pill, 9999px);
background: var(--az-blue-bg, rgba(0, 122, 255, 0.12));
color: var(--az-blue, #007AFF);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--az-text-sm, 13px);
font-weight: var(--az-font-semibold, 600);
letter-spacing: 0.02em;
flex-shrink: 0;
}
.wiz-v2-sheet-client-info {
flex: 1;
min-width: 0;
}
.wiz-v2-sheet-client-name {
font-size: var(--az-text-lg, 15px);
font-weight: var(--az-font-semibold, 600);
color: var(--az-text-primary, #1C1C1E);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wiz-v2-sheet-client-detail {
font-size: var(--az-text-sm, 13px);
color: var(--az-text-tertiary, rgba(60, 60, 67, 0.65));
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
}
.wiz-v2-sheet-client-chevron {
color: var(--az-text-muted, rgba(60, 60, 67, 0.65));
font-size: var(--az-text-md, 14px);
flex-shrink: 0;
}
.wiz-v2-sheet-client-remove {
flex-shrink: 0;
width: var(--az-touch-min, 44px);
height: var(--az-touch-min, 44px);
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--az-text-muted, rgba(60, 60, 67, 0.65));
font-size: var(--az-text-lg-plus, 16px);
border-radius: var(--az-radius-pill, 9999px);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--az-transition-fast, 0.15s ease),
color var(--az-transition-fast, 0.15s ease);
}
.wiz-v2-sheet-client-remove:hover {
background: var(--az-red-bg, rgba(255, 59, 48, 0.12));
color: var(--az-red, #FF3B30);
}
.wiz-v2-sheet-client-remove:active {
opacity: 0.6;
}
.wiz-v2-sheet-section-label {
font-size: var(--az-text-sm, 13px);
font-weight: var(--az-font-semibold, 600);
color: var(--az-text-tertiary, rgba(60, 60, 67, 0.65));
text-transform: uppercase;
letter-spacing: 0.04em;
padding: var(--az-lg, 16px) 0 var(--az-sm, 8px);
}
.wiz-v2-sheet-section-label:first-child {
padding-top: var(--az-md, 12px);
}
.wiz-v2-sheet-input {
width: 100%;
height: 44px;
padding: 0 var(--az-md, 12px);
border: 1px solid var(--az-border, rgba(0, 0, 0, 0.12));
border-radius: var(--az-radius-lg-plus, 10px);
background: var(--az-bg-input, #ffffff);
font-size: 16px; 
font-weight: var(--az-font-normal, 400);
color: var(--az-text-primary, #1C1C1E);
font-family: inherit;
-webkit-appearance: none;
appearance: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wiz-v2-sheet-input::placeholder {
color: var(--az-text-muted, rgba(60, 60, 67, 0.65));
}
.wiz-v2-sheet-input:focus {
outline: none;
border-color: var(--az-blue, #007AFF);
box-shadow: 0 0 0 3px var(--az-blue-bg, rgba(0, 122, 255, 0.12));
}
.wiz-v2-sheet-input--search {
padding-left: calc(var(--az-md, 12px) + 20px + var(--az-sm, 8px));
background: var(--az-bg-input-focus, var(--az-bg-elevated, rgba(120, 120, 128, 0.12)));
border-color: var(--az-border-hover, rgba(0, 0, 0, 0.18));
}
.wiz-v2-sheet-field {
margin-bottom: var(--az-lg, 16px);
}
.wiz-v2-sheet-field--half {
flex: 1;
min-width: 0;
}
.wiz-v2-sheet-label {
display: block;
font-size: var(--az-text-sm, 13px);
font-weight: var(--az-font-medium, 500);
color: var(--az-text-tertiary, rgba(60, 60, 67, 0.65));
margin-bottom: var(--az-sm-plus, 10px);
line-height: 1.2;
}
.wiz-v2-sheet-row {
display: flex;
gap: var(--az-md, 12px);
}
.wiz-v2-sheet-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.wiz-v2-sheet-input-wrap .wiz-v2-sheet-input {
padding-right: 40px;
}
.wiz-v2-sheet-input-suffix {
position: absolute;
right: var(--az-md, 12px);
font-size: var(--az-text-lg, 15px);
font-weight: var(--az-font-medium, 500);
color: var(--az-text-tertiary, rgba(60, 60, 67, 0.65));
pointer-events: none;
}
.wiz-v2-sheet-input.wiz-v2-sheet-textarea {
height: auto;
min-height: 96px;
padding: var(--az-md, 12px);
line-height: 1.4;
resize: vertical;
}
.wiz-v2-sheet-hint {
margin: var(--az-xs, 4px) 0 0 0;
font-size: var(--az-text-xs, 12px);
color: var(--az-text-tertiary, rgba(60, 60, 67, 0.65));
line-height: 1.3;
}
.wiz-v2-sheet-submit {
width: 100%;
height: var(--az-4xl, 48px);
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: var(--az-radius-xl, 12px);
background: var(--az-text-primary, #1C1C1E);
color: var(--az-bg-card, #ffffff);
font-size: var(--az-text-lg, 15px);
font-weight: var(--az-font-semibold, 600);
font-family: inherit;
cursor: pointer;
transition: opacity 0.15s ease;
-webkit-tap-highlight-color: transparent;
margin-top: var(--az-sm, 8px);
}
.wiz-v2-sheet-submit:active {
opacity: 0.8;
}
.wiz-v2-sheet-chips {
display: flex;
flex-wrap: wrap;
gap: var(--az-sm, 8px);
margin-bottom: var(--az-lg, 16px);
}
.wiz-v2-sheet-chip {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
padding: var(--az-xs-plus, 6px) var(--az-md, 12px);
border: 1px solid var(--az-border, rgba(0, 0, 0, 0.12));
border-radius: var(--az-radius-pill, 9999px);
background: transparent;
color: var(--az-text-secondary, #48484A);
font-family: inherit;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
-webkit-tap-highlight-color: transparent;
max-width: 180px;
}
.wiz-v2-chip-name {
font-size: var(--az-text-sm, 13px);
font-weight: var(--az-font-medium, 500);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 152px;
line-height: 1.3;
}
.wiz-v2-chip-price {
font-size: var(--az-text-2xs, 10px);
color: var(--az-blue, #007AFF);
margin-top: var(--az-2xs, 2px);
line-height: 1;
}
.wiz-v2-sheet-chip:active {
background: var(--az-blue-bg, rgba(0, 122, 255, 0.12));
border-color: var(--az-blue-border, rgba(0, 122, 255, 0.16));
color: var(--az-blue, #007AFF);
}
.wiz-v2-sheet-chip:active .wiz-v2-chip-price {
color: var(--az-blue, #007AFF);
}
.wiz-v2-sheet-section-label {
font-size: var(--az-text-xs, 12px);
color: var(--az-text-tertiary);
font-weight: var(--az-font-medium, 500);
padding-bottom: var(--az-xs, 4px);
}
.wiz-v2-sheet-divider {
display: flex;
align-items: center;
gap: var(--az-sm, 8px);
font-size: var(--az-text-xs, 12px);
color: var(--az-text-muted);
margin: var(--az-xs, 4px) 0 var(--az-sm, 8px);
}
.wiz-v2-sheet-divider::before,
.wiz-v2-sheet-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--az-border);
}
.wiz-v2-freq-list {
display: flex;
flex-direction: column;
border: 1px solid var(--az-border);
border-radius: var(--az-radius-xl, 12px);
overflow: hidden;
margin-bottom: var(--az-lg, 16px);
}
.wiz-v2-freq-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-sm, 8px);
min-height: 44px;
padding: var(--az-sm, 8px) var(--az-lg, 16px);
background: var(--az-bg-card);
border: none;
font-family: inherit;
cursor: pointer;
text-align: left;
-webkit-tap-highlight-color: transparent;
transition: background var(--az-transition-fast);
}
.wiz-v2-freq-row--sep {
border-bottom: 1px solid var(--az-border);
}
.wiz-v2-freq-row-name {
flex: 1;
font-size: var(--az-text-md, 14px);
font-weight: var(--az-font-medium, 500);
color: var(--az-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wiz-v2-freq-row-price {
font-size: var(--az-text-sm, 13px);
color: var(--az-text-secondary);
white-space: nowrap;
flex-shrink: 0;
}
.wiz-v2-freq-row:active {
background: var(--az-blue-bg);
}
.wiz-v2-freq-row:active .wiz-v2-freq-row-name {
color: var(--az-blue);
}
.wiz-v2-freq-row:active .wiz-v2-freq-row-price {
color: var(--az-blue);
}
.wiz-v2-sheet-options {
display: flex;
flex-direction: column;
}
.wiz-v2-sheet-option {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-md-plus, 14px) 0;
border: none;
border-bottom: 1px solid var(--az-border, rgba(0, 0, 0, 0.12));
background: transparent;
cursor: pointer;
font-size: var(--az-text-lg, 15px);
font-weight: var(--az-font-medium, 500);
color: var(--az-text-primary, #1C1C1E);
font-family: inherit;
width: 100%;
text-align: left;
-webkit-tap-highlight-color: transparent;
}
.wiz-v2-sheet-option:last-child {
border-bottom: none;
}
.wiz-v2-sheet-option:active {
opacity: 0.6;
}
.wiz-v2-sheet-option.active {
color: var(--az-blue, #007AFF);
}
.wiz-v2-sheet-option.active i {
color: var(--az-blue, #007AFF);
font-size: var(--az-text-xl, 17px);
}
.wiz-v2-sheet-action {
display: flex;
align-items: center;
gap: var(--az-md, 12px);
width: 100%;
padding: var(--az-md-plus, 14px) 0;
margin-top: var(--az-md, 12px);
border: none;
border-top: 1px solid var(--az-border-hover, rgba(0, 0, 0, 0.18));
background: transparent;
cursor: pointer;
font-size: var(--az-text-lg, 15px);
font-weight: var(--az-font-medium, 500);
color: var(--az-blue, #007AFF);
font-family: inherit;
text-align: left;
-webkit-tap-highlight-color: transparent;
}
.wiz-v2-sheet-action:last-child {
border-bottom: none;
}
.wiz-v2-sheet-action:active {
opacity: 0.6;
}
.wiz-v2-sheet-action i {
font-size: var(--az-text-xl-plus, 20px);
}
.wiz-v2-sheet-empty {
text-align: center;
padding: var(--az-xl, 24px);
color: var(--az-text-tertiary, rgba(60, 60, 67, 0.65));
font-size: var(--az-text-lg, 15px);
}
.wiz-v2-sheet-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-md-plus, 14px) 0;
border-bottom: 1px solid var(--az-border, rgba(0, 0, 0, 0.12));
font-size: var(--az-text-lg, 15px);
font-weight: var(--az-font-medium, 500);
color: var(--az-text-primary, #1C1C1E);
}
.wiz-v2-toggle {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.wiz-v2-toggle input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.wiz-v2-toggle-track {
width: 51px;
height: 31px;
border-radius: var(--az-radius-pill, 9999px);
background: var(--az-bg-elevated, #EDEDF0);
position: relative;
transition: background 0.25s ease;
}
.wiz-v2-toggle-track::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 27px;
height: 27px;
border-radius: var(--az-radius-pill, 9999px);
background: var(--az-bg-card, #ffffff);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.06);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.wiz-v2-toggle input:checked + .wiz-v2-toggle-track {
background: var(--az-green, #34C759);
}
.wiz-v2-toggle input:checked + .wiz-v2-toggle-track::after {
transform: translateX(20px);
}
.wiz-v2-sheet-segmented {
display: flex;
background: rgba(0, 0, 0, 0.06);
border-radius: var(--az-radius-lg-plus);
padding: 2px;
}
.wiz-v2-sheet-seg-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-xs, 4px);
height: 36px;
border: none;
background: transparent;
border-radius: var(--az-radius-lg);
font-size: var(--az-text-sm, 13px);
font-weight: var(--az-font-medium, 500);
color: var(--az-text-secondary, #48484A);
cursor: pointer;
font-family: inherit;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.wiz-v2-sheet-seg-btn.active {
background: var(--az-bg-card, #ffffff);
color: var(--az-text-primary, #1C1C1E);
text-shadow: 0 0 0.6px currentColor;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.wiz-v2-sheet-seg-btn i {
font-size: var(--az-text-md, 14px);
}
.wiz-v2-sheet-disc-fields {
padding-top: var(--az-lg, 16px);
}
.wiz-v2-sheet-disc-fields.hidden {
display: none;
}
.wiz-v2-toast {
position: fixed;
bottom: calc(var(--az-3xl, 40px) + env(safe-area-inset-bottom, 0px));
left: 50%;
transform: translateX(-50%) translateY(20px);
z-index: calc(var(--az-z-toast, 1100) + 10);
background: var(--az-text-primary, #1C1C1E);
color: var(--az-bg-card, #ffffff);
padding: var(--az-md, 12px) var(--az-xl, 24px);
border-radius: var(--az-radius-xl, 12px);
font-size: var(--az-text-lg, 15px);
font-weight: var(--az-font-medium, 500);
font-family: inherit;
white-space: normal;
word-wrap: break-word;
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
width: max-content;
max-width: calc(100vw - 32px);
text-align: center;
}
.wiz-v2-toast-ref {
white-space: nowrap;
}
.wiz-v2-toast.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.wiz-v2-toast--success {
background: var(--az-green, #34C759);
color: #ffffff;
}
.wiz-v2-toast--error {
background: var(--az-red, #D94F57);
color: #ffffff;
}
html.dark-mode .wiz-v2-type-toggle,
html.dark-mode .wiz-v2-sheet-segmented {
background: rgba(255, 255, 255, 0.06);
}
html.dark-mode .wiz-v2-sheet-submit {
background: var(--az-text-primary, #EDEDEF);
color: var(--az-bg-app, #0A0A0B);
}
html.dark-mode .wiz-v2-meta-select {
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238B8B8F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html.dark-mode .wiz-v2-toggle input:checked + .wiz-v2-toggle-track {
background: var(--az-green, #4CB782);
}
html.dark-mode .wiz-v2-sheet-input,
html.dark-mode .wiz-v2-note-input,
html.dark-mode .wiz-v2-meta-input,
html.dark-mode .wiz-v2-meta-select,
html.dark-mode .wiz-v2-meta-value {
background: var(--az-bg-elevated, rgba(255, 255, 255, 0.06));
border-color: transparent;
color: var(--az-text-primary, #EDEDEF);
}
html.dark-mode .wiz-v2-meta-input:focus,
html.dark-mode .wiz-v2-meta-select:focus {
background: var(--az-bg-input, #1C1C1E);
border-color: var(--az-blue, #007AFF);
}
html.dark-mode .wiz-v2-confirm-btn--cancel {
background: var(--az-bg-elevated, rgba(255, 255, 255, 0.08));
color: var(--az-text-primary, #EDEDEF);
}
html.dark-mode .wiz-v2-client-placeholder {
background: var(--az-bg-elevated, rgba(255, 255, 255, 0.06));
}
html.dark-mode .wiz-v2-section {
background: var(--az-bg-card, #1C1C1E);
border-color: var(--az-border, rgba(255, 255, 255, 0.08));
}
html.dark-mode .wiz-v2-section.wiz-v2-totals {
background: transparent;
border-color: transparent;
}
html.dark-mode .wiz-v2-add-btn {
background: var(--az-bg-elevated, rgba(255, 255, 255, 0.06));
}
html.dark-mode .wiz-v2-sheet-search {
background: var(--az-bg-input, #1C1C1E);
border-color: var(--az-border, rgba(255,255,255,0.12));
color: var(--az-text-primary, #EDEDEF);
}
html.dark-mode .wiz-v2-option {
border-bottom-color: var(--az-border, rgba(255,255,255,0.08));
}
html.dark-mode .wiz-v2-total-final {
border-top-color: var(--az-border, rgba(255,255,255,0.12));
}
html.dark-mode .wiz-v2-line {
border-bottom-color: var(--az-border, rgba(255,255,255,0.08));
}
#email-send-modal .email-send-modal-content {
background: var(--az-bg-surface);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-xl, 16px);
width: 100%;
max-width: 1100px;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: var(--az-shadow-modal, 0 16px 48px rgba(0, 0, 0, 0.5));
}
#email-send-modal .email-send-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-lg-plus) var(--az-xl);
border-bottom: 1px solid var(--az-border);
flex-shrink: 0;
}
#email-send-modal .email-send-modal-title-group {
display: flex;
align-items: center;
gap: var(--az-sm-plus);
}
#email-send-modal .email-send-modal-title-group i {
font-size: var(--az-text-xl);
color: var(--az-blue);
}
#email-send-modal .email-send-modal-body {
display: grid;
grid-template-columns: 1fr 1fr;
flex: 1;
min-height: 0;
overflow: hidden;
}
#email-send-modal .email-send-composer {
display: flex;
flex-direction: column;
gap: var(--az-md, 12px);
padding: var(--az-xl);
overflow-y: auto;
border-right: 1px solid var(--az-border);
}
#email-send-modal .email-send-composer .form-group {
display: flex;
flex-direction: column;
gap: var(--az-xs-plus);
}
.email-send-dropdown {
position: relative;
}
.email-send-dropdown-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--az-sm, 8px) var(--az-md, 12px);
background: transparent;
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md, 8px);
color: var(--az-text-primary);
font-size: var(--az-text-sm, 13px);
min-height: var(--az-input-h, 36px);
cursor: pointer;
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
text-align: left;
}
.email-send-dropdown-btn:hover {
border-color: var(--az-border-focus);
}
.email-send-dropdown-btn i {
font-size: var(--az-text-sm, 13px);
color: var(--az-text-muted);
transition: transform 0.2s ease;
flex-shrink: 0;
}
.email-send-dropdown.open .email-send-dropdown-btn i {
transform: rotate(180deg);
}
.email-send-dropdown-menu {
display: none;
position: absolute;
top: calc(100% + var(--az-xs, 4px));
left: 0;
right: 0;
background: var(--az-bg-elevated, #1c1c1e);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md, 8px);
padding: var(--az-xs, 4px);
z-index: var(--az-z-dropdown);
box-shadow: var(--az-shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.3));
animation: cc-slide-in 0.15s ease;
}
.email-send-dropdown.open .email-send-dropdown-menu {
display: flex;
flex-direction: column;
}
.email-send-dropdown-option {
display: flex;
align-items: center;
width: 100%;
padding: var(--az-sm, 8px) var(--az-md, 12px);
background: none;
border: none;
border-radius: var(--az-radius-sm, 4px);
color: var(--az-text-secondary);
font-size: var(--az-text-sm, 13px);
text-align: left;
cursor: pointer;
transition: color 0.1s ease, background-color 0.1s ease, border-color 0.1s ease, opacity 0.1s ease;
min-height: 36px;
}
.email-send-dropdown-option:hover {
background: var(--az-bg-hover, rgba(255, 255, 255, 0.06));
color: var(--az-text-primary);
}
.email-send-dropdown-option.active {
color: var(--az-text-primary);
font-weight: var(--az-font-medium, 500);
}
@media (max-width: 768px) {
.email-send-dropdown-btn {
font-size: var(--az-text-lg-plus);
min-height: var(--az-touch-min);
padding: var(--az-sm, 8px) var(--az-md, 12px);
}
.email-send-dropdown-option {
font-size: var(--az-text-lg-plus);
min-height: var(--az-touch-min);
}
}
.cc-toggle-btn,
.email-send-cc-toggle {
background: none;
border: 1px solid var(--az-border);
border-radius: var(--az-radius-sm);
color: var(--az-text-tertiary);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
padding: var(--az-2xs) var(--az-sm);
margin-left: var(--az-sm);
cursor: pointer;
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
vertical-align: middle;
letter-spacing: 0.02em;
}
.cc-toggle-btn:hover,
.email-send-cc-toggle:hover {
color: var(--az-blue);
border-color: var(--az-blue-border);
background: var(--az-blue-bg);
}
.cc-toggle-btn.active,
.email-send-cc-toggle.active {
color: var(--az-text-primary);
border-color: var(--az-border-focus);
background: var(--az-bg-elevated);
}
.client-cc-group,
.email-send-cc-group {
animation: cc-slide-in 0.2s ease;
}
@keyframes cc-slide-in {
from { opacity: 0; transform: translateY(-4px); }
to   { opacity: 1; transform: translateY(0); }
}
#email-send-modal .email-send-composer .form-textarea {
resize: vertical;
min-height: 60px;
}
#email-send-modal .email-send-preview {
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--az-bg-app);
}
#email-send-modal .email-send-preview-toolbar {
display: flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-md) var(--az-lg);
border-bottom: 1px solid var(--az-border);
flex-shrink: 0;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
#email-send-modal .email-send-preview-label {
font-size: var(--az-text-sm, 13px);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
}
#email-send-modal .email-send-preview-chip {
font-size: var(--az-text-2xs, 10px);
font-weight: var(--az-font-semibold);
color: var(--az-blue);
background: var(--az-blue-bg, rgba(94, 106, 210, 0.1));
border: 1px solid var(--az-blue-border, rgba(94, 106, 210, 0.2));
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-pill, 100px);
text-transform: uppercase;
letter-spacing: 0.04em;
}
#email-send-modal .email-send-preview-stage {
flex: 1;
overflow: hidden;
padding: var(--az-lg);
display: flex;
justify-content: center;
align-items: flex-start;
position: relative;
}
#email-send-modal .email-send-preview-iframe {
width: 794px;
height: 1123px;
border: none;
border-radius: var(--az-radius-md, 8px);
background: white;
box-shadow: var(--az-shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.3));
transform-origin: top center;
flex-shrink: 0;
}
#email-send-modal .email-send-modal-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-lg) var(--az-xl);
border-top: 1px solid var(--az-border);
flex-shrink: 0;
}
#email-send-modal .email-send-footer-info {
font-size: var(--az-text-xs, 12px);
color: var(--az-text-muted);
display: flex;
align-items: center;
gap: var(--az-md);
min-width: 0;
}
#email-send-modal .email-send-attach-toggle {
display: inline-flex;
padding: var(--az-2xs);
background: var(--az-bg-surface);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
gap: var(--az-2xs);
flex-shrink: 0;
}
#email-send-modal .email-send-attach-opt {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs) var(--az-md);
border: none;
background: transparent;
color: var(--az-text-secondary);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
border-radius: var(--az-radius-md);
cursor: pointer;
transition: var(--az-transition-fast);
}
#email-send-modal .email-send-attach-opt:hover {
color: var(--az-text-primary);
}
#email-send-modal .email-send-attach-opt.is-active {
background: var(--az-bg-card);
color: var(--az-text-primary);
box-shadow: var(--az-shadow-sm);
}
#email-send-modal .email-send-attach-opt:focus-visible {
outline: 2px solid var(--az-border-focus);
outline-offset: 1px;
}
#email-send-modal .email-send-attach-file {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#email-send-modal .email-send-attach-file.is-hidden {
display: none;
}
#email-send-modal .email-send-footer-actions {
display: flex;
gap: var(--az-sm);
}
.doc-email-sent-badge {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
color: var(--az-green, #22c55e);
font-size: var(--az-text-2xs, 10px);
opacity: 0.8;
}
.email-history-list {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.email-history-item {
display: flex;
align-items: center;
gap: var(--az-sm-plus);
padding: var(--az-sm) var(--az-md);
background: var(--az-bg-elevated, #16161a);
border-radius: var(--az-radius-lg);
font-size: var(--az-text-xs, 12px);
color: var(--az-text-secondary, #a1a1aa);
}
.email-history-item .email-history-icon {
color: var(--az-green, #22c55e);
font-size: var(--az-text-md);
flex-shrink: 0;
}
.email-history-item .email-history-date {
color: var(--az-text-primary, #fafafa);
font-weight: var(--az-font-medium);
}
.email-history-item .email-history-recipient {
color: var(--az-text-tertiary, #71717a);
margin-left: auto;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 160px;
}
.email-history-empty {
font-size: var(--az-text-xs, 12px);
color: var(--az-text-tertiary, #71717a);
padding: var(--az-xs) 0;
}
@keyframes email-spin {
to { transform: rotate(360deg); }
}
#email-send-modal .ph-spin {
animation: email-spin 0.9s linear infinite;
display: inline-block;
}
@media (max-width: 768px) {
#email-send-modal {
padding: 0;
}
#email-send-modal .email-send-modal-content {
max-width: 100%;
max-height: 100vh;
height: 100%;
border-radius: 0;
border: none;
}
#email-send-modal .email-send-modal-header {
padding: var(--az-md-plus) var(--az-lg);
padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
#email-send-modal .email-send-modal-body {
grid-template-columns: 1fr;
overflow-y: auto;
}
#email-send-modal .email-send-composer {
border-right: none;
padding: var(--az-lg);
overflow-y: visible;
gap: var(--az-sm-plus);
}
#email-send-modal .email-send-composer .form-input,
#email-send-modal .email-send-composer .form-textarea,
#email-send-modal .email-send-composer select {
font-size: var(--az-text-lg-plus);
min-height: var(--az-touch-min);
}
#email-send-modal .email-send-composer select.form-input {
text-align: left;
-webkit-appearance: none;
appearance: none;
}
#email-send-modal .email-send-composer .form-textarea {
min-height: 80px;
}
#email-send-modal .email-send-preview {
max-height: 240px;
flex-shrink: 0;
border-top: 1px solid var(--az-border);
}
#email-send-modal .email-send-preview-toolbar {
padding: var(--az-sm) var(--az-md);
}
#email-send-modal .email-send-preview-stage {
padding: var(--az-sm);
overflow: hidden;
height: 506px;
}
#email-send-modal .email-send-preview-iframe {
min-height: unset;
transform: scale(0.45);
transform-origin: top left;
}
#email-send-modal .email-send-modal-footer {
padding: var(--az-md) var(--az-lg);
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
flex-wrap: wrap;
gap: var(--az-sm);
}
#email-send-modal .email-send-footer-info {
width: 100%;
flex-wrap: wrap;
}
#email-send-modal .email-send-attach-toggle {
width: 100%;
}
#email-send-modal .email-send-attach-opt {
flex: 1;
justify-content: center;
min-height: var(--az-touch-min);
}
#email-send-modal .email-send-footer-actions {
width: 100%;
display: flex;
}
#email-send-modal .email-send-footer-actions .btn {
flex: 1;
min-height: var(--az-touch-min);
justify-content: center;
}
}
.ai-chat-bubble {
position: fixed;
bottom: var(--az-lg-plus);
right: var(--az-lg-plus);
width: var(--az-4xl);
height: var(--az-4xl);
border-radius: var(--az-radius-pill);
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
border: 1px solid var(--az-border);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: var(--az-z-chat);
box-shadow: var(--az-shadow-sm);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.ai-chat-bubble::before {
content: '';
position: absolute;
inset: -3px;
border-radius: var(--az-radius-pill);
background: conic-gradient(
from 0deg,
transparent 0deg,
color-mix(in srgb, var(--az-indigo) 50%, transparent) 80deg,
color-mix(in srgb, var(--az-indigo) 20%, transparent) 160deg,
transparent 240deg,
transparent 360deg
);
z-index: -1;
animation: ai-ring-spin 3s linear infinite;
}
.ai-chat-bubble::after {
content: '';
position: absolute;
inset: 0;
border-radius: var(--az-radius-pill);
background: var(--az-bg-elevated);
z-index: -1;
}
@keyframes ai-ring-spin {
to { transform: rotate(360deg); }
}
.ai-chat-bubble:hover {
transform: scale(1.08);
border-color: transparent;
color: var(--az-text-primary);
box-shadow: 0 4px 20px color-mix(in srgb, var(--az-indigo) 20%, transparent), 0 2px 8px rgba(0, 0, 0, 0.3);
}
.ai-chat-bubble:hover::before {
inset: -4px;
background: conic-gradient(
from 0deg,
transparent 0deg,
color-mix(in srgb, var(--az-indigo) 70%, transparent) 80deg,
color-mix(in srgb, var(--az-indigo) 35%, transparent) 160deg,
transparent 240deg,
transparent 360deg
);
}
.ai-chat-bubble:active {
filter: brightness(0.92);
}
.ai-chat-bubble svg {
width: var(--az-xl);
height: var(--az-xl);
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
position: relative;
z-index: 1;
}
.ai-chat-bubble--pulse {
animation: ai-bubble-breathe 3s ease-in-out infinite;
border-color: transparent;
}
@keyframes ai-bubble-breathe {
0%, 100% {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
50% {
box-shadow: 0 0 20px color-mix(in srgb, var(--az-indigo) 18%, transparent), 0 0 0 4px color-mix(in srgb, var(--az-indigo) 8%, transparent);
}
}
.ai-chat-bubble.hidden {
opacity: 0;
pointer-events: none;
transform: scale(0.5);
}
.ai-chat-backdrop {
position: fixed;
inset: 0;
background: transparent;
z-index: var(--az-z-chat-backdrop);
display: none;
}
.ai-chat-backdrop.active {
display: block;
}
.ai-chat-panel {
position: fixed;
top: 0;
right: 0;
width: 420px;
height: 100vh;
height: 100dvh;
background: var(--az-bg-app);
border-left: 1px solid var(--az-border);
z-index: var(--az-z-chat);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: var(--az-shadow-lg);
}
.ai-chat-panel.open {
transform: translateX(0);
}
.ai-chat-header {
display: flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-lg) var(--az-xl);
border-bottom: 1px solid var(--az-border);
min-height: var(--az-5xl);
flex-shrink: 0;
}
.ai-chat-header-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
letter-spacing: var(--az-tracking-tight);
flex: 1;
}
.ai-chat-header-btn {
width: var(--az-touch-min);
height: var(--az-touch-min);
min-height: var(--az-touch-min);
min-width: var(--az-touch-min);
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--az-text-secondary);
border-radius: var(--az-radius-md);
cursor: pointer;
transition: background var(--az-transition-fast), color var(--az-transition-fast);
padding: 0;
}
.ai-chat-header-btn:hover {
background: var(--az-bg-elevated);
color: var(--az-text-primary);
}
.ai-chat-header-btn svg {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 1.5;
fill: none;
}
.ai-chat-messages {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: var(--az-lg) var(--az-xl);
display: flex;
flex-direction: column;
gap: var(--az-md);
scroll-behavior: smooth;
}
.ai-chat-messages::-webkit-scrollbar {
width: 6px;
}
.ai-chat-messages::-webkit-scrollbar-track {
background: transparent;
}
.ai-chat-messages::-webkit-scrollbar-thumb {
background: var(--az-border);
border-radius: var(--az-radius-xs);
}
.ai-chat-messages::-webkit-scrollbar-thumb:hover {
background: var(--az-border-hover);
}
.ai-chat-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
gap: var(--az-md);
padding: var(--az-2xl);
text-align: center;
}
.ai-chat-empty-icon {
width: 48px;
height: 48px;
color: var(--az-text-muted);
opacity: 0.5;
}
.ai-chat-empty-icon svg {
width: 100%;
height: 100%;
stroke: currentColor;
stroke-width: 1.2;
fill: none;
}
.ai-chat-empty-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
}
.ai-chat-empty-desc {
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
max-width: 280px;
line-height: 1.5;
}
.ai-suggestions-proactive {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--az-sm);
margin-top: var(--az-xl);
max-width: 420px;
}
.ai-proactive-chip {
display: inline-flex;
align-items: center;
gap: var(--az-sm);
background: var(--az-bg-surface);
border: 1px solid var(--az-border);
color: var(--az-text-secondary);
border-radius: var(--az-radius-lg);
padding: var(--az-sm) var(--az-md);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
white-space: normal;
line-height: 1.3;
text-align: left;
}
.ai-proactive-chip:hover {
border-color: var(--az-blue);
color: var(--az-blue);
background: var(--az-blue-bg);
}
.ai-proactive-chip-icon {
display: flex;
align-items: center;
flex-shrink: 0;
opacity: 0.75;
}
.ai-proactive-chip:hover .ai-proactive-chip-icon {
opacity: 1;
}
.ai-quick-replies {
display: flex;
flex-wrap: wrap;
gap: var(--az-xs);
margin-top: var(--az-md);
animation: ai-msg-in 0.25s ease-out;
}
.ai-quick-reply-btn {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-sm) var(--az-md);
font-size: var(--az-text-xs);
font-family: var(--az-font);
font-weight: var(--az-font-medium);
color: var(--az-blue);
background: var(--az-blue-bg);
border: 1px solid var(--az-blue-border);
border-radius: var(--az-radius-pill);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
line-height: 1.3;
white-space: normal;
text-align: left;
}
.ai-quick-reply-btn:hover {
background: var(--az-blue-bg);
border-color: var(--az-blue);
}
.ai-quick-reply-btn:active {
filter: brightness(0.92);
}
.ai-guided-progress {
position: sticky;
top: 0;
z-index: var(--az-z-sticky);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-left: 3px solid var(--az-blue);
border-radius: var(--az-radius-md);
padding: var(--az-md);
margin-bottom: var(--az-md);
animation: ai-msg-in 0.25s ease-out;
}
.ai-guided-progress-title {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--az-sm);
}
.ai-guided-progress-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-xs) 0;
font-size: var(--az-text-xs);
color: var(--az-text-muted);
cursor: default;
border-radius: var(--az-radius-sm);
transition: background 0.15s ease, color 0.15s ease;
}
.ai-guided-progress-row--filled {
color: var(--az-text-primary);
}
.ai-guided-progress-row--editable {
cursor: pointer;
padding: var(--az-xs) var(--az-sm);
margin: 0 calc(-1 * var(--az-sm));
}
.ai-guided-progress-row--editable:hover {
background: var(--az-bg-surface);
}
.ai-guided-progress-label {
font-weight: var(--az-font-medium);
flex-shrink: 0;
margin-right: var(--az-sm);
}
.ai-guided-progress-value {
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-msg {
display: flex;
flex-direction: column;
max-width: 85%;
animation: ai-msg-in 0.25s ease-out;
}
@keyframes ai-msg-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.ai-msg--user {
align-self: flex-end;
}
.ai-msg--ai {
align-self: flex-start;
}
.ai-msg-bubble {
padding: var(--az-md) var(--az-lg);
border-radius: var(--az-radius-lg);
font-size: var(--az-text-sm);
line-height: 1.45;
color: var(--az-text-primary);
word-break: break-word;
}
.ai-msg--user .ai-msg-bubble {
background: var(--az-blue-bg);
border: 1px solid var(--az-blue-border);
border-bottom-right-radius: var(--az-radius-sm);
}
.ai-msg--ai .ai-msg-bubble {
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-bottom-left-radius: var(--az-radius-sm);
line-height: 1.65;
}
.ai-msg--ai .ai-msg-bubble:empty {
display: none;
}
.ai-msg--ai .ai-msg-bubble p {
margin: 0 0 var(--az-sm) 0;
}
.ai-msg--ai .ai-msg-bubble p:last-child {
margin-bottom: 0;
}
.ai-msg--ai .ai-msg-bubble strong {
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.ai-msg--ai .ai-msg-bubble em {
font-style: italic;
color: var(--az-text-secondary);
}
.ai-msg--ai .ai-msg-bubble code {
font-family: var(--az-font-mono);
font-size: 0.85em;
padding: 2px var(--az-sm);
border-radius: var(--az-radius-sm);
background: var(--az-blue-bg);
color: var(--az-blue);
border: 1px solid var(--az-blue-border);
}
.ai-msg--ai .ai-msg-bubble ul {
margin: var(--az-sm) 0;
padding-left: 0;
list-style-type: none;
}
.ai-msg--ai .ai-msg-bubble ol {
margin: var(--az-sm) 0;
padding-left: var(--az-xl);
list-style-type: decimal;
}
.ai-msg--ai .ai-msg-bubble ul > li {
position: relative;
padding-left: var(--az-lg);
margin-bottom: var(--az-sm);
}
.ai-msg--ai .ai-msg-bubble ul > li::before {
content: '';
position: absolute;
left: var(--az-xs);
top: 0.55em;
width: 5px;
height: 5px;
border-radius: var(--az-radius-pill);
background: var(--az-blue);
}
.ai-msg--ai .ai-msg-bubble ol > li {
margin-bottom: var(--az-sm);
padding-left: var(--az-xs);
}
.ai-msg--ai .ai-msg-bubble li:last-child {
margin-bottom: 0;
}
.ai-msg--ai .ai-msg-bubble .ai-md-heading {
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
margin: var(--az-lg) 0 var(--az-sm) 0;
font-size: var(--az-text-md);
line-height: 1.4;
letter-spacing: -0.01em;
}
.ai-msg--ai .ai-msg-bubble .ai-md-heading:first-child {
margin-top: 0;
}
.ai-msg--ai .ai-msg-bubble .ai-md-hr {
border: none;
border-top: 1px solid var(--az-border);
margin: var(--az-md) 0;
}
.ai-msg--ai .ai-msg-bubble a {
color: var(--az-blue);
text-decoration: none;
}
.ai-msg--ai .ai-msg-bubble a:hover {
text-decoration: underline;
}
.ai-msg-expand-btn {
display: inline-block;
margin-top: var(--az-sm);
padding: 0;
border: none;
background: none;
color: var(--az-blue);
font-size: var(--az-text-xs);
cursor: pointer;
font-family: inherit;
transition: color var(--az-transition-fast);
}
.ai-msg-expand-btn:hover {
color: var(--az-text-primary);
}
.ai-msg-time {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
margin-top: var(--az-xs);
padding: 0 var(--az-xs);
}
.ai-msg--user .ai-msg-time {
text-align: right;
}
.ai-typing {
display: flex;
align-items: center;
padding: var(--az-md) var(--az-lg);
align-self: flex-start;
}
.ai-typing-dots {
display: flex;
align-items: center;
gap: var(--az-xs);
}
.ai-typing-dots span {
display: block;
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
background: var(--az-text-tertiary);
animation: ai-dots-bounce 1.4s ease-in-out infinite;
}
.ai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ai-dots-bounce {
0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
40% { opacity: 1; transform: scale(1.2); }
}
.ai-icon {
display: inline-block;
vertical-align: -2px;
font-size: 1.1em;
color: var(--az-blue);
margin-right: 2px;
}
.ai-model-badge {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-sm);
padding: 1px var(--az-sm);
margin-left: var(--az-sm);
vertical-align: middle;
font-weight: var(--az-font-normal);
letter-spacing: 0.2px;
}
.ai-chat-input-area {
padding: var(--az-sm) var(--az-md) var(--az-lg);
border-top: 1px solid var(--az-border);
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.ai-chat-toolbar {
display: flex;
align-items: center;
gap: var(--az-sm);
padding: 0 var(--az-xs);
}
.ai-guide-toggle {
display: inline-flex;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-xs);
color: var(--az-text-muted);
cursor: pointer;
flex-shrink: 0;
user-select: none;
padding: 0 var(--az-xs) 0 0;
transition: color var(--az-transition-fast);
}
.ai-guide-toggle:hover {
color: var(--az-text-secondary);
}
.ai-guide-toggle.active {
color: var(--az-text-secondary);
}
.ai-guide-switch {
position: relative;
width: var(--az-icon-btn-sm);
height: var(--az-lg-plus);
background: var(--az-border);
border-radius: var(--az-radius-lg);
transition: background var(--az-transition-fast);
flex-shrink: 0;
}
.ai-guide-knob {
position: absolute;
top: var(--az-2xs);
left: var(--az-2xs);
width: var(--az-md);
height: var(--az-md);
background: var(--az-text-muted);
border-radius: var(--az-radius-pill);
transition: transform var(--az-transition-fast), background var(--az-transition-fast);
}
.ai-guide-toggle.active .ai-guide-switch {
background: var(--az-blue);
}
.ai-guide-toggle.active .ai-guide-knob {
transform: translateX(12px);
background: var(--az-text-on-accent);
}
.ai-chat-input-wrap {
display: flex;
align-items: center;
gap: var(--az-sm);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-md) var(--az-md) var(--az-md) var(--az-lg);
min-height: 44px;
transition: border-color var(--az-transition-fast);
width: 100%;
box-sizing: border-box;
}
.ai-chat-input-wrap:focus-within {
border-color: var(--az-border-hover);
}
.ai-chat-textarea {
flex: 1;
background: transparent;
border: none;
outline: none;
box-shadow: none;
-webkit-appearance: none;
color: var(--az-text-primary);
font-family: var(--az-font);
font-size: var(--az-text-md);
line-height: 1.5;
resize: none;
max-height: 120px;
min-height: var(--az-xl);
padding: var(--az-xs) 0;
}
.ai-chat-textarea:focus {
border: none;
outline: none;
box-shadow: none;
}
.ai-chat-textarea::placeholder {
color: var(--az-text-muted);
}
.ai-chat-send-btn {
width: var(--az-icon-lg);
height: var(--az-icon-lg);
min-width: var(--az-touch-min);
min-height: var(--az-touch-min);
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--az-text-muted);
border-radius: var(--az-radius-lg);
cursor: pointer;
transition: color var(--az-transition-fast), background var(--az-transition-fast);
flex-shrink: 0;
padding: 0;
align-self: flex-end;
}
.ai-chat-send-btn:hover {
color: var(--az-text-primary);
background: var(--az-bg-elevated);
}
.ai-chat-send-btn:disabled {
opacity: 0.2;
cursor: not-allowed;
}
.ai-chat-send-btn svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ai-msg-footer {
display: flex;
align-items: center;
gap: var(--az-sm);
margin-top: var(--az-xs);
}
.ai-tts-btn {
width: var(--az-card-btn-size);
height: var(--az-card-btn-size);
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--az-text-muted);
border-radius: var(--az-radius-sm);
cursor: pointer;
padding: 0;
opacity: 0;
transition: opacity var(--az-transition-fast), color var(--az-transition-fast), background var(--az-transition-fast);
}
.ai-msg:hover .ai-tts-btn,
.ai-tts-btn.speaking,
.ai-msg:focus-within .ai-tts-btn {
opacity: 1;
}
.ai-tts-btn:hover {
color: var(--az-text-primary);
background: var(--az-bg-elevated);
}
.ai-tts-btn svg {
width: var(--az-text-md);
height: var(--az-text-md);
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ai-tts-btn.speaking {
color: var(--az-blue);
animation: ai-tts-pulse 1.2s ease-in-out infinite;
}
@keyframes ai-tts-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.ai-copy-btn {
width: var(--az-card-btn-size);
height: var(--az-card-btn-size);
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: var(--az-text-muted);
cursor: pointer;
border-radius: var(--az-radius-sm);
padding: 0;
opacity: 0;
transition: opacity var(--az-transition-fast), color var(--az-transition-fast), background var(--az-transition-fast);
}
.ai-msg:hover .ai-copy-btn,
.ai-copy-btn.copied,
.ai-msg:focus-within .ai-copy-btn {
opacity: 1;
}
.ai-copy-btn:hover {
color: var(--az-text-primary);
background: var(--az-bg-elevated);
}
.ai-copy-btn svg {
width: var(--az-text-md);
height: var(--az-text-md);
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ai-copy-btn.copied {
color: var(--az-green);
}
.ai-chat-attach-btn {
width: var(--az-2xl);
height: var(--az-2xl);
min-width: var(--az-touch-min);
min-height: var(--az-touch-min);
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--az-text-muted);
border-radius: var(--az-radius-lg);
cursor: pointer;
transition: color var(--az-transition-fast), background var(--az-transition-fast);
flex-shrink: 0;
padding: 0;
}
.ai-chat-attach-btn:hover {
color: var(--az-text-primary);
background: var(--az-bg-elevated);
}
.ai-chat-attach-btn svg {
width: var(--az-lg);
height: var(--az-lg);
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ai-chat-mic-btn {
width: var(--az-2xl);
height: var(--az-2xl);
min-width: var(--az-touch-min);
min-height: var(--az-touch-min);
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--az-text-muted);
border-radius: var(--az-radius-lg);
cursor: pointer;
transition: color var(--az-transition-fast), background var(--az-transition-fast);
flex-shrink: 0;
padding: 0;
align-self: flex-end;
}
.ai-chat-mic-btn:hover {
color: var(--az-text-primary);
background: var(--az-bg-elevated);
}
.ai-chat-mic-btn svg {
width: var(--az-lg);
height: var(--az-lg);
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ai-chat-mic-btn.listening {
color: var(--az-red);
background: var(--az-red-bg);
animation: ai-mic-pulse 1.5s ease-in-out infinite;
}
@keyframes ai-mic-pulse {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--az-red) 30%, transparent); }
50% { box-shadow: 0 0 0 var(--az-xs-plus) color-mix(in srgb, var(--az-red) 0%, transparent); }
}
.ai-chat-attach-preview {
display: flex;
padding: 0 var(--az-md);
margin-bottom: calc(var(--az-xs) * -1);
}
.ai-attach-chip {
display: inline-flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-sm) var(--az-md);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
max-width: 100%;
}
.ai-attach-chip svg {
flex-shrink: 0;
color: var(--az-blue);
}
.ai-attach-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 180px;
}
.ai-attach-size {
color: var(--az-text-muted);
flex-shrink: 0;
}
.ai-attach-remove {
border: none;
background: transparent;
color: var(--az-text-muted);
cursor: pointer;
font-size: var(--az-text-md);
line-height: 1;
padding: 0 var(--az-2xs);
flex-shrink: 0;
transition: color var(--az-transition-fast);
}
.ai-attach-remove:hover {
color: var(--az-text-primary);
}
.ai-drop-active {
position: relative;
}
.ai-drop-active::after {
content: 'Deposer le fichier ici';
position: absolute;
inset: 0;
z-index: var(--az-z-sticky);
display: flex;
align-items: center;
justify-content: center;
background: var(--az-blue-bg);
border: 2px dashed var(--az-blue);
border-radius: var(--az-radius-lg);
color: var(--az-blue);
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
pointer-events: none;
backdrop-filter: blur(4px);
}
.ai-chart-card {
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-md);
max-width: 340px;
height: 200px;
}
.ai-chart-card canvas {
max-height: 176px;
}
.ai-chart-wrapper {
margin-top: var(--az-sm);
margin-bottom: var(--az-xs);
}
.ai-chart-canvas {
width: 100%;
max-width: 320px;
height: 180px;
}
.ai-download-report-wrap {
margin-top: var(--az-md);
}
.ai-download-report-btn {
display: inline-flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-sm) var(--az-md);
border-radius: var(--az-radius-md);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
color: var(--az-text-primary);
cursor: pointer;
font-size: var(--az-text-sm);
}
.ai-download-report-btn:hover {
background: var(--az-bg-hover);
}
.ai-doc-card {
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-left: 3px solid var(--az-blue);
border-radius: var(--az-radius-md);
padding: var(--az-md) var(--az-md);
margin-top: var(--az-sm);
display: flex;
flex-direction: column;
gap: var(--az-sm);
max-width: 380px;
}
.ai-doc-card--devis {
border-left-color: var(--az-amber);
}
.ai-doc-card--avoir {
border-left-color: var(--az-red);
}
.ai-doc-card-header {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.ai-doc-badge {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--az-blue);
flex-shrink: 0;
}
.ai-doc-badge--devis {
color: var(--az-amber);
}
.ai-doc-badge--avoir {
color: var(--az-red);
}
.ai-doc-card-number {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
}
.ai-doc-card-body {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.ai-doc-card-client {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
font-weight: var(--az-font-medium);
}
.ai-doc-card-amount {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
flex-shrink: 0;
margin-left: var(--az-sm);
}
.ai-doc-card-actions {
display: flex;
gap: var(--az-xs);
padding-top: var(--az-xs);
border-top: 1px solid var(--az-border);
margin-top: var(--az-2xs);
}
.ai-doc-action-btn {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
padding: var(--az-xs) var(--az-md);
border-radius: var(--az-radius-sm);
border: none;
background: transparent;
color: var(--az-text-tertiary);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--az-xs);
transition: color var(--az-transition-fast), background var(--az-transition-fast);
}
.ai-doc-action-btn:hover {
color: var(--az-text-primary);
background: var(--az-glass-bg);
}
.ai-email-card {
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-left: 3px solid var(--az-blue);
border-radius: var(--az-radius-lg);
padding: var(--az-lg) var(--az-lg);
margin-top: var(--az-md);
display: flex;
flex-direction: column;
gap: var(--az-md);
max-width: 420px;
}
.ai-email-card-title {
display: flex;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
padding-bottom: var(--az-sm);
border-bottom: 1px solid var(--az-border);
}
.ai-email-card-title svg {
color: var(--az-blue);
flex-shrink: 0;
}
.ai-email-field {
display: flex;
gap: var(--az-md);
font-size: var(--az-text-sm);
line-height: 1.5;
align-items: baseline;
}
.ai-email-label {
color: var(--az-text-muted);
flex-shrink: 0;
min-width: 80px;
font-size: var(--az-text-xs);
text-transform: uppercase;
letter-spacing: 0.3px;
font-weight: var(--az-font-medium);
}
.ai-email-value {
color: var(--az-text-primary);
word-break: break-word;
font-weight: var(--az-font-medium);
}
.ai-email-body-preview {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
background: var(--az-segment-track-bg);
border-radius: var(--az-radius-md);
padding: var(--az-md) var(--az-md);
max-height: 120px;
overflow-y: auto;
line-height: 1.6;
border: 1px solid var(--az-border);
white-space: pre-wrap;
}
.ai-email-actions {
display: flex;
gap: var(--az-sm);
padding-top: var(--az-sm);
border-top: 1px solid var(--az-border);
}
.ai-email-status {
padding-top: var(--az-sm);
border-top: 1px solid var(--az-border);
}
.ai-email-status-badge {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-muted);
padding: 3px var(--az-md);
border-radius: var(--az-radius-sm);
background: var(--az-glass-bg);
}
.ai-email-confirm-btn {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
padding: var(--az-xs) var(--az-lg);
border-radius: var(--az-radius-sm);
border: none;
background: var(--az-blue);
color: var(--az-text-on-accent);
cursor: pointer;
transition: opacity var(--az-transition-fast);
}
.ai-email-confirm-btn:hover {
opacity: 0.85;
}
.ai-email-confirm-btn:disabled {
opacity: 0.5;
cursor: default;
}
.ai-email-cancel-btn {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
padding: var(--az-xs) var(--az-lg);
border-radius: var(--az-radius-sm);
border: none;
background: transparent;
color: var(--az-text-muted);
cursor: pointer;
transition: color var(--az-transition-fast);
}
.ai-email-cancel-btn:hover {
color: var(--az-text-secondary);
}
.ai-doc-recap {
display: flex;
flex-direction: column;
gap: var(--az-xs);
padding-top: var(--az-sm);
border-top: 1px solid var(--az-border);
}
.ai-doc-recap-line {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--az-sm);
}
.ai-doc-recap-designation {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.ai-doc-recap-detail {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
white-space: nowrap;
flex-shrink: 0;
}
.ai-doc-recap-totals {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
margin-top: var(--az-xs);
padding-top: var(--az-xs);
border-top: 1px dashed var(--az-border);
}
.ai-doc-recap-subtotal {
display: flex;
justify-content: space-between;
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.ai-doc-recap-total {
display: flex;
justify-content: space-between;
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.ai-setup-progress {
margin-top: var(--az-md);
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
padding: var(--az-lg) var(--az-lg);
max-width: 420px;
}
.ai-setup-header {
display: flex;
align-items: center;
gap: var(--az-sm);
margin-bottom: var(--az-md);
}
.ai-setup-header svg {
color: var(--az-blue);
flex-shrink: 0;
}
.ai-setup-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
flex: 1;
}
.ai-setup-pct {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-blue);
}
.ai-setup-bar-bg {
height: var(--az-xs-plus);
border-radius: var(--az-radius-xs);
background: var(--az-glass-bg-hover);
overflow: hidden;
margin-bottom: var(--az-md);
}
.ai-setup-bar-fill {
height: 100%;
border-radius: var(--az-radius-xs);
transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-setup-filled,
.ai-setup-missing {
display: flex;
flex-wrap: wrap;
gap: var(--az-xs);
margin-top: var(--az-sm);
}
.ai-setup-tag {
font-size: var(--az-text-xs);
padding: 3px var(--az-md);
border-radius: var(--az-radius-lg);
font-weight: var(--az-font-medium);
white-space: nowrap;
}
.ai-setup-tag--done {
background: var(--az-green-bg);
color: var(--az-green);
border: 1px solid var(--az-green-border);
}
.ai-setup-tag--todo {
background: var(--az-glass-bg);
color: var(--az-text-muted);
border: 1px solid var(--az-border);
transition: border-color 0.2s ease, color 0.2s ease;
}
.ai-setup-tag--todo:hover {
border-color: var(--az-blue-border);
color: var(--az-blue);
}
.ai-suggestions-wrapper {
margin-top: var(--az-md);
display: flex;
flex-direction: column;
gap: var(--az-sm);
max-width: 420px;
}
.ai-suggestions-header {
display: flex;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
padding-bottom: var(--az-xs);
}
.ai-suggestions-header svg {
color: var(--az-blue);
}
.ai-suggestion-card {
position: relative;
overflow: hidden;
word-break: break-word;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-md) var(--az-lg);
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.ai-suggestion-card:hover {
border-color: var(--az-blue-border);
background: var(--az-blue-bg);
transform: translateX(2px);
}
.ai-suggestion-card:active {
transform: translateX(2px) scale(0.99);
}
.ai-suggestion-card.selected {
border-color: var(--az-blue);
background: var(--az-blue-bg);
}
.ai-suggestion-card.selected::after {
content: '\2713';
position: absolute;
top: var(--az-sm-plus);
right: var(--az-md);
color: var(--az-blue);
font-size: var(--az-text-sm);
font-weight: var(--az-font-bold);
}
.ai-suggestion-main {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
line-height: 1.4;
}
.ai-suggestion-meta {
display: flex;
flex-wrap: wrap;
gap: var(--az-xs) var(--az-sm);
font-size: var(--az-text-xs);
color: var(--az-text-muted);
margin-top: var(--az-xs);
}
.ai-suggestion-meta span {
overflow-wrap: break-word;
word-break: break-word;
}
.ai-suggestion-address {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
margin-top: var(--az-xs);
line-height: 1.3;
}
.ai-email-card--sent {
opacity: 0.7;
}
.ai-email-status-badge--sent {
color: var(--az-green);
background: var(--az-green-bg);
}
.ai-retry-btn {
display: inline-block;
margin-top: var(--az-sm);
padding: var(--az-xs) var(--az-lg);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.ai-retry-btn:hover {
background: var(--az-blue);
color: var(--az-text-on-accent);
border-color: var(--az-blue);
}
.ai-admin-usage {
margin-top: var(--az-xl);
border-top: 1px solid var(--az-border);
padding-top: var(--az-xl);
}
.ai-tbl-header {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--az-sm);
margin-bottom: var(--az-sm);
}
.ai-tbl-header .ai-tbl-subtitle {
flex: 1;
}
.ai-tbl-reset-btn {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs) var(--az-sm);
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
background: transparent;
border: 1px solid var(--az-border);
border-radius: var(--az-radius-sm);
cursor: pointer;
transition: color, background-color, border-color, opacity 0.15s ease;
}
.ai-tbl-reset-btn:hover {
color: var(--az-text-secondary);
border-color: var(--az-text-muted);
}
.ai-tbl-reset-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.ai-tbl-title {
display: block;
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
letter-spacing: var(--az-tracking-tight);
}
.ai-tbl-subtitle {
display: block;
font-size: var(--az-text-sm);
color: var(--az-text-muted);
margin-top: var(--az-xs);
}
.ai-tbl-summary {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--az-md);
margin: var(--az-md) 0 var(--az-lg);
}
.ai-tbl-summary-item {
font-size: var(--az-text-sm);
color: var(--az-text-tertiary);
font-variant-numeric: tabular-nums;
}
.ai-tbl-summary-item strong {
color: var(--az-text-primary);
font-weight: var(--az-font-semibold);
}
.ai-tbl-summary-sep {
width: 3px;
height: 3px;
border-radius: var(--az-radius-pill);
background: var(--az-text-muted);
flex-shrink: 0;
}
.ai-tbl {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
overflow: hidden;
}
.ai-tbl thead {
background: var(--az-segment-track-bg);
}
.ai-tbl-th {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-muted);
text-align: left;
padding: var(--az-md) var(--az-md);
border-bottom: 1px solid var(--az-glass-border);
white-space: nowrap;
}
.ai-tbl-th:first-child {
width: 26%;
}
.ai-tbl-th:nth-child(2) {
width: 14%;
text-align: center;
}
.ai-tbl-th--metric {
width: 20%;
text-align: center;
}
.ai-tbl-row {
border-bottom: 1px solid var(--az-glass-bg);
}
.ai-tbl-row:nth-child(even) {
background: var(--az-segment-track-bg);
}
.ai-tbl-row:last-child {
border-bottom: none;
}
.ai-tbl-row:hover {
background: var(--az-segment-track-bg);
}
.ai-tbl-row--active .ai-tbl-cell-model {
color: var(--az-text-primary);
font-weight: var(--az-font-semibold);
}
.ai-tbl-cell-model {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
padding: var(--az-lg) var(--az-md);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ai-tbl-model-tag {
display: inline-block;
font-size: var(--az-text-2xs);
font-weight: var(--az-font-normal);
color: var(--az-text-muted);
margin-left: var(--az-sm);
}
.ai-tbl-row--active .ai-tbl-model-tag {
color: var(--az-text-tertiary);
}
.ai-tbl-price-tag {
display: block;
font-size: var(--az-text-2xs);
font-weight: var(--az-font-normal);
color: var(--az-text-muted);
margin-top: var(--az-xs);
letter-spacing: 0.01em;
}
.ai-tbl-row--active .ai-tbl-price-tag {
color: var(--az-text-tertiary);
}
.ai-tbl-active-badge {
display: inline-block;
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
color: var(--az-blue);
background: var(--az-blue-bg);
border: 1px solid var(--az-blue-border);
border-radius: var(--az-radius-pill);
padding: 1px var(--az-xs);
margin-left: var(--az-xs);
letter-spacing: 0.02em;
vertical-align: middle;
}
.ai-tbl-empty {
text-align: center;
color: var(--az-text-muted);
font-size: var(--az-text-xs);
padding: var(--az-xl) var(--az-md);
}
.ai-tbl-cell-cat {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
padding: var(--az-lg) var(--az-md);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.ai-tbl-cell-metric {
padding: var(--az-lg) var(--az-md);
text-align: center;
}
.ai-tbl-metric {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.ai-tbl-metric-dot {
width: 6px;
height: 6px;
border-radius: var(--az-radius-pill);
background: var(--az-text-muted);
flex-shrink: 0;
}
.ai-tbl-metric-dot--warn {
background: var(--az-amber);
}
.ai-tbl-metric-bar {
flex: 1;
height: 4px;
border-radius: var(--az-2xs);
background: var(--az-glass-bg-hover);
overflow: hidden;
min-width: 40px;
}
.ai-tbl-metric-fill {
height: 100%;
border-radius: var(--az-2xs);
background: var(--az-text-muted);
transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-tbl-row--active .ai-tbl-metric-fill {
background: var(--az-blue);
}
.ai-tbl-metric-fill--warn {
background: var(--az-amber);
}
.ai-tbl-row--active .ai-tbl-metric-dot {
background: var(--az-blue);
}
.ai-tbl-metric-text {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
flex-shrink: 0;
}
.ai-tbl-row--active .ai-tbl-metric-text {
color: var(--az-text-primary);
}
@media (max-width: 640px) {
.ai-tbl-th:nth-child(2),
.ai-tbl-cell-cat {
display: none;
}
.ai-tbl-th:first-child {
width: 30%;
}
.ai-tbl-th--metric {
width: 23%;
}
.ai-tbl-metric-bar {
min-width: var(--az-xl);
}
.ai-tbl-metric-text {
font-size: var(--az-text-2xs);
}
}
#assistant.page.active {
display: flex;
flex-direction: column;
gap: 0;
min-height: 0;
flex: 1;
height: calc(100vh - 32px);
height: calc(100dvh - 32px);
margin: calc(-1 * var(--az-page-pad, 24px));
}
.ai-assistant-layout {
display: flex;
flex: 1;
min-height: 0;
height: 100%;
}
.ai-assistant-sidebar {
width: 280px;
min-width: 280px;
border-right: 1px solid var(--az-border);
display: flex;
flex-direction: column;
background: var(--az-bg-app);
overflow: hidden;
}
.ai-assistant-sidebar-header {
padding: var(--az-lg) var(--az-lg) var(--az-md);
border-bottom: 1px solid var(--az-border);
flex-shrink: 0;
}
.ai-assistant-new-btn {
width: 100%;
padding: var(--az-md) var(--az-md);
border-radius: var(--az-radius-lg);
border: 1px solid var(--az-border);
background: var(--az-bg-elevated);
color: var(--az-text-primary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-sm);
min-height: var(--az-touch-min);
transition: background var(--az-transition-fast), border-color var(--az-transition-fast);
}
.ai-assistant-new-btn:hover {
background: var(--az-bg-card-hover);
border-color: var(--az-border-hover);
}
.ai-assistant-new-btn svg {
width: var(--az-lg);
height: var(--az-lg);
stroke: currentColor;
stroke-width: 2;
fill: none;
}
.ai-conv-toolbar {
display: flex;
gap: var(--az-sm);
margin-top: var(--az-sm);
}
.ai-conv-toolbar-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-xs);
padding: var(--az-xs) var(--az-sm);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
background: transparent;
color: var(--az-text-secondary);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
cursor: pointer;
transition: background var(--az-transition-fast), color var(--az-transition-fast), border-color var(--az-transition-fast);
min-height: var(--az-2xl);
white-space: nowrap;
}
.ai-conv-toolbar-btn:hover {
background: var(--az-bg-elevated);
color: var(--az-text-primary);
border-color: var(--az-border-hover);
}
.ai-conv-toolbar-btn--danger:hover {
color: var(--az-red);
border-color: var(--az-red);
background: var(--az-red-bg);
}
.ai-conv-toolbar-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.ai-conv-toolbar-btn svg {
width: 13px;
height: 13px;
flex-shrink: 0;
}
.ai-conv-select-bar {
display: flex;
align-items: center;
gap: var(--az-sm);
margin-top: var(--az-sm);
flex-wrap: wrap;
}
.ai-conv-select-count {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
flex: 1;
text-align: center;
white-space: nowrap;
}
.ai-conv-checkbox-wrap {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: var(--az-lg-plus);
height: var(--az-lg-plus);
margin-right: var(--az-sm);
position: relative;
cursor: pointer;
}
.ai-conv-checkbox {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.ai-conv-checkmark {
width: var(--az-lg);
height: var(--az-lg);
border: 1.5px solid var(--az-border-hover);
border-radius: var(--az-radius-sm);
transition: background var(--az-transition-fast), border-color var(--az-transition-fast);
}
.ai-conv-checkbox:checked + .ai-conv-checkmark {
background: var(--az-blue);
border-color: var(--az-blue);
}
.ai-conv-checkbox:checked + .ai-conv-checkmark::after {
content: '';
display: block;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin: 1px auto 0;
}
.ai-conv-item.selected {
background: var(--az-bg-elevated);
}
.ai-assistant-conv-list {
flex: 1;
overflow-y: auto;
padding: var(--az-sm) 0;
}
.ai-assistant-conv-list::-webkit-scrollbar {
width: 4px;
}
.ai-assistant-conv-list::-webkit-scrollbar-thumb {
background: var(--az-border);
border-radius: var(--az-2xs);
}
.ai-conv-empty {
padding: var(--az-xl) var(--az-lg);
text-align: center;
color: var(--az-text-muted);
font-size: var(--az-text-sm);
}
.ai-conv-group-label {
padding: var(--az-md) var(--az-lg) var(--az-xs);
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ai-conv-item {
display: flex;
align-items: flex-start;
padding: var(--az-md) var(--az-lg);
cursor: pointer;
transition: background var(--az-transition-fast);
position: relative;
border-radius: var(--az-radius-md);
margin: 1px var(--az-sm);
}
.ai-conv-item:hover {
background: var(--az-bg-elevated);
}
.ai-conv-item.active {
background: var(--az-bg-elevated);
}
.ai-conv-item.active .ai-conv-item-title {
color: var(--az-text-primary);
}
.ai-conv-item-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--az-2xs);
}
.ai-conv-item-header {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.ai-conv-item-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.ai-conv-item-time {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
flex-shrink: 0;
white-space: nowrap;
}
.ai-conv-item-preview {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
margin-top: 1px;
}
.ai-conv-item:hover .ai-conv-item-preview {
color: var(--az-text-muted);
}
.ai-conv-item-meta {
display: flex;
align-items: center;
gap: var(--az-sm);
margin-top: var(--az-2xs);
}
.ai-conv-item-count {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
background: var(--az-glass-bg);
padding: 1px var(--az-sm);
border-radius: var(--az-radius-sm);
}
.ai-conv-item-delete {
width: var(--az-xl);
height: var(--az-xl);
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--az-text-muted);
border-radius: var(--az-radius-sm);
cursor: pointer;
opacity: 0;
transition: opacity var(--az-transition-fast), color var(--az-transition-fast), background var(--az-transition-fast);
flex-shrink: 0;
padding: 0;
margin-left: var(--az-sm);
margin-top: var(--az-2xs);
}
.ai-conv-item:hover .ai-conv-item-delete {
opacity: 0.6;
}
.ai-conv-item-delete:hover {
opacity: 1;
color: var(--az-red);
background: var(--az-red-bg);
}
.ai-conv-item-delete svg {
width: 13px;
height: 13px;
stroke: currentColor;
stroke-width: 1.5;
fill: none;
}
.ai-assistant-main {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
max-width: 800px;
margin: 0 auto;
width: 100%;
}
.ai-assistant-topbar {
display: flex;
align-items: center;
justify-content: flex-end;
padding: var(--az-sm) var(--az-lg) 0;
gap: var(--az-sm);
}
.ai-cfg {
border-top: 1px solid var(--az-border);
padding-top: var(--az-xl);
margin-top: var(--az-2xs);
display: flex;
flex-direction: column;
gap: var(--az-xl);
}
.ai-cfg-section {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.ai-cfg-section-title {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ai-cfg-row {
display: flex;
align-items: center;
gap: var(--az-lg);
flex-wrap: wrap;
}
.ai-cfg-field {
display: flex;
align-items: center;
gap: var(--az-md);
}
.ai-cfg-label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
flex-shrink: 0;
}
.ai-cfg-model-tag {
font-size: var(--az-text-xs);
color: var(--az-text-muted);
background: var(--az-bg-surface);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-pill);
padding: var(--az-2xs) var(--az-sm);
white-space: nowrap;
flex-shrink: 0;
}
.ai-cfg-model-tag:empty {
display: none;
}
.ai-cfg-dropdown {
position: relative;
display: inline-block;
}
.ai-cfg-dropdown-btn {
display: flex;
align-items: center;
gap: var(--az-sm);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
padding: var(--az-sm) var(--az-md);
padding-right: var(--az-xl);
color: var(--az-text-primary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
height: var(--az-card-btn-size);
min-width: 200px;
outline: none;
cursor: pointer;
box-sizing: border-box;
line-height: 1;
transition: border-color var(--az-transition-fast);
text-align: left;
}
.ai-cfg-dropdown-btn:hover:not(:disabled) {
border-color: var(--az-border-hover);
}
.ai-cfg-dropdown-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.ai-cfg-dropdown--open .ai-cfg-dropdown-btn {
border-color: var(--az-border-focus);
box-shadow: var(--az-focus-ring);
}
.ai-cfg-dropdown-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-cfg-dropdown-chevron {
position: absolute;
right: var(--az-sm);
top: 50%;
transform: translateY(-50%);
color: var(--az-text-muted);
transition: transform var(--az-transition-fast);
pointer-events: none;
}
.ai-cfg-dropdown--open .ai-cfg-dropdown-chevron {
transform: translateY(-50%) rotate(180deg);
}
.ai-cfg-dropdown-menu {
display: none;
position: absolute;
top: calc(100% + var(--az-xs));
left: 0;
min-width: 100%;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
box-shadow: var(--az-shadow-lg);
z-index: var(--az-z-sticky);
overflow: hidden;
}
.ai-cfg-dropdown--open .ai-cfg-dropdown-menu {
display: block;
}
.ai-cfg-dropdown-item {
padding: var(--az-sm) var(--az-md);
font-size: var(--az-text-sm);
color: var(--az-text-primary);
cursor: pointer;
white-space: nowrap;
transition: background var(--az-transition-fast);
}
.ai-cfg-dropdown-item:hover {
background: var(--az-bg-hover);
}
.ai-cfg-dropdown-item--active {
color: var(--az-text-primary);
font-weight: var(--az-font-semibold);
}
.ai-cfg-select {
appearance: none;
-webkit-appearance: none;
background: var(--az-bg-input) 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='%236F6F78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
background-size: 14px 14px;
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
padding: var(--az-sm) var(--az-xl) var(--az-sm) var(--az-md);
color: var(--az-text-primary);
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
height: var(--az-card-btn-size);
min-width: 200px;
outline: none;
cursor: pointer;
box-sizing: border-box;
line-height: 1;
transition: border-color var(--az-transition-fast);
}
.ai-cfg-select:hover {
border-color: var(--az-border-hover);
}
.ai-cfg-select:focus {
border-color: var(--az-border-focus);
box-shadow: var(--az-focus-ring);
}
input.ai-cfg-select {
background-image: none;
padding-right: var(--az-md);
min-width: 220px;
cursor: text;
}
.ai-cfg-perms {
display: flex;
align-items: center;
gap: var(--az-xl);
flex-wrap: wrap;
}
.ai-cfg-toggle {
display: flex;
align-items: center;
gap: var(--az-sm);
cursor: pointer;
user-select: none;
}
.ai-cfg-toggle input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.ai-cfg-toggle-track {
position: relative;
width: var(--az-2xl);
height: var(--az-lg-plus);
border-radius: var(--az-radius-pill);
background: var(--az-glass-border-hover);
border: 1px solid var(--az-border);
transition: background var(--az-transition-fast), border-color var(--az-transition-fast);
flex-shrink: 0;
}
.ai-cfg-toggle-thumb {
position: absolute;
top: var(--az-2xs);
left: var(--az-2xs);
width: var(--az-md);
height: var(--az-md);
border-radius: var(--az-radius-pill);
background: var(--az-text-muted);
transition: transform var(--az-transition-fast), background var(--az-transition-fast);
}
.ai-cfg-toggle input:checked + .ai-cfg-toggle-track {
background: var(--az-blue-bg);
border-color: var(--az-blue-border);
}
.ai-cfg-toggle input:checked + .ai-cfg-toggle-track .ai-cfg-toggle-thumb {
transform: translateX(14px);
background: var(--az-blue);
}
.ai-cfg-toggle-text {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
transition: color var(--az-transition-fast);
}
.ai-cfg-toggle input:checked ~ .ai-cfg-toggle-text {
color: var(--az-text-primary);
}
.ai-cfg-actions {
display: flex;
align-items: center;
gap: var(--az-md);
}
.ai-cfg-btn {
display: inline-flex;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
color: var(--az-text-tertiary);
padding: var(--az-sm) var(--az-md);
border-radius: var(--az-radius-md);
border: 1px solid var(--az-border);
background: transparent;
cursor: pointer;
transition: color var(--az-transition-fast), border-color var(--az-transition-fast), background var(--az-transition-fast);
}
.ai-cfg-btn:hover {
color: var(--az-text-secondary);
border-color: var(--az-border-hover);
background: var(--az-bg-card-hover);
}
.ai-cfg-btn--danger {
color: var(--az-red);
border-color: var(--az-red-border);
}
.ai-cfg-btn--danger:hover {
color: var(--az-red-hover);
background: var(--az-red-bg);
border-color: var(--az-red-border);
}
.ai-cfg-btn svg {
flex-shrink: 0;
}
.ai-cfg-btn--primary {
color: var(--az-blue);
border-color: var(--az-blue-border);
background: var(--az-blue-bg);
}
.ai-cfg-btn--primary:hover:not(:disabled) {
background: var(--az-blue);
color: var(--az-bg-app);
border-color: var(--az-blue);
}
.ai-cfg-btn--primary:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.ai-cfg-provider-actions {
display: flex;
align-items: center;
gap: var(--az-sm);
}
@media (max-width: 480px) {
.ai-cfg-perms {
flex-direction: column;
align-items: flex-start;
gap: var(--az-md);
}
.ai-cfg-select {
min-width: 100%;
}
.ai-cfg-dropdown {
width: 100%;
}
.ai-cfg-dropdown-btn {
min-width: 100%;
}
}
.ai-admin-actions {
display: flex;
gap: var(--az-sm);
}
.ai-admin-btn-danger {
color: var(--az-red);
border-color: var(--az-red-border);
}
.ai-admin-btn-danger:hover {
background: var(--az-red-bg);
color: var(--az-red);
}
.ai-msg--error .ai-msg-bubble {
background: var(--az-red-bg);
border: 1px solid var(--az-red-border);
color: var(--az-red);
}
.ai-admin-keys-section {
display: flex;
flex-direction: column;
width: 100%;
}
.ai-admin-key-row {
display: grid;
grid-template-columns: 24px 150px 100px minmax(200px, 260px) minmax(120px, 1fr) 30px 112px;
gap: var(--az-md);
align-items: center;
padding: var(--az-sm) 0;
border-radius: var(--az-radius-sm);
transition: background 0.2s ease;
}
.ai-admin-key-row--active {
background: var(--az-blue-bg);
}
.ai-admin-key-row + .ai-admin-key-row {
border-top: 1px solid var(--az-border);
}
.ai-admin-key-radio {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.ai-admin-key-radio input[type="radio"] {
width: var(--az-lg);
height: var(--az-lg);
accent-color: var(--az-blue);
cursor: pointer;
margin: 0;
}
.ai-admin-key-radio input[type="radio"]:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.ai-admin-key-badge--active {
color: var(--az-blue);
}
.ai-admin-key-dot--connected {
width: 6px;
height: 6px;
border-radius: var(--az-radius-pill);
display: inline-block;
background: var(--az-green);
margin-right: var(--az-xs);
opacity: 0.5;
}
.ai-admin-key-label {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ai-admin-key-status {
display: flex;
align-items: center;
gap: var(--az-xs);
}
.ai-admin-key-badge {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-sm);
white-space: nowrap;
min-width: 95px;
text-align: center;
box-sizing: border-box;
}
.ai-admin-key-badge--configured {
background: var(--az-green-bg);
color: var(--az-green);
border: 1px solid var(--az-green-border);
display: inline-flex;
align-items: center;
gap: var(--az-xs);
}
.ai-admin-key-dot {
width: 6px;
height: 6px;
border-radius: var(--az-radius-pill);
flex-shrink: 0;
}
.ai-admin-key-dot--active {
background: var(--az-green);
box-shadow: 0 0 4px var(--az-green);
}
.ai-admin-key-dot--inactive {
background: var(--az-text-muted);
}
.ai-admin-key-badge--unconfigured {
background: var(--az-bg-elevated);
color: var(--az-text-muted);
border: 1px solid var(--az-border);
display: inline-flex;
align-items: center;
gap: var(--az-xs);
}
.ai-admin-key-masked {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
font-family: var(--az-font-mono);
}
.ai-admin-model-select {
appearance: none;
-webkit-appearance: none;
background: var(--az-bg-input) 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='%236F6F78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center;
background-size: 12px;
border: 1px solid var(--az-border);
border-radius: var(--az-radius-sm);
padding: var(--az-xs-plus) var(--az-icon-btn-sm) var(--az-xs-plus) var(--az-sm);
color: var(--az-text-primary);
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
height: var(--az-2xl);
width: 100%;
min-width: 0;
outline: none;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
transition: border-color var(--az-transition-fast);
}
.ai-admin-model-select:hover:not(:disabled) {
border-color: var(--az-border-hover);
}
.ai-admin-model-select:focus {
border-color: var(--az-border-focus);
}
.ai-admin-model-select:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.ai-admin-key-input {
width: 100%;
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
padding: var(--az-sm) var(--az-md);
color: var(--az-text-primary);
font-size: var(--az-text-xs);
font-family: var(--az-font-mono);
outline: none;
transition: border-color var(--az-transition-fast);
box-sizing: border-box;
}
.ai-admin-key-input:focus {
border-color: var(--az-border-hover);
}
.ai-admin-key-input::placeholder {
color: var(--az-text-muted);
}
.ai-admin-key-toggle {
width: var(--az-2xl);
height: var(--az-2xl);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--az-border);
background: var(--az-bg-elevated);
color: var(--az-text-muted);
border-radius: var(--az-radius-md);
cursor: pointer;
transition: background var(--az-transition-fast), color var(--az-transition-fast);
padding: 0;
}
.ai-admin-key-toggle:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.ai-admin-key-save {
font-size: var(--az-text-xs);
font-weight: var(--az-font-medium);
padding: var(--az-sm) var(--az-md);
border-radius: var(--az-radius-md);
border: 1px solid var(--az-border);
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
cursor: pointer;
white-space: nowrap;
min-width: 90px;
text-align: center;
transition: background var(--az-transition-fast), color var(--az-transition-fast), border-color var(--az-transition-fast);
}
.ai-admin-key-save:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
border-color: var(--az-border-hover);
}
.ai-admin-key-save:disabled {
opacity: 0.4;
cursor: not-allowed;
}
@media (max-width: 768px) {
.ai-chat-bubble {
display: none;
}
.ai-chat-panel {
width: 100%;
border-left: none;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
}
body.keyboard-open .ai-chat-panel {
bottom: 0;
height: auto;
}
.ai-chat-backdrop.active {
background: var(--az-overlay-bg);
}
.ai-assistant-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: var(--az-z-sticky);
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: var(--az-shadow-lg);
}
.ai-assistant-sidebar.open {
transform: translateX(0);
}
.ai-assistant-main {
max-width: 100%;
}
#assistant.page.active {
height: calc(100dvh - var(--az-2xl) - var(--az-bottom-nav-h) - env(safe-area-inset-bottom, 0px));
margin: calc(-1 * var(--az-page-pad, 16px));
margin-bottom: 0;
overflow: hidden;
}
#assistant.page.active .ai-chat-input-area {
padding-bottom: calc(var(--az-lg) + env(safe-area-inset-bottom, 0px));
}
.ai-admin-keys-section {
gap: 0;
}
.ai-admin-key-row {
grid-template-columns: 24px 1fr auto;
grid-template-rows: auto auto auto auto;
gap: var(--az-sm) var(--az-sm);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
background: transparent;
border: none;
border-bottom: 1px solid var(--az-border);
border-left: none;
border-radius: 0;
padding: var(--az-md) 0;
margin-bottom: 0;
min-width: 0;
max-width: 100%;
}
.ai-admin-key-row + .ai-admin-key-row {
border-top: none;
}
.ai-admin-key-row--active {
background: transparent;
border-color: var(--az-border);
border-left: none;
}
.ai-admin-key-row--configured:not(.ai-admin-key-row--active) {
border-left: none;
}
.ai-admin-key-row:not(.ai-admin-key-row--configured) {
background: transparent;
}
.ai-admin-key-row:not(.ai-admin-key-row--configured) .ai-admin-key-radio {
visibility: hidden;
width: 0;
padding: 0;
margin: 0;
}
.ai-admin-key-row:not(.ai-admin-key-row--configured) .ai-admin-model-select {
display: none;
}
.ai-admin-key-row > :nth-child(1) { grid-column: 1; grid-row: 1; }
.ai-admin-key-row > :nth-child(2) { grid-column: 2; grid-row: 1; }
.ai-admin-key-row > :nth-child(3) { grid-column: 3; grid-row: 1; justify-self: end; }
.ai-admin-key-row > :nth-child(4) {
grid-column: 1 / -1;
grid-row: 2;
height: 38px;
font-size: var(--az-text-sm);
text-align: left;
}
.ai-admin-key-row > :nth-child(5) {
grid-column: 1 / -1;
grid-row: 3;
font-size: var(--az-text-lg-plus);
height: 38px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.ai-admin-key-row > :nth-child(7),
.ai-admin-key-row > .ai-admin-key-save {
grid-column: 1 / 3;
grid-row: 4;
width: 100%;
height: auto;
overflow: visible;
padding: var(--az-sm) 0;
margin: 0;
text-align: left;
}
.ai-admin-key-row > :nth-child(6) {
grid-column: 3;
grid-row: 4;
justify-self: end;
align-self: center;
display: flex;
align-items: center;
justify-content: center;
min-width: var(--az-touch-min);
min-height: var(--az-touch-min);
}
.ai-admin-key-toggle {
width: var(--az-touch-min);
height: var(--az-touch-min);
border: none;
background: transparent;
color: var(--az-text-secondary);
}
.ai-admin-key-row .ai-admin-model-select {
background: transparent 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='%236F6F78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right var(--az-sm) center;
background-size: var(--az-md);
border: none;
border-bottom: 1px solid var(--az-border);
border-radius: 0;
padding-left: 0;
}
.ai-admin-key-row .ai-admin-key-input {
background: transparent;
border: none;
border-bottom: 1px solid var(--az-border);
border-radius: 0;
padding-left: 0;
}
.ai-admin-key-row .ai-admin-key-input:focus {
border-bottom-color: var(--az-text-tertiary);
}
.ai-admin-key-row .ai-admin-key-save {
background: transparent;
border: none;
border-radius: 0;
color: var(--az-text-muted);
font-size: var(--az-text-xs);
}
.ai-admin-key-row > .ai-admin-key-save[style*="visibility: hidden"],
.ai-admin-key-row > .ai-admin-key-save[style*="visibility:hidden"] {
padding: 0;
height: 0;
border: none;
overflow: hidden;
}
.ai-admin-key-status::after {
content: '';
display: inline-block;
width: var(--az-lg);
height: var(--az-lg);
flex-shrink: 0;
background: 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='%236F6F78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center;
background-size: var(--az-md);
transition: transform 0.2s ease;
}
.ai-admin-key-row--collapsed .ai-admin-key-status::after {
transform: rotate(-90deg);
}
.ai-admin-key-row--collapsed > :nth-child(n+4) {
display: none;
}
.ai-admin-key-row--collapsed {
grid-template-rows: auto;
padding-bottom: var(--az-sm);
}
.ai-admin-key-row:not(.ai-admin-key-row--configured) .ai-admin-key-label {
opacity: 0.5;
}
.ai-admin-key-row:not(.ai-admin-key-row--configured) .ai-admin-key-badge {
opacity: 0.7;
}
.ai-admin-usage {
overflow-x: hidden;
max-width: 100%;
margin-top: var(--az-md);
padding-top: var(--az-md);
}
.ai-tbl-header {
flex-direction: column;
align-items: center;
gap: var(--az-xs);
text-align: center;
}
.ai-tbl-header .ai-tbl-title {
font-size: var(--az-text-sm);
}
.ai-tbl-header .ai-tbl-subtitle {
flex: unset;
font-size: var(--az-text-2xs);
}
.ai-tbl-reset-btn {
align-self: center;
}
.ai-tbl-summary {
flex-direction: column;
align-items: center;
gap: var(--az-xs);
margin: var(--az-sm) 0 var(--az-md);
}
.ai-tbl-summary-sep {
display: none;
}
.ai-tbl:not(.ai-tbl--fiscal) {
display: block;
width: 100%;
overflow: hidden;
border: none;
border-radius: 0;
}
.ai-tbl:not(.ai-tbl--fiscal) thead {
display: none;
}
.ai-tbl:not(.ai-tbl--fiscal) tbody {
display: block;
width: 100%;
}
.ai-tbl:not(.ai-tbl--fiscal) .ai-tbl-row {
display: grid;
grid-template-columns: 1fr;
gap: var(--az-xs);
padding: var(--az-md) 0;
border-bottom: 1px solid var(--az-border);
}
.ai-tbl:not(.ai-tbl--fiscal) .ai-tbl-row:last-child {
border-bottom: none;
}
.ai-tbl:not(.ai-tbl--fiscal) .ai-tbl-cell-model {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
min-width: 0;
overflow: hidden;
white-space: normal;
word-break: break-word;
padding: 0;
}
.ai-tbl:not(.ai-tbl--fiscal) .ai-tbl-cell-cat {
display: none;
}
.ai-tbl:not(.ai-tbl--fiscal) .ai-tbl-cell-metric {
padding: 0;
text-align: left;
display: flex;
align-items: center;
gap: var(--az-sm);
}
.ai-tbl:not(.ai-tbl--fiscal) .ai-tbl-row > :nth-child(3)::before {
content: "Input";
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
min-width: var(--az-3xl);
}
.ai-tbl:not(.ai-tbl--fiscal) .ai-tbl-row > :nth-child(4)::before {
content: "Output";
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
min-width: var(--az-3xl);
}
.ai-tbl:not(.ai-tbl--fiscal) .ai-tbl-row > :nth-child(5)::before {
content: "Coût";
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
min-width: var(--az-3xl);
}
.ai-tbl:not(.ai-tbl--fiscal) .ai-tbl-metric-bar {
display: none;
}
.ai-tbl:not(.ai-tbl--fiscal) .ai-tbl-metric {
gap: var(--az-xs);
justify-content: flex-start;
}
.ai-tbl:not(.ai-tbl--fiscal) .ai-tbl-metric-text {
font-size: var(--az-text-xs);
white-space: nowrap;
}
}
.ai-voice-overlay {
position: fixed;
inset: 0;
z-index: var(--az-z-loader);
background: var(--az-bg-app);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--az-xl);
animation: ai-voice-fade-in 0.3s ease-out;
}
@keyframes ai-voice-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.ai-voice-close {
position: absolute;
top: var(--az-lg);
right: var(--az-lg);
width: var(--az-touch-min);
height: var(--az-touch-min);
min-width: var(--az-touch-min);
min-height: var(--az-touch-min);
display: flex;
align-items: center;
justify-content: center;
border: none;
background: var(--az-bg-elevated);
color: var(--az-text-secondary);
border-radius: var(--az-radius-pill);
cursor: pointer;
transition: background var(--az-transition-fast), color var(--az-transition-fast);
padding: 0;
z-index: 2;
}
.ai-voice-close:hover {
background: var(--az-bg-hover);
color: var(--az-text-primary);
}
.ai-voice-close svg {
width: var(--az-lg-plus);
height: var(--az-lg-plus);
stroke: currentColor;
stroke-width: 1.5;
fill: none;
}
.ai-voice-orb {
position: relative;
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
.ai-voice-ring {
position: absolute;
inset: 0;
border-radius: var(--az-radius-pill);
border: 1px solid var(--az-blue-border);
opacity: 0;
transition: opacity 0.3s ease;
}
.ai-voice-overlay[data-state="listening"] .ai-voice-ring,
.ai-voice-overlay[data-state="speaking"] .ai-voice-ring {
opacity: 1;
animation: ai-voice-ring-pulse 2s ease-out infinite;
}
.ai-voice-overlay[data-state="listening"] .ai-voice-ring {
border-color: var(--az-green);
}
.ai-voice-ring:nth-child(2) {
animation-delay: 0.4s;
}
.ai-voice-ring:nth-child(3) {
animation-delay: 0.8s;
}
@keyframes ai-voice-ring-pulse {
0% {
transform: scale(1);
opacity: 0.5;
}
100% {
transform: scale(1.8);
opacity: 0;
}
}
.ai-voice-overlay[data-state="speaking"] .ai-voice-ring {
border-color: var(--az-blue);
animation-duration: 1.5s;
}
.ai-voice-mic-circle {
width: 80px;
height: 80px;
min-width: 80px;
min-height: 80px;
border-radius: var(--az-radius-pill);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
z-index: 1;
transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
border: none;
padding: 0;
}
.ai-voice-mic-circle:active {
filter: brightness(0.92);
}
.ai-voice-mic-circle svg {
width: var(--az-2xl);
height: var(--az-2xl);
stroke: currentColor;
stroke-width: 2;
fill: none;
}
.ai-voice-overlay[data-state="idle"] .ai-voice-mic-circle {
background: var(--az-bg-elevated);
color: var(--az-blue);
box-shadow: 0 0 0 0 transparent;
animation: ai-voice-breathe 3s ease-in-out infinite;
}
@keyframes ai-voice-breathe {
0%, 100% {
box-shadow: 0 0 var(--az-lg) color-mix(in srgb, var(--az-indigo) 10%, transparent);
}
50% {
box-shadow: 0 0 var(--az-xl) color-mix(in srgb, var(--az-indigo) 25%, transparent);
}
}
.ai-voice-overlay[data-state="listening"] .ai-voice-mic-circle {
background: var(--az-green);
color: var(--az-text-on-accent);
animation: ai-voice-listening-pulse 1.5s ease-in-out infinite;
}
@keyframes ai-voice-listening-pulse {
0%, 100% {
box-shadow: 0 0 0 0 color-mix(in srgb, var(--az-green) 30%, transparent);
}
50% {
box-shadow: 0 0 0 var(--az-md) color-mix(in srgb, var(--az-green) 0%, transparent);
}
}
.ai-voice-overlay[data-state="processing"] .ai-voice-mic-circle {
background: var(--az-bg-elevated);
color: var(--az-text-muted);
cursor: default;
}
.ai-voice-processing-dots {
display: none;
align-items: center;
gap: var(--az-xs);
}
.ai-voice-overlay[data-state="processing"] .ai-voice-processing-dots {
display: flex;
}
.ai-voice-overlay[data-state="processing"] .ai-voice-mic-circle svg {
display: none;
}
.ai-voice-processing-dots span {
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
background: var(--az-text-muted);
animation: ai-dots-bounce 1.4s ease-in-out infinite;
}
.ai-voice-processing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-voice-processing-dots span:nth-child(3) { animation-delay: 0.4s; }
.ai-voice-overlay[data-state="speaking"] .ai-voice-mic-circle {
background: var(--az-blue);
color: var(--az-text-on-accent);
animation: ai-voice-speaking-pulse 1.2s ease-in-out infinite;
}
@keyframes ai-voice-speaking-pulse {
0%, 100% {
box-shadow: 0 0 0 0 color-mix(in srgb, var(--az-indigo) 30%, transparent);
}
50% {
box-shadow: 0 0 0 var(--az-md) color-mix(in srgb, var(--az-indigo) 0%, transparent);
}
}
.ai-voice-status {
font-size: var(--az-text-md);
font-weight: var(--az-font-medium);
color: var(--az-text-secondary);
text-align: center;
min-height: var(--az-xl);
}
.ai-voice-transcript {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
text-align: center;
max-width: 400px;
min-height: var(--az-xl);
line-height: 1.5;
padding: 0 var(--az-lg);
word-break: break-word;
}
.ai-voice-transcript:empty {
display: none;
}
.ai-voice-response {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
text-align: center;
max-width: 500px;
max-height: 200px;
overflow-y: auto;
line-height: 1.6;
padding: 0 var(--az-lg);
word-break: break-word;
}
.ai-voice-response:empty {
display: none;
}
.ai-voice-response::-webkit-scrollbar {
width: var(--az-xs);
}
.ai-voice-response::-webkit-scrollbar-thumb {
background: var(--az-border);
border-radius: var(--az-radius-xs);
}
.ai-chat-voice-mode-btn {
width: var(--az-2xl);
height: var(--az-2xl);
min-width: var(--az-touch-min);
min-height: var(--az-touch-min);
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--az-text-muted);
border-radius: var(--az-radius-lg);
cursor: pointer;
transition: color var(--az-transition-fast), background var(--az-transition-fast);
flex-shrink: 0;
padding: 0;
}
.ai-chat-voice-mode-btn:hover {
color: var(--az-text-primary);
background: var(--az-bg-elevated);
}
.ai-chat-voice-mode-btn svg {
width: var(--az-lg);
height: var(--az-lg);
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
@supports (padding-top: env(safe-area-inset-top)) {
.ai-voice-close {
top: calc(var(--az-lg) + env(safe-area-inset-top, 0px));
right: calc(var(--az-lg) + env(safe-area-inset-right, 0px));
}
}
.ai-chat-history-drawer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 5;
background: var(--az-bg-app);
display: none;
flex-direction: column;
border-radius: inherit;
overflow: hidden;
}
.ai-chat-history-drawer.open {
display: flex;
}
.ai-chat-history-header {
display: flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-md) var(--az-lg);
border-bottom: 1px solid var(--az-border);
flex-shrink: 0;
}
.ai-chat-history-back {
width: var(--az-2xl);
height: var(--az-2xl);
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--az-text-secondary);
border-radius: var(--az-radius-md);
cursor: pointer;
transition: color var(--az-transition-fast), background var(--az-transition-fast);
padding: 0;
flex-shrink: 0;
}
.ai-chat-history-back:hover {
color: var(--az-text-primary);
background: var(--az-bg-elevated);
}
.ai-chat-history-title {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
}
.ai-chat-history-list {
flex: 1;
overflow-y: auto;
padding: var(--az-sm) 0;
}
.ai-chat-history-list::-webkit-scrollbar {
width: 4px;
}
.ai-chat-history-list::-webkit-scrollbar-thumb {
background: var(--az-border);
border-radius: var(--az-2xs);
}
.ai-chat-history-loading {
display: flex;
align-items: center;
justify-content: center;
padding: var(--az-3xl) 0;
}
.ai-chat-history-spinner {
width: var(--az-xl);
height: var(--az-xl);
border: 2px solid var(--az-border);
border-top-color: var(--az-blue);
border-radius: var(--az-radius-pill);
animation: ai-history-spin 0.6s linear infinite;
}
@keyframes ai-history-spin {
to { transform: rotate(360deg); }
}
.ai-chat-history-list .ai-conv-item {
margin: 1px var(--az-sm);
}
.ai-chat-history-list .ai-conv-item-title {
font-size: var(--az-text-sm);
}
.ai-chat-history-list .ai-conv-item-preview {
font-size: var(--az-text-xs);
}
#ai-chat-history-btn.active {
color: var(--az-text-primary);
}
.monitoring-layout {
display: grid;
grid-template-columns: 210px 1fr;
gap: 0;
min-height: 520px;
}
.monitoring-sidebar {
border-right: 1px solid var(--az-border);
padding: var(--az-xl) 0;
}
.monitoring-nav-item {
display: flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-sm) var(--az-lg);
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
cursor: pointer;
transition: color var(--az-transition-fast), background var(--az-transition-fast);
border: none;
background: none;
width: 100%;
text-align: left;
white-space: nowrap;
border-radius: 0;
position: relative;
}
.monitoring-nav-item::before {
content: '';
position: absolute;
left: 0;
top: var(--az-xs);
bottom: var(--az-xs);
width: 2px;
border-radius: var(--az-radius-pill);
background: transparent;
transition: background var(--az-transition-fast);
}
.monitoring-nav-item:hover {
color: var(--az-text-primary);
background: var(--az-bg-card-hover);
}
.monitoring-nav-item.active {
color: var(--az-text-primary);
background: var(--az-bg-card-hover);
}
.monitoring-nav-item.active::before {
background: var(--az-blue);
}
.monitoring-nav-item i {
font-size: var(--az-text-md);
width: var(--az-lg);
text-align: center;
flex-shrink: 0;
opacity: 0.6;
}
.monitoring-nav-item.active i {
opacity: 1;
}
.monitoring-content {
padding: var(--az-xl);
overflow-y: auto;
max-height: 75vh;
}
.monitoring-panel {
display: none;
}
.monitoring-panel.active {
display: block;
animation: mon-fadeIn 0.2s ease;
}
.monitoring-panel > div:last-child > *:last-child {
margin-bottom: 0;
}
@keyframes mon-fadeIn {
from { opacity: 0; transform: translateY(var(--az-xs)); }
to { opacity: 1; transform: translateY(0); }
}
.mon-dot {
display: inline-block;
width: var(--az-sm);
height: var(--az-sm);
border-radius: var(--az-radius-pill);
margin-right: var(--az-xs);
flex-shrink: 0;
}
.mon-dot--green {
background: var(--az-green);
box-shadow: 0 0 var(--az-sm) var(--az-glow-green);
}
.mon-dot--amber {
background: var(--az-amber);
}
.mon-dot--red {
background: var(--az-red);
box-shadow: 0 0 var(--az-sm) var(--az-glow-red);
}
.mon-dot--muted {
background: var(--az-text-muted);
}
.mon-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: var(--az-md);
margin-bottom: var(--az-xl);
}
.mon-card {
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-lg);
backdrop-filter: blur(var(--az-glass-blur));
-webkit-backdrop-filter: blur(var(--az-glass-blur));
transition: border-color var(--az-transition-fast), box-shadow var(--az-transition-fast);
}
.mon-card:hover {
border-color: var(--az-glass-border-hover);
box-shadow: var(--az-glass-shadow);
}
.mon-card[data-accent="green"] .mon-card-value { color: var(--az-green); }
.mon-card[data-accent="red"] .mon-card-value { color: var(--az-red); }
.mon-card[data-accent="amber"] .mon-card-value { color: var(--az-amber); }
.mon-card-label {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
margin-bottom: var(--az-sm);
font-weight: var(--az-font-medium);
letter-spacing: 0.03em;
}
.mon-card-value {
font-size: var(--az-kpi-value);
font-weight: var(--az-font-normal);
color: var(--az-text-primary);
letter-spacing: var(--az-tracking-tight);
line-height: var(--az-kpi-value-lh);
font-variant-numeric: tabular-nums;
}
.mon-card-sub {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
margin-top: var(--az-xs);
}
.mon-metric-list {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: var(--az-xl);
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
overflow: hidden;
}
.mon-metric-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--az-sm) var(--az-lg);
font-size: var(--az-text-sm);
border-bottom: 1px solid var(--az-border);
transition: background var(--az-transition-fast);
}
.mon-metric-row:last-child {
border-bottom: none;
}
.mon-metric-row:hover {
background: var(--az-bg-card-hover);
}
.mon-metric-key {
color: var(--az-text-secondary);
display: flex;
align-items: center;
gap: var(--az-sm);
}
.mon-metric-val {
color: var(--az-text-primary);
font-weight: var(--az-font-semibold);
font-variant-numeric: tabular-nums;
}
.mon-section-title {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
margin-bottom: var(--az-sm);
margin-top: 0;
letter-spacing: var(--az-tracking-tight);
}
.mon-sparkline-container {
margin-bottom: var(--az-xl);
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
padding: var(--az-md) var(--az-lg);
transition: border-color var(--az-transition-fast);
}
.mon-sparkline-container:hover {
border-color: var(--az-glass-border-hover);
}
.mon-sparkline-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: var(--az-sm);
}
.mon-sparkline-label {
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
font-weight: var(--az-font-medium);
letter-spacing: 0.03em;
}
.mon-sparkline-live {
font-size: var(--az-text-sm);
font-weight: var(--az-font-bold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
}
.mon-sparkline {
width: 100%;
height: var(--az-4xl);
display: block;
}
.mon-bar-chart {
display: flex;
flex-direction: column;
gap: var(--az-sm);
margin-bottom: var(--az-xl);
}
.mon-bar-row {
display: grid;
grid-template-columns: 100px 1fr 50px;
align-items: center;
gap: var(--az-sm);
font-size: var(--az-text-sm);
}
.mon-bar-label {
color: var(--az-text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--az-text-xs);
}
.mon-bar-track {
height: var(--az-xs);
background: var(--az-bg-elevated);
border-radius: var(--az-radius-pill);
overflow: hidden;
}
.mon-bar-fill {
height: 100%;
border-radius: var(--az-radius-pill);
background: var(--az-blue);
width: var(--bar-pct, 0%);
transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.mon-bar-fill--green { background: var(--az-green); }
.mon-bar-fill--amber { background: var(--az-amber); }
.mon-bar-fill--red { background: var(--az-red); }
.mon-bar-value {
text-align: right;
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
font-weight: var(--az-font-semibold);
font-size: var(--az-text-xs);
}
.mon-table {
width: 100%;
border-collapse: collapse;
margin-bottom: var(--az-xl);
font-size: var(--az-text-sm);
background: var(--az-glass-bg);
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
overflow: hidden;
}
.mon-table th {
text-align: left;
padding: var(--az-sm) var(--az-lg);
font-weight: var(--az-font-medium);
font-size: var(--az-text-xs);
line-height: 1.4;
color: var(--az-text-muted);
letter-spacing: 0.01em;
border-bottom: 1px solid var(--az-border);
}
.mon-table td {
padding: var(--az-sm) var(--az-lg);
font-size: var(--az-text-sm);
line-height: 1.4;
color: var(--az-text-primary);
border-bottom: 1px solid var(--az-border);
vertical-align: middle;
}
.mon-table tr:last-child td {
border-bottom: none;
}
.mon-table tr:hover td {
background: var(--az-bg-card-hover);
}
.mon-log-toolbar {
display: flex;
gap: var(--az-sm);
align-items: center;
margin-bottom: var(--az-md);
flex-wrap: wrap;
}
.mon-log-filter,
.mon-log-search {
padding: var(--az-xs) var(--az-md);
font-size: var(--az-text-sm);
color: var(--az-text-primary);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
font-family: inherit;
transition: border-color var(--az-transition-fast);
}
.mon-log-filter:focus,
.mon-log-search:focus {
border-color: var(--az-border-focus);
outline: none;
}
.mon-log-search {
flex: 1;
min-width: 150px;
}
.mon-log-toggle {
display: flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
cursor: pointer;
padding: var(--az-xs) var(--az-md);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
background: none;
transition: color, background-color, border-color, opacity var(--az-transition-fast);
}
.mon-log-toggle.active {
color: var(--az-green);
border-color: var(--az-green-border);
background: var(--az-green-bg);
}
.mon-log-container {
max-height: 500px;
overflow-y: auto;
border: 1px solid var(--az-glass-border);
border-radius: var(--az-radius-xl);
background: var(--az-bg-card);
}
.mon-log-entry {
font-size: var(--az-text-sm);
padding: var(--az-xs) var(--az-lg);
border-bottom: 1px solid var(--az-border);
display: grid;
grid-template-columns: 70px 72px 56px 1fr;
gap: var(--az-sm);
align-items: baseline;
cursor: pointer;
transition: background var(--az-transition-fast);
}
.mon-log-entry:hover {
background: var(--az-bg-card-hover);
}
.mon-log-time {
color: var(--az-text-muted);
font-family: var(--az-font-mono);
font-size: var(--az-text-2xs);
}
.mon-log-source {
color: var(--az-text-tertiary);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-medium);
}
.mon-log-severity {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
padding: var(--az-2xs) var(--az-xs);
border-radius: var(--az-radius-xs);
}
.mon-log-severity--info {
color: var(--az-blue);
background: var(--az-blue-bg);
}
.mon-log-severity--warn {
color: var(--az-amber);
background: var(--az-amber-bg);
}
.mon-log-severity--error {
color: var(--az-red);
background: var(--az-red-bg);
}
.mon-log-severity--debug {
color: var(--az-text-muted);
background: var(--az-bg-elevated);
}
.mon-log-msg {
color: var(--az-text-secondary);
word-break: break-word;
font-size: var(--az-text-xs);
}
.mon-log-detail {
display: none;
grid-column: 1 / -1;
padding: var(--az-sm) var(--az-md);
margin-top: var(--az-xs);
background: var(--az-bg-elevated);
border-radius: var(--az-radius-sm);
font-family: var(--az-font-mono);
font-size: var(--az-text-2xs);
color: var(--az-text-secondary);
white-space: pre-wrap;
}
.mon-log-entry.expanded .mon-log-detail {
display: block;
}
.mon-log-pagination {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--az-sm) 0;
font-size: var(--az-text-xs);
color: var(--az-text-muted);
}
.mon-log-pagination button {
padding: var(--az-xs) var(--az-md);
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
background: none;
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
cursor: pointer;
transition: color, background-color, border-color, opacity var(--az-transition-fast);
}
.mon-log-pagination button:hover:not(:disabled) {
color: var(--az-text-primary);
border-color: var(--az-border-hover);
}
.mon-log-pagination button:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.mon-refresh-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--az-lg);
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
}
.mon-refresh-btn {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs) var(--az-sm);
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
background: none;
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
cursor: pointer;
transition: color, background-color, border-color, opacity var(--az-transition-fast);
}
.mon-refresh-btn:hover {
color: var(--az-text-primary);
border-color: var(--az-border-hover);
}
.mon-empty {
padding: var(--az-3xl) var(--az-xl);
text-align: center;
color: var(--az-text-muted);
font-size: var(--az-text-sm);
}
.mon-range-selector {
display: inline-flex;
gap: 1px;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-2xs);
margin-bottom: var(--az-lg);
}
.mon-range-btn {
padding: var(--az-xs) var(--az-md);
font-size: var(--az-text-2xs);
color: var(--az-text-muted);
background: none;
border: none;
border-radius: var(--az-radius-md);
cursor: pointer;
font-weight: var(--az-font-medium);
transition: color, background-color, border-color, opacity var(--az-transition-fast);
}
.mon-range-btn:hover {
color: var(--az-text-primary);
}
.mon-range-btn.active {
background: var(--az-bg-card);
color: var(--az-text-primary);
box-shadow: var(--az-shadow-sm);
}
.mon-skeleton {
background: linear-gradient(90deg, var(--az-bg-elevated) 25%, var(--az-bg-card-hover) 50%, var(--az-bg-elevated) 75%);
background-size: 200% 100%;
animation: mon-shimmer 1.5s ease-in-out infinite;
border-radius: var(--az-radius-sm);
}
@keyframes mon-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.mon-cron-status {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
}
.mon-cron-status--ok {
color: var(--az-green);
background: var(--az-green-bg);
}
.mon-cron-status--error {
color: var(--az-red);
background: var(--az-red-bg);
}
.mon-cron-status--pending {
color: var(--az-text-muted);
background: var(--az-bg-elevated);
}
@media (max-width: 768px) {
.monitoring-layout {
grid-template-columns: 1fr;
}
.monitoring-sidebar {
border-right: none;
border-bottom: 1px solid var(--az-border);
display: flex;
overflow-x: auto;
padding: var(--az-xs) var(--az-sm);
gap: var(--az-2xs);
}
.monitoring-nav-item {
padding: var(--az-xs) var(--az-md);
white-space: nowrap;
font-size: var(--az-text-xs);
}
.monitoring-nav-item::before {
display: none;
}
.monitoring-content {
padding: var(--az-md);
max-height: none;
}
.mon-cards {
grid-template-columns: 1fr 1fr;
}
.mon-log-entry {
grid-template-columns: 1fr;
gap: var(--az-2xs);
}
.mon-bar-row {
grid-template-columns: 80px 1fr 40px;
}
.monitoring-sidebar {
padding: var(--az-sm) var(--az-md);
gap: var(--az-xs);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.monitoring-sidebar::-webkit-scrollbar { display: none; }
.monitoring-nav-item {
min-height: var(--az-touch-min);
border-radius: var(--az-radius-sm);
}
.mon-metric-row {
flex-direction: column;
align-items: flex-start;
gap: var(--az-xs);
padding: var(--az-md);
}
.mon-metric-val {
align-self: flex-end;
}
.mon-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.mon-table {
font-size: var(--az-text-xs);
}
.mon-table th,
.mon-table td {
padding: var(--az-xs) var(--az-sm);
white-space: normal;
word-break: break-word;
}
.mon-log-container {
max-height: 300px;
}
.admin-diag-terminal {
overflow-x: auto;
max-height: 300px;
font-size: var(--az-text-xs);
}
}
@media (max-width: 480px) {
.mon-cards {
grid-template-columns: 1fr;
}
}
.mon-icon-sm {
font-size: var(--az-text-2xs);
}
.mon-error-count {
color: var(--az-red);
font-weight: var(--az-font-semibold);
}
.catalog-card { position: relative; }
.catalog-card-margin-chip {
position: absolute;
top: var(--az-sm);
right: var(--az-sm);
display: inline-flex;
align-items: center;
gap: var(--az-2xs);
padding: var(--az-2xs) var(--az-xs-plus);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold, 600);
letter-spacing: 0.02em;
line-height: 1;
z-index: 4;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid transparent;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.catalog-card-margin-chip i { font-size: var(--az-text-xs); }
.catalog-card-margin-chip.is-good {
background: var(--az-green-bg);
color: var(--az-green);
border-color: var(--az-green-border);
}
.catalog-card-margin-chip.is-mid {
background: var(--az-amber-bg);
color: var(--az-amber);
border-color: var(--az-amber-border);
}
.catalog-card-margin-chip.is-low {
background: var(--az-red-bg);
color: var(--az-red);
border-color: var(--az-red-border);
}
.catalog-card-price-main {
cursor: text;
border-radius: var(--az-radius-sm);
padding: 0 var(--az-2xs);
margin-left: calc(-1 * var(--az-2xs));
transition: background var(--az-transition-fast);
}
.catalog-card-price-main:hover {
background: var(--az-bg-input);
}
.catalog-card-price-edit {
width: 100px;
padding: var(--az-2xs) var(--az-xs);
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold, 600);
background: var(--az-bg-input-focus);
border: 1px solid var(--az-border-focus);
border-radius: var(--az-radius-sm);
color: var(--az-text-primary);
font-family: inherit;
outline: none;
}
.catalog-card-select {
position: absolute;
top: 38px; 
left: var(--az-sm);
width: 22px;
height: 22px;
border-radius: var(--az-radius-sm);
background: var(--az-bg-overlay);
border: 1.5px solid var(--az-border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 5;
opacity: 0;
transition: opacity var(--az-transition-fast), background var(--az-transition-fast), border-color var(--az-transition-fast);
}
.catalog-card:hover .catalog-card-select,
.catalog-card.is-selected .catalog-card-select,
.catalog-bulk-mode .catalog-card-select {
opacity: 1;
}
.catalog-card-select i {
font-size: var(--az-text-md);
color: transparent;
transition: color var(--az-transition-fast);
}
.catalog-card.is-selected .catalog-card-select {
background: var(--az-blue);
border-color: var(--az-blue);
}
.catalog-card.is-selected .catalog-card-select i { color: var(--az-text-on-accent); }
.catalog-card.is-selected {
outline: 2px solid var(--az-blue);
outline-offset: -2px;
}
.catalog-bulk-bar {
position: sticky;
bottom: var(--az-lg);
z-index: var(--az-z-sticky);
margin: var(--az-lg) auto 0;
max-width: 720px;
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-2xl);
padding: var(--az-sm) var(--az-md);
display: flex;
align-items: center;
gap: var(--az-md);
box-shadow: var(--az-shadow-modal);
animation: catalogBulkSlide 0.18s ease-out;
}
@keyframes catalogBulkSlide {
from { transform: translateY(8px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.catalog-bulk-count {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold, 600);
color: var(--az-text-primary);
white-space: nowrap;
}
.catalog-bulk-actions {
display: flex;
gap: var(--az-xs);
margin-left: auto;
flex-wrap: wrap;
}
.catalog-bulk-actions .btn {
min-height: 32px;
font-size: var(--az-text-sm);
}
.catalog-advanced-filters {
display: flex;
flex-wrap: wrap;
gap: var(--az-sm);
align-items: center;
margin: var(--az-sm) 0;
padding: var(--az-sm) var(--az-md);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
}
.catalog-advanced-filter {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.catalog-advanced-filter label {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
font-weight: var(--az-font-medium, 500);
}
.catalog-advanced-filter input,
.catalog-advanced-filter select {
padding: var(--az-xs) var(--az-sm);
font-size: var(--az-text-sm);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-sm);
color: var(--az-text-primary);
font-family: inherit;
min-height: 30px;
}
.catalog-advanced-filter input:focus,
.catalog-advanced-filter select:focus {
outline: none;
border-color: var(--az-border-focus);
background: var(--az-bg-input-focus);
}
.catalog-advanced-filter input[type="number"] { width: 90px; }
.catalog-advanced-toggle {
display: inline-flex;
align-items: center;
gap: var(--az-2xs);
padding: var(--az-xs) var(--az-sm);
background: transparent;
border: 1px solid var(--az-border);
border-radius: var(--az-radius-pill);
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
cursor: pointer;
transition: var(--az-transition-fast);
}
.catalog-advanced-toggle:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
border-color: var(--az-border-hover);
}
.catalog-advanced-toggle.is-active {
background: var(--az-blue-bg);
color: var(--az-blue);
border-color: var(--az-blue-border);
}
.catalog-advanced-clear {
margin-left: auto;
background: transparent;
border: none;
color: var(--az-text-tertiary);
font-size: var(--az-text-xs);
cursor: pointer;
padding: var(--az-xs);
}
.catalog-advanced-clear:hover { color: var(--az-text-primary); }
.catalog-bulk-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: var(--az-z-modal-backdrop);
display: flex;
align-items: center;
justify-content: center;
padding: var(--az-lg);
}
.catalog-bulk-modal {
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-2xl);
padding: var(--az-xl);
max-width: 420px;
width: 100%;
box-shadow: var(--az-shadow-modal);
}
.catalog-bulk-modal h3 {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold, 600);
margin: 0 0 var(--az-sm);
color: var(--az-text-primary);
}
.catalog-bulk-modal p {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
margin: 0 0 var(--az-md);
}
.catalog-bulk-modal-input {
display: flex;
align-items: center;
gap: var(--az-sm);
margin-bottom: var(--az-lg);
}
.catalog-bulk-modal-input input {
flex: 1;
padding: var(--az-sm) var(--az-md);
font-size: var(--az-text-md);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
color: var(--az-text-primary);
}
.catalog-bulk-modal-input input:focus {
outline: none;
border-color: var(--az-border-focus);
background: var(--az-bg-input-focus);
}
.catalog-bulk-modal-actions {
display: flex;
justify-content: flex-end;
gap: var(--az-sm);
}
.sim-charges-section .sim-charges-list {
display: flex;
flex-direction: column;
gap: var(--az-xs);
margin-top: var(--az-sm);
}
.sim-charge-row {
display: grid;
grid-template-columns: 1fr 120px 110px auto;
gap: var(--az-sm);
align-items: center;
padding: var(--az-xs) var(--az-sm);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
}
.sim-charge-row input,
.sim-charge-row select {
padding: var(--az-xs) var(--az-sm);
font-size: var(--az-text-sm);
background: var(--az-bg-input);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-sm);
color: var(--az-text-primary);
font-family: inherit;
min-height: 30px;
}
.sim-charge-row input:focus,
.sim-charge-row select:focus {
outline: none;
border-color: var(--az-border-focus);
background: var(--az-bg-input-focus);
}
.sim-charge-row .sim-charge-delete {
background: transparent;
border: none;
color: var(--az-text-tertiary);
cursor: pointer;
width: 32px;
height: 32px;
border-radius: var(--az-radius-sm);
display: flex;
align-items: center;
justify-content: center;
transition: var(--az-transition-fast);
}
.sim-charge-row .sim-charge-delete:hover {
color: var(--az-red);
background: var(--az-red-bg);
}
.sim-charges-summary {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--az-md);
padding: var(--az-sm) var(--az-md);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
}
.sim-charges-summary-label {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.sim-charges-summary-value {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold, 600);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
}
.sim-charges-summary-value.is-net {
color: var(--az-text-primary);
}
.sim-charges-summary-value.is-net.is-negative {
color: var(--az-red);
}
.sim-charges-add {
margin-top: var(--az-sm);
}
.sim-kpi-charges-fixes .sim-kpi-value { color: var(--az-text-primary); }
.sim-plafond-section .sim-plafond-bars {
display: flex;
flex-direction: column;
gap: var(--az-md);
margin-top: var(--az-sm);
}
.sim-plafond-bar {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.sim-plafond-bar-head {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: var(--az-text-sm);
}
.sim-plafond-bar-label {
color: var(--az-text-secondary);
font-weight: var(--az-font-medium, 500);
}
.sim-plafond-bar-values {
color: var(--az-text-tertiary);
font-variant-numeric: tabular-nums;
font-size: var(--az-text-xs);
}
.sim-plafond-bar-values strong {
color: var(--az-text-primary);
font-weight: var(--az-font-semibold, 600);
}
.sim-plafond-track {
height: 8px;
background: var(--az-bg-elevated);
border-radius: var(--az-radius-pill);
overflow: hidden;
position: relative;
}
.sim-plafond-fill {
height: 100%;
border-radius: var(--az-radius-pill);
transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}
.sim-plafond-fill.is-low { background: var(--az-green); }
.sim-plafond-fill.is-mid { background: var(--az-amber); }
.sim-plafond-fill.is-high { background: var(--az-red); }
.sim-plafond-bar-msg {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
margin-top: var(--az-2xs);
}
.sim-plafond-bar-msg.is-warn { color: var(--az-amber); }
.sim-plafond-bar-msg.is-danger { color: var(--az-red); }
.sim-plafond-link {
font-size: var(--az-text-xs);
color: var(--az-blue);
text-decoration: none;
}
.sim-plafond-link:hover { text-decoration: underline; }
.sim-templates-section .sim-templates-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--az-sm);
margin-top: var(--az-sm);
}
.sim-template-card {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
padding: var(--az-md);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
cursor: pointer;
transition: var(--az-transition-fast);
text-align: left;
font-family: inherit;
color: inherit;
}
.sim-template-card:hover {
background: var(--az-bg-card-hover);
border-color: var(--az-border-hover);
transform: translateY(-1px);
}
.sim-template-card-icon {
width: 32px;
height: 32px;
border-radius: var(--az-radius-sm);
background: var(--az-bg-input);
display: flex;
align-items: center;
justify-content: center;
color: var(--az-text-secondary);
font-size: var(--az-text-lg);
margin-bottom: var(--az-xs);
}
.sim-template-card-name {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold, 600);
color: var(--az-text-primary);
}
.sim-template-card-desc {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
line-height: 1.4;
}
.sim-scenarios-section {}
.sim-scenarios-tabs {
display: flex;
gap: var(--az-xs);
margin-bottom: var(--az-md);
flex-wrap: wrap;
}
.sim-scenario-tab {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
padding: var(--az-xs) var(--az-md);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-pill);
color: var(--az-text-secondary);
font-size: var(--az-text-sm);
cursor: pointer;
transition: var(--az-transition-fast);
font-family: inherit;
}
.sim-scenario-tab:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.sim-scenario-tab.is-active {
background: var(--az-blue-bg);
color: var(--az-blue);
border-color: var(--az-blue-border);
}
.sim-scenario-tab-remove {
background: transparent;
border: none;
color: inherit;
opacity: 0.6;
padding: 0;
margin-left: var(--az-xs);
cursor: pointer;
display: inline-flex;
align-items: center;
}
.sim-scenario-tab-remove:hover { opacity: 1; }
.sim-scenarios-compare {
display: grid;
gap: var(--az-md);
margin-top: var(--az-md);
}
.sim-scenarios-compare.has-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sim-scenarios-compare.has-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sim-scenario-card {
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-md);
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.sim-scenario-card-name {
font-size: var(--az-text-sm);
font-weight: var(--az-font-semibold, 600);
color: var(--az-text-primary);
margin-bottom: var(--az-xs);
}
.sim-scenario-card-row {
display: flex;
justify-content: space-between;
font-size: var(--az-text-sm);
font-variant-numeric: tabular-nums;
}
.sim-scenario-card-row .label { color: var(--az-text-tertiary); }
.sim-scenario-card-row .value { color: var(--az-text-primary); font-weight: var(--az-font-medium, 500); }
.sim-scenario-card-row .value.is-positive { color: var(--az-green); }
.sim-scenario-card-row .value.is-negative { color: var(--az-red); }
.sim-scenario-card-net {
padding-top: var(--az-sm);
margin-top: var(--az-sm);
border-top: 1px solid var(--az-border);
}
.sim-scenario-card-net .label { font-weight: var(--az-font-semibold, 600); color: var(--az-text-primary); }
.sim-scenario-card-net .value { font-size: var(--az-text-md); font-weight: var(--az-font-semibold, 600); }
.sim-scenario-best {
display: inline-block;
margin-top: var(--az-sm);
padding: var(--az-2xs) var(--az-xs-plus);
background: var(--az-green-bg);
color: var(--az-green);
border-radius: var(--az-radius-sm);
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold, 600);
text-transform: uppercase;
letter-spacing: 0.04em;
}
@media (max-width: 768px) {
#catalog-list .catalog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--az-sm);
}
.catalog-card-margin-chip {
font-size: 10px;
padding: 2px 6px;
top: var(--az-xs);
right: var(--az-xs);
}
.catalog-card-select {
opacity: 1;
width: 26px;
height: 26px;
}
.catalog-bulk-bar {
position: fixed;
bottom: calc(var(--az-bottom-nav-h, 56px) + var(--az-sm) + env(safe-area-inset-bottom, 0px));
left: var(--az-sm);
right: var(--az-sm);
margin: 0;
padding: var(--az-sm);
flex-wrap: wrap;
}
.catalog-bulk-actions { width: 100%; justify-content: stretch; }
.catalog-bulk-actions .btn { flex: 1; min-height: 40px; }
.catalog-advanced-filters {
flex-direction: column;
align-items: stretch;
}
.catalog-advanced-filter { width: 100%; justify-content: space-between; }
.sim-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.sim-charge-row {
grid-template-columns: 1fr 100px;
grid-template-areas:
"label amount"
"freq delete";
gap: var(--az-xs);
}
.sim-charge-row > :nth-child(1) { grid-area: label; }
.sim-charge-row > :nth-child(2) { grid-area: amount; }
.sim-charge-row > :nth-child(3) { grid-area: freq; }
.sim-charge-row > :nth-child(4) { grid-area: delete; justify-self: end; }
.sim-scenarios-section .sim-scenarios-compare,
.sim-scenarios-section .sim-scenarios-compare.has-2,
.sim-scenarios-section .sim-scenarios-compare.has-3 {
display: flex;
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: var(--az-md);
padding-bottom: var(--az-sm);
-webkit-overflow-scrolling: touch;
}
.sim-scenarios-section .sim-scenarios-compare .sim-scenario-card {
flex: 0 0 85%;
scroll-snap-align: start;
}
.sim-templates-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 380px) {
.catalog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--az-xs);
}
}
.ds-canvas,
.ds-item--empty,
.ds-item--spec,
.ds-empty-label,
.ds-confirm-overlay {
--ds-ink: #14110f;
--ds-ink-soft: #5a534d;
--ds-ink-mute: #8b847e;
--ds-paper: #ffffff;
--ds-paper-deep: #f4f3f1;
--ds-rule: rgba(20, 17, 15, 0.18);
--ds-paper-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
--ds-confirm-veil: rgba(20, 17, 15, 0.4);
}
.datasheet-overlay {
position: fixed; inset: 0;
background: var(--az-bg-overlay);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
z-index: var(--az-z-modal);
display: flex; align-items: center; justify-content: center;
padding: var(--az-xl);
animation: ds-fade-in var(--az-transition-fast) ease-out;
}
@keyframes ds-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.datasheet-overlay.is-busy .ds-modal { pointer-events: none; opacity: 0.7; }
.ds-modal {
width: min(1400px, 100%);
height: calc(100vh - var(--az-2xl));
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-2xl);
box-shadow: var(--az-shadow-modal);
display: flex; flex-direction: column;
overflow: hidden;
position: relative;
}
.ds-modal-head {
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
align-items: center;
gap: var(--az-md);
padding: var(--az-md) var(--az-xl);
border-bottom: 1px solid var(--az-border);
flex-shrink: 0;
}
.ds-modal-eyebrow {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: var(--az-font-medium);
margin-bottom: var(--az-2xs);
}
.ds-modal-title {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-modal-close { width: 32px; height: 32px; }
.ds-toolbar {
display: inline-flex; align-items: center; gap: var(--az-2xs);
background: var(--az-bg-app);
padding: var(--az-2xs);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
justify-self: center;
}
.ds-tool {
background: transparent;
border: none;
color: var(--az-text-secondary);
padding: var(--az-xs) var(--az-sm);
border-radius: var(--az-radius-sm);
font-size: var(--az-text-xs);
cursor: pointer;
display: inline-flex; align-items: center;
gap: var(--az-xs);
transition: var(--az-transition-fast);
}
.ds-tool:hover { background: var(--az-bg-card); color: var(--az-text-primary); box-shadow: var(--az-shadow-sm); }
.ds-tool > i { font-size: var(--az-text-md); }
.ds-tool-sep { width: 1px; height: 20px; background: var(--az-border); margin: 0 var(--az-2xs); }
.ds-dirty-banner {
display: flex; align-items: center; gap: var(--az-sm);
padding: 0 var(--az-xl);
background: var(--az-amber-bg); color: var(--az-amber);
border-bottom: 0 solid var(--az-amber-border);
font-size: var(--az-text-sm);
max-height: 0; overflow: hidden; opacity: 0;
transition: max-height 220ms cubic-bezier(0.16, 1, 0.3, 1), padding 220ms ease, opacity 180ms ease, border-bottom-width 220ms;
}
.ds-dirty-banner > i { font-size: 8px; }
.datasheet-overlay.is-dirty .ds-dirty-banner {
max-height: 56px; padding: var(--az-sm) var(--az-xl); opacity: 1; border-bottom-width: 1px;
}
.ds-dirty-banner-action {
margin-left: auto; background: transparent;
border: 1px solid var(--az-amber-border); color: var(--az-amber);
padding: var(--az-2xs) var(--az-sm); border-radius: var(--az-radius-sm);
font-size: var(--az-text-xs); font-weight: var(--az-font-medium);
cursor: pointer; display: inline-flex; align-items: center; gap: var(--az-xs);
transition: var(--az-transition-fast);
}
.ds-dirty-banner-action:hover { background: var(--az-amber); color: var(--az-text-on-accent); }
.ds-modal-body {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
flex: 1;
min-height: 0;
overflow: hidden;
}
.ds-canvas-wrap {
background: var(--az-bg-app);
border-right: 1px solid var(--az-border);
overflow: hidden;
position: relative;
display: flex; align-items: center; justify-content: center;
padding: var(--az-lg);
}
.ds-canvas-wrap.is-drop::after {
content: 'Déposez ici';
position: absolute; inset: var(--az-sm);
border: 2px dashed var(--az-blue);
border-radius: var(--az-radius-lg);
color: var(--az-blue);
background: var(--az-blue-bg);
display: flex; align-items: center; justify-content: center;
font-weight: var(--az-font-medium);
pointer-events: none;
z-index: 100;
}
.ds-canvas-inner {
transform-origin: center center;
transition: transform 0.1s ease-out;
}
.ds-canvas {
width: 210mm;
height: 297mm;
background: var(--ds-paper);
box-shadow: var(--ds-paper-shadow);
position: relative;
overflow: hidden;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
color: var(--ds-ink);
}
.ds-item {
position: absolute;
overflow: hidden;
cursor: move;
user-select: none;
}
.ds-item img { width: 100%; height: 100%; display: block; }
.ds-item--empty {
background: var(--ds-paper-deep);
display: flex; align-items: center; justify-content: center;
border: 1px dashed var(--ds-rule);
}
.ds-empty-label {
font-size: 9pt; color: var(--ds-ink-mute);
display: inline-flex; align-items: center; gap: 4px;
}
.ds-item--text .ds-text {
width: 100%;
word-wrap: break-word; overflow-wrap: anywhere;
letter-spacing: -0.01em;
}
.ds-item--spec .ds-spec-title {
margin: 0 0 2mm; font-size: 9.5pt; font-weight: 600; color: var(--ds-ink);
}
.ds-item--spec .ds-spec-list {
margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 1mm;
}
.ds-item--spec .ds-spec-row {
display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
gap: 3mm; font-size: 9pt; line-height: 1.5;
}
.ds-item--spec .ds-spec-row dt { color: var(--ds-ink-mute); font-weight: 400; }
.ds-item--spec .ds-spec-row dd { margin: 0; color: var(--ds-ink); font-weight: 500; }
.ds-item--spec .ds-spec-row--solo { grid-template-columns: 1fr; }
.ds-item--spec .ds-spec-row--solo dt { color: var(--ds-ink-soft); font-weight: 400; }
.ds-item:hover { outline: 1px solid var(--az-blue-border); outline-offset: 0; }
.ds-item.is-selected { outline: 2px solid var(--az-blue); outline-offset: 0; }
.ds-handles {
position: absolute;
pointer-events: none;
z-index: 1000;
}
.ds-handle {
position: absolute;
width: 10px; height: 10px;
background: var(--az-bg-card);
border: 1.5px solid var(--az-blue);
border-radius: 50%;
pointer-events: auto;
box-shadow: var(--az-shadow-sm);
z-index: 1001;
}
.ds-handle--nw { top: -5px; left: -5px; cursor: nwse-resize; }
.ds-handle--n  { top: -5px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.ds-handle--ne { top: -5px; right: -5px; cursor: nesw-resize; }
.ds-handle--e  { top: 50%; right: -5px; transform: translateY(-50%); cursor: ew-resize; }
.ds-handle--se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.ds-handle--s  { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.ds-handle--sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.ds-handle--w  { top: 50%; left: -5px; transform: translateY(-50%); cursor: ew-resize; }
.ds-handle-delete {
position: absolute;
top: -32px; right: -2px;
width: 26px; height: 26px;
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-sm);
color: var(--az-red);
cursor: pointer;
pointer-events: auto;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: var(--az-shadow-sm);
transition: var(--az-transition-fast);
z-index: 1002;
}
.ds-handle-delete:hover { background: var(--az-red); color: var(--az-text-on-accent); border-color: var(--az-red); }
.ds-handle-delete > i { font-size: 14px; }
.ds-foot-danger {
color: var(--az-red);
margin-right: auto;
}
.ds-foot-danger:hover {
background: var(--az-red-bg);
color: var(--az-red);
border-color: var(--az-red-border);
}
.ds-confirm-overlay {
position: absolute;
inset: 0;
background: var(--ds-confirm-veil);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
padding: var(--az-xl);
z-index: calc(var(--az-z-modal) + 50);
animation: ds-fade-in var(--az-transition-fast) ease-out;
}
.ds-confirm-modal {
width: min(420px, 100%);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-xl);
box-shadow: var(--az-shadow-modal);
padding: var(--az-xl);
display: flex;
flex-direction: column;
gap: var(--az-md);
animation: ds-pop-in 140ms ease-out;
}
.ds-confirm-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
line-height: 1.3;
}
.ds-confirm-message {
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
line-height: 1.55;
}
.ds-confirm-actions {
display: flex;
gap: var(--az-sm);
justify-content: flex-end;
margin-top: var(--az-sm);
}
.ds-confirm-actions .btn-danger {
background: var(--az-red);
color: var(--az-text-on-accent);
border: 1px solid var(--az-red);
}
.ds-confirm-actions .btn-danger:hover { background: var(--az-red-hover, var(--az-red)); filter: brightness(0.92); }
.ds-manager-overlay {
position: fixed;
inset: 0;
background: var(--az-bg-overlay);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: var(--az-z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: var(--az-xl);
animation: ds-fade-in var(--az-transition-fast) ease-out;
}
.ds-manager-modal {
width: min(680px, 100%);
max-height: calc(100vh - var(--az-2xl));
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-2xl);
box-shadow: var(--az-shadow-modal);
display: flex;
flex-direction: column;
overflow: hidden;
animation: ds-pop-in 140ms ease-out;
}
.ds-manager-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--az-md) var(--az-xl);
border-bottom: 1px solid var(--az-border);
}
.ds-manager-toolbar {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-sm) var(--az-xl);
border-bottom: 1px solid var(--az-border);
background: var(--az-bg-surface);
}
.ds-mgr-selectall {
display: inline-flex;
align-items: center;
gap: var(--az-xs);
cursor: pointer;
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.ds-mgr-count {
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
margin-right: auto;
}
.ds-manager-toolbar .btn:disabled { opacity: 0.4; pointer-events: none; }
.ds-manager-body {
flex: 1;
overflow-y: auto;
padding: var(--az-sm) 0;
}
.ds-mgr-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--az-sm);
padding: var(--az-3xl) var(--az-md);
color: var(--az-text-tertiary);
text-align: center;
}
.ds-mgr-empty > i { font-size: var(--az-text-3xl); }
.ds-mgr-empty p { margin: 0; font-size: var(--az-text-sm); }
.ds-mgr-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.ds-mgr-item {
display: flex;
align-items: center;
gap: var(--az-sm);
padding: var(--az-sm) var(--az-xl);
border-bottom: 1px solid var(--az-border);
transition: var(--az-transition-fast);
}
.ds-mgr-item:hover { background: var(--az-bg-card-hover); }
.ds-mgr-item:last-child { border-bottom: none; }
.ds-mgr-row {
display: flex;
align-items: center;
gap: var(--az-md);
flex: 1;
cursor: pointer;
min-width: 0;
}
.ds-mgr-check { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
.ds-mgr-thumb {
width: 44px;
height: 44px;
border-radius: var(--az-radius-md);
background: var(--az-bg-app);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: var(--az-text-tertiary);
flex-shrink: 0;
}
.ds-mgr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ds-mgr-thumb > i { font-size: var(--az-text-lg); }
.ds-mgr-info { min-width: 0; flex: 1; }
.ds-mgr-name {
font-size: var(--az-text-sm);
font-weight: var(--az-font-medium);
color: var(--az-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ds-mgr-meta {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
margin-top: 2px;
}
.ds-mgr-actions { flex-shrink: 0; }
.ds-mgr-trigger {
margin-left: var(--az-sm);
}
.ds-mgr-picker {
display: flex;
flex-direction: column;
gap: var(--az-sm);
margin: var(--az-sm) 0;
}
.ds-mgr-picker-list {
list-style: none;
margin: 0;
padding: 0;
max-height: 320px;
overflow-y: auto;
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
}
.ds-mgr-picker-item {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-sm) var(--az-md);
cursor: pointer;
border-bottom: 1px solid var(--az-border);
transition: var(--az-transition-fast);
}
.ds-mgr-picker-item:last-child { border-bottom: none; }
.ds-mgr-picker-item:hover { background: var(--az-bg-card-hover); }
.ds-mgr-picker .ds-mgr-empty {
padding: var(--az-xl) var(--az-md);
text-align: center;
color: var(--az-text-tertiary);
font-size: var(--az-text-sm);
}
.ds-mgr-picker .ds-mgr-empty p { margin: 0; }
.ds-mgr-fiche-pill {
display: inline-block;
background: var(--az-blue-bg);
color: var(--az-blue);
padding: 1px 6px;
border-radius: var(--az-radius-pill);
font-size: var(--az-text-3xs, 9px);
font-weight: var(--az-font-medium);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ds-inspector {
background: var(--az-bg-card);
overflow-y: auto;
padding: var(--az-lg);
display: flex; flex-direction: column;
gap: var(--az-md);
}
.ds-insp-empty {
padding: var(--az-2xl) var(--az-md);
text-align: center;
color: var(--az-text-tertiary);
font-size: var(--az-text-sm);
}
.ds-insp-head {
display: flex; align-items: center; gap: var(--az-xs);
padding-bottom: var(--az-sm);
border-bottom: 1px solid var(--az-border);
}
.ds-insp-type {
font-size: var(--az-text-xs); font-weight: var(--az-font-semibold);
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--az-text-secondary);
margin-right: auto;
}
.ds-insp-icon {
width: 28px; height: 28px;
border: 1px solid var(--az-border);
background: var(--az-bg-card);
border-radius: var(--az-radius-sm);
color: var(--az-text-secondary);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: var(--az-transition-fast);
}
.ds-insp-icon:hover { color: var(--az-text-primary); border-color: var(--az-border-hover); }
.ds-insp-body { display: flex; flex-direction: column; gap: var(--az-sm); }
.ds-insp-label {
display: block;
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
margin-bottom: var(--az-2xs);
font-weight: var(--az-font-medium);
text-transform: uppercase; letter-spacing: 0.06em;
}
.ds-insp-input {
width: 100%;
background: var(--az-bg-app);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-sm);
padding: var(--az-xs) var(--az-sm);
font-size: var(--az-text-sm);
color: var(--az-text-primary);
font-family: inherit;
transition: var(--az-transition-fast);
}
.ds-insp-input:focus {
outline: none;
border-color: var(--az-border-focus);
background: var(--az-bg-card);
}
textarea.ds-insp-input { resize: vertical; min-height: 60px; line-height: 1.5; }
.ds-insp-color { padding: 0; height: 32px; cursor: pointer; }
.ds-insp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--az-sm); }
.ds-insp-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--az-xs); }
.ds-insp-foot {
margin-top: auto;
padding-top: var(--az-sm);
border-top: 1px solid var(--az-border);
}
.ds-insp-imgpreview {
aspect-ratio: 16 / 10;
background: var(--az-bg-app);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
overflow: hidden;
display: flex; align-items: center; justify-content: center;
color: var(--az-text-tertiary);
font-size: var(--az-text-xs);
}
.ds-insp-imgpreview img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.ds-insp-btn {
background: var(--az-bg-card);
border: 1px solid var(--az-border);
color: var(--az-text-primary);
padding: var(--az-xs) var(--az-sm);
border-radius: var(--az-radius-sm);
font-size: var(--az-text-sm);
cursor: pointer;
display: inline-flex; align-items: center; gap: var(--az-xs);
width: 100%;
justify-content: center;
transition: var(--az-transition-fast);
}
.ds-insp-btn:hover { background: var(--az-bg-card-hover); border-color: var(--az-border-hover); }
.ds-modal-foot {
display: flex; align-items: center; justify-content: space-between;
gap: var(--az-md);
padding: var(--az-md) var(--az-xl);
border-top: 1px solid var(--az-border);
background: var(--az-bg-surface);
flex-shrink: 0;
}
.ds-modal-foot-left { display: flex; align-items: center; gap: var(--az-sm); min-width: 0; }
.ds-modal-foot-right {
display: flex; gap: var(--az-sm); align-items: center;
flex-wrap: wrap; justify-content: flex-end;
}
.ds-modal-foot-status {
display: inline-flex; align-items: center; gap: var(--az-xs);
font-size: var(--az-text-xs); color: var(--az-text-tertiary);
min-height: 1.2em; line-height: 1;
}
.ds-modal-foot-status:empty { display: none; }
.ds-modal-foot-status > i { font-size: var(--az-text-md); }
.ds-modal-foot-status[data-type="success"] { color: var(--az-green); }
.ds-modal-foot-status[data-type="error"] { color: var(--az-red); }
.ds-modal-foot-status[data-type="info"] { color: var(--az-text-secondary); }
.ds-popover-wrap { position: relative; }
.ds-popover-chevron { font-size: var(--az-text-xs); margin-left: var(--az-2xs); transition: transform var(--az-transition-fast); }
.ds-popover-wrap [aria-expanded="true"] .ds-popover-chevron { transform: rotate(180deg); }
.ds-popover {
position: absolute; bottom: calc(100% + var(--az-xs)); right: 0;
min-width: 280px;
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
box-shadow: var(--az-shadow-dropdown);
padding: var(--az-2xs);
display: none; flex-direction: column; gap: var(--az-2xs);
z-index: calc(var(--az-z-modal) + 5);
animation: ds-pop-in 120ms ease-out;
}
.ds-popover.is-open { display: flex; }
.ds-popover-item {
display: flex; align-items: flex-start; gap: var(--az-sm);
padding: var(--az-sm) var(--az-md);
border: none; background: transparent;
border-radius: var(--az-radius-md);
text-align: left; cursor: pointer;
color: var(--az-text-primary);
transition: var(--az-transition-fast);
width: 100%;
}
.ds-popover-item:hover { background: var(--az-bg-card-hover); }
.ds-popover-item > i { font-size: var(--az-text-xl); color: var(--az-text-secondary); margin-top: 2px; flex-shrink: 0; }
.ds-popover-item-title { font-size: var(--az-text-sm); font-weight: var(--az-font-medium); margin-bottom: 2px; }
.ds-popover-item-sub { font-size: var(--az-text-2xs); color: var(--az-text-tertiary); line-height: 1.4; }
.ds-sub-overlay {
position: absolute; inset: 0;
background: var(--az-bg-overlay);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
padding: var(--az-xl);
z-index: calc(var(--az-z-modal) + 10);
animation: ds-fade-in var(--az-transition-fast) ease-out;
}
.ds-sub-overlay[hidden] { display: none; }
.ds-sub-modal {
width: min(560px, 100%);
max-height: 100%;
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-xl);
box-shadow: var(--az-shadow-modal);
display: flex; flex-direction: column;
overflow: hidden;
animation: ds-pop-in 140ms ease-out;
}
.ds-sub-head {
display: flex; align-items: center; justify-content: space-between;
padding: var(--az-lg) var(--az-xl);
border-bottom: 1px solid var(--az-border);
}
.ds-sub-body {
padding: var(--az-xl);
overflow-y: auto;
display: flex; flex-direction: column; gap: var(--az-lg);
}
.ds-sub-foot {
display: flex; align-items: center; justify-content: space-between;
gap: var(--az-md);
padding: var(--az-md) var(--az-xl);
border-top: 1px solid var(--az-border);
background: var(--az-bg-surface);
}
.ds-sub-foot > div:last-child { display: flex; gap: var(--az-sm); }
.ds-sub-status {
display: inline-flex; align-items: center; gap: var(--az-xs);
font-size: var(--az-text-xs); color: var(--az-text-tertiary);
min-height: 1.2em;
}
.ds-sub-status:empty { display: none; }
.ds-sub-status[data-type="success"] { color: var(--az-green); }
.ds-sub-status[data-type="error"] { color: var(--az-red); }
.ds-share-loading, .ds-share-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--az-sm);
padding: var(--az-2xl) var(--az-md);
color: var(--az-text-tertiary);
text-align: center;
}
.ds-share-loading > i, .ds-share-empty > i { font-size: var(--az-text-2xl); color: var(--az-text-tertiary); }
.ds-share-empty p { margin: 0; font-size: var(--az-text-sm); }
.ds-share-item {
background: var(--az-bg-app);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-md);
display: flex; flex-direction: column; gap: var(--az-sm);
}
.ds-share-row { display: flex; gap: var(--az-sm); align-items: center; }
.ds-share-url {
flex: 1;
font-family: var(--az-font-mono, ui-monospace, monospace);
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
background: var(--az-bg-card);
}
.ds-share-copy { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.ds-share-copy.is-copied { background: var(--az-green-bg); color: var(--az-green); border-color: var(--az-green-border); }
.ds-share-meta { display: flex; flex-wrap: wrap; gap: var(--az-xs); align-items: center; }
.ds-share-pill {
display: inline-flex; align-items: center; gap: var(--az-2xs);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
color: var(--az-text-secondary);
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-pill);
font-size: var(--az-text-2xs);
}
.ds-share-pill > i { font-size: var(--az-text-xs); }
.ds-share-revoke {
margin-left: auto;
background: transparent; border: none;
color: var(--az-text-tertiary);
font-size: var(--az-text-2xs);
cursor: pointer;
display: inline-flex; align-items: center; gap: var(--az-2xs);
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-sm);
transition: var(--az-transition-fast);
}
.ds-share-revoke:hover { color: var(--az-red); background: var(--az-red-bg); }
@media (max-width: 960px) {
.datasheet-overlay { padding: 0; }
.ds-modal { width: 100%; height: 100%; max-height: 100vh; border-radius: 0; border: none; }
.ds-toolbar { display: none; }
.ds-modal-body { grid-template-columns: 1fr; }
.ds-inspector { display: none; }
.ds-modal-head { grid-template-columns: 1fr auto; padding: var(--az-md); }
.ds-modal-foot { flex-direction: column; align-items: stretch; gap: var(--az-sm); padding: var(--az-md); padding-bottom: max(var(--az-md), env(safe-area-inset-bottom)); }
.ds-modal-foot-right { justify-content: stretch; }
.ds-modal-foot-right .btn, .ds-modal-foot-right .ds-popover-wrap { flex: 1; }
.ds-modal-foot-right .ds-popover-wrap .btn { width: 100%; }
}
.ft-overlay-host {
position: fixed;
inset: 0;
z-index: var(--az-z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: var(--az-md);
}
.ft-backdrop {
position: absolute;
inset: 0;
background: var(--az-bg-overlay);
backdrop-filter: blur(6px);
}
.ft-modal {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: 100%;
max-width: 1280px;
max-height: calc(100vh - var(--az-2xl));
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-2xl);
box-shadow: var(--az-shadow-modal);
overflow: hidden;
}
.ft-modal-head {
display: flex;
align-items: center;
gap: var(--az-md);
padding: var(--az-md) var(--az-lg);
border-bottom: 1px solid var(--az-border);
flex-shrink: 0;
}
.ft-modal-title {
font-size: var(--az-text-lg);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
flex: 1;
}
.ft-modal-status {
display: flex;
gap: var(--az-md);
align-items: center;
font-size: var(--az-text-xs);
}
.ft-dirty-indicator {
display: none;
color: var(--az-amber);
}
.ft-dirty-indicator.is-visible { display: inline; }
.ft-saved-indicator {
color: var(--az-text-tertiary);
opacity: 0;
transition: opacity var(--az-transition-fast);
}
.ft-saved-indicator.is-saved {
opacity: 1;
color: var(--az-green);
}
.ft-modal-close {
width: var(--az-touch-min);
height: var(--az-touch-min);
border-radius: var(--az-radius-md);
background: transparent;
border: none;
color: var(--az-text-secondary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--az-transition-fast);
}
.ft-modal-close:hover {
background: var(--az-bg-card-hover);
color: var(--az-text-primary);
}
.ft-modal-body {
display: grid;
grid-template-columns: 420px 1fr;
flex: 1;
overflow: hidden;
min-height: 0;
}
.ft-edit-host,
.ft-preview-host {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.ft-edit-host {
padding: var(--az-lg);
border-right: 1px solid var(--az-border);
background: var(--az-bg-app);
}
.ft-preview-host {
padding: var(--az-xl);
background: var(--az-bg-surface);
display: flex;
justify-content: center;
align-items: flex-start;
}
.ft-modal-foot {
display: flex;
justify-content: flex-end;
gap: var(--az-sm);
padding: var(--az-md) var(--az-lg);
border-top: 1px solid var(--az-border);
background: var(--az-bg-card);
flex-shrink: 0;
}
.ft-edit-pane {
display: flex;
flex-direction: column;
gap: var(--az-xl);
}
.ft-edit-section {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.ft-edit-section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--az-sm);
}
.ft-edit-label {
font-size: var(--az-text-xs);
font-weight: var(--az-font-semibold);
color: var(--az-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ft-edit-input {
font-size: var(--az-text-sm);
}
.ft-edit-row {
display: flex;
align-items: center;
gap: var(--az-sm);
}
.ft-edit-image-dropzone {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--az-xs);
min-height: 140px;
border: 1px dashed var(--az-border);
border-radius: var(--az-radius-lg);
background: var(--az-bg-card);
color: var(--az-text-tertiary);
font-size: var(--az-text-sm);
cursor: pointer;
overflow: hidden;
transition: var(--az-transition-fast);
}
.ft-edit-image-dropzone:hover,
.ft-edit-image-dropzone.is-dragover {
background: var(--az-bg-card-hover);
border-color: var(--az-blue-border);
color: var(--az-blue);
}
.ft-edit-image-dropzone img {
width: 100%;
height: 100%;
object-fit: contain;
max-height: 220px;
}
.ft-edit-image-dropzone i {
font-size: var(--az-text-2xl);
}
.ft-edit-image-remove {
position: absolute;
top: var(--az-xs);
right: var(--az-xs);
width: var(--az-xl);
height: var(--az-xl);
border-radius: var(--az-radius-pill);
background: var(--az-bg-overlay);
color: var(--az-text-on-accent);
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ft-edit-add-overlay {
font-size: var(--az-text-xs);
background: transparent;
border: 1px solid var(--az-border);
color: var(--az-text-secondary);
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-md);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--az-2xs);
transition: var(--az-transition-fast);
}
.ft-edit-add-overlay:hover {
border-color: var(--az-blue-border);
color: var(--az-blue);
}
.ft-edit-overlays {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.ft-edit-overlays-empty {
padding: var(--az-md);
border: 1px dashed var(--az-border);
border-radius: var(--az-radius-md);
text-align: center;
font-size: var(--az-text-xs);
color: var(--az-text-tertiary);
}
.ft-edit-overlay-row {
display: grid;
grid-template-columns: var(--az-3xl) 1fr auto;
gap: var(--az-sm);
align-items: center;
padding: var(--az-xs);
border-radius: var(--az-radius-md);
cursor: pointer;
transition: var(--az-transition-fast);
}
.ft-edit-overlay-row:hover {
background: var(--az-bg-card-hover);
}
.ft-edit-overlay-row.is-selected {
background: var(--az-blue-bg);
border: 1px solid var(--az-blue-border);
padding: calc(var(--az-xs) - 1px);
}
.ft-edit-overlay-thumb {
width: var(--az-3xl);
height: var(--az-3xl);
object-fit: contain;
border-radius: var(--az-radius-md);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
}
.ft-edit-overlay-thumb-empty {
display: flex;
align-items: center;
justify-content: center;
color: var(--az-text-tertiary);
}
.ft-edit-overlay-info {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
min-width: 0;
}
.ft-edit-overlay-name {
font-size: var(--az-text-sm);
color: var(--az-text-primary);
font-weight: var(--az-font-medium);
}
.ft-edit-overlay-pos {
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
font-variant-numeric: tabular-nums;
}
.ft-edit-help {
margin: 0;
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
line-height: 1.4;
}
.ft-edit-row-qty {
display: flex;
align-items: center;
gap: var(--az-md);
justify-content: space-between;
}
.ft-edit-row-info {
display: flex;
flex-direction: column;
gap: var(--az-2xs);
}
.ft-edit-row-qty input {
width: 80px;
flex-shrink: 0;
}
.ft-edit-add-block-row {
display: flex;
gap: var(--az-xs);
}
.ft-edit-add-block {
font-size: var(--az-text-xs);
background: transparent;
border: 1px solid var(--az-border);
color: var(--az-text-secondary);
padding: var(--az-2xs) var(--az-sm);
border-radius: var(--az-radius-md);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--az-2xs);
transition: var(--az-transition-fast);
}
.ft-edit-add-block:hover {
border-color: var(--az-blue-border);
color: var(--az-blue);
}
.ft-edit-blocks {
display: flex;
flex-direction: column;
gap: var(--az-md);
}
.ft-edit-block {
display: flex;
flex-direction: column;
gap: var(--az-sm);
padding: var(--az-md);
background: var(--az-bg-card);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
}
.ft-edit-block-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.ft-edit-block-tag {
font-size: var(--az-text-2xs);
font-weight: var(--az-font-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--az-text-tertiary);
background: var(--az-bg-elevated);
padding: var(--az-2xs) var(--az-xs);
border-radius: var(--az-radius-sm);
}
.ft-edit-block-controls {
display: flex;
gap: var(--az-2xs);
}
.ft-edit-icon-btn {
width: var(--az-xl);
height: var(--az-xl);
border-radius: var(--az-radius-md);
background: transparent;
border: none;
color: var(--az-text-tertiary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--az-transition-fast);
}
.ft-edit-icon-btn:hover {
background: var(--az-bg-elevated);
color: var(--az-text-primary);
}
.ft-edit-icon-btn.ft-edit-danger:hover {
background: var(--az-red-bg);
color: var(--az-red);
}
.ft-edit-block-lines {
font-family: inherit;
resize: vertical;
}
.ft-edit-items {
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.ft-edit-item-row {
display: grid;
grid-template-columns: 1fr 90px 90px auto;
gap: var(--az-xs);
align-items: center;
}
.ft-edit-add-item {
font-size: var(--az-text-xs);
background: transparent;
border: 1px dashed var(--az-border);
color: var(--az-text-secondary);
padding: var(--az-xs) var(--az-sm);
border-radius: var(--az-radius-md);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--az-2xs);
align-self: flex-start;
transition: var(--az-transition-fast);
}
.ft-edit-add-item:hover {
border-color: var(--az-blue-border);
color: var(--az-blue);
}
.ft-doc {
display: flex;
flex-direction: column;
width: 100%;
max-width: 760px;
background: var(--az-bg-card);
color: var(--az-text-primary);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-md);
padding: 0;
font-size: var(--az-text-sm);
line-height: 1.55;
overflow: hidden;
box-shadow: var(--az-shadow-sm);
}
.ft-header {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
gap: var(--az-md);
padding: var(--az-lg) var(--az-2xl);
background: var(--az-bg-card);
border-bottom: 1px solid var(--az-border);
backdrop-filter: blur(8px);
}
.ft-logo {
height: var(--az-2xl);
width: auto;
object-fit: contain;
}
.ft-brand {
font-size: var(--az-text-md);
font-weight: var(--az-font-medium);
letter-spacing: 0.22em;
color: var(--az-text-primary);
text-transform: uppercase;
}
.ft-body {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: var(--az-2xl);
align-items: start;
padding: var(--az-2xl);
}
.ft-image-zone {
position: relative;
aspect-ratio: 4 / 5;
background: var(--az-bg-surface);
border-radius: var(--az-radius-md);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.ft-main-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.ft-overlay {
position: absolute;
cursor: grab;
user-select: none;
touch-action: none;
}
.ft-overlay img {
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
display: block;
}
.ft-overlay-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--az-bg-elevated);
color: var(--az-text-tertiary);
border-radius: var(--az-radius-sm);
border: 1px dashed var(--az-border);
}
.ft-overlay.is-selected {
outline: 2px dashed var(--az-blue);
outline-offset: 2px;
}
.ft-overlay:active {
cursor: grabbing;
}
.ft-overlay-handle {
position: absolute;
width: 12px;
height: 12px;
background: var(--az-bg-card);
border: 2px solid var(--az-blue);
border-radius: 50%;
z-index: 2;
}
.ft-overlay-handle--n  { top: -7px;    left: 50%;       transform: translateX(-50%); cursor: ns-resize; }
.ft-overlay-handle--s  { bottom: -7px; left: 50%;       transform: translateX(-50%); cursor: ns-resize; }
.ft-overlay-handle--e  { top: 50%;     right: -7px;     transform: translateY(-50%); cursor: ew-resize; }
.ft-overlay-handle--w  { top: 50%;     left: -7px;      transform: translateY(-50%); cursor: ew-resize; }
.ft-overlay-handle--nw { top: -7px;    left: -7px;      cursor: nwse-resize; }
.ft-overlay-handle--ne { top: -7px;    right: -7px;     cursor: nesw-resize; }
.ft-overlay-handle--sw { bottom: -7px; left: -7px;      cursor: nesw-resize; }
.ft-overlay-handle--se { bottom: -7px; right: -7px;     cursor: nwse-resize; }
.ft-image-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--az-xs);
color: var(--az-text-tertiary);
font-size: var(--az-text-sm);
text-align: center;
}
.ft-image-empty i {
font-size: var(--az-3xl);
}
.ft-content {
display: flex;
flex-direction: column;
gap: var(--az-lg);
}
.ft-title {
font-size: var(--az-text-xl);
font-weight: var(--az-font-semibold);
margin: 0;
color: var(--az-text-primary);
}
.ft-content > .ft-block + .ft-block {
margin-top: var(--az-md);
}
.ft-block {
display: flex;
flex-direction: column;
gap: var(--az-sm);
}
.ft-block-title {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
margin: 0;
color: var(--az-text-primary);
letter-spacing: -0.005em;
}
.ft-block-subtitle {
font-size: var(--az-text-xs);
color: var(--az-text-secondary);
margin: 0;
}
.ft-section-lines {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--az-2xs);
}
.ft-section-lines li {
position: relative;
padding-left: var(--az-md);
color: var(--az-text-secondary);
}
.ft-section-lines li::before {
content: "–";
position: absolute;
left: 0;
color: var(--az-text-tertiary);
}
.ft-block-pricing {
background: var(--az-bg-elevated);
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
padding: var(--az-lg);
gap: var(--az-md);
}
.ft-block-pricing .ft-block-title {
font-size: var(--az-text-md);
font-weight: var(--az-font-semibold);
}
.ft-pr-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--az-xs);
}
.ft-pr-item {
position: relative;
padding-left: var(--az-md);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--az-md);
color: var(--az-text-secondary);
}
.ft-pr-item::before {
content: "–";
position: absolute;
left: 0;
color: var(--az-text-tertiary);
}
.ft-pr-label {
flex: 1;
min-width: 0;
}
.ft-pr-amount {
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--az-text-primary);
}
.ft-pr-total {
margin-top: var(--az-sm);
padding-top: var(--az-md);
border-top: 1px solid var(--az-border);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--az-md);
font-size: var(--az-text-sm);
color: var(--az-text-secondary);
}
.ft-pr-total strong {
font-size: var(--az-text-2xl);
font-weight: var(--az-font-semibold);
color: var(--az-text-primary);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.ft-footer {
padding: var(--az-md) var(--az-2xl) var(--az-lg);
border-top: 1px solid var(--az-border);
font-size: var(--az-text-2xs);
color: var(--az-text-tertiary);
text-align: center;
letter-spacing: 0.02em;
background: var(--az-bg-card);
}
@media (max-width: 900px) {
.ft-modal {
max-height: 100vh;
height: 100vh;
max-width: 100vw;
border-radius: 0;
}
.ft-modal-body {
grid-template-columns: 1fr;
}
.ft-edit-host {
border-right: none;
border-bottom: 1px solid var(--az-border);
}
.ft-doc {
padding: var(--az-md);
}
.ft-body {
grid-template-columns: 1fr;
}
.ft-edit-item-row {
grid-template-columns: 1fr 1fr 1fr auto;
}
}