/* Shared modal appearance. Keep each component's sizing, content and behavior. */
:root {
    --sf-dialog-surface: var(--sf-theme-surface);
    --sf-dialog-soft: var(--sf-theme-raised);
    --sf-dialog-text: var(--sf-theme-text);
    --sf-dialog-muted: var(--sf-theme-muted);
    --sf-dialog-border: var(--sf-theme-border);
    --sf-dialog-radius: 1rem;
    --sf-dialog-padding: 1.5rem;
    --sf-dialog-header-padding: 1.25rem 1.5rem;
    --sf-dialog-shadow: 0 24px 64px #00000040;
    --sf-dialog-scrim: #09090b99;
    --sf-dialog-blur: 5px;
}

html[data-theme] :is(.sf-modal-panel,.sf-workspace-modal-dialog,.sf-template-modal-dialog,.sf-login-modal-panel,.pricing-registration-dialog,.cfc-import-dialog,.sf-dashboard-tour-card,.sf-confirm-modal>section,.sf-command-center>section,.sf-setup-celebration>section,.swal2-popup.sf-sweet-alert) {
    color: var(--sf-dialog-text);
    background: var(--sf-dialog-surface) !important;
    border: 1px solid var(--sf-dialog-border) !important;
    border-radius: var(--sf-dialog-radius) !important;
    box-shadow: var(--sf-dialog-shadow) !important;
    animation: none !important;
}
html[data-theme] :is(.sf-modal-backdrop,.sf-workspace-modal-backdrop,.sf-confirm-backdrop,.sf-template-modal-backdrop,.sf-command-backdrop,.sf-login-modal-scrim,.sf-sweet-alert-container.swal2-backdrop-show,[data-pricing-registration-modal]>[data-pricing-registration-close]) {
    background: var(--sf-dialog-scrim) !important;
    -webkit-backdrop-filter: blur(var(--sf-dialog-blur)) !important;
    backdrop-filter: blur(var(--sf-dialog-blur)) !important;
}
html[data-theme] .cfc-import-dialog::backdrop {
    background: var(--sf-dialog-scrim);
    -webkit-backdrop-filter: blur(var(--sf-dialog-blur));
    backdrop-filter: blur(var(--sf-dialog-blur));
}
html[data-theme] .sf-setup-celebration { background: var(--sf-dialog-scrim); }

/* Remove the old glowing top strips and ornamental header circles. */
html[data-theme] .sf-modal-topline,
html[data-theme] :is(.sf-workspace-modal-dialog,.sf-confirm-modal>section,.sf-sweet-alert,.sf-setup-celebration>section)::before,
html[data-theme] :is(.sf-modal-header,.sf-workspace-modal-dialog>header,.sf-setup-celebration>section)::after,
html[data-theme] :is(.sf-modal-header,.sf-workspace-modal-dialog>header)::before { display: none; }

html[data-theme] body :is(.sf-modal-panel>.sf-modal-header,.sf-workspace-modal-dialog>header,.sf-template-modal-dialog>header,.cfc-import-heading) {
    min-height: 0 !important;
    padding: var(--sf-dialog-header-padding) !important;
    gap: 1rem;
    border: 0;
    background: var(--sf-dialog-surface) !important;
    color: var(--sf-dialog-text);
}
html[data-theme] :is(.sf-modal-heading,.sf-workspace-modal-heading) { gap: .75rem; }
html[data-theme] :is(.sf-modal-heading-icon,.sf-workspace-modal-icon,.sf-template-modal-icon,.cfc-import-icon) {
    flex: 0 0 2.5rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    border: 1px solid color-mix(in srgb,var(--sf-dialog-text) 55%,var(--sf-dialog-surface)) !important;
    border-radius: .75rem;
    background: var(--sf-dialog-soft) !important;
    color: var(--sf-theme-accent) !important;
    box-shadow: none !important;
}
html[data-theme] :is(.sf-modal-heading-icon,.sf-workspace-modal-icon,.sf-template-modal-icon,.cfc-import-icon) svg { width: 1.25rem; height: 1.25rem; }
html[data-theme] :is(.sf-modal-title,.sf-workspace-modal-dialog>header h2,.sf-template-modal-dialog>header strong,.cfc-import-heading h2,.sf-login-modal-title,.sf-sweet-alert-title,.sf-confirm-modal h2,.sf-dashboard-tour-card h2,#pricing-registration-title) {
    color: var(--sf-dialog-text) !important;
    font-size: 1.25rem !important;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}
html[data-theme] :is(.sf-modal-eyebrow,[data-workspace-modal-kicker],.sf-template-modal-dialog>header small,.sf-login-modal-eyebrow,.sf-sweet-alert-eyebrow) {
    color: var(--sf-dialog-muted) !important;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
}
html[data-theme] body :is(.sf-modal-panel>.sf-modal-body,.sf-workspace-modal-dialog>.sf-workspace-modal-content,.sf-login-modal-form,.cfc-import-body) {
    background: var(--sf-dialog-surface) !important;
    color: var(--sf-dialog-text);
    scrollbar-color: var(--sf-dialog-border) transparent;
}
html[data-theme] :is(.sf-modal-body,.sf-workspace-modal-content,.cfc-import-body) { padding: var(--sf-dialog-padding); }
/* Composers and the calendar planner own their internal spacing. */
html[data-theme] :is(.sf-workspace-modal-dialog,.sf-modal-panel):has(.sf-crm-compose) :is(.sf-workspace-modal-content,.sf-modal-body),
html[data-theme] .sf-modal-panel:has(.cfp) .sf-modal-body { padding: 0; }
html[data-theme] :is(.sf-profile-photo-description,.sf-profile-photo-copy span,.sf-modal-error p,.sf-confirm-modal p,.sf-login-modal-lead,.sf-login-create,.sf-sweet-alert-message,.cfc-import-heading p) { color: var(--sf-dialog-muted); }
html[data-theme] :is(.sf-modal-body label,.sf-modal-error strong) { color: var(--sf-dialog-text); }

/* Fetched dialogs live outside the page shell, so its utility colour adapters
   do not reach descriptions, tax labels and other secondary modal text. */
html[data-theme] :is(.sf-modal-body,.sf-workspace-modal-content,.cfc-import-body) :is(.text-slate-400,.text-slate-500,.text-slate-600) { color: var(--sf-dialog-muted); }
html[data-theme] :is(.sf-modal-body,.sf-workspace-modal-content,.cfc-import-body) :is(.text-slate-700,.text-slate-800,.text-slate-900,.text-slate-950) { color: var(--sf-dialog-text); }

/* Every close control uses the same quiet surface and 44px target. */
html[data-theme] :is(.sf-modal-close,.sf-workspace-modal-dialog>header>[data-workspace-modal-close],.sf-template-modal-dialog>header>button,.sf-login-modal-close,.sf-sweet-alert-close,.cfc-import-heading>[data-cfc-close-import],[data-tour-close],.pricing-registration-dialog [data-pricing-registration-close]) {
    display: grid;
    place-items: center;
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0 !important;
    border: 1px solid var(--sf-button-border,color-mix(in srgb,var(--sf-dialog-text) 55%,var(--sf-dialog-surface))) !important;
    border-radius: .625rem !important;
    background: var(--sf-button-bg,var(--sf-dialog-soft)) !important;
    color: var(--sf-dialog-text) !important;
    box-shadow: none !important;
    transform: none;
}
html[data-theme] :is(.sf-modal-close,.sf-workspace-modal-dialog>header>[data-workspace-modal-close],.sf-template-modal-dialog>header>button,.sf-login-modal-close,.sf-sweet-alert-close,.cfc-import-heading>[data-cfc-close-import],[data-tour-close],.pricing-registration-dialog [data-pricing-registration-close]):hover { background: var(--sf-theme-hover) !important; transform: none; }
html[data-theme] .sf-modal-close:hover svg { transform: none; }
html[data-theme] :is(.sf-modal-close,.sf-workspace-modal-dialog>header>[data-workspace-modal-close],.sf-template-modal-dialog>header>button,.sf-login-modal-close,.sf-sweet-alert-close,.cfc-import-heading>[data-cfc-close-import],[data-tour-close],.pricing-registration-dialog [data-pricing-registration-close]):focus-visible { outline: 2px solid var(--sf-theme-accent); outline-offset: 2px; }

/* No line separators inside the shared modal chrome. */
html[data-theme] :is(.sf-modal-actions,.sf-template-modal-dialog>footer,.sf-dashboard-tour-card>footer,.sf-command-searchbar,.sf-command-center>section>footer,.cfc-import-footer,.sf-sweet-alert-actions) { border: 0; }
html[data-theme] :is(.sf-template-modal-dialog>footer,.cfc-import-footer) { background: var(--sf-dialog-surface); }
html[data-theme] .sf-command-searchbar { background: var(--sf-dialog-surface) !important; color: var(--sf-dialog-text); }
html[data-theme] :is(.sf-command-center>section>footer,.sf-template-preview-stage) { background: var(--sf-dialog-soft) !important; color: var(--sf-dialog-muted); }
html[data-theme] :is(.sf-confirm-modal>section,.sf-dashboard-tour-card,.swal2-popup.sf-sweet-alert) { padding: var(--sf-dialog-padding); }
html[data-theme] .swal2-popup.sf-sweet-alert {
    --sf-alert-surface: var(--sf-dialog-surface);
    --sf-alert-text: var(--sf-dialog-text);
    --sf-alert-muted: var(--sf-dialog-muted);
    --sf-alert-line: var(--sf-dialog-border);
    --sf-alert-soft: var(--sf-dialog-soft);
}
html[data-theme] :is(.sf-confirm-icon,.sf-sweet-alert .sf-sweet-alert-icon) {
    background: var(--sf-dialog-soft);
    border-color: transparent;
    color: var(--sf-ui-warning);
    box-shadow: none;
}
html[data-theme] .sf-sweet-alert-actions button { border-radius: .625rem; box-shadow: none; transform: none; }
html[data-theme] .sf-sweet-alert-actions .sf-sweet-alert-confirm { background: var(--sf-ui-danger); border-color: transparent; }
html[data-theme] .sf-sweet-alert-actions .sf-sweet-alert-confirm:hover { background: color-mix(in srgb,var(--sf-ui-danger) 85%,#000); }
html[data-theme] .sf-sweet-alert-actions button:focus-visible { outline-color: var(--sf-theme-accent); }

/* The photo uploader has one drop target, rather than two nested dashed boxes. */
html[data-theme] .sf-profile-photo-dialog .sf-profile-photo-stage {
    gap: 1rem;
    padding: 1.5rem 1rem;
    background: var(--sf-dialog-soft);
    border: 1px dashed var(--sf-theme-control-border);
    border-radius: .875rem;
}
html[data-theme] .sf-profile-photo-dialog .sf-profile-photo-preview {
    padding: 0;
    border: 0;
    border-radius: 1rem;
    background: transparent !important;
    box-shadow: none;
    transform: none;
}
html[data-theme] .sf-profile-photo-dialog .sf-user-avatar.is-preview { width: 6rem; height: 6rem; border: 0; border-radius: 1rem; box-shadow: none; font-size: 2rem; }
html[data-theme] .sf-profile-photo-dialog .sf-profile-photo-camera { width: 2rem; height: 2rem; border: 2px solid var(--sf-dialog-soft); background: var(--sf-theme-action); border-radius: .625rem; box-shadow: none; bottom: -.25rem; right: -.25rem; }
html[data-theme] .sf-profile-photo-dialog .sf-profile-photo-copy { margin: 0; gap: .25rem; max-width: 24rem; line-height: 1.5; }
html[data-theme] .sf-profile-photo-dialog .sf-profile-photo-copy strong { color: var(--sf-dialog-text); font-weight: 600; }
html[data-theme] .sf-profile-photo-dialog .sf-profile-photo-stage:is(:hover,.is-dragging) { border-color: var(--sf-theme-accent); background: var(--sf-theme-hover); }
html[data-theme] .sf-profile-photo-dialog .sf-profile-photo-stage:focus-visible { outline: 2px solid var(--sf-theme-accent); outline-offset: 3px; }

/* Older audited forms use explicit blue values; bridge them to the same palette. */
html[data-theme] body .sf-modal-form-audited :is(label,.sf-modal-field) { color: var(--sf-dialog-text) !important; }
html[data-theme] body .sf-modal-form-audited :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not(.sf-phone-number),select,textarea:not(.sf-rich-source)) {
    color: var(--sf-dialog-text) !important;
    background: var(--sf-dialog-soft) !important;
    border-color: var(--sf-theme-control-border) !important;
    box-shadow: none !important;
}
html[data-theme] body .sf-modal-form-audited :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]):not(.sf-phone-number),select,textarea):is(:hover,:focus) {
    background: var(--sf-dialog-surface) !important;
    border-color: var(--sf-theme-accent) !important;
}
html[data-theme] body .sf-modal-form-audited :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]):not(.sf-phone-number),select,textarea):focus { box-shadow: 0 0 0 3px color-mix(in srgb,var(--sf-theme-accent) 18%,transparent) !important; }
html[data-theme] body .sf-modal-form-audited :is(input,textarea)::placeholder { color: var(--sf-theme-subtle) !important; }
/* Generated labels sit above each line-item field, so the row remove button
   aligns with the inputs instead of spanning label and input together. */
html[data-theme] body .line-row > .remove-line { align-self: end; width: var(--sf-ui-control-height, 2.75rem); height: var(--sf-ui-control-height, 2.75rem); min-height: 0; padding: 0; line-height: 1; }
html[data-theme] body .sf-modal-form-audited :is(input[type=checkbox],input[type=radio]) { accent-color: var(--sf-theme-accent); }
html[data-theme] body .sf-modal-form-audited .sf-audited-field.is-invalid :is(input,select,textarea),
html[data-theme] body .sf-modal-form-audited :is(input,select,textarea)[aria-invalid=true] { border-color: var(--sf-ui-danger) !important; box-shadow: 0 0 0 3px color-mix(in srgb,var(--sf-ui-danger) 18%,transparent) !important; }

@media (max-width:40rem) {
    :root { --sf-dialog-padding: 1rem; --sf-dialog-header-padding: 1rem; }
    html[data-theme] .sf-modal-heading { align-items: flex-start; }
    html[data-theme] .sf-profile-photo-dialog .sf-profile-photo-stage { padding: 1.25rem .75rem; }
}
@media (prefers-reduced-motion:reduce) {
    html[data-theme] :is(.sf-modal-panel,.sf-workspace-modal-dialog,.sf-login-modal-panel,.swal2-popup.sf-sweet-alert) *,
    html[data-theme] :is(.sf-modal-panel,.sf-workspace-modal-dialog,.sf-login-modal-panel,.swal2-popup.sf-sweet-alert) { animation: none !important; transition: none !important; }
}