/* SzImportContactsModal — dark-mode overrides. The modal is teleported to , and Vue's scoped CSS attaches the parent component's data-v attribute to selectors that aren't wrapped in :global(). For dark-mode rules we want simple class-based matching, so they live here unscoped and are injected by nginx sub_filter. */ body.dark .sz-import-modal, html.dark .sz-import-modal, .dark .sz-import-modal { background: #1f2125 !important; color: #D4D4D4 !important; } body.dark .sz-import-header, html.dark .sz-import-header, .dark .sz-import-header { border-bottom-color: rgba(255,255,255,0.08) !important; } body.dark .sz-import-footer, html.dark .sz-import-footer, .dark .sz-import-footer { border-top-color: rgba(255,255,255,0.08) !important; } body.dark .sz-import-sidebar, html.dark .sz-import-sidebar, .dark .sz-import-sidebar { background: #18191c !important; border-right-color: rgba(255,255,255,0.08) !important; } /* Step rail */ body.dark .sz-step-marker, html.dark .sz-step-marker, .dark .sz-step-marker { border-color: #D4D4D4 !important; } body.dark .sz-step-line, html.dark .sz-step-line, .dark .sz-step-line { background: #fafafa !important; } body.dark .sz-step-completed .sz-step-marker, html.dark .sz-step-completed .sz-step-marker, .dark .sz-step-completed .sz-step-marker { background: #16a34a !important; border-color: #16a34a !important; } body.dark .sz-step-completed .sz-step-line, html.dark .sz-step-completed .sz-step-line, .dark .sz-step-completed .sz-step-line { background: #16a34a !important; } body.dark .sz-step-active .sz-step-marker, html.dark .sz-step-active .sz-step-marker, .dark .sz-step-active .sz-step-marker { border-color: #16a34a !important; } body.dark .sz-step-active .sz-step-line, html.dark .sz-step-active .sz-step-line, .dark .sz-step-active .sz-step-line { background: #16a34a !important; } body.dark .sz-step-title, html.dark .sz-step-title, .dark .sz-step-title { color: #D4D4D4 !important; } body.dark .sz-step-active .sz-step-title-text, html.dark .sz-step-active .sz-step-title-text, .dark .sz-step-active .sz-step-title-text { color: #16a34a !important; } body.dark .sz-step-subtitle, html.dark .sz-step-subtitle, .dark .sz-step-subtitle { color: #a1a1aa !important; } /* Buttons */ body.dark .sz-btn, html.dark .sz-btn, .dark .sz-btn { background: #2a2d32 !important; color: #D4D4D4 !important; border-color: rgba(255,255,255,0.14) !important; } body.dark .sz-btn:hover:not(:disabled), html.dark .sz-btn:hover:not(:disabled), .dark .sz-btn:hover:not(:disabled) { background: rgba(255,255,255,0.06) !important; } body.dark .sz-btn-primary, html.dark .sz-btn-primary, .dark .sz-btn-primary { background: #16a34a !important; color: #ffffff !important; border-color: #16a34a !important; } body.dark .sz-btn-primary:hover:not(:disabled), html.dark .sz-btn-primary:hover:not(:disabled), .dark .sz-btn-primary:hover:not(:disabled) { background: #15803d !important; border-color: #15803d !important; } /* Step Upload */ body.dark .sz-template-btn, html.dark .sz-template-btn, .dark .sz-template-btn { background: #2a2d32 !important; color: #D4D4D4 !important; border-color: rgba(255,255,255,0.18) !important; } body.dark .sz-dropzone, html.dark .sz-dropzone, .dark .sz-dropzone { background: #18191c !important; border-color: rgba(255,255,255,0.18) !important; } body.dark .sz-error-card, html.dark .sz-error-card, .dark .sz-error-card { background: #2a2d32 !important; border-color: rgba(255,255,255,0.08) !important; } body.dark .sz-error-card-lines, html.dark .sz-error-card-lines, .dark .sz-error-card-lines { color: #a1a1aa !important; } /* Step Preview */ body.dark .sz-preview-table-wrapper, html.dark .sz-preview-table-wrapper, .dark .sz-preview-table-wrapper { border-color: rgba(255,255,255,0.08) !important; } body.dark .sz-preview-table thead, html.dark .sz-preview-table thead, .dark .sz-preview-table thead { background: #2a2d32 !important; } body.dark .sz-preview-table th, body.dark .sz-preview-table td, html.dark .sz-preview-table th, html.dark .sz-preview-table td, .dark .sz-preview-table th, .dark .sz-preview-table td { border-bottom-color: rgba(255,255,255,0.06) !important; color: #D4D4D4 !important; } body.dark .sz-preview-table th input, html.dark .sz-preview-table th input, .dark .sz-preview-table th input { background: #1f2125 !important; color: #D4D4D4 !important; border-color: rgba(255,255,255,0.12) !important; } body.dark .sz-th-label, html.dark .sz-th-label, .dark .sz-th-label { color: #D4D4D4 !important; } body.dark .sz-filter-icon:hover, html.dark .sz-filter-icon:hover, .dark .sz-filter-icon:hover { background: rgba(255,255,255,0.08) !important; color: #D4D4D4 !important; } body.dark .sz-filter-popover, html.dark .sz-filter-popover, .dark .sz-filter-popover { background: #2a2d32 !important; border-color: rgba(255,255,255,0.1) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important; } body.dark .sz-filter-popover input, html.dark .sz-filter-popover input, .dark .sz-filter-popover input { background: #1f2125 !important; color: #D4D4D4 !important; border-color: rgba(255,255,255,0.12) !important; } /* Step Labels */ body.dark .sz-pill, html.dark .sz-pill, .dark .sz-pill { background: #2a2d32 !important; border-color: rgba(255,255,255,0.06) !important; color: #D4D4D4 !important; } body.dark .sz-pill:hover, html.dark .sz-pill:hover, .dark .sz-pill:hover { border-color: rgba(255,255,255,0.18) !important; } body.dark .sz-pill-create, html.dark .sz-pill-create, .dark .sz-pill-create { background: rgba(22,163,74,0.12) !important; border-color: rgba(22,163,74,0.3) !important; } body.dark .sz-pill-plus-svg, html.dark .sz-pill-plus-svg, .dark .sz-pill-plus-svg { color: #a1a1aa !important; } body.dark .sz-create-form, html.dark .sz-create-form, .dark .sz-create-form { background: #2a2d32 !important; border-color: rgba(255,255,255,0.08) !important; } body.dark .sz-create-grid label > input[type="text"], html.dark .sz-create-grid label > input[type="text"], .dark .sz-create-grid label > input[type="text"] { background: #1f2125 !important; color: #D4D4D4 !important; border-color: rgba(255,255,255,0.12) !important; } /* Step Review */ body.dark .sz-summary-card, html.dark .sz-summary-card, .dark .sz-summary-card { background: rgba(255,255,255,0.04) !important; } body.dark .sz-contact-list, html.dark .sz-contact-list, .dark .sz-contact-list { border-color: rgba(255,255,255,0.06) !important; } /* Modal fixed at 640px tall — keeps the wizard compact even on tall viewports while staying scrollable for shorter screens via max-height clamp. */ .sz-import-modal { height: 640px !important; max-height: 92vh !important; } /* 'Criar nova etiqueta' pill — Figma spec. bg #EEF6F0, height 24px, plus + text both #236D23. */ .sz-pill.sz-pill-create { background: #EEF6F0 !important; border: 1px solid #EEF6F0 !important; height: 24px !important; padding: 0 8px !important; gap: 8px !important; color: #236D23 !important; } .sz-pill.sz-pill-create:hover { background: #d6ecdb !important; border-color: #d6ecdb !important; } .sz-pill.sz-pill-create .sz-pill-create-plus, .sz-pill.sz-pill-create .sz-pill-create-text { color: #236D23 !important; } .sz-pill.sz-pill-create .sz-pill-create-plus { width: 16px !important; height: 16px !important; } /* === Dark-mode label pills (Figma spec) === - Selected/unselected pill bg = label color at 12% opacity via color-mix(in srgb, var(--sz-label-color) 12%, transparent) - The Vue component injects --sz-label-color per pill from lbl.color. - 'Criar nova etiqueta' uses dark-green tones (#11361A bg, #59AA59 text/icon). - Selected check filled circle uses #59AA59. - Unselected plus icon turns white (over the colored tint background). */ body.dark .sz-pill, html.dark .sz-pill, .dark .sz-pill { background: color-mix(in srgb, var(--sz-label-color, #5b80ff) 12%, transparent) !important; border-color: transparent !important; color: var(--sz-label-color, inherit) !important; } body.dark .sz-pill:hover, html.dark .sz-pill:hover, .dark .sz-pill:hover { background: color-mix(in srgb, var(--sz-label-color, #5b80ff) 18%, transparent) !important; } body.dark .sz-pill-create, html.dark .sz-pill-create, .dark .sz-pill-create { background: #11361A !important; border-color: #11361A !important; color: #59AA59 !important; } body.dark .sz-pill-create:hover, html.dark .sz-pill-create:hover, .dark .sz-pill-create:hover { background: #163d22 !important; border-color: #163d22 !important; } body.dark .sz-pill-create .sz-pill-create-plus, body.dark .sz-pill-create .sz-pill-create-text, html.dark .sz-pill-create .sz-pill-create-plus, html.dark .sz-pill-create .sz-pill-create-text, .dark .sz-pill-create .sz-pill-create-plus, .dark .sz-pill-create .sz-pill-create-text { color: #59AA59 !important; } /* Selected pill check icon → green filled circle (#59AA59 in dark) */ body.dark .sz-pill .sz-pill-check, html.dark .sz-pill .sz-pill-check, .dark .sz-pill .sz-pill-check { background: #59AA59 !important; color: #ffffff !important; } /* Unselected pill plus icon → white in dark (Figma Vector: