<?php
/**
 * Invoice Wizard Modal
 * Multi-step wizard for creating invoices from time entries and/or project services
 *
 * @package Freelance_Studio
 */

if (!defined('ABSPATH')) exit;
?>

<div id="fs-invoice-wizard-modal" class="fs-modal">
    <div class="fs-modal-content fs-modal-large">
        <div class="fs-modal-header">
            <h2><?php esc_html_e('Create Invoice', 'freelance-studio'); ?></h2>
            <button type="button" class="fs-modal-close">&times;</button>
        </div>
        
        <div class="fs-modal-body">
            <!-- Step Indicator -->
            <div class="fs-wizard-steps">
                <div class="fs-wizard-step active" data-step="1">
                    <span class="fs-step-number">1</span>
                    <span class="fs-step-label"><?php esc_html_e('Select Type', 'freelance-studio'); ?></span>
                </div>
                <div class="fs-wizard-step" data-step="2">
                    <span class="fs-step-number">2</span>
                    <span class="fs-step-label"><?php esc_html_e('Select Items', 'freelance-studio'); ?></span>
                </div>
                <div class="fs-wizard-step" data-step="3">
                    <span class="fs-step-number">3</span>
                    <span class="fs-step-label"><?php esc_html_e('Review', 'freelance-studio'); ?></span>
                </div>
            </div>
            
            <!-- Step 1: Select Invoice Type -->
            <div class="fs-wizard-panel" data-step="1">
                <h3><?php esc_html_e('What would you like to invoice?', 'freelance-studio'); ?></h3>
                
                <div class="fs-invoice-type-options">
                    <label class="fs-type-option">
                        <input type="radio" name="invoice_type" value="time_entries">
                        <div class="fs-type-card">
                            <span class="dashicons dashicons-clock"></span>
                            <strong><?php esc_html_e('Bill Time Entries', 'freelance-studio'); ?></strong>
                            <p><?php esc_html_e('Create invoice from tracked time', 'freelance-studio'); ?></p>
                        </div>
                    </label>
                    
                    <label class="fs-type-option">
                        <input type="radio" name="invoice_type" value="project_services">
                        <div class="fs-type-card">
                            <span class="dashicons dashicons-portfolio"></span>
                            <strong><?php esc_html_e('Bill Project Services', 'freelance-studio'); ?></strong>
                            <p><?php esc_html_e('Invoice flat fees, milestones, or deposits', 'freelance-studio'); ?></p>
                        </div>
                    </label>
                    
                    <label class="fs-type-option">
                        <input type="radio" name="invoice_type" value="combined" checked>
                        <div class="fs-type-card">
                            <span class="dashicons dashicons-category"></span>
                            <strong><?php esc_html_e('Combined Invoice', 'freelance-studio'); ?></strong>
                            <p><?php esc_html_e('Include both time and services', 'freelance-studio'); ?></p>
                        </div>
                    </label>
                </div>
                
                <div class="fs-form-group" style="margin-top: 20px;">
                    <label><?php esc_html_e('Filter by Client', 'freelance-studio'); ?></label>
                    <select id="fs-wizard-client-filter" class="fs-select">
                        <option value=""><?php esc_html_e('All Clients', 'freelance-studio'); ?></option>
                        <!-- Populated via JavaScript -->
                    </select>
                </div>
                
                <div class="fs-form-group" style="margin-top: 16px;">
                    <label><?php esc_html_e('Select Project(s)', 'freelance-studio'); ?></label>
                    <div id="fs-wizard-project-list" class="fs-checkbox-list">
                        <!-- Populated via JavaScript -->
                        <p class="fs-loading"><?php esc_html_e('Loading projects...', 'freelance-studio'); ?></p>
                    </div>
                </div>
            </div>
            
            <!-- Step 2: Select Items -->
            <div class="fs-wizard-panel" data-step="2" style="display: none;">
                <div class="fs-wizard-step2-layout">
                    <!-- Left Column: Item Selection -->
                    <div class="fs-wizard-items-column">
                        <!-- Time Entries Section -->
                        <div id="fs-wizard-time-section" class="fs-wizard-section">
                            <h3><?php esc_html_e('Time Entries', 'freelance-studio'); ?></h3>
                            
                            <div class="fs-form-row">
                                <div class="fs-form-group">
                                    <label><?php esc_html_e('Group entries by', 'freelance-studio'); ?></label>
                                    <select id="fs-time-grouping">
                                        <option value="activity"><?php esc_html_e('Activity Type', 'freelance-studio'); ?></option>
                                        <option value="task"><?php esc_html_e('Task', 'freelance-studio'); ?></option>
                                        <option value="date"><?php esc_html_e('Date', 'freelance-studio'); ?></option>
                                        <option value="entry"><?php esc_html_e('Individual Entry', 'freelance-studio'); ?></option>
                                        <option value="project"><?php esc_html_e('Project Total', 'freelance-studio'); ?></option>
                                    </select>
                                </div>
                            </div>
                            
                            <!-- Grouping options for Activity -->
                            <div id="fs-grouping-options-activity" class="fs-grouping-options-row">
                                <label class="fs-checkbox-label">
                                    <input type="checkbox" id="fs-show-activity-dates">
                                    <?php esc_html_e('Show Dates', 'freelance-studio'); ?>
                                </label>
                                <label class="fs-checkbox-label">
                                    <input type="checkbox" id="fs-show-activity-descriptions">
                                    <?php esc_html_e('Show Descriptions', 'freelance-studio'); ?>
                                </label>
                            </div>
                            
                            <!-- Grouping options for Task -->
                            <div id="fs-grouping-options-task" class="fs-grouping-options-row" style="display: none;">
                                <label class="fs-checkbox-label">
                                    <input type="checkbox" id="fs-show-task-dates">
                                    <?php esc_html_e('Show Dates', 'freelance-studio'); ?>
                                </label>
                                <label class="fs-checkbox-label">
                                    <input type="checkbox" id="fs-show-task-descriptions">
                                    <?php esc_html_e('Show Descriptions', 'freelance-studio'); ?>
                                </label>
                            </div>
                            
                            <!-- Grouping options for Date -->
                            <div id="fs-grouping-options-date" class="fs-grouping-options-row" style="display: none;">
                                <label class="fs-checkbox-label">
                                    <input type="checkbox" id="fs-show-date-activity" checked>
                                    <?php esc_html_e('Show Activity', 'freelance-studio'); ?>
                                </label>
                                <label class="fs-checkbox-label">
                                    <input type="checkbox" id="fs-show-date-task">
                                    <?php esc_html_e('Show Task', 'freelance-studio'); ?>
                                </label>
                                <label class="fs-checkbox-label">
                                    <input type="checkbox" id="fs-show-date-descriptions">
                                    <?php esc_html_e('Show Descriptions', 'freelance-studio'); ?>
                                </label>
                            </div>
                            
                            <!-- No tasks warning (shown when Task grouping selected but project has no tasks) -->
                            <div id="fs-no-tasks-warning" class="fs-wizard-notice fs-notice-info" style="display: none;">
                                <span class="dashicons dashicons-info"></span>
                                <span><?php esc_html_e('This project has no tasks defined. All time entries will be grouped under "General Work".', 'freelance-studio'); ?></span>
                            </div>
                            
                            <div id="fs-wizard-time-entries-container">
                                <!-- Populated per project -->
                            </div>
                        </div>
                        
                        <!-- Services Section -->
                        <div id="fs-wizard-services-section" class="fs-wizard-section">
                            <h3><?php esc_html_e('Project Services', 'freelance-studio'); ?></h3>
                            <p class="fs-section-desc"><?php esc_html_e('Select services to include and choose billing options for each.', 'freelance-studio'); ?></p>
                            
                            <div id="fs-wizard-services-container">
                                <!-- Populated per project with individual service checkboxes -->
                            </div>
                        </div>
                    </div>
                    
                    <!-- Right Column: Live Preview -->
                    <div class="fs-wizard-preview-column">
                        <div class="fs-wizard-live-preview">
                            <div class="fs-live-preview-header">
                                <span class="dashicons dashicons-visibility"></span>
                                <h4><?php esc_html_e('Invoice Preview', 'freelance-studio'); ?></h4>
                            </div>
                            <p class="fs-live-preview-desc"><?php esc_html_e('This shows how line items will appear on your invoice based on your grouping selection.', 'freelance-studio'); ?></p>
                            <div id="fs-wizard-live-preview-content">
                                <p class="fs-no-items"><?php esc_html_e('Select items to see preview', 'freelance-studio'); ?></p>
                            </div>
                            <div class="fs-live-preview-total">
                                <span><?php esc_html_e('Estimated Total', 'freelance-studio'); ?></span>
                                <span id="fs-live-preview-total-amount">$0.00</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Step 3: Review -->
            <div class="fs-wizard-panel" data-step="3" style="display: none;">
                <h3><?php esc_html_e('Review Invoice', 'freelance-studio'); ?></h3>
                
                <div id="fs-wizard-preview" class="fs-invoice-preview-mini">
                    <!-- Populated via JavaScript -->
                </div>
                
                <div class="fs-form-row" style="margin-top: 20px;">
                    <div class="fs-form-group">
                        <label><?php esc_html_e('Due Date', 'freelance-studio'); ?></label>
                        <input type="date" id="fs-wizard-due-date">
                    </div>
                    
                    <div class="fs-form-group">
                        <label><?php esc_html_e('Notes (optional)', 'freelance-studio'); ?></label>
                        <textarea id="fs-wizard-notes" rows="2"></textarea>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="fs-modal-footer">
            <button type="button" id="fs-wizard-prev" class="fs-btn fs-btn-secondary fs-wizard-prev" style="display: none;">
                <?php esc_html_e('← Back', 'freelance-studio'); ?>
            </button>
            <div class="fs-wizard-summary">
                <span id="fs-wizard-total-label"></span>
            </div>
            <button type="button" id="fs-wizard-next" class="fs-btn fs-btn-primary fs-wizard-next">
                <?php esc_html_e('Next →', 'freelance-studio'); ?>
            </button>
            <button type="button" id="fs-wizard-create" class="fs-btn fs-btn-primary fs-wizard-create" style="display: none;">
                <?php esc_html_e('Create Invoice', 'freelance-studio'); ?>
            </button>
        </div>
    </div>
</div>

<style>
/* Invoice Wizard Styles */
.fs-wizard-steps {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--fs-gray-200, #e5e7eb);
}

.fs-wizard-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    color: var(--fs-gray-400, #9ca3af);
}

.fs-wizard-step.active {
    color: var(--fs-primary, #3ECFB2);
}

.fs-wizard-step.completed {
    color: var(--fs-primary-dark, #2BA891);
}

.fs-step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--fs-gray-200, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
}

.fs-wizard-step.active .fs-step-number {
    background: var(--fs-primary, #3ECFB2);
    color: #fff;
}

.fs-wizard-step.completed .fs-step-number {
    background: var(--fs-primary-dark, #2BA891);
    color: #fff;
}

.fs-step-label {
    font-size: 13px;
    font-weight: 500;
}

/* Invoice Type Options */
.fs-invoice-type-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.fs-type-option {
    cursor: pointer;
}

.fs-type-option input {
    display: none;
}

.fs-type-card {
    padding: 20px;
    border: 2px solid var(--fs-gray-200, #e5e7eb);
    border-radius: 12px;
    text-align: center;
    transition: all 0.2s;
}

.fs-type-card:hover {
    border-color: var(--fs-primary-light, #77d5c9);
    background: var(--fs-primary-xtralight, #e0f7f3);
}

.fs-type-option input:checked + .fs-type-card {
    border-color: var(--fs-primary, #3ECFB2);
    background: var(--fs-primary-xtralight, #e0f7f3);
}

.fs-type-card .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    color: var(--fs-primary, #3ECFB2);
    margin-bottom: 10px;
}

.fs-type-card strong {
    display: block;
    margin-bottom: 5px;
    color: var(--fs-gray-800, #1f2937);
}

.fs-type-card p {
    margin: 0;
    font-size: 12px;
    color: var(--fs-gray-500, #6b7280);
}

/* Project List */
.fs-checkbox-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--fs-gray-200, #e5e7eb);
    border-radius: 8px;
    padding: 10px;
}

.fs-checkbox-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.fs-checkbox-list label:hover {
    background: var(--fs-gray-100, #f5f7fa);
}

.fs-checkbox-list .fs-project-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fs-checkbox-list .fs-project-name {
    font-weight: 500;
}

.fs-checkbox-list .fs-project-meta {
    font-size: 12px;
    color: var(--fs-gray-500, #6b7280);
}

/* Wizard Sections */
.fs-wizard-section {
    margin-bottom: 25px;
    padding: 15px;
    background: var(--fs-gray-50, #f9fafb);
    border-radius: 8px;
}

.fs-wizard-section h3 {
    margin: 0 0 15px 0;
    font-size: 15px;
    color: var(--fs-gray-700, #374151);
}

/* Time Entry List */
.fs-time-entry-list {
    max-height: 250px;
    overflow-y: auto;
}

.fs-time-entry-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--fs-gray-200, #e5e7eb);
}

.fs-time-entry-item:last-child {
    border-bottom: none;
}

.fs-time-entry-item .fs-entry-info {
    flex: 1;
}

.fs-time-entry-item .fs-entry-date {
    font-size: 11px;
    color: var(--fs-gray-500, #6b7280);
}

.fs-time-entry-item .fs-entry-desc {
    font-size: 13px;
}

.fs-time-entry-item .fs-entry-amount {
    font-weight: 500;
    color: var(--fs-gray-800, #1f2937);
}

/* Service List */
.fs-service-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid var(--fs-gray-200, #e5e7eb);
}

.fs-service-list label:last-child {
    border-bottom: none;
}

.fs-service-list .fs-service-info {
    flex: 1;
}

.fs-service-list .fs-service-amount {
    font-weight: 500;
}

/* Preview */
.fs-invoice-preview-mini {
    background: #fff;
    border: 1px solid var(--fs-gray-200, #e5e7eb);
    border-radius: 8px;
    padding: 20px;
    max-height: 300px;
    overflow-y: auto;
}

.fs-preview-project {
    margin-bottom: 20px;
}

.fs-preview-project:last-child {
    margin-bottom: 0;
}

.fs-preview-project-header {
    font-weight: 600;
    color: var(--fs-gray-800, #1f2937);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--fs-primary, #3ECFB2);
    margin-bottom: 10px;
}

.fs-preview-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
}

.fs-preview-item-desc {
    color: var(--fs-gray-700, #374151);
}

.fs-preview-item-amount {
    font-weight: 500;
}

.fs-preview-subtotal {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-top: 1px solid var(--fs-gray-200, #e5e7eb);
    margin-top: 8px;
    font-weight: 500;
}

.fs-preview-total {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-top: 2px solid var(--fs-gray-300, #d1d5db);
    margin-top: 15px;
    font-size: 16px;
    font-weight: 600;
    color: var(--fs-gray-800, #1f2937);
}

/* Modal Footer */
.fs-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-top: 1px solid var(--fs-gray-200, #e5e7eb);
    background: var(--fs-gray-50, #f9fafb);
}

.fs-wizard-summary {
    flex: 1;
    text-align: center;
    font-weight: 500;
    color: var(--fs-primary-dark, #2BA891);
}

/* Input styling */
.fs-input-prefix,
.fs-input-suffix {
    display: flex;
    align-items: center;
}

.fs-input-prefix span,
.fs-input-suffix span {
    padding: 8px 12px;
    background: var(--fs-gray-100, #f3f4f6);
    border: 1px solid var(--fs-gray-300, #d1d5db);
    color: var(--fs-gray-600, #4b5563);
}

.fs-input-prefix span {
    border-right: none;
    border-radius: 6px 0 0 6px;
}

.fs-input-suffix span {
    border-left: none;
    border-radius: 0 6px 6px 0;
}

.fs-input-prefix input,
.fs-input-suffix input {
    border-radius: 0 6px 6px 0;
    flex: 1;
}

.fs-input-suffix input {
    border-radius: 6px 0 0 6px;
}

/* Wizard Sections */
.fs-wizard-section {
    background: var(--fs-gray-50, #f9fafb);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.fs-wizard-section h3 {
    margin: 0 0 8px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--fs-gray-800, #1f2937);
}

.fs-section-desc {
    color: var(--fs-gray-500, #6b7280);
    font-size: 13px;
    margin: 0 0 15px 0;
}

/* Project header with Select All button */
.fs-project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: var(--fs-gray-100, #f3f4f6);
    border-radius: 6px;
    margin-bottom: 10px;
}

.fs-project-header strong {
    font-size: 14px;
    color: var(--fs-gray-800, #1f2937);
}

/* Checkbox items for time entries and services */
.fs-checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 15px;
    background: #fff;
    border: 1px solid var(--fs-gray-200, #e5e7eb);
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.fs-checkbox-item:hover {
    border-color: var(--fs-primary-light, #77d5c9);
}

.fs-checkbox-item input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}

.fs-checkbox-item input[type="checkbox"]:checked + .fs-service-info,
.fs-checkbox-item input[type="checkbox"]:checked + .fs-entry-info {
    color: var(--fs-primary-dark, #2BA891);
}

/* Service info styling */
.fs-service-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fs-service-info .fs-service-name {
    font-size: 14px;
    color: var(--fs-gray-700, #374151);
}

.fs-service-info .fs-service-amount {
    font-weight: 600;
    color: var(--fs-gray-800, #1f2937);
}

/* Per-service billing options */
.fs-billing-options {
    background: var(--fs-gray-50, #f9fafb);
    padding: 10px;
    border-radius: 6px;
    margin-top: 8px;
}

.fs-billing-options select {
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--fs-gray-300, #d1d5db);
    border-radius: 4px;
}

.fs-project-services,
.fs-project-time-entries {
    margin-bottom: 15px;
}

.fs-entry-list,
.fs-service-list {
    display: flex;
    flex-direction: column;
}

.fs-entry-info {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.fs-entry-date {
    font-size: 12px;
    color: var(--fs-gray-500, #6b7280);
    min-width: 80px;
}

.fs-entry-desc {
    flex: 1;
    font-size: 13px;
    color: var(--fs-gray-700, #374151);
}

.fs-entry-hours {
    font-size: 13px;
    font-weight: 500;
    color: var(--fs-gray-800, #1f2937);
    white-space: nowrap;
}

.fs-no-items {
    text-align: center;
    color: var(--fs-gray-500, #6b7280);
    padding: 20px;
    font-style: italic;
}

/* Step 2 Two-Column Layout */
.fs-wizard-step2-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}

.fs-wizard-items-column {
    min-width: 0;
}

.fs-wizard-preview-column {
    position: sticky;
    top: 20px;
}

/* Live Preview Panel */
.fs-wizard-live-preview {
    background: linear-gradient(180deg, var(--fs-primary-xtralight, #e0f7f3) 0%, #fff 100%);
    border: 1px solid var(--fs-primary-light, #77d5c9);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(62, 207, 178, 0.1);
}

.fs-live-preview-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.fs-live-preview-header .dashicons {
    color: var(--fs-primary, #3ECFB2);
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.fs-live-preview-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--fs-gray-800, #1f2937);
}

.fs-live-preview-desc {
    font-size: 12px;
    color: var(--fs-gray-500, #6b7280);
    margin: 0 0 16px 0;
    line-height: 1.4;
}

#fs-wizard-live-preview-content {
    background: #fff;
    border: 1px solid var(--fs-gray-200, #e5e7eb);
    border-radius: 8px;
    padding: 12px;
    max-height: 350px;
    overflow-y: auto;
    margin-bottom: 16px;
}

/* Live Preview Items */
.fs-live-preview-project {
    margin-bottom: 16px;
}

.fs-live-preview-project:last-child {
    margin-bottom: 0;
}

.fs-live-preview-project-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--fs-primary-dark, #2BA891);
    padding-bottom: 6px;
    border-bottom: 2px solid var(--fs-primary, #3ECFB2);
    margin-bottom: 8px;
}

.fs-live-preview-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6px 0;
    font-size: 12px;
    border-bottom: 1px dashed var(--fs-gray-200, #e5e7eb);
}

.fs-live-preview-item:last-child {
    border-bottom: none;
}

.fs-live-preview-item-desc {
    flex: 1;
    color: var(--fs-gray-700, #374151);
    padding-right: 12px;
    line-height: 1.4;
}

.fs-live-preview-item-date {
    display: block;
    font-size: 10px;
    color: var(--fs-gray-500, #6b7280);
    margin-top: 2px;
}

.fs-live-preview-item-amount {
    font-weight: 600;
    color: var(--fs-gray-800, #1f2937);
    white-space: nowrap;
}

.fs-live-preview-subtotal {
    display: flex;
    justify-content: space-between;
    padding: 8px 0 4px 0;
    margin-top: 4px;
    border-top: 1px solid var(--fs-gray-200, #e5e7eb);
    font-size: 12px;
    font-weight: 500;
    color: var(--fs-gray-600, #4b5563);
}

.fs-live-preview-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: linear-gradient(135deg, var(--fs-primary, #3ECFB2) 0%, var(--fs-primary-dark, #2BA891) 100%);
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
}

.fs-live-preview-total span:first-child {
    font-size: 13px;
}

#fs-live-preview-total-amount {
    font-size: 18px;
}

/* Grouping indicator */
.fs-grouping-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--fs-gray-500, #6b7280);
    background: var(--fs-gray-100, #f3f4f6);
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.fs-grouping-indicator strong {
    color: var(--fs-primary-dark, #2BA891);
}

/* Grouping options row */
.fs-grouping-options-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 12px 0 16px 0;
    padding: 12px 16px;
    background: var(--fs-gray-100, #f3f4f6);
    border-radius: 8px;
}

.fs-grouping-options-row .fs-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--fs-gray-700, #374151);
    cursor: pointer;
    margin: 0;
}

.fs-grouping-options-row .fs-checkbox-label input[type="checkbox"] {
    margin: 0;
}

/* Wizard notice styles */
.fs-wizard-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    margin: 12px 0;
    font-size: 13px;
    line-height: 1.5;
}

.fs-wizard-notice .dashicons {
    flex-shrink: 0;
    margin-top: 2px;
}

.fs-wizard-notice.fs-notice-info {
    background: var(--fs-secondary-light, #EDE9F5);
    color: var(--fs-secondary-dark, #5D4E80);
    border: 1px solid var(--fs-secondary, #81A5DF);
}

.fs-wizard-notice.fs-notice-info .dashicons {
    color: var(--fs-secondary, #81A5DF);
}

.fs-wizard-notice.fs-notice-warning {
    background: var(--fs-accent-light, #FFE0CE);
    color: #C65D45;
    border: 1px solid var(--fs-accent, #FFA26E);
}

.fs-wizard-notice.fs-notice-warning .dashicons {
    color: var(--fs-accent, #FFA26E);
}

/* Responsive */
@media (max-width: 900px) {
    .fs-wizard-step2-layout {
        grid-template-columns: 1fr;
    }
    
    .fs-wizard-preview-column {
        position: relative;
        top: 0;
        order: -1;
    }
    
    #fs-wizard-live-preview-content {
        max-height: 200px;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .fs-invoice-type-options {
        grid-template-columns: 1fr;
    }
    
    .fs-wizard-steps {
        flex-direction: column;
        gap: 10px;
    }
}
</style>
