/**
 * Crewed by Freelance Studio - Main Styles
 * Version: 7.12.37
 *
 * Single unified CSS file for both admin and frontend
 *
 * Color Palette (Modern UI):
 * - Primary Cobalt Blue: #379af6 (buttons, links, accents)
 * - Primary Dark: #2f68da (hover states, invoice titles)
 * - Secondary Vibrant Purple: #7B68EE (active states, accents)
 * - Coral: #FFA26E (CTAs, warnings, attention)
 * - Lime: #D2E767 (success, highlights)
 * - Soft backgrounds with clean whites
 */

:root {
    /* Primary Colors — Blue */
    --sfp-primary: #379af6;
    --sfp-primary-dark: #2f68da;
    --sfp-primary-light: #a0bcec;
    --sfp-primary-xtralight: #DBEAFE;

    /* Secondary Colors — Purple */
    --sfp-secondary: #7B68EE;
    --sfp-secondary-dark: #4A3B8F;
    --sfp-secondary-light: #EDEAFC;

    /* Accent Colors */
    --sfp-accent: #FFA26E;
    --sfp-accent-light: #FFE0CE;
    --sfp-highlight: #D2E767;
    --sfp-highlight-light: #EBF2C7;

    /* Semantic Colors */
    --sfp-success: #8bbad4;
    --sfp-warning: #FFA26E;
    --sfp-danger: #E85A5A;
    --sfp-info: #81A5DF;

    /* Gradients */
    --sfp-gradient-blue-purple: linear-gradient(90deg, #379af6 0%, #7B68EE 100%);
    --sfp-gradient-lime-deposit: linear-gradient(90deg, #D2E767 0%, #b0dd62 100%);
    --sfp-gradient-blue-deep: linear-gradient(90deg, #2f68da 0%, #4A3B8F 100%);
    --sfp-gradient-purple-coral: linear-gradient(90deg, #7B68EE 0%, #FFA26E 100%);
    --sfp-gradient-lime-cobalt: linear-gradient(90deg, #D2E767 0%, #379af6 100%);
    --sfp-gradient-orange: linear-gradient(135deg, #FFA26E 0%, #E57A5E 100%);
    --sfp-gradient-red: linear-gradient(135deg, #E85A5A 0%, #d04444 100%);

    /* Neutral Colors */
    --sfp-white: #ffffff;
    --sfp-gray-50: #FAFBFC;
    --sfp-gray-100: #F5F7FA;
    --sfp-gray-200: #EEF1F5;
    --sfp-gray-300: #E2E6EC;
    --sfp-gray-400: #C5CAD3;
    --sfp-gray-500: #9CA3AF;
    --sfp-gray-600: #6B7280;
    --sfp-gray-700: #4B5563;
    --sfp-gray-800: #374151;
    --sfp-gray-900: #1F2937;

    /* Background Colors */
    --sfp-bg-primary: #FAFBFC;
    --sfp-bg-secondary: #F5F7FA;
    --sfp-bg-card: #ffffff;
    --sfp-bg-card-hover: #FAFBFC;

    /* Text Colors */
    --sfp-text-primary: #1F2937;
    --sfp-text-secondary: #4B5563;
    --sfp-text-muted: #6B7280;

    /* Border Colors */
    --sfp-border-color: #EEF1F5;

    /* Layout */
    --sfp-border-radius: 8px;
    --sfp-border-radius-lg: 12px;
    --sfp-border-radius-xl: 16px;
    --sfp-shadow-sm: 0 1px 3px rgba(123, 104, 166, 0.06);
    --sfp-shadow: 0 2px 8px rgba(123, 104, 166, 0.08);
    --sfp-shadow-md: 0 4px 12px rgba(123, 104, 166, 0.12);
    --sfp-shadow-lg: 0 8px 24px rgba(123, 104, 166, 0.16);
}

.footer {
margin-top: 60px;
text-align: center;
color: var(--sfp-gray-600);
font-size: 12px;
border-top: 1px solid var(--sfp-gray-200);
padding-top: 20px;
}

/* Universal link reset for plugin */
[class*="sfp-"] a,
.sfp-frontend-dashboard a {
text-decoration: none;
}
[class*="sfp-"] a:hover,
.sfp-frontend-dashboard a:hover {
text-decoration: none;
}

/* ====================================================================== */
/* Buttons
/* ====================================================================== */

[class*="sfp-"] .button,
[class*="sfp-"] .button-primary,
[class*="sfp-"] .button-large,
.sfp-frontend-dashboard .button,
.sfp-frontend-dashboard .button-primary,
.sfp-frontend-dashboard .button-large {
display: inline-block;
text-decoration: none;
font-size: 14px;
line-height: 2.30769231;
min-height: 32px;
margin: 0;
padding: 0 12px;
cursor: pointer;
border: 1px solid var(--sfp-primary);
border-radius: var(--sfp-border-radius);
white-space: nowrap;
box-sizing: border-box;
}

[class*="sfp-"] .button-primary,
.sfp-frontend-dashboard .button-primary {
background: var(--sfp-primary);
border-color: var(--sfp-primary);
color: #fff;
text-shadow: none;
}

[class*="sfp-"] .button-primary:hover,
.sfp-frontend-dashboard .button-primary:hover {
background: var(--sfp-primary-dark);
border-color: var(--sfp-primary-dark);
color: #fff;
}

[class*="sfp-"] .button,
.sfp-frontend-dashboard .button {
background: #F5F7FA;
border-color: #4B5563;
color: #4B5563;
padding: 8px 16px;
border-radius: var(--sfp-border-radius);
font-size: 13px;
font-weight: 600;
transition: all 0.3s ease;
}

[class*="sfp-"] .button:hover,
.sfp-frontend-dashboard .button:hover {
background: var(--sfp-gray-300);
border-color: #4B5563;
color: #4B5563;
}

.sfp-clients-page .button-large,
.sfp-crewers-page .button-large,
.sfp-expenses-page .button-large,
.sfp-gigs-page .button-large,
.sfp-invoices-page .button-large {
padding: 12px 24px;
font-size: 16px;
min-height: 50px;
}

.button-small {
padding: 6px 12px;
font-size: 12px;
}
.button-link-delete {
color: #E85A5A;
border-color: #E85A5A;
}

.button-link-delete:hover {
background: #E85A5A;
color: #fff;
border-color: #E85A5A;
}

.sfp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
border: none;
border-radius: var(--sfp-border-radius);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}

.sfp-btn:hover {
transform: translateY(-1px);
}
.sfp-btn:active {
transform: translateY(0);
}

.sfp-btn-action {
color: var(--sfp-primary);
text-decoration: none;
font-size: 14px;
padding: 0 5px;
}
.sfp-btn-action:hover {
color: var(--sfp-primary-dark);
text-decoration: underline;
}

.sfp-btn-outline {
background: var(--sfp-white);
color: var(--sfp-gray-700);
border: 1px solid var(--sfp-gray-200);
box-shadow: var(--sfp-shadow-sm);
}
.sfp-btn-outline:hover {
background: var(--sfp-gray-50);
border-color: var(--sfp-gray-300);
}


.sfp-btn-primary {
background: linear-gradient(135deg, var(--sfp-primary) 0%, var(--sfp-primary-dark) 100%);
color: #fff;
}
.sfp-btn-primary:hover {
background: linear-gradient(135deg, var(--sfp-primary-dark) 0%, var(--sfp-primary-dark) 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(55, 154, 246, 0.3);
}

.sfp-btn-secondary {
background: #F5F7FA;
color: #4B5563;
border: 1px solid var(--sfp-gray-200);
color: var(--sfp-primary);
}
.sfp-btn-secondary:hover {
background: #E2E6EC;
border-color: #E2E6EC;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(123, 104, 166, 0.15);
}

.sfp-btn-small {
padding: 4px 12px !important;
font-size: 12px !important;
min-height: auto !important;
}
.sfp-btn-sm {
padding: 6px 12px;
font-size: 13px;
}

.sfp-btn-back {
text-decoration: none;
color: var(--sfp-primary);
}
.sfp-btn-back:hover {
color: var(--sfp-primary-dark);
}

.sfp-btn-large {
padding: 18px 40px;
font-size: 18px;
min-height: 60px;
font-weight: 700;
}
.sfp-btn-icon {
font-size: 18px;
}

.sfp-btn-danger {
background: #E85A5A;
border-color: #E85A5A;
color: #fff;
width: 36px;
height: 36px;
padding: 0;
font-size: 18px;
font-weight: bold;
}
.sfp-btn-danger:hover {
background: #d04444;
border-color: #d04444;
transform: scale(1.1);
}

.sfp-preset-btn {
padding: 4px 10px;
background: #fff;
border: 1px solid var(--sfp-gray-200);
border-radius: var(--sfp-border-radius);
font-size: 11px;
font-weight: 500;
color: #4B5563;
cursor: pointer;
transition: all 0.3s ease;
}
.sfp-preset-btn:hover {
background: #E2E6EC;
border-color: #E2E6EC;
}
.sfp-preset-btn.active {
background: var(--sfp-primary);
border-color: var(--sfp-primary);
color: #fff;
}


/* ====================================================================== */
/* Historical Data Entry
/* ====================================================================== */

.sports-freelancing-historical-data {
max-width: 1400px;
}
.historical-data-tools {
background: #fff;
border: 1px solid var(--sfp-gray-200);
padding: 20px;
margin: 20px 0;
border-radius: var(--sfp-border-radius);
}
.tool-buttons {
margin: 15px 0;
}
.tool-buttons .button {
margin-right: 10px;
}
.historical-data-tabs {
margin: 30px 0 0 0;
}
.year-data-panel {
display: none;
background: #fff;
border: 1px solid var(--sfp-gray-200);
border-top: none;
padding: 20px;
}
.year-data-panel.active {
display: block;
}
.year-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid var(--sfp-gray-200);
}
.year-header h3 {
margin: 0;
}
.year-actions .button {
margin-left: 10px;
}
.historical-data-form table {
margin: 20px 0;
}
.historical-data-form input[type="number"] {
width: 100%;
max-width: 120px;
}
.year-totals {
background: #F5F7FA;
font-weight: bold;
}
.year-totals th {
padding: 12px 10px;
}
.form-actions {
display: flex;
align-items: center;
gap: 15px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #E2E6EC;
}
.save-status {
font-weight: 500;
}
.save-status.success {
color: var(--sfp-primary);
}
.save-status.error {
color: #E85A5A;
}
.historical-data-help {
background: var(--sfp-primary-xtralight);
border: 1px solid var(--sfp-primary-light);
padding: 20px;
margin: 30px 0;
border-radius: var(--sfp-border-radius);
}
.historical-data-help h3 {
margin-top: 0;
color: var(--sfp-primary);
}
.historical-data-help ul {
margin: 10px 0;
padding-left: 25px;
}
.historical-data-help li {
margin: 8px 0;
line-height: 1.6;
}

/* ====================================================================== */
/* Settings Page
/* ====================================================================== */

#sfp-settings-form {
background: #fff;
padding: 20px;
border-radius: var(--sfp-border-radius);
box-shadow: var(--sfp-shadow-sm);
}

/* ====================================================================== */
/* Dashboard
/* ====================================================================== */

.sfp-dashboard-wrap {
max-width: 99%;
margin: 20px 0;
}
.sfp-dashboard-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 40px;
gap: 20px;
}
.sfp-dashboard-title {
font-size: 32px;
font-weight: 700;
color: #374151;
margin: 0 0 10px 0;
}
.sfp-dashboard-subtitle {
font-size: 16px;
color: #6B7280;
margin: 0;
}

/* Stats Grid */
.sfp-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
.sfp-stat-card {
background: #fff;
border-radius: var(--sfp-border-radius-lg);
padding: 30px;
box-shadow: var(--sfp-shadow-md);
display: flex;
align-items: center;
gap: 20px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.sfp-stat-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(123, 104, 166, 0.12);
}

/* Gradient top border for stat cards */
.sfp-stat-card[class*="sfp-stat-grad-"]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
border-radius: var(--sfp-border-radius-lg) var(--sfp-border-radius-lg) 0 0;
}
.sfp-stat-grad-blue-purple::before {
background: var(--sfp-gradient-blue-purple);
}
.sfp-stat-grad-blue-purple .sfp-stat-value {
color: var(--sfp-primary-dark);
}
.sfp-stat-grad-blue-deep::before {
background: var(--sfp-gradient-blue-deep);
}
.sfp-stat-grad-blue-deep .sfp-stat-value {
color: var(--sfp-secondary-dark);
}
.sfp-stat-grad-lime-cobalt::before {
background: var(--sfp-gradient-lime-cobalt);
}
.sfp-stat-grad-lime-cobalt .sfp-stat-value {
color: var(--sfp-primary);
}
.sfp-stat-grad-purple-coral::before {
background: var(--sfp-gradient-purple-coral);
}
.sfp-stat-grad-purple-coral .sfp-stat-value {
color: var(--sfp-secondary);
}
.sfp-stat-grad-orange::before {
background: var(--sfp-gradient-orange);
}
.sfp-stat-grad-orange .sfp-stat-value {
color: #E57A5E;
}
.sfp-stat-grad-red::before {
background: var(--sfp-gradient-red);
}
.sfp-stat-grad-red .sfp-stat-value {
color: var(--sfp-danger);
}
.sfp-stat-grad-lime-deposit::before {
background: var(--sfp-gradient-lime-deposit);
}
.sfp-stat-grad-lime-deposit .sfp-stat-value {
color: #5D8A1A;
}
.sfp-stat-value-green .sfp-stat-value {
color: #2BA891;
}

/* Custom colors for different stat cards */
.sfp-stat-revenue::before {
background: var(--sfp-gradient-blue-purple);
}
.sfp-stat-revenue .sfp-stat-icon {
background: var(--sfp-gradient-blue-purple);
}
.sfp-stat-outstanding::before {
background: linear-gradient(135deg, #FFA26E 0%, #E57A5E 100%);
}
.sfp-stat-outstanding .sfp-stat-icon {
background: linear-gradient(135deg, #FFA26E 0%, #E57A5E 100%);
}
.sfp-stat-overdue::before {
background: linear-gradient(135deg, #E85A5A 0%, #d04444 100%);
}
.sfp-stat-overdue .sfp-stat-icon {
background: linear-gradient(135deg, #E85A5A 0%, #d04444 100%);
}
.sfp-stat-gigs::before {
background: linear-gradient(135deg, var(--sfp-secondary) 0%, var(--sfp-secondary-dark) 100%);
}
.sfp-stat-gigs .sfp-stat-icon {
background: linear-gradient(135deg, var(--sfp-secondary) 0%, var(--sfp-secondary-dark) 100%);
}
.sfp-stat-mileage::before {
background: linear-gradient(135deg, #FFA26E 0%, #E57A5E 100%);
}
.sfp-stat-mileage .sfp-stat-icon {
background: linear-gradient(135deg, #FFA26E 0%, #E57A5E 100%);
}

.sfp-stat-icon {
width: 70px;
height: 70px;
border-radius: var(--sfp-border-radius-lg);
background: linear-gradient(135deg, var(--sfp-primary) 0%, var(--sfp-primary-dark) 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sfp-stat-icon .dashicons {
font-size: 36px;
width: 36px;
height: 36px;
color: #fff;
}
.sfp-stat-content {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.sfp-stat-number {
font-size: 36px;
font-weight: 700;
color: #374151;
line-height: 1;
margin-bottom: 8px;
}
.sfp-stat-label {
font-size:18px;
}
.sfp-stat-value {
font-size: 32px;
color: #708C69;
}

.sfp-stat-sublabel {
font-size: 12px;
color: var(--sfp-primary);
font-weight: 600;
margin-top: 4px;
}
.sfp-stat-link {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--sfp-primary);
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
}
.sfp-stat-link:hover {
color: var(--sfp-primary-dark);
gap: 8px;
}
.sfp-stat-link .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
}
.sfp-stat-description {
font-size: 13px;
color: #6B7280;
line-height: 1.4;
}

/* Dashboard Sections */
.sfp-dashboard-section {
background: #fff;
border-radius: var(--sfp-border-radius-lg);
padding: 35px;
box-shadow: var(--sfp-shadow-md);
margin-bottom: 30px;
}
.sfp-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.sfp-section-title {
font-size: 22px;
font-weight: 700;
color: #374151;
margin: 0 0 20px 0;
display: flex;
align-items: center;
gap: 12px;
}
.sfp-view-all-link {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--sfp-primary);
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
}
.sfp-view-all-link:hover {
color: var(--sfp-primary-dark);
gap: 8px;
}

/* Quick Actions */
.sfp-quick-actions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.sfp-action-card {
display: flex;
align-items: center;
gap: 20px;
padding: 25px;
background: #f9fafb;
border: 2px solid #E2E6EC;
border-radius: var(--sfp-border-radius-lg);
text-decoration: none;
transition: all 0.3s ease;
}
.sfp-action-card:hover {
background: #fff;
border-color: var(--sfp-primary);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(55, 154, 246, 0.15);
}
.sfp-action-icon {
width: 50px;
height: 50px;
border-radius: var(--sfp-border-radius-lg);
background: linear-gradient(135deg, var(--sfp-primary) 0%, var(--sfp-primary-dark) 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sfp-action-icon .dashicons {
font-size: 24px;
width: 24px;
height: 24px;
color: #fff;
}
.sfp-action-content h3 {
margin: 0 0 5px 0;
font-size: 16px;
font-weight: 600;
color: #374151;
}
.sfp-action-content p {
margin: 0;
font-size: 13px;
color: #6B7280;
}

/* Empty State */
.sfp-empty-state {
text-align: center;
padding: 60px 20px;
color: #6B7280;
background: #fff;
margin: 0 20px;
border: 1px solid var(--sfp-gray-200);
background: white;
border-radius: var(--sfp-border-radius);
text-align: center;
}
.sfp-empty-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
border-radius: 50%;
background: #F5F7FA;
display: flex;
align-items: center;
justify-content: center;
}
.sfp-empty-icon .dashicons {
font-size: 40px;
width: 40px;
height: 40px;
color: #6B7280;
}
.sfp-empty-state h2 {
margin: 0 0 10px 0;
color: #374151;
}
.sfp-empty-state h3 {
font-size: 20px;
font-weight: 600;
color: #374151;
margin: 0 0 10px 0;
}
.sfp-empty-state p {
font-size: 14px;
color: #6B7280;
margin: 0 0 25px 0;
}
.sfp-empty-state a {
color: var(--sfp-primary);
text-decoration: none;
}
.sfp-empty-state a:hover {
color: var(--sfp-primary-dark);
}

/* Charts Section */
.sfp-charts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
.sfp-chart-card {
background: #fff;
border-radius: var(--sfp-border-radius-lg);
padding: 30px;
box-shadow: var(--sfp-shadow-md);
}
.sfp-chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid var(--sfp-gray-200);
}
.sfp-chart-title {
font-size: 18px;
font-weight: 700;
color: #374151;
margin: 0;
}
.sfp-chart-subtitle {
font-size: 13px;
color: #6B7280;
font-weight: 500;
}
.sfp-chart-container {
position: relative;
height: 300px;
}
.sfp-chart-container-wide {
position: relative;
height: 350px;
background: #fff;
}

/* Date Filter Controls */
.sfp-date-filter-container {
display: flex;
align-items: center;
gap: 6px;
background: #fff;
border: 1px solid var(--sfp-gray-200);
border-radius: var(--sfp-border-radius);
padding: 6px 10px;
flex-wrap: nowrap;
white-space: nowrap;
flex-shrink: 0;
}
.sfp-date-filter-container label {
display: flex;
align-items: center;
gap: 5px;
font-weight: 500;
font-size: 12px;
color: #6B7280;
}
.sfp-date-filter-container input[type="date"] {
padding: 4px 8px;
border: 1px solid var(--sfp-gray-200);
border-radius: var(--sfp-border-radius);
font-size: 12px;
min-width: 120px;
}

.sfp-date-filter-inputs input[type="date"]:focus {
outline: none;
border-color: var(--sfp-primary);
box-shadow: 0 0 0 3px rgba(55, 154, 246, 0.1);
}

.sfp-loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
}
.sfp-loading-spinner {
text-align: center;
}
.sfp-spinner {
width: 50px;
height: 50px;
margin: 0 auto 15px;
border: 4px solid #F5F7FA;
border-top-color: var(--sfp-primary);
border-radius: 50%;
}

/* ====================================================================== */
/* Customize Dashboard
/* ====================================================================== */

.sfp-dashboard-controls {
display: flex;
gap: 10px;
margin-top: 15px;
}
.sfp-customizing .sfp-stat-card {
cursor: move;
position: relative;
}
.sfp-card-toggle {
position: absolute;
top: 10px;
right: 10px;
background: rgba(255, 255, 255, 0.95);
padding: 8px 12px;
border-radius: var(--sfp-border-radius);
box-shadow: 0 2px 8px rgba(123, 104, 166, 0.15);
z-index: 10;
}
.sfp-card-toggle label {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
cursor: pointer;
font-size: 13px;
font-weight: 600;
}
.sfp-card-toggle input[type="checkbox"] {
margin: 0;
}
.sfp-card-hidden {
opacity: 0.4;
pointer-events: none;
}
.sfp-customizing .sfp-card-hidden {
opacity: 0.6;
pointer-events: auto;
}
.sfp-notice {
padding: 12px 20px;
margin: 20px 0;
border-radius: var(--sfp-border-radius);
font-weight: 600;
animation: slideIn 0.3s ease;
background: #fff;
border-left: 4px solid;
box-shadow: var(--sfp-shadow-sm);
}
.sfp-notice p {
margin: 0.5em 0;
padding: 2px;
font-size: 13px;
}
.sfp-notice-success {
background: var(--sfp-primary-xtralight);
color: var(--sfp-primary);
border-left: 4px solid var(--sfp-primary);
}
.sfp-notice-success p {
color: #374151;
}
.sfp-notice-error {
background: #FFE5E5;
color: #E85A5A;
border-left: 4px solid #E85A5A;
}
.sfp-notice-error p {
color: #374151;
}

@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}


/* ====================================================================== */
/* Backend Styles
/* ====================================================================== */

/* Backend form sections */
.sfp-section {
background: #fff;
border: 1px solid var(--sfp-gray-200);
box-shadow: var(--sfp-shadow-sm);
margin-bottom: 20px;
padding: 20px;
}

.sfp-section-description {
color: #6B7280;
font-size: 13px;
margin: -10px 0 15px;
}

.sfp-section:last-child {
border-bottom: none;
}

/* Animations */
.sfp-section {
animation: fadeInUp 0.6s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* Backend form grid */
.sfp-form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.sfp-form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 20px;
}

/* Backend form groups */
.sfp-form-group {
margin-bottom: 20px;
display: flex;
flex-direction: column;
}
.sfp-form-group:last-child {
margin-bottom: 0;
}
.sfp-form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #374151;
font-size: 14px;
}
.sfp-form-group .required {
color: #E85A5A;
}
.sfp-form-group input[type="text"],
.sfp-form-group input[type="email"],
.sfp-form-group input[type="url"],
.sfp-form-group input[type="number"],
.sfp-form-group input[type="date"],
.sfp-form-group select,
.sfp-form-group textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--sfp-gray-200);
border-radius: var(--sfp-border-radius);
font-size: 16px;
transition: all 0.3s ease;
min-height: 50px;
}
.sfp-form-group textarea {
min-height: 120px;
resize: vertical;
}
.sfp-form-group input:focus,
.sfp-form-group select:focus,
.sfp-form-group textarea:focus {
outline: none;
border-color: var(--sfp-secondary);
box-shadow: 0 0 0 3px rgba(55, 154, 246, 0.1);
}
.sfp-form-group .description {
margin: 8px 0 0 0;
font-size: 13px;
color: var(--sfp-gray-600);
}
.sfp-form-group.sfp-full-width {
grid-column: 1 / -1;
}

.sfp-label {
display: block;
font-weight: 600;
margin-bottom: 5px;
color: #374151;
font-size: 14px;
}
.sfp-input,
.sfp-select,
.sfp-textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid #8c8f94;
border-radius: var(--sfp-border-radius);
background-color: #fff;
font-size: 14px;
line-height: 1.5;
color: #4B5563;
min-height: 50px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.sfp-input:focus,
.sfp-select:focus,
.sfp-textarea:focus {
border-color: var(--sfp-primary);
box-shadow: 0 0 0 1px var(--sfp-primary);
outline: 2px solid transparent;
transform: translateY(-1px);
}
.sfp-textarea {
min-height: 100px;
resize: vertical;
}

/* Backend status badges */
.sfp-status-badge {
display: inline-block;
padding: 3px 8px;
border-radius: var(--sfp-border-radius);
font-size: 12px;
font-weight: 600;
line-height: 1.4;
}

.status-badge {
display: inline-block;
padding: 5px 15px;
border-radius: var(--sfp-border-radius);
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}

.sfp-status-badge {
display: inline-block;
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.status-draft { background: var(--sfp-gray-100); color: var(--sfp-gray-600); }
.status-sent { background: var(--sfp-secondary-light); color: var(--sfp-secondary-dark); }
.status-paid { background: var(--sfp-primary-xtralight); color: #1E3F78; }
.status-overdue { background: #FFE5E5; color: var(--sfp-danger); }

/* Dashboard styles */
.sfp-frontend-dashboard {
background: #F5F7FA;
padding: 20px;
margin: 0 -20px;
min-height: 100vh;
border-radius: 30px;
}
.sfp-frontend-dashboard h1 {
font-size: 23px;
font-weight: 400;
margin: 0 0 20px;
padding: 9px 0 4px;
line-height: 1.3;
color: #374151;
}
.sfp-dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.sfp-dashboard-card {
background: #fff;
border: 1px solid var(--sfp-gray-200);
box-shadow: var(--sfp-shadow-sm);
padding: 20px;
text-align: center;
}
.sfp-dashboard-card:hover {
box-shadow: var(--sfp-shadow-md);
}
.sfp-dashboard-card h2 {
margin: 0 0 10px;
font-size: 20px;
font-weight: 600;
color: #374151;
}
.sfp-dashboard-card p {
color: #6B7280;
margin-bottom: 15px;
font-size: 14px;
}
/* Items table (gigs/invoices) */
.sfp-items-container,
.sfp-expenses-container {
margin-top: 15px;
}
.sfp-item-header,
.sfp-expense-header {
display: grid;
background: #F5F7FA;
padding: 8px 10px;
font-weight: 600;
border: 1px solid var(--sfp-gray-200);
border-bottom: none;
font-size: 13px;
color: #4B5563;
}
.sfp-item-row,
.sfp-expense-row {
display: grid;
padding: 8px 10px;
border: 1px solid var(--sfp-gray-200);
border-top: none;
background: #fff;
}
.sfp-item-row:last-child,
.sfp-expense-row:last-child {
border-bottom: 1px solid #E2E6EC;
}
/* Add buttons */
.sfp-add-item-container,
.sfp-add-expense-container {
margin-top: 10px;
}

/* Totals section */
.sfp-totals-section {
background: #F5F7FA;
padding: 15px;
border: 1px solid var(--sfp-gray-200);
margin-top: 20px;
}
.sfp-total-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
font-size: 14px;
}
.sfp-total-row.sfp-grand-total {
border-top: 2px solid #E2E6EC;
font-weight: 600;
font-size: 16px;
color: #374151;
padding-top: 12px;
margin-top: 8px;
}


/* ====================================================================== */
/* Add Crewer
/* ====================================================================== */

/* Modern Form Styles */
.sfp-modern-container {
max-width: 1200px;
margin: 20px 0;
background: #fff;
border-radius: var(--sfp-border-radius-lg);
box-shadow: var(--sfp-shadow-md);
overflow: hidden;
}
.sfp-modern-form {
padding: 0;
max-width: 1200px;
}

.sfp-modern-form .sfp-section {
padding: 30px;
margin-bottom: 0;
border: none;
border-bottom: 1px solid #E2E6EC;
background: #fff;
box-shadow: none;
}

.sfp-modern-form .sfp-section:last-child {
border-bottom: none;
}

/* Modern form - Section titles */
.sfp-modern-form .sfp-section-title {
font-size: 20px;
font-weight: 700;
color: #374151;
margin: 0 0 15px 0;
display: flex;
align-items: center;
gap: 10px;
}

/* Modern form - Section descriptions */
.sfp-modern-form .sfp-section-description {
color: #6B7280;
font-size: 14px;
margin: -10px 0 20px;
}

/* Modern form - Form groups */
.sfp-modern-form .sfp-form-group {
margin-bottom: 20px;
display: flex;
flex-direction: column;
}

.sfp-modern-form .sfp-form-group:last-child {
margin-bottom: 0;
}

/* Modern form - Labels */
.sfp-modern-form .sfp-label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #374151;
font-size: 14px;
}

/* Modern form - All inputs */
.sfp-modern-form .sfp-input,
.sfp-modern-form input[type="text"],
.sfp-modern-form input[type="email"],
.sfp-modern-form input[type="url"],
.sfp-modern-form input[type="number"],
.sfp-modern-form input[type="date"],
.sfp-modern-form select,
.sfp-modern-form .sfp-select,
.sfp-modern-form textarea,
.sfp-modern-form .sfp-textarea {
width: 100%;
padding: 10px 14px;
border: 1px solid #8c8f94;
border-radius: var(--sfp-border-radius);
background-color: #fff;
font-size: 14px;
line-height: 1.5;
color: #4B5563;
box-sizing: border-box;
min-height: 44px;
transition: all 0.2s ease;
}

/* Modern form - Input focus states */
.sfp-modern-form .sfp-input:focus,
.sfp-modern-form input[type="text"]:focus,
.sfp-modern-form input[type="email"]:focus,
.sfp-modern-form input[type="url"]:focus,
.sfp-modern-form input[type="number"]:focus,
.sfp-modern-form input[type="date"]:focus,
.sfp-modern-form select:focus,
.sfp-modern-form .sfp-select:focus,
.sfp-modern-form textarea:focus,
.sfp-modern-form .sfp-textarea:focus {
border-color: var(--sfp-primary);
box-shadow: 0 0 0 1px var(--sfp-primary);
outline: 2px solid transparent;
outline-offset: 2px;
}

/* Modern form - Textarea specific */
.sfp-modern-form textarea,
.sfp-modern-form .sfp-textarea {
min-height: 100px;
resize: vertical;
}

/* Modern form - Form grid */
.sfp-modern-form .sfp-form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 0;
}

/* Modern form - Field descriptions */
.sfp-modern-form .sfp-field-description {
margin: 6px 0 0 0;
color: #6B7280;
font-size: 13px;
font-style: italic;
line-height: 1.4;
}

/* Header section specific */
.sfp-header-section {
background: linear-gradient(135deg, var(--sfp-primary) 0%, var(--sfp-primary-dark) 100%);
color: #fff;
padding: 40px;
border: none !important;
}
.sfp-header-section .sfp-section-title {
color: #fff;
font-size: 28px;
margin-bottom: 8px;
}
.sfp-header-section .sfp-section-description {
color: rgba(255, 255, 255, 0.9);
font-size: 15px;
margin: 0;
}

/* Required field indicator */
.sfp-modern-form .sfp-required {
color: #E85A5A;
font-weight: 700;
}

/* Actions section for modern forms */
.sfp-modern-form + .sfp-actions,
.sfp-modern-container .sfp-actions {
padding: 25px 30px;
background: #f9fafb;
display: flex;
gap: 12px;
align-items: center;
border-top: 1px solid #E2E6EC;
}

/* Ensure all form elements use border-box */
.sfp-modern-form *,
.sfp-modern-form *::before,
.sfp-modern-form *::after {
box-sizing: border-box;
}

/* ====================================================================== */
/* WordPress Admin Area - Simplified Direct Styling
/* ====================================================================== */

/* Force modern container styling */
#wpbody-content .sfp-modern-container,
#wpbody .sfp-modern-container,
body.wp-admin .sfp-modern-container {
max-width: 1200px;
margin: 20px auto;
background: #fff;
border-radius: var(--sfp-border-radius-lg);
box-shadow: var(--sfp-shadow-md);
overflow: hidden;
}

/* Force form styling */
body.wp-admin .sfp-modern-form {
padding: 0;
}

/* Force section styling */
body.wp-admin .sfp-modern-form .sfp-section {
padding: 30px;
margin: 0;
border: none;
border-bottom: 1px solid #E2E6EC;
box-shadow: none;
}

body.wp-admin .sfp-modern-form .sfp-section:last-child {
border-bottom: none;
}

/* Force input styling - every possible input */
body.wp-admin .sfp-modern-form input[type="text"],
body.wp-admin .sfp-modern-form input[type="email"],
body.wp-admin .sfp-modern-form input[type="url"],
body.wp-admin .sfp-modern-form input[type="number"],
body.wp-admin .sfp-modern-form input[type="date"],
body.wp-admin .sfp-modern-form select,
body.wp-admin .sfp-modern-form textarea {
width: 100%;
max-width: 100%;
padding: 10px 14px;
border: 1px solid #8c8f94;
border-radius: var(--sfp-border-radius);
background-color: #fff;
font-size: 14px;
line-height: 1.5;
color: #4B5563;
box-sizing: border-box;
min-height: 44px;
margin: 0;
box-shadow: 0 0 0 transparent;
}

/* Force focus states */
body.wp-admin .sfp-modern-form input[type="text"]:focus,
body.wp-admin .sfp-modern-form input[type="email"]:focus,
body.wp-admin .sfp-modern-form input[type="url"]:focus,
body.wp-admin .sfp-modern-form input[type="number"]:focus,
body.wp-admin .sfp-modern-form input[type="date"]:focus,
body.wp-admin .sfp-modern-form select:focus,
body.wp-admin .sfp-modern-form textarea:focus {
border-color: var(--sfp-primary);
box-shadow: 0 0 0 1px var(--sfp-primary);
outline: none;
}

/* Force textarea height */
body.wp-admin .sfp-modern-form textarea {
min-height: 100px;
resize: vertical;
}

/* Force form grid */
body.wp-admin .sfp-modern-form .sfp-form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}

/* Force labels */
body.wp-admin .sfp-modern-form .sfp-label,
body.wp-admin .sfp-modern-form .sfp-form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #374151;
font-size: 14px;
}

/* Force form groups */
body.wp-admin .sfp-modern-form .sfp-form-group {
margin-bottom: 20px;
}

/* Force header section */
body.wp-admin .sfp-header-section {
background: linear-gradient(135deg, var(--sfp-primary) 0%, var(--sfp-primary-dark) 100%);
color: #fff;
padding: 40px;
border: none;
}

body.wp-admin .sfp-header-section .sfp-section-title {
color: #fff;
font-size: 28px;
margin: 0 0 8px 0;
}

/* Force buttons */
body.wp-admin .sfp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
border: none;
border-radius: var(--sfp-border-radius);
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
height: auto;
line-height: 1.5;
}

body.wp-admin .sfp-btn-primary {
background: linear-gradient(135deg, var(--sfp-primary) 0%, var(--sfp-primary-dark) 100%);
color: #fff;
}

body.wp-admin .sfp-btn-secondary {
background: #F5F7FA;
color: var(--sfp-primary);
border: 1px solid var(--sfp-gray-200);
}

body.wp-admin .sfp-btn-large {
padding: 18px 40px;
font-size: 18px;
min-height: 60px;
font-weight: 700;
}

/* Force actions area */
body.wp-admin .sfp-actions {
padding: 25px 30px;
background: #f9fafb;
display: flex;
gap: 12px;
align-items: center;
border-top: 1px solid #E2E6EC;
}

/* ====================================================================== */
/* Crewer List
/* ====================================================================== */

.sfp-crewers-page {
background: #F5F7FA;
margin: -10px -20px;
padding: 3vh 6vh 2vh 3vh;
}
.sfp-crewers-page .wp-heading-inline {
font-size: 28px;
font-weight: 700;
color: #374151;
}
/* .sfp-crewers-page .page-title-action — inherits from global [class*="sfp-"] .page-title-action */


/* ====================================================================== */
/* Crewers List Core
/* ====================================================================== */

.sfp-crewers-table {
border: none;
box-shadow: none;
}
.sfp-crewers-table thead {
background: #f9fafb;
}
.sfp-crewers-table th {
padding: 18px 20px;
font-weight: 600;
font-size: 13px;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid var(--sfp-gray-200);
}
.sfp-crewers-table td {
padding: 18px 20px;
font-size: 14px;
border-bottom: 1px solid #EEF1F5;
}
.sfp-crewers-table tbody tr {
transition: all 0.2s ease;
}
.sfp-crewers-table tbody tr:hover {
background: #f9fafb;
}
.sfp-crewers-table a {
color: var(--sfp-primary-dark);
font-weight: 600;
text-decoration: none;
transition: color 0.2s ease;
}
.sfp-crewers-table a:hover {
color: var(--sfp-primary-dark);
}

/* ====================================================================== */
/* Edit Crewer
/* ====================================================================== */

.sfp-required {
color: #E85A5A;
font-weight: 700;
}
.sfp-field-description {
margin: 8px 0 0 0;
color: #6B7280;
font-size: 13px;
font-style: italic;
}

/* ====================================================================== */
/* Styles from: includes/views/gigs/add.php
/* ====================================================================== */

.sfp-card {
background: #fff;
border: 1px solid var(--sfp-gray-200);
border-radius: var(--sfp-border-radius);
margin-bottom: 20px;
box-shadow: var(--sfp-shadow-sm);
}
.sfp-card-header {
padding: 20px;
border-bottom: 1px solid var(--sfp-gray-200);
display: flex;
justify-content: space-between;
align-items: center;
}
.sfp-card-header h2 {
margin: 0;
font-size: 20px;
font-weight: 600;
}
.sfp-card-body {
padding: 20px;
}

.sfp-help-text {
margin-top: 5px;
color: var(--sfp-gray-600);
font-size: 13px;
}

/* ====================================================================== */
/* Inline Editing
/* ====================================================================== */

/* Inline Status Edit Styles */
.sfp-status-inline-edit {
display: inline-block;
}
select.sfp-status-select {
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-image: url('data:image/svg+xml;utf8,<svg fill="%23000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 14px;
padding-right: 30px;
line-height: 1.4;
min-height: 0;
height: auto;
box-shadow: none;
}
select.sfp-status-select:hover {
opacity: 0.85;
transform: translateY(-1px);
}
select.sfp-status-select:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
select.sfp-status-select:focus {
box-shadow: none;
outline: none;
}

/* Inline Date Edit */
.sfp-inline-date-edit {
position: relative;
}
.sfp-crewer-date-input {
padding: 4px 8px;
border: 1px solid var(--sfp-gray-200);
border-radius: var(--sfp-border-radius);
font-size: 13px;
cursor: pointer;
transition: all 0.2s ease;
}
.sfp-crewer-date-input:hover {
border-color: var(--sfp-primary);
}
.sfp-crewer-date-input:focus {
outline: none;
border-color: var(--sfp-primary);
box-shadow: 0 0 0 1px var(--sfp-primary);
}
/* Crewer date display - initially hidden until inline edit mode */
.sfp-crewer-inline-edit .sfp-date-display {
display: none;
}

/* ====================================================================== */
/* Gigs List
/* ====================================================================== */

/* YTD Stats Container */
.sfp-gigs-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 15px;
margin: 20px 0;
}

/* ==========================================================================
   3-Dot Overflow Menu Component
   ========================================================================== */
.sfp-overflow-menu {
    position: relative;
    display: inline-block;
}
.sfp-overflow-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    letter-spacing: 2px;
    color: var(--sfp-gray-400);
    padding: 4px 8px;
    border-radius: var(--sfp-border-radius);
    transition: all 0.2s;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sfp-overflow-btn:hover {
    background-color: var(--sfp-gray-100);
    color: var(--sfp-gray-700);
}
.sfp-overflow-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 100;
    background: var(--sfp-white);
    border: 1px solid var(--sfp-gray-200);
    border-radius: var(--sfp-border-radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 160px;
    padding: 6px 0;
    margin-top: 4px;
}
.sfp-overflow-open .sfp-overflow-dropdown {
    display: block;
}
.sfp-overflow-dropdown a {
    display: block;
    padding: 9px 16px;
    font-size: 13px;
    color: var(--sfp-gray-700);
    text-decoration: none;
    transition: background-color 0.15s;
    white-space: nowrap;
}
.sfp-overflow-dropdown a:hover {
    background-color: var(--sfp-gray-50);
    color: var(--sfp-gray-900);
}
.sfp-overflow-dropdown .sfp-overflow-danger {
    color: var(--sfp-danger);
}
.sfp-overflow-dropdown .sfp-overflow-danger:hover {
    background-color: #FFF0F0;
    color: var(--sfp-danger);
}

/* ==========================================================================
   Table Styles (clean, minimal)
   ========================================================================== */
.sfp-table-container {
    background: var(--sfp-white);
    border-radius: var(--sfp-border-radius-lg);
    padding: 0;
    border: 1px solid var(--sfp-gray-200);
    box-shadow: var(--sfp-shadow-sm);
    margin-top: 20px;
    overflow: visible;
}
.sfp-table-container table {
    margin: 0;
    border: none;
    border-spacing: 0;
    border-collapse: collapse;
}
.sfp-table-container thead th {
    background-color: var(--sfp-gray-50);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sfp-gray-500);
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--sfp-gray-200);
    border-top: none;
    border-left: none;
    border-right: none;
}
.sfp-table-container tbody td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--sfp-gray-100);
    border-top: none;
    border-left: none;
    border-right: none;
    vertical-align: middle;
    font-size: 13px;
    color: var(--sfp-gray-700);
}
.sfp-table-container tbody tr:last-child td {
    border-bottom: none;
}
.sfp-table-container tbody tr:hover {
    background-color: var(--sfp-primary-xtralight);
}
.sfp-table-container a {
    color: var(--sfp-primary-dark);
    text-decoration: none;
}
.sfp-table-container a:hover {
    color: var(--sfp-primary-dark);
    text-decoration: underline;
}
/* Employment Type Badges */
.sfp-employment-badge-small {
display: inline-block;
padding: 3px 8px;
border-radius: var(--sfp-border-radius);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
margin-left: 8px;
transition: all 0.2s ease;
}
.sfp-badge-1099 {
background: var(--sfp-gray-100);
color: var(--sfp-gray-500);
border: 1px solid var(--sfp-gray-200);
}
.sfp-badge-1099:hover,
tr:hover .sfp-badge-1099 {
background: var(--sfp-primary-xtralight);
color: var(--sfp-primary-dark);
border-color: var(--sfp-primary-light);
}
.sfp-badge-w2 {
background: var(--sfp-gray-100);
color: var(--sfp-gray-500);
border: 1px solid var(--sfp-gray-200);
}
.sfp-badge-w2:hover,
tr:hover .sfp-badge-w2 {
background: var(--sfp-accent-light);
color: #C75B12;
border-color: var(--sfp-accent);
}
/* Payment Details */
.sfp-payment-details {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
}
.sfp-payment-display {
display: flex;
align-items: center;
}
.sfp-payment-pending {
color: #6B7280;
font-style: italic;
}
.sfp-icon-pencil {
width: 14px;
height: 14px;
display: inline-block;
vertical-align: middle;
}
.sfp-icon-inline {
display: inline-block;
vertical-align: middle;
margin-right: 2px;
position: relative;
top: -1px;
}
.sfp-edit-payment-btn {
background: none;
border: none;
cursor: pointer;
padding: 2px 4px;
color: var(--sfp-gray-400);
transition: color 0.2s;
}
.sfp-edit-payment-btn:hover {
color: var(--sfp-gray-600);
}
.sfp-payment-edit {
display: flex;
gap: 4px;
align-items: center;
}
.sfp-payment-input {
width: 100px;
padding: 4px 8px;
border: 1px solid var(--sfp-gray-200);
border-radius: var(--sfp-border-radius);
}
.sfp-save-payment-btn,
.sfp-cancel-payment-btn {
background: none;
border: none;
cursor: pointer;
font-size: 16px;
padding: 2px 4px;
}
.sfp-save-payment-btn {
color: var(--sfp-primary);
}
.sfp-cancel-payment-btn {
color: #E85A5A;
}
.sfp-payment-simple {
font-weight: 600;
font-size: 14px;
color: #6B7280;
}

/* Date Inline Edit */
.sfp-date-inline-edit {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
}
.sfp-date-inline-edit .sfp-date-display {
display: flex;
align-items: center;
}
.sfp-date-value {
font-weight: 500;
color: #374151;
}
.sfp-edit-date-btn {
background: none;
border: none;
cursor: pointer;
padding: 2px 4px;
color: var(--sfp-gray-400);
transition: color 0.2s;
}
.sfp-edit-date-btn:hover {
color: var(--sfp-gray-600);
}
.sfp-date-edit {
display: flex;
gap: 4px;
align-items: center;
}
.sfp-date-inline-edit .sfp-date-input {
width: 130px;
padding: 4px 8px;
border: 1px solid var(--sfp-gray-200);
border-radius: var(--sfp-border-radius);
}
.sfp-save-date-btn,
.sfp-cancel-date-btn {
background: none;
border: none;
cursor: pointer;
font-size: 16px;
padding: 2px 4px;
}
.sfp-save-date-btn {
color: var(--sfp-primary);
}
.sfp-cancel-date-btn {
color: #E85A5A;
}

/* Actions */
.sfp-actions {
padding: 30px 40px;
background: #f9fafb;
gap: 5px;
align-items: center;
white-space: nowrap;
}
.sfp-actions .button {
margin-right: 5px;
}
.button-link-delete {
color: #d04444 !important;
}
.button-link-delete:hover {
color: #E85A5A !important;
}
.button-hero {
padding: 12px 24px !important;
height: auto !important;
font-size: 16px !important;
}
.sfp-form-actions {
padding: 20px;
background: #F5F7FA;
border-top: 1px solid #E2E6EC;
display: flex;
gap: 10px;
margin-top: 20px;
margin-left: -20px;
margin-right: -20px;
margin-bottom: -20px;
}

/* Sortable table styles */
.sortable {
cursor: pointer;
user-select: none;
position: relative;
padding-right: 20px !important;
}
.sortable:hover {
background: #e8eaed !important;
}
.sort-indicator {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
opacity: 0.3;
}
.sort-indicator::after {
content: '⇅';
font-size: 14px;
}
.sortable.sort-asc .sort-indicator::after {
content: '↑';
opacity: 1;
}
.sortable.sort-desc .sort-indicator::after {
content: '↓';
opacity: 1;
}


/* ====================================================================== */
/* Edit Gig
/* ====================================================================== */

.sfp-card {
background: #fff;
border: 1px solid var(--sfp-gray-200);
border-radius: var(--sfp-border-radius);
margin-bottom: 20px;
box-shadow: var(--sfp-shadow-sm);
}
.sfp-card-header {
padding: 20px;
border-bottom: 1px solid var(--sfp-gray-200);
display: flex;
justify-content: space-between;
align-items: center;
}
.sfp-card-header h2 {
margin: 0;
font-size: 20px;
font-weight: 600;
}
.sfp-card-body {
padding: 20px;
}

.sfp-help-text {
margin-top: 5px;
color: var(--sfp-gray-600);
font-size: 13px;
}
.sfp-day-entry {
background: #f8f9fa;
border: 1px solid var(--sfp-gray-200);
border-radius: var(--sfp-border-radius);
padding: 20px;
margin-bottom: 20px;
}
.sfp-day-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 2px solid var(--sfp-gray-200);
}
.sfp-day-header h3 {
margin: 0;
font-size: 18px;
color: var(--sfp-primary);
}
.sfp-day-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-bottom: 15px;
}
.sfp-day-calculations {
background: #fff;
border: 1px solid var(--sfp-gray-200);
border-radius: var(--sfp-border-radius);
padding: 15px;
}
.sfp-calc-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #EEF1F5;
}
.sfp-calc-row:last-child {
border-bottom: none;
}
.sfp-calc-highlight {
font-weight: 600;
color: var(--sfp-primary);
background: var(--sfp-primary-xtralight);
padding: 10px;
margin: 5px -15px;
border-radius: var(--sfp-border-radius);
}
.sfp-totals-section {
background: #f8f9fa;
border: 2px solid var(--sfp-primary);
border-radius: var(--sfp-border-radius);
padding: 20px;
margin-top: 20px;
}
.sfp-total-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
font-size: 16px;
}
.sfp-total-highlight {
font-weight: 600;
font-size: 18px;
color: var(--sfp-primary);
padding-top: 15px;
border-top: 2px solid #E2E6EC;
}
.sfp-grand-total {
font-weight: 700;
font-size: 20px;
color: #0a5c36;
padding-top: 15px;
border-top: 2px solid #0a5c36;
}
/* W2 Payment Summary Styling */
.sfp-total-divider {
height: 1px;
background: #E2E6EC;
margin: 15px 0;
}
.sfp-reimbursement-item {
padding-left: 20px;
font-size: 0.95em;
color: var(--sfp-gray-600);
}
.sfp-w2-expected {
color: #0a5c36;
font-weight: 600;
}
.sfp-w2-actual {
color: var(--sfp-primary);
font-weight: 600;
}
.sfp-w2-tax {
color: #E57A5E;
font-weight: 600;
}
#w2-payment-summary {
background: #f9fafb;
padding: 15px;
border-radius: var(--sfp-border-radius);
margin-top: 15px;
}

.remove-day-btn {
background: #E85A5A;
color: #fff;
border-color: #E85A5A;
}
.remove-day-btn:hover {
background: #d04444;
border-color: #d04444;
color: #fff;
}

/* ====================================================================== */
/* Invoices
/* ====================================================================== */

.sfp-invoices-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 20px 0;
}
.sfp-invoices-table thead {
background: #f9fafb;
}
.sfp-invoices-table th {
padding: 18px 20px;
font-weight: 600;
font-size: 13px;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid var(--sfp-gray-200);
}
.sfp-invoices-table td {
padding: 18px 20px;
font-size: 14px;
border-bottom: 1px solid #EEF1F5;
}
.sfp-invoices-table tbody tr {
transition: all 0.2s ease;
}
.sfp-invoices-table tbody tr:hover {
background: #f9fafb;
}
.sfp-invoices-table a {
color: var(--sfp-primary-dark);
font-weight: 600;
text-decoration: none;
transition: color 0.2s ease;
}
.sfp-invoices-table a:hover {
color: var(--sfp-primary-dark);
}
.sfp-invoices-table-container {
overflow-x: auto;
border: none;
box-shadow: none;
}
.invoice-info {
display: table;
width: 100%;
margin-bottom: 40px;
}
.invoice-info > div {
display: table-cell;
width: 30%;
vertical-align: top;
}
.invoice-info h3 {
color: var(--sfp-secondary);
margin-bottom: 10px;
font-size: 16px;
}
.invoice-details {
background: var(--sfp-gray-100);
padding: 15px;
border-radius: var(--sfp-border-radius);
}
.invoice-details p {
margin: 5px 0;
}
.invoice-details strong {
display: inline-block;
width: 120px;
}
.sfp-invoice-number {
color: var(--sfp-primary);
font-weight: 600;
}
.sfp-amount {
font-family: 'Courier New', monospace;
font-weight: 600;
color: #374151;
font-size: 15px;
}

.sfp-amount.sfp-total {
font-size: 16px;
}

select.sfp-status-select.sfp-status-draft,
.sfp-status-badge.sfp-status-draft,
.sfp-status-draft {
background-color: var(--sfp-gray-100);
color: var(--sfp-gray-600);
border-color: var(--sfp-gray-300);
}
select.sfp-status-select.sfp-status-sent,
.sfp-status-badge.sfp-status-sent,
.sfp-status-sent {
background-color: var(--sfp-secondary-light);
color: var(--sfp-secondary-dark);
border-color: #C4BFEE;
}
select.sfp-status-select.sfp-status-viewed,
.sfp-status-badge.sfp-status-viewed,
.sfp-status-viewed {
background-color: var(--sfp-secondary-light);
color: var(--sfp-secondary-dark);
border-color: #C4BFEE;
}
select.sfp-status-select.sfp-status-paid,
.sfp-status-badge.sfp-status-paid,
.sfp-status-paid {
background-color: var(--wp--preset--color--light-green-cyan);
color: #1E3F78;
border-color: var(--wp--preset--color--vivid-green-cyan);
}
select.sfp-status-select.sfp-status-partially_paid,
select.sfp-status-select.sfp-status-partially-paid,
.sfp-status-badge.sfp-status-partially_paid,
.sfp-status-badge.sfp-status-partially-paid,
.sfp-status-partially_paid,
.sfp-status-partially-paid {
background-color: var(--sfp-accent-light);
color: #C75B12;
border-color: var(--sfp-accent);
}
select.sfp-status-select.sfp-status-overdue,
.sfp-status-badge.sfp-status-overdue,
.sfp-status-overdue {
background-color: #FFE5E5;
color: var(--sfp-danger);
border-color: #F5A6A6;
}
select.sfp-status-select.sfp-status-cancelled,
.sfp-status-badge.sfp-status-cancelled,
.sfp-status-cancelled {
background-color: var(--sfp-gray-100);
color: var(--sfp-gray-600);
border-color: var(--sfp-gray-300);
}
select.sfp-status-select.sfp-status-pending,
.sfp-status-badge.sfp-status-pending,
.sfp-status-pending {
background-color: var(--sfp-accent-light);
color: #C75B12;
border-color: var(--sfp-accent);
}
select.sfp-status-select.sfp-status-invoiced,
.sfp-status-badge.sfp-status-invoiced,
.sfp-status-invoiced {
background-color: var(--sfp-secondary-light);
color: var(--sfp-secondary-dark);
border-color: #C4BFEE;
}
.sfp-table-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--sfp-border-radius);
background: #F5F7FA;
color: #4B5563;
text-decoration: none;
transition: all 0.3s ease;
}
.sfp-table-action:hover {
background: var(--sfp-primary);
color: #fff;
transform: scale(1.1);
}
.sfp-table-action .dashicons {
font-size: 18px;
width: 18px;
height: 18px;
}

/* Items Section */
.sfp-items-container {
margin: 25px 0;
}
.sfp-item-header {
display: grid;
grid-template-columns: 1.2fr 2fr 1.2fr 0.8fr 1fr 1fr 80px;
gap: 15px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px 8px 0 0;
font-weight: 600;
color: #374151;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sfp-item-row {
display: grid;
grid-template-columns: 1.2fr 2fr 1.2fr 0.8fr 1fr 1fr 80px;
gap: 15px;
padding: 20px;
background: #fff;
border-bottom: 1px solid #EEF1F5;
align-items: center;
}
.sfp-item-row:last-child {
border-bottom: none;
border-radius: 0 0 8px 8px;
}
.sfp-item-col {
display: flex;
align-items: center;
}
.sfp-item-desc {
padding-right: 15px;
}
.sfp-item-qty,
.sfp-item-rate,
.sfp-item-amount {
justify-content: center;
}
.sfp-item-action {
justify-content: center;
}

/* Summary Card */
.sfp-summary-card {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border: 2px solid #E2E6EC;
border-radius: var(--sfp-border-radius-lg);
padding: 25px;
margin-top: 25px;
}
.sfp-summary-title {
margin: 0 0 20px 0;
font-size: 18px;
font-weight: 600;
color: #374151;
text-align: center;
}
.sfp-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #E2E6EC;
}
.sfp-summary-row:last-child {
border-bottom: none;
font-size: 18px;
font-weight: 700;
}
.sfp-summary-label {
font-weight: 600;
color: #495057;
}
.sfp-summary-value {
font-weight: 700;
color: #374151;
}
.sfp-summary-total {
background: var(--sfp-gradient-blue-deep);
color: white;
padding: 15px 20px;
border-radius: var(--sfp-border-radius);
margin-top: 15px;
}
.sfp-summary-total .sfp-summary-label,
.sfp-summary-total .sfp-summary-value {
color: #fff;
}

/* Loading States */
.sfp-loading {
opacity: 0.6;
pointer-events: none;
}
.sfp-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
border: 2px solid var(--sfp-primary);
border-top: 2px solid transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
transform: translate(-50%, -50%);
}
@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Success States */
.sfp-success {
border-color: var(--sfp-primary) !important;
box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2) !important;
}
.sfp-error {
border-color: #E85A5A !important;
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2) !important;
}

/* Expenses Section */
.sfp-expenses-container {
margin: 25px 0;
}
.sfp-expense-header {
display: grid;
grid-template-columns: 1.2fr 2.5fr 1fr 80px;
gap: 15px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px 8px 0 0;
font-weight: 600;
color: #374151;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sfp-expense-row {
display: grid;
grid-template-columns: 1.2fr 2.5fr 1fr 80px;
gap: 15px;
padding: 20px;
border-bottom: 1px solid #EEF1F5;
transition: all 0.3s ease;
}
.sfp-expense-row:hover {
background: #f9fafb;
}
.sfp-expense-col {
display: flex;
align-items: center;
}
.sfp-add-expense-container {
margin-top: 20px;
}

.sfp-invoices-page {
background: #F5F7FA;
margin: -10px -20px;
padding: 3vh 6vh 2vh 3vh;
}
.sfp-invoices-page .wp-heading-inline {
font-size: 28px;
font-weight: 700;
color: #374151;
}
/* .sfp-invoices-page .page-title-action — inherits from global [class*="sfp-"] .page-title-action */


/* ====================================================================== */
/* Invoices Generator
/* ====================================================================== */

.text-right {
text-align: right;
}
.totals {
margin-top: 20px;
float: right;
width: 300px;
}
.totals table {
margin: 0;
}
.totals td {
border: none;
padding: 8px 12px;
}
.totals .total-row {
background: var(--sfp-secondary);
color: white;
font-weight: bold;
font-size: 18px;
}
.notes {
clear: both;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid var(--sfp-gray-200);
}
.notes h3 {
color: var(--sfp-secondary);
margin-bottom: 10px;
}
.payment-instructions {
clear: both;
margin-top: 30px;
padding: 20px;
background-color: #f8f9fa;
border-left: 4px solid var(--sfp-secondary);
border-radius: var(--sfp-border-radius);
}
.payment-instructions h3 {
color: var(--sfp-secondary);
margin-bottom: 10px;
margin-top: 0;
}
.payment-instructions p {
margin: 0;
line-height: 1.6;
}


/* ====================================================================== */
/* Inline Editing
/* ====================================================================== */

/* ====================================================================== */
/* Edit Invoice Form
/* ====================================================================== */

/* Items Section */
.sfp-items-container {
margin: 25px 0;
}
.sfp-item-header {
display: grid;
grid-template-columns: 1.2fr 2fr 1.2fr 0.8fr 1fr 1fr 80px;
gap: 15px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px 8px 0 0;
font-weight: 600;
color: #374151;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sfp-item-row {
display: grid;
grid-template-columns: 1.2fr 2fr 1.2fr 0.8fr 1fr 1fr 80px;
gap: 15px;
padding: 20px;
background: #fff;
border-bottom: 1px solid #EEF1F5;
align-items: center;
}
.sfp-item-row:last-child {
border-bottom: none;
border-radius: 0 0 8px 8px;
}
.sfp-item-col {
display: flex;
align-items: center;
}
.sfp-item-desc {
padding-right: 15px;
}
.sfp-item-hours,
.sfp-item-rate,
.sfp-item-amount {
justify-content: center;
}
.sfp-item-action {
justify-content: center;
}

/* Summary Card */
.sfp-summary-card {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border: 2px solid #E2E6EC;
border-radius: var(--sfp-border-radius-lg);
padding: 25px;
margin-top: 25px;
}
.sfp-summary-title {
margin: 0 0 20px 0;
font-size: 18px;
font-weight: 600;
color: #374151;
text-align: center;
}
.sfp-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #E2E6EC;
}
.sfp-summary-row:last-child {
border-bottom: none;
font-size: 18px;
font-weight: 700;
}
.sfp-summary-label {
font-weight: 600;
color: #495057;
}
.sfp-summary-value {
font-weight: 700;
color: #374151;
}
.sfp-summary-total {
background: var(--sfp-gradient-blue-deep);
color: white;
padding: 15px 20px;
border-radius: var(--sfp-border-radius);
margin-top: 15px;
}
.sfp-summary-total .sfp-summary-label,
.sfp-summary-total .sfp-summary-value {
color: #fff;
}

/* Loading States */
.sfp-loading {
opacity: 0.6;
pointer-events: none;
}
.sfp-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
border: 2px solid var(--sfp-primary);
border-top: 2px solid transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
transform: translate(-50%, -50%);
}
@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Success States */
.sfp-success {
border-color: var(--sfp-primary) !important;
box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2) !important;
}
.sfp-error {
border-color: #E85A5A !important;
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2) !important;
}


/* ====================================================================== */
/* Dashboard Styles
/* ====================================================================== */

.sfp-modern-dashboard {
background: var(--sfp-gray-50);
min-height: 100vh;
padding: 24px;
max-width: 95%;
}
/* Header */
.sfp-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.sfp-title {
font-size: 28px;
font-weight: 600;
color: var(--sfp-gray-900);
margin: 0 0 4px 0;
}
.sfp-subtitle {
font-size: 14px;
color: var(--sfp-gray-500);
margin: 0;
}

/* Tabs */
.sfp-tabs {
display: flex;
gap: 4px;
background: var(--sfp-white);
padding: 4px;
border-radius: var(--sfp-border-radius-lg);
margin-bottom: 20px;
box-shadow: var(--sfp-shadow-sm);
border: 1px solid var(--sfp-gray-200);
}
.sfp-tab {
padding: 8px 16px;
border-radius: var(--sfp-border-radius);
font-size: 13px;
font-weight: 500;
color: var(--sfp-gray-600);
text-decoration: none;
transition: all 0.2s;
}
.sfp-tab:hover {
color: var(--sfp-gray-900);
background: var(--sfp-gray-50);
}
.sfp-tab.active {
background: var(--sfp-gray-900);
color: var(--sfp-white);
}
/* Tab Content */
.sfp-tab-content {
display: block;
}
.sfp-tab-content[style*="display:none"],
.sfp-tab-content[style*="display: none"] {
display: none !important;
}
/* Filter Pills — FS-style view toggle */
.sfp-filter-pills {
display: inline-flex;
gap: 3px;
background: var(--sfp-border-color);
padding: 3px;
border-radius: var(--sfp-border-radius);
margin-bottom: 16px;
}
.sfp-pill {
padding: 6px 14px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
background: transparent;
color: var(--sfp-gray-600);
border: none;
text-decoration: none;
transition: all 0.2s;
cursor: pointer;
align-content: center;
}
.sfp-pill:hover {
background: var(--sfp-gray-200);
color: var(--sfp-primary-dark);
text-decoration: none;
}
.sfp-pill.active {
background: var(--sfp-info);
color: var(--sfp-white);
text-decoration: none;
}
.sfp-pill-custom {
padding: 4px 8px;
}
.sfp-custom-date-form {
display: flex;
align-items: center;
gap: 6px;
}
.sfp-date-input {
border: none;
background: transparent;
font-size: 13px;
font-weight: 500;
color: var(--sfp-gray-700);
padding: 2px 4px;
}
.sfp-apply {
background: var(--sfp-blue);
color: var(--sfp-text-primary);
border: none;
padding: 4px 12px;
border-radius: var(--sfp-border-radius);
font-size: 12px;
font-weight: 500;
cursor: pointer;
}

/* Summary Cards */
.sfp-cards-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.sfp-card {
background: var(--sfp-white);
border-radius: var(--sfp-border-radius-xl);
padding: 20px;
box-shadow: var(--sfp-shadow);
border: 1px solid var(--sfp-gray-200);
transition: all 0.3s;
}
.sfp-card:hover {
transform: translateY(-4px);
box-shadow: var(--sfp-shadow-lg);
}
.sfp-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.sfp-card-label {
font-size: 13px;
font-weight: 500;
color: var(--sfp-gray-600);
}
.sfp-card-icon {
width: 32px;
height: 32px;
border-radius: var(--sfp-border-radius);
display: flex;
align-items: center;
justify-content: center;
}
.sfp-card-green .sfp-card-icon {
background: var(--sfp-green-light);
color: var(--sfp-green);
}
.sfp-card-purple .sfp-card-icon {
background: var(--sfp-purple-light);
color: var(--sfp-purple);
}
.sfp-card-blue .sfp-card-icon {
background: var(--sfp-blue-light);
color: var(--sfp-blue);
}
.sfp-card-yellow .sfp-card-icon {
background: var(--sfp-yellow-light);
color: var(--sfp-yellow);
}
.sfp-card-value {
font-size: 28px;
font-weight: 700;
color: var(--sfp-gray-900);
margin-bottom: 12px;
}
.sfp-card-footer {
display: flex;
align-items: center;
gap: 8px;
}
.sfp-change {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
padding: 2px 6px;
border-radius: var(--sfp-border-radius);
}
.sfp-change-up {
background: var(--sfp-primary-xtralight);
color: var(--sfp-primary);
}
.sfp-change-down {
background: #FFE5E5;
color: #E85A5A;
}
.sfp-change-text {
font-size: 12px;
color: var(--sfp-gray-500);
}
.sfp-progress-bar {
flex: 1;
height: 4px;
background: var(--sfp-gray-200);
border-radius: 2px;
overflow: hidden;
}
.sfp-progress-fill {
height: 100%;
background: var(--sfp-purple);
border-radius: 2px;
}

.sfp-chart-wide {
grid-column: 1 / -1;
margin-bottom: 16px;
}
.sfp-chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}

.sfp-chart-menu {
background: none;
border: none;
color: var(--sfp-gray-400);
font-size: 18px;
cursor: pointer;
padding: 4px;
}
.sfp-chart-legend {
display: flex;
gap: 16px;
}
.sfp-legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--sfp-gray-600);
}
.sfp-legend-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.sfp-dot-primary {
background: var(--sfp-blue);
}
.sfp-dot-secondary {
background: var(--sfp-purple);
}
.sfp-chart-body {
position: relative;
height: 250px;
}
.sfp-chart-tall {
height: 300px;
}
/* Date Badge */
.sfp-date-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--sfp-white);
border: 1px solid var(--sfp-gray-200);
border-radius: var(--sfp-border-radius);
font-size: 13px;
color: var(--sfp-gray-600);
margin-bottom: 20px;
}
/* Charts Grid */
/* Detailed Metrics Cards */
.sfp-metrics-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.sfp-metric-card {
background: var(--sfp-info);
border-radius: var(--sfp-border-radius-xl);
padding: 24px;
box-shadow: var(--sfp-shadow);
display: flex;
align-items: center;
gap: 16px;
transition: all 0.3s ease;
}
.sfp-metric-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.sfp-metric-content {
flex: 1;
}
.sfp-metric-label {
font-size: 13px;
font-weight: 600;
color: var(--sfp-gray-900);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sfp-metric-value {
font-size: 24px;
font-weight: 700;
color: var(--sfp-gray-100);
margin-bottom: 4px;
}
.sfp-metric-note {
font-size: 12px;
color: var(--sfp-gray-900);
font-style: italic;
}
.sfp-metric-breakdown {
font-size: 11px;
color: var(--sfp-gray-900);
margin-top: 4px;
font-weight: 500;
}
.sfp-metrics-primary .sfp-metric-card:nth-child(1) {
background: var(--sfp-highlight);
}
.sfp-metrics-primary .sfp-metric-card:nth-child(1) .sfp-metric-value {
color: #2BA891;
}
.sfp-metrics-primary .sfp-metric-card:nth-child(2) {
background: var(--sfp-secondary);
}
.sfp-metrics-primary .sfp-metric-card:nth-child(2) .sfp-metric-value {
color: var(--sfp-primary-xtralight);
}
.sfp-metrics-secondary .sfp-metric-card:nth-child(1) {
background: var(--sfp-primary-light);
}
.sfp-metrics-secondary .sfp-metric-card:nth-child(1) .sfp-metric-value {
color: var(--sfp-secondary-dark);
}
.sfp-metrics-secondary .sfp-metric-card:nth-child(2) {
background: var(--sfp-primary-xtralight);
}
.sfp-metrics-secondary .sfp-metric-card:nth-child(2) .sfp-metric-value {
color: var(--sfp-primary-dark);
}
.sfp-metrics-secondary .sfp-metric-card:nth-child(3) {
background: var(--sfp-accent-light);
}
.sfp-metrics-secondary .sfp-metric-card:nth-child(3) .sfp-metric-value {
color: var(--sfp-danger);
}
.sfp-metric-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(123, 104, 166, 0.1);
}

.sfp-chart-wide {
grid-column: 1 / -1;
margin-bottom: 16px;
}
.sfp-chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}

.sfp-chart-menu {
background: none;
border: none;
color: var(--sfp-gray-400);
font-size: 18px;
cursor: pointer;
padding: 4px;
}
.sfp-chart-legend {
display: flex;
gap: 16px;
}
.sfp-legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--sfp-gray-600);
}
.sfp-legend-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.sfp-dot-primary {
background: var(--sfp-blue);
}
.sfp-dot-secondary {
background: var(--sfp-purple);
}
.sfp-chart-body {
position: relative;
height: 250px;
}
.sfp-chart-tall {
height: 300px;
}

/* ====================================================================== */
/* Tax Planning Section
/* ====================================================================== */

/* Tax Planning Dashboard Styles */
.sfp-tax-planning-section {
margin: 30px 0;
padding: 30px;
background: #ffffff;
border-radius: var(--sfp-border-radius-xl);
box-shadow: var(--sfp-shadow);
}
.sfp-tax-warning {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
background: linear-gradient(135deg, #FFE0CE 0%, #ffeaa7 100%);
border-radius: var(--sfp-border-radius-lg);
border-left: 4px solid #FFA26E;
}
.sfp-warning-icon {
font-size: 32px;
}
.sfp-warning-content h3 {
margin: 0 0 8px 0;
color: #B85E3A;
}
.sfp-warning-content p {
margin: 0;
color: #B85E3A;
}
/* Tax Insights */
.sfp-tax-insights {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 30px;
}
.sfp-insight {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
border-radius: var(--sfp-border-radius-lg);
font-size: .70rem;
font-weight: 600;
flex: 1;
min-width: 0;
}
.sfp-insight-success {
background: var(--sfp-gradient-lime-deposit);
}
.sfp-insight-warning {
background: linear-gradient(135deg, #FFE0CE 0%, #FFD4B8 100%);
border-left: 4px solid #FFA26E;
}
.sfp-insight-info {
background: linear-gradient(135deg, var(--sfp-secondary-light) 0%, #DAD4F8 100%);
border-left: 4px solid var(--sfp-secondary);
}
.sfp-insight-tip {
background: linear-gradient(135deg, var(--sfp-secondary-light) 0%, #DAD4F8 100%);
}
.sfp-insight-icon {
font-size: 20px;
}
/* Tax Cards Grid */
.sfp-tax-cards-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-bottom: 30px;
}
.sfp-tax-card {
background: #ffffff;
border-radius: var(--sfp-border-radius-xl);
padding: 24px;
box-shadow: 0 4px 12px rgba(123, 104, 166, 0.08);
border: 2px solid #EEF1F5;
}
.sfp-tax-card-primary {
border-color: var(--sfp-primary);
}
.sfp-tax-card-secondary {
border-color: var(--sfp-secondary);
}
.sfp-tax-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.sfp-tax-card-title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #1F2937;
}
.sfp-tax-badge {
padding: 4px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sfp-badge-recommended {
background: var(--sfp-primary);
color: #ffffff;
}
.sfp-badge-comparison {
background: var(--sfp-secondary);
color: #ffffff;
}
.sfp-tax-amount-large {
font-size: 36px;
font-weight: 700;
color: #1F2937;
margin-bottom: 20px;
}
.sfp-tax-breakdown {
border-top: 2px solid #EEF1F5;
padding-top: 16px;
}
.sfp-tax-line {
display: flex;
justify-content: space-between;
padding: 8px 0;
font-size: 14px;
color: #6B7280;
}
.sfp-tax-line-total {
border-top: 2px solid var(--sfp-gray-300);
margin-top: 8px;
padding-top: 12px;
font-size: 16px;
color: #1F2937;
}
.sfp-tax-note {
margin-top: 16px;
padding: 12px;
background: rgba(0, 0, 0, 0.03);
border-radius: var(--sfp-border-radius);
font-size: 13px;
color: #6B7280;
}
/* Quarterly Payment Section */
.sfp-quarterly-payment-section {
margin-bottom: 30px;
}

.sfp-payment-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.sfp-payment-card {
background: #ffffff;
border: 2px solid #EEF1F5;
border-radius: var(--sfp-border-radius-lg);
padding: 20px;
text-align: center;
}
.sfp-payment-card-deadline {
background: var(--sfp-gray-300);
border-color: var(--sfp-danger);
}
.sfp-payment-label {
font-size: 13px;
color: #6B7280;
margin-bottom: 8px;
font-weight: 500;
}
.sfp-payment-value {
font-size: 24px;
font-weight: 700;
color: #2BA891;
}
.sfp-value-success {
color: #2BA891;
}
.sfp-value-warning {
color: #FFA26E;
}
.sfp-payment-countdown {
margin-top: 8px;
font-size: 12px;
color: #6B7280;
font-weight: 500;
}
/* Quarterly Table */
.sfp-quarterly-breakdown {
background: #ffffff;
border-radius: var(--sfp-border-radius-lg);
overflow: hidden;
border: 2px solid #EEF1F5;
}
.sfp-quarterly-table {
width: 100%;
border-collapse: collapse;
}
.sfp-quarterly-table thead {
background: #f9fafb;
}
.sfp-quarterly-table th {
padding: 16px;
text-align: left;
font-size: 13px;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sfp-quarterly-table td {
padding: 16px;
border-top: 1px solid var(--sfp-gray-300);
font-size: 14px;
color: #1F2937;
}
.sfp-status-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}

.sfp-status-partial {
background: #FFE0CE;
color: #9a3412;
}
.sfp-status-unpaid {
background: #F5F7FA;
color: #6B7280;
}
/* Tax Tips */
.sfp-tax-tips {
margin-top: 30px;
}
.sfp-tips-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.sfp-tip-card {
background: var(--sfp-info);
border: 2px solid #EEF1F5;
border-radius: var(--sfp-border-radius-lg);
padding: 20px;
text-align: center;
}
.sfp-tip-icon {
font-size: 32px;
margin-bottom: 12px;
color: #ffffff;
}
.sfp-tip-content h4 {
margin: 0 0 8px 0;
font-size: 15px;
font-weight: 600;
color: #ffffff;
}
.sfp-tip-content p {
margin: 0;
font-size: 13px;
color: #ffffff;
line-height: 1.5;
}


/* ====================================================================== */
/* Quarterly Tax Reporting Section
/* ====================================================================== */

/* Enhanced Quarterly Tax Section Styling */
.sfp-quarterly-tax-section-enhanced {
background: var(--sfp-bg-card);
border-radius: var(--sfp-border-radius-xl);
padding: 32px;
margin-bottom: 24px;
box-shadow: var(--sfp-shadow-md);
border: 2px solid transparent;
}

.sfp-tax-warning {
background: linear-gradient(135deg, #f5576c 0%, #E85A5A 100%);
border-radius: var(--sfp-border-radius-lg);
padding: 20px;
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 0 30px rgba(245, 87, 108, 0.3);
}
.sfp-warning-icon {
font-size: 32px;
flex-shrink: 0;
}
.sfp-warning-content p {
margin: 0 0 8px 0;
color: var(--sfp-text-primary);
}
.sfp-warning-content p:last-child {
margin-bottom: 0;
}
.sfp-warning-content a {
color: var(--sfp-text-primary);
text-decoration: underline;
font-weight: 600;
}
.sfp-tax-info-card {
background: var(--sfp-bg-secondary);
border-radius: var(--sfp-border-radius-lg);
padding: 20px;
margin-bottom: 24px;
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
border: 1px solid var(--sfp-border-color);
}
.sfp-tax-info-item {
display: flex;
align-items: center;
gap: 12px;
}
.sfp-tax-info-label {
font-size: 14px;
color: var(--sfp-text-secondary);
font-weight: 600;
}
.sfp-tax-info-value {
font-size: 20px;
font-weight: 700;
color: var(--sfp-text-primary);
background: var(--sfp-gradient-lime-deposit);
padding: 6px 16px;
border-radius: var(--sfp-border-radius);
}
.sfp-tax-info-divider {
width: 2px;
height: 40px;
background: var(--sfp-border-color);
}
.sfp-quarterly-tax-table-container {
overflow-x: auto;
border-radius: var(--sfp-border-radius-lg);
margin-bottom: 24px;
}
.sfp-quarterly-tax-table {
width: 100%;
border-collapse: collapse;
background: var(--sfp-bg-secondary);
}
.sfp-quarterly-tax-table thead th {
background: var(--sfp-bg-primary);
color: var(--sfp-text-secondary);
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 16px 12px;
text-align: left;
border-bottom: 2px solid var(--sfp-border-color);
}
.sfp-quarterly-tax-table thead th small {
display: block;
font-size: 10px;
margin-top: 4px;
opacity: 0.8;
}
.sfp-quarterly-tax-table tbody tr {
transition: all 0.3s ease;
border-bottom: 1px solid var(--sfp-gray-300);
}
.sfp-quarterly-tax-table tbody tr:hover {
background: var(--sfp-bg-card-hover);
transform: translateX(4px);
}
.sfp-quarterly-tax-table tbody tr.paid-row {
opacity: 0.7;
}
/* Gradient row highlights */
.sfp-quarterly-tax-table tbody tr.gradient-orange:hover {
background: linear-gradient(90deg, rgba(123, 104, 238, 0.1) 0%, transparent 100%);
}
.sfp-quarterly-tax-table tbody tr.gradient-purple:hover {
background: linear-gradient(90deg, rgba(123, 104, 238, 0.1) 0%, transparent 100%);
}
.sfp-quarterly-tax-table tbody tr.gradient-cyan:hover {
background: linear-gradient(90deg, rgba(123, 104, 238, 0.1) 0%, transparent 100%);
}
.sfp-quarterly-tax-table tbody tr.gradient-pink:hover {
background: linear-gradient(90deg, rgba(123, 104, 238, 0.1) 0%, transparent 100%);
}
.sfp-quarterly-tax-table td {
padding: 16px 12px;
color: var(--sfp-text-primary);
}
.sfp-quarter-badge {
display: inline-block;
background: var(--sfp-success);
padding: 6px 12px;
border-radius: var(--sfp-border-radius);
font-size: 14px;
font-weight: 700;
}
.gradient-purple .sfp-quarter-badge {
background: var(--sfp-success);
}
.gradient-cyan .sfp-quarter-badge {
background: var(--sfp-success);
}
.gradient-pink .sfp-quarter-badge {
background: var(--sfp-success);
}

.sfp-actual-payment-input {
width: 120px;
padding: 8px 12px;
background: var(--sfp-bg-primary);
border: 2px solid var(--sfp-border-color);
border-radius: var(--sfp-border-radius);
color: var(--sfp-text-primary);
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
}
.sfp-actual-payment-input:focus {
outline: none;
border-color: var(--sfp-accent-cyan);
box-shadow: 0 0 20px rgba(55, 154, 246, 0.3);
}
.sfp-paid-checkbox {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.sfp-paid-checkbox input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: var(--sfp-accent-teal);
}
.sfp-checkbox-label {
font-size: 14px;
font-weight: 600;
color: var(--sfp-text-secondary);
}
.sfp-paid-checkbox input[type="checkbox"]:checked + .sfp-checkbox-label {
color: var(--sfp-accent-teal);
}
.sfp-variance {
text-align: center;
}
.sfp-variance-badge {
display: inline-block;
padding: 6px 12px;
border-radius: var(--sfp-border-radius);
font-weight: 700;
font-size: 14px;
}
.sfp-variance.positive .sfp-variance-badge {
background: var(--sfp-gradient-blue-purple);
color: var(--sfp-gray-800);
box-shadow: 0 0 20px rgba(67, 233, 123, 0.3);
}
.sfp-variance.negative .sfp-variance-badge {
background: var(--sfp-gradient-red);
color: var(--sfp-gray-800);
box-shadow: 0 0 20px rgba(245, 87, 108, 0.3);
}
.sfp-variance-empty {
color: var(--sfp-text-muted);
}
.sfp-totals-row {
background: var(--sfp-bg-primary);
font-size: 16px;
}
.sfp-totals-row td {
padding: 20px 12px;
border-top: 2px solid var(--sfp-border-color);
}
.sfp-tax-notes {
grid-template-columns: 1fr 1fr;
align-content: center;
}
.sfp-tax-note-item {
background: var(--sfp-bg-secondary);
border-radius: var(--sfp-border-radius-lg);
padding: 16px;
display: flex;
align-items: flex-start;
gap: 12px;
border: 1px solid var(--sfp-border-color);
}
.sfp-note-icon {
font-size: 24px;
flex-shrink: 0;
}
.sfp-tax-note-item p {
margin: 0;
font-size: 13px;
color: var(--sfp-text-secondary);
line-height: 1.6;
}
.sfp-tax-note-item strong {
color: var(--sfp-text-primary);
}


/* ====================================================================== */
/* Tables
/* ====================================================================== */

.sfp-modern-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.sfp-modern-table thead {
background: #f9fafb;
}
.sfp-modern-table th {
padding: 16px 20px;
text-align: left;
font-weight: 600;
font-size: 13px;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid var(--sfp-gray-200);
}
.sfp-modern-table tbody tr {
transition: all 0.2s ease;
}
.sfp-modern-table tbody tr:hover {
background: #f9fafb;
}
.sfp-modern-table td {
padding: 18px 20px;
border-bottom: 1px solid #EEF1F5;
font-size: 14px;
color: #374151;
}
.sfp-table-card {
background: var(--sfp-white);
border-radius: var(--sfp-border-radius-xl);
padding: 20px;
box-shadow: var(--sfp-shadow);
border: 1px solid var(--sfp-gray-200);
}
.sfp-table-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.sfp-table-title {
font-size: 16px;
font-weight: 600;
color: var(--sfp-gray-900);
margin: 0;
}
.sfp-table-scroll {
overflow-x: auto;
}
.sfp-table {
width: 100%;
border-collapse: collapse;
}
.sfp-table th {
text-align: left;
padding: 12px;
font-size: 12px;
font-weight: 600;
color: var(--sfp-gray-600);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid var(--sfp-gray-200);
}
.sfp-table td {
padding: 12px;
font-size: 14px;
color: var(--sfp-gray-700);
border-bottom: 1px solid var(--sfp-gray-100);
}
.sfp-table tbody tr:hover {
background: var(--sfp-gray-50);
}
.sfp-td-highlight {
font-weight: 600;
color: var(--sfp-gray-900);
}
.sfp-no-data {
text-align: center;
padding: 40px;
color: var(--sfp-gray-400);
}


/* ====================================================================== */
/* Seasonal Trends
/* ====================================================================== */

/* Block 1 */
.seasonal-trends-dashboard {
margin: 20px 0;
}
.dashboard-header {
margin-bottom: 30px;
}
.dashboard-header h2 {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 10px 0;
}
.no-data-message {
margin: 40px 0;
}
.no-data-message .notice {
padding: 30px;
text-align: center;
}
.no-data-message h3 {
margin-top: 0;
}
.sfp-trends-top-row {
display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
margin-bottom: 30px;
align-items: start;
}
.trends-controls {
background: #fff;
border: 1px solid var(--sfp-gray-200);
padding: 20px;
margin-bottom: 0;
border-radius: var(--sfp-border-radius);
}
.year-selector-group label {
display: block;
font-weight: 600;
margin-bottom: 10px;
}
.year-checkboxes {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 15px;
}
.year-checkbox {
display: flex;
align-items: center;
gap: 5px;
font-weight: normal;
cursor: pointer;
}
.year-checkbox input[type="checkbox"] {
margin: 0;
}
.seasonal-insights {
background: var(--sfp-primary-xtralight);
border: 1px solid var(--sfp-primary-light);
padding: 20px;
margin-bottom: 0;
border-radius: var(--sfp-border-radius);
}
.seasonal-insights h3 {
margin-top: 0;
color: var(--sfp-primary);
}
.insights-grid {
display: flex;
flex-grow: initial;
gap: 12px;
margin-top: 12px;
}
.insight-card {
display: flex;
align-items: center;
gap: 15px;
background: #fff;
padding: 15px;
border-radius: var(--sfp-border-radius);
border: 1px solid var(--sfp-primary-light);
flex: 1;
}
.insight-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--sfp-primary);
color: #fff;
border-radius: 50%;
}
.insight-icon .dashicons {
font-size: 20px;
width: 20px;
height: 20px;
}
.insight-content h4 {
margin: 0 0 5px 0;
font-size: 14px;
color: var(--sfp-primary);
}
.insight-content p {
margin: 0;
font-size: 13px;
line-height: 1.5;
}
.chart-section {
background: #fff;
border: 1px solid var(--sfp-gray-200);
padding: 20px;
margin-bottom: 30px;
border-radius: var(--sfp-border-radius);
}
.chart-header {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid var(--sfp-gray-200);
}
.chart-header h3 {
margin: 0 0 5px 0;
}
.chart-description {
margin: 0;
color: #6B7280;
font-size: 13px;
}

.table-container {
overflow-x: auto;
}
.table-container table {
margin: 0;
}


/* Sport Heat Map Styles */

.heatmap-legend {
margin-top: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: var(--sfp-border-radius);
}
.heatmap-legend .legend-title {
font-weight: 600;
margin-bottom: 10px;
color: #4B5563;
}
.heatmap-legend .legend-gradient {
display: flex;
align-items: center;
gap: 10px;
}
.heatmap-legend .legend-bar {
flex: 1;
height: 20px;
background: linear-gradient(to right,
rgb(220, 235, 255),
rgb(150, 190, 230),
rgb(80, 125, 170));
border-radius: var(--sfp-border-radius);
border: 1px solid #E2E6EC;
}
.heatmap-legend .legend-label {
font-size: 12px;
color: #6B7280;
font-weight: 600;
}
.heatmap-container {
overflow-x: auto;
}
.heatmap-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.heatmap-table th,
.heatmap-table td {
padding: 12px 8px;
text-align: center;
border: 1px solid var(--sfp-gray-200);
}
.heatmap-table th {
background: #F5F7FA;
font-weight: 600;
}
.heatmap-table .month-label {
background: #F5F7FA;
font-weight: 600;
text-align: left;
}
.heatmap-cell {
cursor: pointer;
transition: transform 0.2s;
}
.heatmap-cell:hover {
transform: scale(1.05);
box-shadow: 0 2px 8px rgba(123, 104, 166, 0.15);
}
.heatmap-cell span {
font-weight: 600;
color: var(--sfp-gray-800);
}


/* ====================================================================== */
/* Quarterly Tax Section
/* ====================================================================== */

/* Quarterly Tax Section Styles */
.sfp-quarterly-tax-section {
background: #fff;
border-radius: var(--sfp-border-radius-lg);
padding: 30px;
box-shadow: var(--sfp-shadow);
margin-top: 40px;
}
.sfp-tax-warning {
background: #FFE0CE;
border-left: 4px solid #FFA26E;
padding: 16px 20px;
border-radius: var(--sfp-border-radius);
margin-bottom: 20px;
}
.sfp-tax-warning p {
margin: 4px 0;
}
.sfp-tax-warning a {
color: var(--sfp-primary);
font-weight: 600;
text-decoration: none;
}
.sfp-tax-warning a:hover {
text-decoration: underline;
}
.sfp-tax-info {
background: var(--sfp-primary-xtralight);
border-left: 4px solid var(--sfp-primary);
padding: 12px 20px;
border-radius: var(--sfp-border-radius);
margin-bottom: 20px;
}
.sfp-tax-info p {
margin: 0;
font-size: 14px;
}
.sfp-quarterly-tax-table-container {
overflow-x: auto;
margin: 20px 0;
}
.sfp-quarterly-tax-table {
width: 100%;
border-collapse: collapse;
}
.sfp-quarterly-tax-table thead {
background: #f9fafb;
}
.sfp-quarterly-tax-table th {
padding: 16px;
text-align: left;
font-weight: 700;
font-size: 13px;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid var(--sfp-gray-200);
}
.sfp-quarterly-tax-table th small {
display: block;
font-size: 11px;
font-weight: 500;
text-transform: none;
margin-top: 4px;
color: var(--sfp-gray-500);
}
.sfp-quarterly-tax-table td {
padding: 16px;
border-bottom: 1px solid var(--sfp-gray-300);
font-size: 14px;
}
.sfp-quarterly-tax-table tbody tr:hover {
background: #f9fafb;
}
.sfp-quarterly-tax-table tbody tr.paid-row {
background: var(--sfp-primary-xtralight);
}
.sfp-quarterly-tax-table tfoot {
background: #f9fafb;
border-top: 2px solid #E2E6EC;
}
.sfp-quarterly-tax-table tfoot td {
padding: 20px 16px;
font-size: 15px;
border-bottom: none;
}
.sfp-actual-payment-input {
width: 120px;
padding: 8px 12px;
border: 2px solid #E2E6EC;
border-radius: var(--sfp-border-radius);
font-size: 14px;
transition: all 0.3s ease;
}
.sfp-actual-payment-input:focus {
outline: none;
border-color: var(--sfp-primary);
box-shadow: 0 0 0 3px rgba(55, 154, 246, 0.1);
}
.sfp-paid-checkbox {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.sfp-paid-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
}
.sfp-paid-checkbox span {
font-weight: 600;
font-size: 13px;
}
.sfp-variance {
font-weight: 600;
}
.sfp-variance.positive {
color: var(--sfp-primary);
}
.sfp-variance.negative {
color: #E85A5A;
}
.sfp-tax-notes {
background: #f9fafb;
border-radius: var(--sfp-border-radius);
padding: 16px 20px;
margin-top: 20px;
align-content: center;
}
.sfp-tax-notes p {
margin: 8px 0;
font-size: 13px;
color: #6B7280;
}
.sfp-tax-notes strong {
color: #374151;
}


/* ====================================================================== */
/* Expenses Form Fields
/* ====================================================================== */

.sfp-file-upload-wrapper {
position: relative;
margin-top: 8px;
}
.sfp-file-input {
position: absolute;
opacity: 0;
width: 0.1px;
height: 0.1px;
overflow: hidden;
z-index: -1;
}
.sfp-file-label {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
background: linear-gradient(135deg, var(--sfp-primary-light) 0%, var(--sfp-secondary-light) 100%);
border: 2px dashed var(--sfp-primary-dark);
border-radius: var(--sfp-border-radius-lg);
cursor: pointer;
transition: all 0.3s ease;
color: white;
font-weight: 600;
}
.sfp-file-label:hover {
background: linear-gradient(135deg, var(--sfp-secondary-light) 0%, var(--sfp-primary-light) 100%);
border-color: var(--sfp-primary-dark);
transform: translateY(-2px);
}
.sfp-file-label:active {
transform: translateY(0);
}
.sfp-drop-active .sfp-file-label {
background: linear-gradient(135deg, var(--sfp-secondary-dark) 0%, var(--sfp-secondary) 100%);
border-color: rgba(255, 255, 255, 0.7);
border-style: solid;
transform: scale(1.02);
box-shadow: 0 8px 24px rgba(55, 154, 246, 0.5);
}
.sfp-file-icon {
font-size: 32px;
line-height: 1;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.sfp-file-text {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.sfp-file-primary {
font-size: 16px;
font-weight: 700;
}
.sfp-file-secondary {
font-size: 13px;
font-weight: 400;
}
.sfp-file-name {
margin-top: 12px;
padding: 12px;
background: var(--sfp-primary-xtralight);
border: 1px solid #bae6fd;
border-radius: var(--sfp-border-radius);
color: #0c4a6e;
font-weight: 600;
display: none;
}
.sfp-file-name.has-file {
display: block;
}
.sfp-file-name::before {
content: "✓ ";
color: #0891b2;
font-weight: 700;
}
.sfp-current-file {
padding: 12px;
background: var(--sfp-primary-xtralight);
border: 1px solid var(--sfp-primary-light);
border-radius: var(--sfp-border-radius);
margin-bottom: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.sfp-current-file strong {
color: var(--sfp-primary-dark);
}
.sfp-delete-file {
color: #E85A5A;
text-decoration: none;
font-weight: 600;
padding: 6px 12px;
border-radius: var(--sfp-border-radius);
transition: all 0.2s;
}
.sfp-delete-file:hover {
background: #FFE5E5;
color: #d04444;
}
.sfp-expense-form-page {
background: #F5F7FA;
margin: -10px -20px;
padding: 20px;
}

/* ====================================================================== */
/* Form Styles
/* ====================================================================== */

.sfp-expense-form-page {
background: #F5F7FA;
margin: -10px -20px;
padding: 20px;
}
.sfp-form-container {
max-width: 900px;
margin: 20px 0;
}
.sfp-form-card {
background: white;
border-radius: var(--sfp-border-radius);
padding: 30px;
box-shadow: var(--sfp-shadow-sm);
margin-bottom: 20px;
}
.sfp-form-card h2 {
margin: 0 0 25px 0;
padding-bottom: 15px;
border-bottom: 2px solid var(--sfp-gray-200);
font-size: 18px;
color: #374151;
}

.sfp-form-actions .button-large {
padding: 12px 30px !important;
height: auto !important;
font-size: 16px !important;
min-height: 50px;
}
.sfp-form-actions .button-primary {
background: var(--sfp-gradient-blue-purple);
border: none;
color: #fff;
text-shadow: none;
}
.sfp-form-actions .button-primary:hover {
background: var(--sfp-gradient-blue-deep);
color: #fff;
}

.sfp-frontend-form {
background: #fff;
margin: 0 20px 20px;
padding: 20px;
box-shadow: var(--sfp-shadow-sm);
border: 1px solid var(--sfp-gray-200);
}


/* ====================================================================== */
/* Expenses List
/* ====================================================================== */

.sfp-expenses-page {
background: #F5F7FA;
margin: -10px -20px;
padding: 3vh 6vh 2vh 3vh;
}
.sfp-expenses-page .wp-heading-inline {
font-size: 28px;
font-weight: 700;
color: #374151;
}
/* .sfp-expenses-page .page-title-action — inherits from global [class*="sfp-"] .page-title-action */


/* ====================================================================== */
/* Expenses List Core
/* ====================================================================== */

.sfp-expenses-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}

/* Expenses Header with Actions */
.sfp-expenses-header {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 20px;
margin: 20px 0;
}

.sfp-expenses-actions {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}

.sfp-year-filter {
display: flex;
align-items: center;
gap: 8px;
}

.sfp-year-filter label {
font-weight: 600;
color: var(--sfp-gray-700);
}

.sfp-year-filter select {
padding: 8px 12px;
border: 1px solid var(--sfp-gray-200);
border-radius: var(--sfp-border-radius);
font-size: 14px;
background: white;
cursor: pointer;
}

.sfp-export-buttons {
display: flex;
gap: 10px;
}

.sfp-export-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
font-weight: 500;
border-radius: var(--sfp-border-radius);
transition: all 0.2s ease;
}

.sfp-export-btn .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
margin-top: 5px;
}

.sfp-export-btn:hover {
background: var(--sfp-primary);
color: white;
border-color: var(--sfp-primary);
}

#export-expenses-csv {
background: var(--sfp-primary-xtralight);
border-color: var(--sfp-primary);
color: var(--sfp-primary-dark);
}

#export-expenses-csv:hover {
background: var(--sfp-primary);
color: white;
border-color: var(--sfp-primary);
}

#export-expenses-pdf {
background: #FFF5F5;
border-color: #ef4444;
color: #E85A5A;
}

#export-expenses-pdf:hover {
background: #ef4444;
color: white;
border-color: #ef4444;
}

/* Expense Category Summary */
.sfp-category-summary {
background: linear-gradient(135deg, #f8fafc 0%, #F5F7FA 100%);
border: 1px solid #EEF1F5;
border-radius: var(--sfp-border-radius-lg);
padding: 20px 25px;
margin-bottom: 25px;
}

.sfp-category-summary-title {
font-size: 16px;
font-weight: 600;
color: #374151;
margin: 0 0 18px 0;
padding-bottom: 12px;
border-bottom: 2px solid #EEF1F5;
}

.sfp-category-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
margin-bottom: 18px;
}

.sfp-category-item {
background: white;
border-radius: var(--sfp-border-radius);
padding: 12px 15px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.sfp-category-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}

.sfp-category-name {
font-size: 13px;
color: #4B5563;
font-weight: 500;
}

.sfp-category-amount {
font-size: 14px;
font-weight: 700;
color: #1F2937;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", monospace;
}

.sfp-category-bar {
height: 6px;
background: #EEF1F5;
border-radius: var(--sfp-border-radius);
overflow: hidden;
}

.sfp-category-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--sfp-secondary) 0%, #6B93D0 100%);
border-radius: var(--sfp-border-radius);
transition: width 0.3s ease;
}

.sfp-category-total {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15px;
border-top: 2px solid #EEF1F5;
font-size: 15px;
}

.sfp-category-total span {
color: #6B7280;
font-weight: 500;
}

.sfp-category-total strong {
font-size: 18px;
color: #1F2937;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", monospace;
}

.sfp-expenses-table {
border: none;
box-shadow: none;
}
.sfp-expenses-table thead {
background: #f9fafb;
}
.sfp-expenses-table th {
padding: 18px 20px;
font-weight: 600;
font-size: 13px;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid var(--sfp-gray-200);
}
.sfp-expenses-table td {
padding: 18px 20px;
font-size: 14px;
border-bottom: 1px solid #EEF1F5;
}
.sfp-expenses-table tbody tr {
transition: all 0.2s ease;
}
.sfp-expenses-table tbody tr:hover {
background: #f9fafb;
}
.sfp-category-badge {
display: inline-block;
padding: 4px 10px;
border-radius: var(--sfp-border-radius-lg);
font-size: 11px;
font-weight: 600;
background: var(--sfp-primary-xtralight);
color: var(--sfp-primary-dark);
text-transform: uppercase;
letter-spacing: 0.3px;
}

/* ====================================================================== */
/* Crewer List
/* ====================================================================== */

.wp-list-table.crewers-table {
font-size: 15px;
border:1px solid #e6e6e6;
box-shadow: var(--sfp-shadow);
border-radius: var(--sfp-border-radius);
overflow: hidden;
}
.wp-list-table.crewers-table thead th {
background: linear-gradient(135deg, var(--sfp-primary) 0%, var(--sfp-primary-dark) 100%);
color: #fff;
font-weight: 600;
padding: 18px 20px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
border: none;
}
.wp-list-table.crewers-table tbody tr {
transition: all 0.2s ease;
border-bottom: 1px solid #EEF1F5;
}
.wp-list-table.crewers-table tbody tr:hover {
background: #f8f9fa;
transform: translateX(2px);
}
.wp-list-table.crewers-table tbody td {
padding: 20px;
font-size: 15px;
vertical-align: middle;
border: none;
}
.wp-list-table.crewers-table tbody td strong {
color: #374151;
font-size: 16px;
}
.wp-list-table.crewers-table .button {
padding: 8px 16px;
font-size: 14px;
border-radius: var(--sfp-border-radius);
margin-right: 8px;
transition: all 0.2s ease;
}
.wp-list-table.crewers-table .button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(123, 104, 166, 0.15);
}
.remove-crewer-btn:hover {
background: #d04444 !important;
}


/* ====================================================================== */
/* Company List
/* ====================================================================== */

.sfp-clients-page {
background: #F5F7FA;
margin: -10px -20px;
padding: 3vh 6vh 2vh 3vh;
}
.sfp-clients-page .wp-heading-inline {
font-size: 28px;
font-weight: 700;
color: #374151;
}
/* .sfp-clients-page .page-title-action — inherits from global [class*="sfp-"] .page-title-action */

/* ====================================================================== */
/* Frontend Styles
/* ====================================================================== */

.sfp-frontend-container {
background: #c9d9e8;
padding: 20px;
margin: 0px;
min-height: 100vh;
border-radius: 40px;
}
.sfp-frontend-container .wrap {
max-width: none;
margin: 0;
}

.sfp-frontend-header {
background: #fff;
padding: 23px 20px;
margin: 0 0 20px;
border-bottom: 1px solid #E2E6EC;
display: flex;
justify-content: space-between;
align-items: center;
border-radius:25px;
}
.sfp-frontend-header h1 {
font-size: 23px;
font-weight: 400;
margin: 0;
padding: 9px 0 4px;
line-height: 1.3;
color: #374151;
}
/* .sfp-frontend-header .page-title-action — inherits from global [class*="sfp-"] .page-title-action */

.sfp-frontend-table {
width: 100%;
border-collapse: collapse;
background: #fff;
}
.sfp-frontend-table th {
background: #F5F7FA;
padding: 8px 10px;
text-align: left;
font-weight: 600;
border-bottom: 1px solid #E2E6EC;
font-size: 14px;
color: #4B5563;
}
.sfp-frontend-table td {
padding: 10px;
border-bottom: 1px solid #E2E6EC;
font-size: 14px;
color: #4B5563;
}
.sfp-frontend-table tr:hover {
background: #F5F7FA;
}
.sfp-frontend-table strong {
font-weight: 600;
color: #374151;
}

/* ====================================================================== */
/* Client List Core
/* ====================================================================== */

.sfp-clients-table {
border: none;
box-shadow: none;
}
.sfp-clients-table thead {
background: #f9fafb;
}
.sfp-clients-table th {
padding: 18px 20px;
font-weight: 600;
font-size: 13px;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid var(--sfp-gray-200);
}
.sfp-clients-table td {
padding: 18px 20px;
font-size: 14px;
border-bottom: 1px solid #EEF1F5;
}
.sfp-clients-table tbody tr {
transition: all 0.2s ease;
}
.sfp-clients-table tbody tr:hover {
background: #f9fafb;
}
.sfp-clients-table a {
color: var(--sfp-gray-700);
font-weight: 600;
text-decoration: none;
transition: color 0.2s ease;
}
.sfp-clients-table a:hover {
color: var(--sfp-primary-dark);
}

/* Companies Card Grid */
.sfp-companies-grid {
column-count: 4;
column-gap: 12px;
}
.sfp-company-card {
background: var(--sfp-white);
border: 1px solid var(--sfp-gray-200);
border-radius: var(--sfp-border-radius-lg);
padding: 14px 16px;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.2s ease;
break-inside: avoid;
margin-bottom: 12px;
}
.sfp-company-card:hover {
border-color: var(--sfp-gray-300);
box-shadow: var(--sfp-shadow);
transform: translateY(-2px);
}
.sfp-company-card-link {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
flex: 1;
min-width: 0;
}
.sfp-company-card-link:hover {
text-decoration: none;
}
.sfp-company-card-name {
font-size: 14px;
font-weight: 600;
color: var(--sfp-gray-700);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sfp-company-card-link:hover .sfp-company-card-name {
color: var(--sfp-primary-dark);
}
.sfp-company-card .sfp-overflow-btn {
display: flex;
align-items: center;
justify-content: center;
}

/* Employment Type Badges — Detail Pages */
.sfp-employment-badge {
display: inline-block;
padding: 6px 12px;
border-radius: var(--sfp-border-radius);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sfp-employment-badge.sfp-badge-1099 {
background: var(--sfp-primary-xtralight);
color: var(--sfp-primary-dark);
border: 1px solid var(--sfp-primary-light);
}
.sfp-employment-badge.sfp-badge-w2 {
background: var(--sfp-accent-light);
color: #C75B12;
border: 1px solid var(--sfp-accent);
}


/* ====================================================================== */
/* Edit Company
/* ====================================================================== */

.sfp-required {
color: #E85A5A;
font-weight: 700;
}
.sfp-field-description {
margin: 8px 0 0 0;
color: #6B7280;
font-size: 13px;
font-style: italic;
}

/* ====================================================================== */
/* Responsive Styling
/* ====================================================================== */

/* Small mobile devices */
@media (max-width: 480px) {
	.wrap {
	margin: 5px 5px 0 0;
	}
	.sfp-container {
	margin: 10px 0;
	}
	.sfp-section {
	padding: 12px;
	margin-bottom: 10px;
	}
	.sfp-section-title {
	font-size: 16px;
	}
	.sfp-form-grid,
	.sfp-day-grid {
	gap: 12px;
	}
	.sfp-input,
	.sfp-select,
	.sfp-textarea {
	padding: 12px;
	font-size: 16px;
	}
	.sfp-form-group input,
	.sfp-form-group select,
	.sfp-form-group textarea {
	padding: 12px;
	font-size: 16px;
	}
	.sfp-header {
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	}
	.sfp-charts-grid,
	.sfp-metrics-row {
	grid-template-columns: 1fr;
	}
	.sfp-tabs {
	overflow-x: auto;
	}
	.sfp-filter-pills {
	overflow-x: auto;
	}
	.sfp-tax-cards-grid {
	grid-template-columns: 1fr;
	}
	.sfp-payment-summary {
	grid-template-columns: repeat(2, 1fr);
	}
	.sfp-tips-grid {
	grid-template-columns: repeat(2, 1fr);
	}
	.sfp-tax-planning-section {
	padding: 20px;
	}
	.sfp-payment-summary,
	.sfp-tips-grid {
	grid-template-columns: 1fr;
	}
	.sfp-quarterly-table {
	font-size: 12px;
	}
	.sfp-quarterly-table th,
	.sfp-quarterly-table td {
	padding: 12px 8px;
	}
	.sfp-quarterly-tax-section-enhanced {
	padding: 20px;
	}
	.sfp-tax-info-card {
	flex-direction: column;
	gap: 16px;
	}
	.sfp-tax-info-divider {
	width: 100%;
	height: 2px;
	}
	.sfp-tax-notes {
	grid-template-columns: 1fr;
	}
	.sfp-actions {
	padding: 12px;
	}
	.sfp-dashboard-wrap {
	padding: 5px;
	}
	.sfp-section-title {
	font-size: 18px;
	}
	.sfp-stat-label {
	font-size: 12px;
	}
	.sfp-quick-action {
	padding: 15px 12px;
	}
	.sfp-action-title {
	font-size: 15px;
	}
	.sfp-action-description {
	font-size: 12px;
	}
	.sfp-day-entry {
	padding: 12px;
	}
	.sfp-day-header h3 {
	font-size: 15px;
	}
	.sfp-totals-section {
	padding: 12px;
	}
	.sfp-total-row {
	font-size: 13px;
	}
	.sfp-total-highlight {
	font-size: 15px;
	}
	.sfp-grand-total {
	font-size: 16px;
	}
	.sfp-settings-container {
	margin: 10px 0;
	}
	.sfp-settings-section {
	padding: 12px;
	margin-bottom: 10px;
	}
	.sfp-dashboard-wrap {
	padding: 5px;
	}
	.sfp-quick-action {
	padding: 15px 12px;
	}
	.sfp-action-title {
	font-size: 15px;
	}
	.sfp-action-description {
	font-size: 12px;
	}

	/* Card toggle for customization */
	.sfp-card-toggle {
	top: 5px;
	right: 5px;
	padding: 6px 10px;
	}
	.sfp-card {
	border-radius: var(--sfp-border-radius);
	margin-bottom: 10px;
	}
	.sfp-card-header {
	padding: 12px;
	}
	.sfp-card-header h2 {
	font-size: 16px;
	}
	.sfp-card-body {
	padding: 12px;
	}

	.sfp-table-container::after {
	content: '← Scroll horizontally to see more →';
	display: block;
	text-align: center;
	padding: 10px;
	font-size: 11px;
	color: var(--sfp-gray-600);
	font-style: italic;
	}
	.sfp-companies-grid {
	column-count: 1;
	}
}

/* Normal Mobile devices */
@media (max-width: 768px) {
	.sfp-dashboard-wrap {
	padding: 10px;
	}
	.sfp-stats-grid,
	.sfp-quick-actions-grid {
	grid-template-columns: 1fr;
	gap: 15px;
	}
	.sfp-modern-form {
	max-width: 100%;
	}
	.sfp-card {
	margin-bottom: 15px;
	border-radius: var(--sfp-border-radius);
	}
	.sfp-card-header {
	padding: 15px;
	}
	.sfp-card-header h2 {
	font-size: 18px;
	}
	.sfp-card-body {
	padding: 15px;
	}
	.sfp-empty-state {
	padding: 30px 15px;
	}

	.wrap {
	margin: 10px 10px 0 0;
	}
	.sfp-container {
	max-width: 100%;
	margin: 15px 0;
	}
	.sfp-table-container table {
	min-width: 1000px !important;
	font-size: 13px;
	}
	.sfp-table-container th,
	.sfp-table-container td {
	padding: 8px !important;
	white-space: nowrap !important;
	}
	.sfp-section {
	padding: 15px;
	margin-bottom: 15px;
	}
	.sfp-section-title {
	font-size: 18px;
	}
	.sfp-section-header {
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
	}

	.sfp-stat-value {
	font-size: 28px;
	}
	.sfp-stat-label {
	font-size: 13px;
	}

	.sfp-quick-action {
	padding: 20px 15px;
	}
	.sfp-action-title {
	font-size: 16px;
	}
	/* Dashboard controls */
	.sfp-dashboard-controls {
	flex-direction: column;
	width: 100%;
	}
	.sfp-btn-secondary {
	width: 100%;
	padding: 12px 20px;
	font-size: 14px;
	}

	.sfp-actions .button {
	padding: 6px 10px;
	font-size: 12px;
	margin-right: 3px;
	}
	.sfp-empty-state {
	padding: 30px 15px;
	}

	.sfp-frontend-container {
	padding: 15px;
	margin: 0 -15px;
	}
	.sfp-frontend-header {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	}
	.sfp-form-grid {
	grid-template-columns: 1fr;
	}
	.sfp-form-actions {
	flex-direction: column;
	}
	.button {
	width: 100%;
	text-align: center;
	}
	.wp-list-table.crewers-table {
	font-size: 13px;
	}
	.wp-list-table.crewers-table tbody td {
	padding: 15px 10px;
	}

	/* Recent activity */
	.sfp-activity-item {
	padding: 12px;
	}
	.sfp-activity-title {
	font-size: 14px;
	}
	.sfp-activity-meta {
	font-size: 12px;
	}

	/* Single column layout */
	.sfp-form-grid,
	.sfp-day-grid {
	grid-template-columns: 1fr;
	gap: 15px;
	}

	/* Larger touch-friendly inputs */
	.sfp-input,
	.sfp-select,
	.sfp-textarea {
	padding: 14px;
	font-size: 16px;
	min-height: 50px;
	}
	.sfp-form-group input,
	.sfp-form-group select,
	.sfp-form-group textarea {
	padding: 14px;
	font-size: 16px;
	min-height: 50px;
	}
	.sfp-textarea {
	min-height: 100px;
	}

	/* Form actions */
	.sfp-actions {
	flex-direction: column;
	padding: 15px;
	gap: 10px;
	}
	.sfp-btn {
	width: 100%;
	padding: 14px 24px;
	font-size: 16px;
	min-height: 50px;
	}
	.sfp-form-actions {
	flex-direction: column;
	gap: 10px;
	}
	.sfp-actions .button {
	padding: 6px 10px;
	font-size: 12px;
	margin-right: 3px;
	}
	.sfp-item-header,
	.sfp-item-row {
	grid-template-columns: 1fr;
	gap: 10px;
	}
	.sfp-item-header {
	display: none;
	}
	.sfp-item-row {
	padding: 15px;
	border: 2px solid #EEF1F5;
	border-radius: var(--sfp-border-radius);
	margin-bottom: 15px;
	}
	.sfp-expense-header,
	.sfp-expense-row {
	grid-template-columns: 1fr;
	gap: 10px;
	}
	.sfp-expense-header {
	display: none;
	}
	.button-large {
	width: 100%;
	padding: 14px 24px;
	font-size: 16px;
	min-height: 50px;
	}
	.remove-day-btn {
	width: 100%;
	}

	/* Help text */
	.sfp-help-text {
	font-size: 12px;
	}

	/* Day entries */
	.sfp-day-entry {
	padding: 15px;
	margin-bottom: 15px;
	}
	.sfp-day-header h3 {
	font-size: 16px;
	}
	/* Calculations display */
	.sfp-day-calculations {
	padding: 12px;
	}
	.sfp-calc-row {
	font-size: 14px;
	padding: 6px 0;
	}
	/* Totals section */
	.sfp-totals-section {
	padding: 15px;
	}
	.sfp-total-row {
	font-size: 14px;
	padding: 8px 0;
	}
	.sfp-total-highlight {
	font-size: 16px;
	}
	.sfp-grand-total {
	font-size: 18px;
	}
	.sfp-reimbursement-item {
	font-size: 13px;
	}

	/* Employment Type Styling */
	.sfp-employment-info {
	display: flex;
	flex-direction: column;
	gap: 8px;
	}
	.sfp-badge {
	display: inline-block;
	padding: 8px 16px;
	border-radius: var(--sfp-border-radius);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	width: fit-content;
	}
	.sfp-badge-1099 {
	background: var(--sfp-gray-100);
	color: var(--sfp-gray-500);
	border: 1px solid var(--sfp-gray-200);
	}
	.sfp-badge-w2 {
	background: var(--sfp-gray-100);
	color: var(--sfp-gray-500);
	border: 1px solid var(--sfp-gray-200);
	}

	.sfp-file-label {
	padding: 24px 20px;
	flex-direction: column;
	text-align: center;
	gap: 12px;
	}
	.sfp-file-icon {
	font-size: 48px;
	}
	.sfp-file-primary {
	font-size: 18px;
	}
	.sfp-file-secondary {
	font-size: 14px;
	}
	.sfp-current-file {
	flex-direction: column;
	gap: 10px;
	text-align: center;
	}
	.sfp-delete-file {
	width: 100%;
	display: block;
	}
	.sfp-quarterly-tax-table {
	font-size: 12px;
	}
	.sfp-quarterly-tax-table th,
	.sfp-quarterly-tax-table td {
	padding: 12px 8px;
	}
	.sfp-actual-payment-input {
	width: 100px;
	padding: 6px 8px;
	font-size: 12px;
	}
	.sfp-gigs-stats {
	grid-template-columns: 1fr;
	}
	.sfp-invoices-stats {
	grid-template-columns: 1fr;
	}
	.year-header {
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
	}
	.year-actions {
	width: 100%;
	}
	.year-actions .button {
	margin: 5px 5px 5px 0;
	}
	.historical-data-form table {
	font-size: 12px;
	}
	.historical-data-form input[type="number"] {
	max-width: 80px;
	font-size: 12px;
	}
	.insights-grid {
	grid-template-columns: 1fr;
	}
	.year-checkboxes {
	flex-direction: column;
	gap: 10px;
	}

	.sport-heatmap-table {
	font-size: 10px;
	}
	.sport-heatmap-cell {
	min-width: 45px;
	height: 40px;
	padding: 4px 2px;
	}
	.sport-heatmap-cell .cell-amount {
	font-size: 9px;
	}
	.sport-heatmap-cell .cell-percentage {
	font-size: 8px;
	}

	/* Dashboard Customization Styles */
	.sfp-dashboard-controls {
	display: flex;
	gap: 10px;
	margin-top: 15px;
	}
	.sfp-btn-secondary {
	background: #F5F7FA;
	color: #4B5563;
	border: 1px solid var(--sfp-gray-200);
	}
	.sfp-btn-secondary:hover {
	background: #E2E6EC;
	border-color: #E2E6EC;
	}
	.sfp-customizing .sfp-stat-card {
	cursor: move;
	position: relative;
	}
	.sfp-card-toggle {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(255, 255, 255, 0.95);
	padding: 8px 12px;
	border-radius: var(--sfp-border-radius);
	box-shadow: 0 2px 8px rgba(123, 104, 166, 0.15);
	z-index: 10;
	}
	.sfp-card-toggle label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	}
	.sfp-card-toggle input[type="checkbox"] {
	margin: 0;
	}
	.sfp-card-hidden {
	opacity: 0.4;
	pointer-events: none;
	}
	.sfp-customizing .sfp-card-hidden {
	opacity: 0.6;
	pointer-events: auto;
	}
	.sfp-notice {
	padding: 12px 20px;
	margin: 20px 0;
	border-radius: var(--sfp-border-radius);
	font-weight: 600;
	animation: slideIn 0.3s ease;
	}
	.sfp-notice-success {
	background: var(--sfp-primary-xtralight);
	color: var(--sfp-primary);
	border-left: 4px solid var(--sfp-primary);
	}
	.sfp-notice-error {
	background: #FFE5E5;
	color: #E85A5A;
	border-left: 4px solid #E85A5A;
	}
	@keyframes slideIn {
	from {
	opacity: 0;
	transform: translateY(-10px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
	.sfp-form-grid {
	grid-template-columns: repeat(2, 1fr);
	}
	.sfp-form-group.sfp-full-width {
	grid-column: 1 / -1;
	}
	.sfp-stats-grid,
	.sfp-quick-actions-grid {
	grid-template-columns: repeat(2, 1fr);
	}
}

/* Tablet and below */
@media (max-width: 1024px) {
	.sfp-dashboard-wrap {
	padding: 15px;
	}
	.sfp-stats-grid {
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	}
	.sfp-quick-actions-grid {
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	}
	.sfp-container {
	max-width: 100%;
	}
	.sfp-section {
	padding: 20px;
	}
	.sfp-form-grid {
	gap: 15px;
	}
	.sfp-modern-form {
	max-width: 100%;
	}
	.sfp-card-body {
	padding: 15px;
	}
	.sfp-form-grid,
	.sfp-day-grid {
	gap: 15px;
	}
	.sfp-settings-container {
	max-width: 100%;
	}
	.sfp-settings-section {
	padding: 20px;
	}
}

@media (max-width: 1200px) {
	.sfp-quarterly-tax-table-container {
	overflow-x: scroll;
	}
	.sfp-cards-grid {
	grid-template-columns: repeat(2, 1fr);
	}
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
	/* Ensure all interactive elements are at least 44x44px */
	.sfp-form-group input,
	.sfp-form-group select,
	.sfp-form-group textarea,
	.button-large,
	.remove-day-btn,
	.sfp-quick-action,
	.sfp-btn-secondary,
	.sfp-activity-item,
	.sfp-input,
	.sfp-select,
	.sfp-textarea,
	.sfp-btn {
	min-height: 44px;
	}
	.sfp-btn {
	-webkit-tap-highlight-color: rgba(123, 104, 166, 0.1);
	}
	.sfp-quick-action,
	.sfp-stat-card {
	-webkit-tap-highlight-color: rgba(123, 104, 166, 0.1);
	}
	.sfp-card-toggle label {
	min-height: 44px;
	display: flex;
	align-items: center;
	}
	.sfp-input,
	.sfp-select,
	.sfp-textarea,
	.sfp-btn {
	min-height: 44px;
	font-size: 16px;
	}
	.sfp-btn {
	-webkit-tap-highlight-color: rgba(123, 104, 166, 0.1);
	}
	/* Prevent zoom on input focus for iOS */
	.sfp-input,
	.sfp-select,
	.sfp-textarea {
	font-size: 16px;
	}
	.sfp-form-group input,
	.sfp-form-group select,
	.sfp-form-group textarea {
	font-size: 16px;
	}
	.sfp-actions .button {
	min-height: 44px;
	min-width: 44px;
	}
	/* Better tap highlighting */
	.button-large,
	.remove-day-btn {
	-webkit-tap-highlight-color: rgba(123, 104, 166, 0.1);
	}
}


/* Animations */
.sfp-section {
animation: fadeInUp 0.6s ease;
}
@keyframes fadeInUp {
	from {
	opacity: 0;
	transform: translateY(20px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
}


/* Dark mode support */
@media (prefers-color-scheme: dark) {
	.sfp-file-name {
	background: #1e3a4a;
	border-color: #2c5f7a;
	color: #7dd3fc;
	}
}

@media (hover: none) and (pointer: coarse) {
	.sfp-actions .button {
	min-height: 44px;
	min-width: 44px;
	}
}

/* Companies grid responsive */
@media (max-width: 1200px) {
	.sfp-companies-grid {
		column-count: 3;
	}
}
@media (max-width: 768px) {
	.sfp-companies-grid {
		column-count: 2;
	}
}
@media (max-width: 480px) {
	.sfp-companies-grid {
		column-count: 1;
	}
}

/* Bottom Add Day Button - v7.3.3 */
.sfp-add-day-bottom {
    margin: 20px 0;
    padding: 15px;
    text-align: center;
    background: #f8f9fa;
    border: 2px dashed #ddd;
    border-radius: var(--sfp-border-radius);
}

.sfp-add-day-bottom:hover {
    background: #e9ecef;
    border-color: var(--sfp-primary);
}

.sfp-add-day-bottom .button {
    font-size: 14px;
    padding: 8px 20px;
}

/* ====================================================================== */
/* Google Calendar Integration - v7.4.0
/* ====================================================================== */

.sfp-calendar-wrapper {
    background: #fff;
    border-radius: var(--sfp-border-radius);
    box-shadow: var(--sfp-shadow-md);
    padding: 20px;
    margin-top: 20px;
}

.sfp-calendar-not-connected {
    padding: 40px 20px;
    text-align: center;
}

.sfp-calendar-not-connected h3 {
    margin-top: 0;
    font-size: 1.5em;
}

.sfp-calendar-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #EEF1F5;
}

.sfp-calendar-toolbar {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.sfp-calendar-nav {
    display: flex;
    gap: 5px;
}

.sfp-calendar-nav .button {
    padding: 6px 12px;
    min-width: auto;
}

.sfp-calendar-nav .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin: 0;
}

.sfp-calendar-title {
    margin: 0;
    font-size: 1.3em;
    font-weight: 600;
    color: #374151;
}

.sfp-calendar-views {
    display: flex;
    gap: 5px;
}

.sfp-calendar-views .button.button-primary {
    background: var(--tradewind);
    border-color: var(--tradewind);
}

.sfp-calendar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sfp-calendar-filter {
    position: relative;
}

.sfp-calendar-filter-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    background: #fff;
    border: 1px solid #EEF1F5;
    border-radius: var(--sfp-border-radius);
    box-shadow: var(--sfp-shadow-lg);
    padding: 10px;
    min-width: 200px;
    margin-top: 5px;
}

.sfp-calendar-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: var(--sfp-border-radius);
    transition: background 0.2s;
}

.sfp-calendar-filter-item:hover {
    background: #f8f9fa;
}

.sfp-calendar-filter-item input {
    margin: 0;
    padding-left: 8px;
}

/* FullCalendar Overrides */
#sfp-google-calendar {
    min-height: 500px;
}

#sfp-google-calendar .fc {
    font-family: inherit;
}

#sfp-google-calendar .fc-toolbar {
    display: none; /* We use custom toolbar */
}

#sfp-google-calendar .fc-day-today {
    background: rgba(97, 175, 167, 0.1) !important;
}

#sfp-google-calendar .fc-event {
    cursor: pointer;
    border-radius: var(--sfp-border-radius);
    padding: 2px 4px;
    font-size: 12px;
}

#sfp-google-calendar .fc-event:hover {
    opacity: 0.9;
}

#sfp-google-calendar .fc-daygrid-day-number,
#sfp-google-calendar .fc-col-header-cell-cushion {
    color: #374151;
    text-decoration: none;
}

#sfp-google-calendar .fc-daygrid-day-number:hover {
    color: var(--tradewind);
}

/* Event Modal */
.sfp-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sfp-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.sfp-modal-content {
    position: relative;
    background: #fff;
    border-radius: var(--sfp-border-radius-lg);
    box-shadow: var(--sfp-shadow-lg);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 20px;
}

.sfp-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #EEF1F5;
    background: #f8f9fa;
}

.sfp-modal-title {
    margin: 0;
    font-size: 1.2em;
    font-weight: 600;
}

.sfp-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #6B7280;
    padding: 0;
    line-height: 1;
}

.sfp-modal-close:hover {
    color: #374151;
}

.sfp-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.sfp-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-top: 1px solid #EEF1F5;
    background: #f8f9fa;
}

.sfp-modal-footer-right {
    display: flex;
    gap: 10px;
}

.sfp-modal-delete {
    color: #E85A5A !important;
    border-color: #E85A5A !important;
}

.sfp-modal-delete:hover {
    background: #E85A5A !important;
    color: #fff !important;
}

/* Event Form */
#sfp-event-form .sfp-form-row {
    margin-bottom: 15px;
}

#sfp-event-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #374151;
}

#sfp-event-form input[type="text"],
#sfp-event-form input[type="datetime-local"],
#sfp-event-form input[type="date"],
#sfp-event-form select,
#sfp-event-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #E2E6EC;
    border-radius: var(--sfp-border-radius);
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#sfp-event-form input:focus,
#sfp-event-form select:focus,
#sfp-event-form textarea:focus {
    border-color: var(--tradewind);
    box-shadow: 0 0 0 3px rgba(97, 175, 167, 0.1);
    outline: none;
}

#sfp-event-form .sfp-form-row-checkbox {
    display: flex;
    align-items: center;
}

#sfp-event-form .sfp-form-row-checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}

#sfp-event-form .sfp-form-row-checkbox input {
    width: auto;
    margin: 0;
}

#sfp-event-form .sfp-form-row-inline {
    display: flex;
    gap: 15px;
}

#sfp-event-form .sfp-form-col {
    flex: 1;
}

#sfp-event-form .required {
    color: #E85A5A;
}

/* Color Picker */
.sfp-color-picker {
    margin-top: 5px;
}

.sfp-color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sfp-color-option {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sfp-color-option:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.sfp-color-option.selected {
    border-color: #374151;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #374151;
}

.sfp-color-option.sfp-color-default {
    background: #f8f9fa;
    border: 2px dashed #E2E6EC;
}

.sfp-color-option.sfp-color-default .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: #6B7280;
}

.sfp-color-option.sfp-color-default.selected {
    border-style: solid;
    border-color: #374151;
}

/* Notice styles for calendar */
.sfp-notice {
    padding: 15px 20px;
    border-radius: var(--sfp-border-radius);
    margin-bottom: 20px;
}

.sfp-notice-warning {
    background: #FFE0CE;
    border: 1px solid #FFA26E;
    color: #B85E3A;
}

.sfp-notice-warning a {
    color: #B85E3A;
}

/* Frontend calendar adjustments */
.sfp-calendar-wrapper.sfp-frontend {
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .sfp-calendar-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .sfp-calendar-toolbar {
        justify-content: center;
    }
    
    .sfp-calendar-actions {
        justify-content: center;
    }
    
    .sfp-modal-content {
        margin: 10px;
        max-height: 95vh;
    }
    
    #sfp-event-form .sfp-form-row-inline {
        flex-direction: column;
        gap: 15px;
    }
}

/* ==========================================================================
   AVAILABILITY REQUEST STYLES (v7.5.0)
   ========================================================================== */

/* Frontend Form Wrapper */
.sfp-availability-request-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.sfp-availability-form-container {
    background: #fff;
    border-radius: var(--sfp-border-radius);
    box-shadow: var(--sfp-shadow);
    overflow: hidden;
}

.sfp-availability-header {
    background: linear-gradient(135deg, var(--sfp-primary) 0%, var(--sfp-primary-dark) 100%);
    color: #fff;
    padding: 30px;
    text-align: center;
}

.sfp-availability-header h2 {
    margin: 0 0 10px 0;
    font-size: 28px;
    font-weight: 600;
}

.sfp-availability-header p {
    margin: 0;
    opacity: 0.9;
    font-size: 16px;
}

/* Form Sections */
.sfp-availability-form {
    padding: 30px;
}

.sfp-form-section {
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #EEF1F5;
}

.sfp-form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.sfp-form-section h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: #374151;
}

/* Form Grid */
.sfp-form-grid.sfp-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.sfp-form-group.sfp-full-width {
    grid-column: 1 / -1;
}

/* Field Hint */
.sfp-field-hint {
    display: block;
    font-size: 12px;
    color: #757575;
    margin-top: 4px;
}

/* Availability Check Button */
.sfp-availability-check {
    margin-top: 20px;
    padding: 15px;
    background: #F5F7FA;
    border-radius: var(--sfp-border-radius);
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.sfp-availability-check .button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sfp-availability-result {
    padding: 10px 15px;
    border-radius: var(--sfp-border-radius);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sfp-availability-result.sfp-available {
    background: var(--sfp-primary-xtralight);
    color: #105a76;
}

.sfp-availability-result.sfp-unavailable {
    background: #FFE5E5;
    color: #8B3030;
}

.sfp-availability-result.sfp-warning {
    background: #FFE0CE;
    color: #B85E3A;
}

/* Form Actions */
.sfp-form-actions {
    text-align: center;
    padding-top: 20px;
}

.sfp-form-actions .button-large {
    padding: 12px 40px;
    font-size: 16px;
    height: auto;
    line-height: 1.5;
}

/* Submit Button Loading State */
.sfp-btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Form Message */
.sfp-form-message {
    margin-top: 20px;
    padding: 15px 20px;
    border-radius: var(--sfp-border-radius);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}

.sfp-form-message.sfp-success {
    background: var(--sfp-primary-xtralight);
    color: #105a76;
    border: 1px solid var(--sfp-primary-light);
}

.sfp-form-message.sfp-error {
    background: #FFE5E5;
    color: #8B3030;
    border: 1px solid #FFB3B3;
}

/* Spinner */
.sfp-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--sfp-primary);
    border-radius: 50%;
    animation: sfp-spin 0.8s linear infinite;
}

@keyframes sfp-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Admin Availability Requests */
.sfp-availability-admin {
    max-width: 1400px;
}

.sfp-status-tabs {
    display: flex;
    gap: 0;
    margin: 20px 0;
    border-bottom: 1px solid #E2E6EC;
}

.sfp-status-tab {
    padding: 10px 20px;
    text-decoration: none;
    color: #6B7280;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -1px;
    background: transparent;
    transition: all 0.2s;
}

.sfp-status-tab:hover {
    color: var(--sfp-primary);
}

.sfp-status-tab.active {
    background: #fff;
    border-color: #E2E6EC;
    color: #374151;
    font-weight: 600;
}

.sfp-status-tab .count {
    color: #9CA3AF;
    font-weight: normal;
}

/* Admin Table */
.sfp-availability-table {
    margin-top: 0;
}

.sfp-availability-table .column-date {
    width: 120px;
}

.sfp-availability-table .column-status {
    width: 130px;
}

.sfp-availability-table .column-actions {
    width: 120px;
}

.sfp-availability-table .sfp-location {
    color: #9CA3AF;
}

.sfp-availability-table .sfp-location .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    vertical-align: middle;
}

.sfp-availability-table .sfp-status-select {
    width: 100%;
    max-width: 120px;
}

.sfp-availability-table .column-actions .button {
    padding: 4px 8px;
    min-height: auto;
}

.sfp-availability-table .column-actions .button .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* No items message */
.sfp-no-items {
    text-align: center;
    padding: 60px 20px;
    color: #9CA3AF;
}

.sfp-no-items .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

/* Status colors in admin */
.sfp-status-pending { background-color: var(--sfp-accent-light); color: #C75B12; }
.sfp-status-reviewed { background-color: var(--sfp-secondary-light); color: var(--sfp-secondary-dark); }
.sfp-status-confirmed { background-color: var(--sfp-highlight-light); color: #2D7A3A; }
.sfp-status-declined { background-color: #FFE5E5; color: var(--sfp-danger); }

/* Modal Large */
.sfp-modal-large .sfp-modal-content {
    max-width: 700px;
}

/* Request Detail Grid */
.sfp-request-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.sfp-detail-section {
    background: #F5F7FA;
    padding: 20px;
    border-radius: var(--sfp-border-radius);
}

.sfp-detail-section.sfp-full-width {
    grid-column: 1 / -1;
}

.sfp-detail-section.sfp-meta {
    grid-column: 1 / -1;
    background: transparent;
    padding: 15px 0 0 0;
    border-top: 1px solid #EEF1F5;
    color: #9CA3AF;
}

.sfp-detail-section h4 {
    margin: 0 0 15px 0;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sfp-detail-section p {
    margin: 0 0 8px 0;
    font-size: 14px;
    line-height: 1.5;
}

.sfp-detail-section p:last-child {
    margin-bottom: 0;
}

/* Updated row highlight */
.sfp-availability-table tr.sfp-updated {
    background: #fff8e5;
    transition: background 0.3s ease;
}

/* Loading state */
.sfp-loading {
    text-align: center;
    padding: 40px;
    color: #9CA3AF;
}

/* Responsive Availability Form */
@media (max-width: 600px) {
    .sfp-availability-request-wrapper {
        padding: 10px;
    }
    
    .sfp-availability-header {
        padding: 20px;
    }
    
    .sfp-availability-header h2 {
        font-size: 22px;
    }
    
    .sfp-availability-form {
        padding: 20px;
    }
    
    .sfp-form-grid.sfp-grid-2 {
        grid-template-columns: 1fr;
    }
    
    .sfp-availability-check {
        flex-direction: column;
        align-items: stretch;
    }
    
    .sfp-request-detail-grid {
        grid-template-columns: 1fr;
    }
}


/* ====================================================================== */
/* Customizable Dashboard Grid - v7.5.9
/* ====================================================================== */

/* Dashboard Header with Actions */
.sfp-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

.sfp-dashboard-header-content {
    flex: 1;
}

.sfp-dashboard-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sfp-dashboard-actions .button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sfp-dashboard-actions .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Dashboard Grid Container - Masonry Layout */
.sfp-dashboard-grid {
    margin-bottom: 30px;
}

/* Grid Sizer for Masonry - represents 1 column (25% of container) */
.sfp-grid-sizer,
.sfp-grid-col-1 { width: calc(25% - 15px); }
.sfp-grid-col-2 { width: calc(50% - 10px); }
.sfp-grid-col-3 { width: calc(75% - 5px); }
.sfp-grid-col-4 { width: 100%; }

/* Grid Cards */
.sfp-grid-card {
    margin-bottom: 20px;
}

/* Grid Cards */
.sfp-grid-card {
    background: #fff;
    border: 1px solid var(--sfp-gray-200);
    border-radius: var(--sfp-border-radius);
    overflow: hidden;
    box-shadow: var(--sfp-shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    /* Allow height to be responsive to content */
    align-self: start;
}

.sfp-grid-card:hover {
    box-shadow: var(--sfp-shadow);
}

/* Card Header - Always Visible */
.sfp-card-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #E2E6EC;
    gap: 10px;
}

/* Card Drag Handle - Hidden by Default, shown in header during customize */
.sfp-card-drag-handle {
    display: none;
    align-items: center;
    cursor: move;
}

.sfp-card-drag-handle .dashicons-move {
    color: var(--sfp-gray-500);
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.sfp-card-title {
    flex: 1;
    font-weight: 600;
    font-size: 15px;
    color: #374151;
    margin: 0;
}

.sfp-card-link {
    font-size: 12px;
    color: var(--sfp-primary);
    text-decoration: none;
    margin-left: auto;
}

.sfp-card-link:hover {
    text-decoration: underline;
}

/* Resize Buttons - Hidden by Default */
.sfp-card-resize {
    display: none;
    gap: 4px;
}

.sfp-resize-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--sfp-gray-200);
    border-radius: var(--sfp-border-radius);
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    color: var(--sfp-gray-600);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sfp-resize-btn:hover {
    background: #EEF1F5;
    border-color: var(--sfp-gray-300);
}

.sfp-resize-btn.active {
    background: var(--sfp-primary);
    border-color: var(--sfp-primary);
    color: #fff;
}

/* Card Content */
.sfp-card-content {
    padding: 20px;
}

/* Customizing Mode - Use CSS Grid when Masonry is disabled */
.sfp-dashboard-grid.sfp-customizing {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.sfp-dashboard-grid.sfp-customizing .sfp-grid-sizer {
    display: none;
}

.sfp-dashboard-grid.sfp-customizing .sfp-grid-col-1 { 
    width: auto;
    grid-column: span 1; 
}
.sfp-dashboard-grid.sfp-customizing .sfp-grid-col-2 { 
    width: auto;
    grid-column: span 2; 
}
.sfp-dashboard-grid.sfp-customizing .sfp-grid-col-3 { 
    width: auto;
    grid-column: span 3; 
}
.sfp-dashboard-grid.sfp-customizing .sfp-grid-col-4 { 
    width: auto;
    grid-column: span 4; 
}

.sfp-dashboard-grid.sfp-customizing .sfp-card-drag-handle {
    display: flex;
}

.sfp-dashboard-grid.sfp-customizing .sfp-card-resize {
    display: flex;
}

.sfp-dashboard-grid.sfp-customizing .sfp-grid-card {
    border: 2px dashed var(--sfp-primary);
    margin-bottom: 0;
}

.sfp-dashboard-grid.sfp-customizing .sfp-grid-card:hover {
    box-shadow: 0 4px 12px rgba(55, 154, 246, 0.2);
}

/* Sortable States */
.sfp-card-ghost {
    opacity: 0.4;
    background: var(--sfp-primary-xtralight);
}

.sfp-card-chosen {
    box-shadow: 0 8px 25px rgba(123, 104, 166, 0.15);
    transform: rotate(2deg);
}

.sfp-card-drag {
    opacity: 0.9;
}

/* Mini Stats Grid */
.sfp-stats-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
}

.sfp-mini-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: var(--sfp-border-radius);
    transition: background 0.2s ease;
}

.sfp-mini-stat:hover {
    background: #F5F7FA;
}

.sfp-mini-stat .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--sfp-primary);
}

.sfp-mini-stat-warning .dashicons {
    color: #E85A5A;
}

.sfp-mini-stat-info {
    flex: 1;
    min-width: 0;
}

.sfp-mini-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #374151;
    line-height: 1.2;
}

.sfp-mini-stat-label {
    font-size: 11px;
    color: var(--sfp-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Quick Actions Compact */
.sfp-quick-actions-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

.sfp-quick-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 15px;
    background: #f8f9fa;
    border: 1px solid var(--sfp-gray-200);
    border-radius: var(--sfp-border-radius);
    text-decoration: none;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.sfp-quick-btn:hover {
    background: var(--sfp-primary);
    border-color: var(--sfp-primary);
    color: #fff;
}

.sfp-quick-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Payroll Links Compact */
.sfp-payroll-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sfp-payroll-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: var(--sfp-border-radius);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.sfp-payroll-item:hover {
    background: var(--sfp-primary-xtralight);
    transform: translateX(3px);
}

.sfp-payroll-item .dashicons-money-alt {
    color: var(--sfp-primary);
    font-size: 18px;
}

.sfp-payroll-name {
    flex: 1;
    font-weight: 500;
    color: #374151;
}

.sfp-payroll-app-badge {
    font-size: 10px;
    padding: 2px 6px;
    background: #E2E6EC;
    border-radius: var(--sfp-border-radius);
    color: var(--sfp-gray-600);
}

.sfp-payroll-item .dashicons-external {
    color: var(--sfp-gray-500);
    font-size: 14px;
}

.sfp-payroll-item:hover .dashicons-external {
    color: var(--sfp-primary);
}

/* Compact List */
.sfp-compact-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sfp-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: var(--sfp-border-radius);
    gap: 10px;
}

.sfp-list-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sfp-list-item-main strong {
    font-size: 13px;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sfp-list-item-date,
.sfp-list-item-client {
    font-size: 11px;
    color: var(--sfp-gray-600);
}

.sfp-list-item-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.sfp-list-item-meta .sfp-amount {
    font-size: 13px;
    color: #374151;
}

/* Empty Card State */
.sfp-empty-card {
    text-align: center;
    padding: 30px 20px;
    color: var(--sfp-gray-600);
}

.sfp-empty-card .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    color: #ccc;
    margin-bottom: 10px;
}

.sfp-empty-card p {
    margin: 0;
    font-size: 13px;
}

/* Expense Summary Card */
.sfp-expense-summary {
    text-align: center;
    padding: 10px 0;
}

.sfp-expense-total {
    margin-bottom: 15px;
}

.sfp-expense-amount {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #374151;
    line-height: 1.2;
}

.sfp-expense-label {
    display: block;
    font-size: 13px;
    color: var(--sfp-gray-600);
    margin-top: 5px;
}

.sfp-quick-btn-small {
    display: inline-flex;
    padding: 8px 12px;
    font-size: 12px;
}

/* Upcoming Date Badge */
.sfp-upcoming-date {
    background: var(--sfp-primary-xtralight);
    color: var(--sfp-primary);
    padding: 4px 10px;
    border-radius: var(--sfp-border-radius);
    font-size: 12px;
    font-weight: 600;
}

/* Calendar Gig Link */
.sfp-gig-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
}

.sfp-gig-link:hover {
    color: var(--sfp-primary);
}

.sfp-gig-link:hover strong {
    text-decoration: underline;
}

.sfp-gig-link .dashicons {
    color: var(--sfp-gray-500);
    opacity: 0.6;
}

.sfp-gig-link:hover .dashicons {
    color: var(--sfp-primary);
    opacity: 1;
}

/* Source Badge */
.sfp-source-badge {
    font-size: 11px;
    margin-left: 4px;
}

.sfp-source-calendar {
    cursor: help;
}

/* Notice */
.sfp-notice {
    padding: 12px 20px;
    margin: 15px 0;
    border-radius: var(--sfp-border-radius);
    font-size: 14px;
}

.sfp-notice-success {
    background: var(--sfp-primary-xtralight);
    color: #105a76;
    border: 1px solid var(--sfp-primary-light);
}

.sfp-notice-error {
    background: #FFE5E5;
    color: #8B3030;
    border: 1px solid #FFB3B3;
}

/* Responsive Grid */
@media (max-width: 1200px) {
    /* 2-column grid at tablet */
    .sfp-grid-sizer,
    .sfp-grid-col-1 { width: calc(50% - 10px); }
    .sfp-grid-col-2 { width: calc(50% - 10px); }
    .sfp-grid-col-3,
    .sfp-grid-col-4 { width: 100%; }
}

@media (max-width: 782px) {
    /* 1-column grid on mobile */
    .sfp-grid-sizer,
    .sfp-grid-col-1,
    .sfp-grid-col-2,
    .sfp-grid-col-3,
    .sfp-grid-col-4 { width: 100%; }
    
    .sfp-dashboard-header {
        flex-direction: column;
    }
    
    .sfp-dashboard-actions {
        width: 100%;
    }
    
    .sfp-dashboard-actions .button {
        flex: 1;
        justify-content: center;
    }
}

/* ==========================================================================
   v7.11.0 — Inline styles migrated to classes
   ========================================================================== */

/* --- Settings Page --- */
.sfp-settings-description {
    margin-bottom: 15px;
}
.sfp-logo-preview {
    max-width: 200px;
    max-height: 80px;
    border: 1px solid var(--sfp-gray-200);
    padding: 10px;
    background: #fff;
}
.sfp-logo-preview-wrap {
    margin-top: 10px;
}
.sfp-mileage-rate-value {
    font-size: 1.2em;
}
.sfp-mileage-badge-custom {
    background: #FFE0CE;
    color: #B85E3A;
    padding: 2px 8px;
    border-radius: var(--sfp-border-radius);
    font-size: 12px;
    margin-left: 10px;
}
.sfp-mileage-badge-default {
    background: var(--sfp-primary-xtralight);
    color: #105a76;
    padding: 2px 8px;
    border-radius: var(--sfp-border-radius);
    font-size: 12px;
    margin-left: 10px;
}
.sfp-per-mile-label {
    margin-left: 5px;
}
.sfp-mileage-details {
    cursor: pointer;
}
.sfp-mileage-details summary {
    color: var(--sfp-primary);
}
.sfp-mileage-rates-table {
    margin-top: 10px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: var(--sfp-border-radius);
}
.sfp-mileage-rate-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px solid #eee;
}
.sfp-google-section {
    margin-top: 30px;
}
.sfp-google-connected {
    background: var(--sfp-primary-xtralight);
    padding: 15px;
    border-radius: var(--sfp-border-radius);
    margin-bottom: 20px;
}
.sfp-google-connected-text {
    margin: 0;
    color: #105a76;
}
.sfp-google-connected-icon {
    color: var(--sfp-primary);
}
.sfp-google-connected-actions {
    margin: 10px 0 0;
}
.sfp-google-disconnect-btn {
    color: #E85A5A;
    border-color: #E85A5A;
}
.sfp-google-calendar-heading {
    margin-top: 20px;
    margin-bottom: 10px;
}
.sfp-google-connect-wrap {
    margin-top: 15px;
}
.sfp-google-connect-icon {
    margin-top: 4px;
}
.sfp-google-setup-help {
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: var(--sfp-border-radius);
}
.sfp-google-setup-help h4 {
    margin-top: 0;
}
.sfp-google-setup-help ol {
    margin-bottom: 0;
}
.sfp-google-redirect-url {
    background: #fff;
    padding: 5px 10px;
    display: inline-block;
    margin-top: 5px;
}

/* --- Invoice Form & Edit Summary --- */
.sfp-field-hint {
    color: var(--sfp-gray-600);
    font-size: 12px;
    display: block;
    margin-top: 4px;
}
.sfp-summary-separator {
    padding-top: 10px;
    border-top: 1px solid #E2E6EC;
    margin-top: 10px;
}
.sfp-summary-reimbursement-row {
    padding-top: 10px;
    margin-top: 5px;
}
.sfp-summary-reimbursement-label {
    font-weight: 600;
}
.sfp-summary-indent {
    padding-left: 20px;
}
.sfp-summary-tax-row {
    padding-top: 10px;
    border-top: 1px solid #E2E6EC;
    margin-top: 10px;
}
.sfp-tax-rate-input {
    width: 80px;
    display: inline-block;
    padding: 4px 8px;
}
.sfp-summary-total-row {
    padding-top: 15px;
    margin-top: 10px;
    font-size: 1.2em;
}
.sfp-summary-total-label {
    font-weight: 700;
}
.sfp-summary-total-value {
    font-weight: 700;
    color: #fff;
}

/* --- Reporting --- */
.sfp-chart-legend-container {
    padding: 0 20px;
}
.sfp-monthly-breakdown-table {
    margin-top: 20px;
    border-top: 1px solid #EEF1F5;
    padding-top: 20px;
}
.sfp-chart-span-2 {
    grid-column: span 2;
}

/* --- Gigs List --- */
.sfp-nav-tab-borderless {
    border-bottom: none;
    margin-bottom: 0;
}
.sfp-stat-description small {
    color: var(--sfp-gray-600);
}
.sfp-inline-form {
    display: inline-block;
    margin-right: 5px;
}
.sfp-no-results-cell {
    text-align: center;
    padding: 40px 20px;
}
.sfp-no-results-text {
    color: var(--sfp-gray-600);
    font-size: 14px;
    margin: 0;
}

/* --- Gigs Edit --- */
.sfp-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.sfp-edit-header h1 {
    margin: 0;
}
.sfp-edit-header-actions {
    display: flex;
    gap: 10px;
}
.sfp-btn-generate {
    background: var(--sfp-primary);
    border-color: var(--sfp-primary);
}
.sfp-btn-view-invoice {
    background: var(--sfp-primary);
    border-color: var(--sfp-primary);
}

/* --- Dashboard --- */
.sfp-dashboard-icon-sm {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* --- Inline edit notices --- */
.sfp-inline-notice {
    margin: 10px 0;
}

/* --- Clients Add (Crewer rows) --- */
.sfp-remove-crewer-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #E85A5A;
    color: white;
    border: none;
    border-radius: var(--sfp-border-radius);
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
}
.sfp-crewer-row-heading {
    margin-top: 0;
    margin-bottom: 15px;
}

/* --- Expenses List --- */
.sfp-receipt-link {
    color: var(--sfp-primary);
}
.sfp-no-receipt {
    color: var(--sfp-gray-500);
}

/* --- Availability Admin --- */
.sfp-modal-add-calendar-btn {
    display: none;
}

/* --- Seasonal Trends --- */
.sfp-sunburst-chart {
    width: 100%;
    height: 500px;
}

/* --- Legend dot colors --- */
.sfp-legend-dot-green { background: var(--sfp-primary); }
.sfp-legend-dot-purple { background: var(--sfp-secondary); }
.sfp-legend-dot-blue { background: #60a5fa; }

/* --- Google Calendar color options --- */
.sfp-color-option[data-color="11"] { background-color: #dc2127; }
.sfp-color-option[data-color="4"] { background-color: #ff887c; }
.sfp-color-option[data-color="6"] { background-color: #ffb878; }
.sfp-color-option[data-color="5"] { background-color: #fbd75b; }
.sfp-color-option[data-color="10"] { background-color: #51b749; }
.sfp-color-option[data-color="2"] { background-color: #7ae7bf; }
.sfp-color-option[data-color="7"] { background-color: #46d6db; }
.sfp-color-option[data-color="9"] { background-color: var(--sfp-secondary); }
.sfp-color-option[data-color="1"] { background-color: var(--sfp-primary-light); }
.sfp-color-option[data-color="3"] { background-color: var(--sfp-primary-light); }
.sfp-color-option[data-color="8"] { background-color: #e1e1e1; }
.sfp-gigs-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 0;
}
.sfp-gigs-filter-bar .nav-tab-wrapper {
    flex-grow: 1;
}
.sfp-filters-group {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 5px 0;
}
.sfp-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sfp-filter-item label {
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}
.sfp-filter-item select {
    padding: 6px 12px;
    border: 1px solid #8c8f94;
    border-radius: var(--sfp-border-radius);
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    min-width: 140px;
}
.sfp-filter-item select:hover {
    border-color: var(--sfp-primary);
}
.sfp-filter-item select:focus {
    border-color: var(--sfp-primary);
    box-shadow: 0 0 0 1px var(--sfp-primary);
    outline: none;
}
.sfp-clear-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #F5F7FA;
    border: 1px solid var(--sfp-gray-200);
    border-radius: var(--sfp-border-radius);
    color: #6B7280;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s ease;
}
.sfp-clear-filter:hover {
    background: #fff;
    border-color: #E85A5A;
    color: #E85A5A;
}
.sfp-clear-filter .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}
/* Export Dropdown Styles */
.sfp-export-dropdown {
    position: relative;
    display: inline-block;
}
.sfp-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--sfp-primary) 0%, var(--sfp-primary-dark) 100%);
    color: #fff;
    border: none;
    border-radius: var(--sfp-border-radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.sfp-export-btn:hover {
    background: linear-gradient(135deg, var(--sfp-primary-dark) 0%, #0a4b78 100%);
}
.sfp-export-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}
.sfp-export-btn .dashicons-arrow-down-alt2 {
    font-size: 14px;
    width: 14px;
    height: 14px;
    margin-left: -2px;
}
.sfp-export-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid var(--sfp-gray-200);
    border-radius: var(--sfp-border-radius);
    box-shadow: 0 4px 12px rgba(123, 104, 166, 0.15);
    z-index: 1000;
    min-width: 160px;
}
.sfp-export-menu.active {
    display: block;
}
.sfp-export-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: #374151;
    text-decoration: none;
    font-size: 13px;
    transition: background 0.2s ease;
}
.sfp-export-option:hover {
    background: var(--sfp-primary-xtralight);
    color: var(--sfp-primary);
}
.sfp-export-option:first-child {
    border-radius: 4px 4px 0 0;
}
.sfp-export-option:last-child {
    border-radius: 0 0 4px 4px;
}
.sfp-export-option .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #6B7280;
}
.sfp-export-option:hover .dashicons {
    color: var(--sfp-primary);
}


/* --- Status icons --- */
.sfp-icon-success { color: var(--sfp-primary); }

/* --- Color preview swatch --- */
.sfp-color-preview {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: var(--sfp-border-radius);
    vertical-align: middle;
    margin-left: 10px;
    border: 1px solid var(--sfp-gray-300);
}

/* ==========================================================================
   v7.11.1 — Sticky table headers & additional fixes
   ========================================================================== */

/* --- Sticky table headers for all list views --- */
.sfp-sticky-header {
    position: fixed;
    z-index: 100;
    background: #fff;
    box-shadow: 0 2px 4px rgba(123, 104, 166, 0.1);
    overflow: hidden;
    display: none;
    border-bottom: 2px solid var(--sfp-gray-200);
}
.sfp-sticky-header table {
    margin: 0;
}
.sfp-sticky-header thead th {
    background-color: var(--sfp-gray-50);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sfp-gray-500);
    padding: 12px 16px !important;
}

/* =========================================
   Frontend Page Setup (Settings Tab)
   ========================================= */
.sfp-page-setup-section .sfp-page-setup-actions {
    margin-bottom: 16px;
}
.sfp-page-setup-table {
    margin-top: 8px;
    border: 1px solid var(--sfp-gray-200);
}
.sfp-page-setup-table th {
    font-weight: 600;
    background: #f8f9fa;
    padding: 10px 12px;
}
.sfp-page-setup-table td {
    padding: 10px 12px;
    vertical-align: middle;
}
.sfp-page-setup-table code {
    font-size: 12px;
    background: #EEF1F5;
    padding: 2px 6px;
    border-radius: var(--sfp-border-radius);
}
.sfp-page-setup-message {
    margin: 12px 0;
    padding: 10px 14px;
}
.sfp-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--sfp-border-radius-lg);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}
.sfp-status-ok {
    background: var(--sfp-primary-xtralight);
    color: #105a76;
}
.sfp-status-conflict {
    background: #FFE0CE;
    color: #B85E3A;
}
.sfp-status-missing {
    background: #EEF1F5;
    color: #6B7280;
}

/* =========================================
   Role Access Settings
   ========================================= */
.sfp-role-access-section .sfp-role-checkbox {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 14px;
}
.sfp-role-access-table th {
    width: 200px;
}
.sfp-access-denied {
    padding: 20px;
    background: #FFE0CE;
    border: 1px solid #FFA26E;
    border-radius: var(--sfp-border-radius);
    color: #B85E3A;
}

/* =========================================
   v7.11.8 — Additional UI polish
   ========================================= */

[class*="sfp-"] .page-title-action {
    background: var(--sfp-gradient-blue-purple) !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-transform: uppercase;
    padding: 8px 18px !important;
    border-radius: var(--sfp-border-radius) !important;
    border: none !important;
    font-size: 14px !important;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    text-decoration: none;
}
[class*="sfp-"] .page-title-action:hover,
[class*="sfp-"] .page-title-action:active {
    background: var(--sfp-gradient-blue-deep) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(55, 154, 246, 0.3);
}

[class*="sfp-"] td {
    align-content: center;
}

[class*="sfp-"] .nav-tab-wrapper a {
    border: none;
    border-radius: 20px;
    background-color: var(--sfp-primary-light);
    color: #fff;
}

[class*="sfp-"] .nav-tab-wrapper a:hover {
    border: none;
    border-radius: 20px;
    background-color: var(--sfp-primary);
    color: #fff;
    text-decoration: none;
}

[class*="sfp-"] .nav-tab-wrapper {
    border-bottom: none !important;
}

/* =========================================
   v7.11.9 — Stat cards, status & button tweaks
   ========================================= */

.sfp-stat-value {
    font-size: 2rem;
    color: var(--sfp-primary-dark);
    margin-top: 5px;
    font-weight: 800;
    margin-bottom: 5px;
}

.sfp-stat-label {
    font-size: 1rem;
    font-weight: 600;
}

.subnote i {
    font-size: 12px;
    font-weight: normal;
}

.sfp-invoice-button {
    background-color: var(--sfp-gray-300);
}

.sfp-edit-button {
    background-color: var(--sfp-gray-400);
}

/* ==========================================================================
   Client Dashboard (.sfp-cd)
   Matches Freelance Studio design: colored top-border stat cards,
   clean white cards with teal-underline headers, compact tables.
   ========================================================================== */

.sfp-cd { max-width: 1200px; }

/* --- Header (now inside left column) --- */
.sfp-cd-header {
    background: var(--sfp-white);
    border-radius: var(--sfp-border-radius-lg);
    padding: 20px 24px;
    box-shadow: var(--sfp-shadow-sm);
    border: 1px solid var(--sfp-gray-200);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.sfp-cd-header-left { flex: 1; min-width: 0; }
.sfp-cd-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sfp-cd-name { font-size: 24px; font-weight: 700; color: var(--sfp-gray-900); margin: 0; line-height: 1.2; }
.sfp-cd-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--sfp-gray-600); }
.sfp-cd-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.sfp-cd-meta-item .dashicons { font-size: 14px; width: 14px; height: 14px; color: var(--sfp-gray-400); }
.sfp-cd-meta-item a { color: var(--sfp-primary); text-decoration: none; }
.sfp-cd-meta-item a:hover { color: var(--sfp-primary-dark); text-decoration: underline; }
.sfp-cd-last-worked { color: var(--sfp-gray-400); }
.sfp-cd-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Buttons */
.sfp-cd-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 7px 14px; border-radius: var(--sfp-border-radius);
    font-size: 13px; font-weight: 500; text-decoration: none;
    border: 1px solid var(--sfp-gray-200); background: var(--sfp-white);
    color: var(--sfp-gray-700); cursor: pointer; transition: all 0.2s;
}
.sfp-cd-btn:hover { background: var(--sfp-gray-50); border-color: var(--sfp-gray-300); color: var(--sfp-gray-900); }
.sfp-cd-btn-primary { background: var(--sfp-primary); color: #fff; border-color: var(--sfp-primary); }
.sfp-cd-btn-primary:hover { background: var(--sfp-primary-dark); border-color: var(--sfp-primary-dark); color: #fff; }
.sfp-cd-btn-sm { padding: 4px 10px; font-size: 12px; }
.sfp-cd-btn .dashicons { font-size: 14px; width: 14px; height: 14px; }

/* --- Top row: Header+Stats (left) | Chart (right) --- */
.sfp-cd-top-row {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 20px;
    margin-bottom: 20px;
    align-items: stretch;
}
.sfp-cd-left-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sfp-cd-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    flex: 1;
}
.sfp-cd-chart-card {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}
.sfp-cd-chart-card .sfp-cd-chart-wrap {
    flex: 1;
    min-height: 200px;
}
.sfp-cd-stat {
    background: var(--sfp-white);
    border-radius: var(--sfp-border-radius-lg);
    padding: 20px 22px;
    box-shadow: var(--sfp-shadow-sm);
    border: 1px solid var(--sfp-gray-200);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.sfp-cd-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: var(--sfp-border-radius-lg) var(--sfp-border-radius-lg) 0 0;
}
.sfp-cd-stat-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--sfp-gray-500); margin-bottom: 6px;
}
.sfp-cd-stat-value {
    font-size: 22px; font-weight: 700; color: var(--sfp-gray-900);
}
.sfp-cd-stat-note {
    font-size: 11px; color: var(--sfp-gray-500); margin-top: 4px;
}
.sfp-cd-stat-green::before { background: var(--sfp-gradient-lime-cobalt); }
.sfp-cd-stat-green .sfp-cd-stat-value { color: #2BA891; }
.sfp-cd-stat-purple::before { background: var(--sfp-gradient-blue-deep); }
.sfp-cd-stat-purple .sfp-cd-stat-value { color: var(--sfp-secondary-dark); }
.sfp-cd-stat-blue::before { background: var(--sfp-gradient-blue-purple); }
.sfp-cd-stat-blue .sfp-cd-stat-value { color: var(--sfp-primary-dark); }
.sfp-cd-stat-coral::before { background: var(--sfp-gradient-purple-coral); }
.sfp-cd-stat-coral .sfp-cd-stat-value { color: #D56B4F; }

/* --- Cards --- */
.sfp-cd-card {
    background: var(--sfp-white);
    border-radius: var(--sfp-border-radius-lg);
    padding: 24px;
    box-shadow: var(--sfp-shadow-sm);
    border: 1px solid var(--sfp-gray-200);
    margin-bottom: 20px;
}
.sfp-cd-card-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 12px; margin-bottom: 16px;
    border-bottom: 2px solid var(--sfp-primary-xtralight);
}
.sfp-cd-card-title {
    font-size: 16px; font-weight: 600; color: var(--sfp-gray-900); margin: 0;
}

/* --- Two-column layout --- */
.sfp-cd-two-col {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.sfp-cd-two-col .sfp-cd-card { margin-bottom: 0; }

/* --- Chart --- */
.sfp-cd-chart-wrap { position: relative; flex: 1; min-height: 200px; }

/* --- Info list (payroll/travel) --- */
.sfp-cd-info-list { display: flex; flex-direction: column; gap: 0; }
.sfp-cd-info-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 10px 0; border-bottom: 1px solid var(--sfp-gray-100);
}
.sfp-cd-info-row:last-child { border-bottom: none; }
.sfp-cd-info-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--sfp-gray-500); min-width: 120px; padding-top: 2px;
}
.sfp-cd-info-value { font-size: 13px; color: var(--sfp-gray-700); line-height: 1.5; text-align: right; flex: 1; }
.sfp-cd-info-value a { color: var(--sfp-primary); text-decoration: none; word-break: break-all; }
.sfp-cd-info-value a:hover { text-decoration: underline; }

/* --- Crewers --- */
.sfp-cd-crewers { display: flex; flex-direction: column; gap: 0; }
.sfp-cd-crewer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--sfp-gray-100);
}
.sfp-cd-crewer:last-child { border-bottom: none; }
.sfp-cd-crewer-info { display: flex; align-items: center; gap: 10px; }
.sfp-cd-crewer-name { font-size: 14px; font-weight: 500; color: var(--sfp-primary); text-decoration: none; }
.sfp-cd-crewer-name:hover { text-decoration: underline; }
.sfp-cd-crewer-area { font-size: 12px; color: var(--sfp-gray-500); }
.sfp-cd-crewer-actions { display: flex; gap: 8px; }
.sfp-cd-crewer-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: var(--sfp-border-radius);
    background: var(--sfp-gray-50); color: var(--sfp-gray-500);
    text-decoration: none; transition: all 0.2s;
}
.sfp-cd-crewer-link:hover { background: var(--sfp-primary-xtralight); color: var(--sfp-primary); }
.sfp-cd-crewer-link .dashicons { font-size: 16px; width: 16px; height: 16px; }

/* --- Tables --- */
.sfp-cd-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.sfp-cd-table th {
    text-align: left; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--sfp-gray-500); padding: 8px 12px;
    border-bottom: 1px solid var(--sfp-gray-200);
}
.sfp-cd-table td {
    padding: 10px 12px; border-bottom: 1px solid var(--sfp-gray-100);
    color: var(--sfp-gray-700);
}
.sfp-cd-table tr:last-child td { border-bottom: none; }
.sfp-cd-table a { color: var(--sfp-primary); text-decoration: none; }
.sfp-cd-table a:hover { text-decoration: underline; }

/* --- Notes --- */
.sfp-cd-notes { font-size: 14px; color: var(--sfp-gray-700); line-height: 1.7; }

/* --- Empty state --- */
.sfp-cd-empty { color: var(--sfp-gray-400); font-style: italic; font-size: 13px; }
.sfp-cd-empty a { color: var(--sfp-primary); font-style: normal; text-decoration: none; }

/* --- Notes Modal --- */
.sfp-cd-modal-overlay {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(0,0,0,0.45); display: flex;
    align-items: center; justify-content: center;
}
.sfp-cd-modal {
    background: var(--sfp-white); border-radius: var(--sfp-border-radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    width: 560px; max-width: 90vw; max-height: 80vh;
    display: flex; flex-direction: column;
}
.sfp-cd-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 24px; border-bottom: 1px solid var(--sfp-gray-200);
}
.sfp-cd-modal-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--sfp-gray-900); }
.sfp-cd-modal-close {
    background: none; border: none; font-size: 22px;
    color: var(--sfp-gray-400); cursor: pointer; padding: 0; line-height: 1;
}
.sfp-cd-modal-close:hover { color: var(--sfp-gray-700); }
.sfp-cd-modal-body { padding: 20px 24px; flex: 1; overflow-y: auto; }
.sfp-cd-modal-body textarea {
    width: 100%; border: 1px solid var(--sfp-gray-200);
    border-radius: var(--sfp-border-radius); padding: 12px;
    font-size: 14px; line-height: 1.6; resize: vertical;
    font-family: inherit; color: var(--sfp-gray-700);
}
.sfp-cd-modal-body textarea:focus {
    outline: none; border-color: var(--sfp-primary);
    box-shadow: 0 0 0 3px rgba(68,176,236,0.15);
}
.sfp-cd-modal-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 16px 24px; border-top: 1px solid var(--sfp-gray-200);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .sfp-cd-header { flex-direction: column; }
    .sfp-cd-actions { width: 100%; }
    .sfp-cd-actions .sfp-cd-btn { flex: 1; justify-content: center; }
    .sfp-cd-top-row { grid-template-columns: 1fr; }
    .sfp-cd-stats { grid-template-columns: repeat(2, 1fr); }
    .sfp-cd-chart-wrap { min-height: 250px; }
    .sfp-cd-two-col { grid-template-columns: 1fr; }
    .sfp-cd-meta { flex-direction: column; gap: 6px; }
    .sfp-cd-info-row { flex-direction: column; gap: 2px; }
    .sfp-cd-info-value { text-align: left; }
}

/* Metric icon colors to match value colors */
.sfp-metrics-primary .sfp-metric-card:nth-child(1) .sfp-metric-icon { color: #2BA891; }
.sfp-metrics-primary .sfp-metric-card:nth-child(2) .sfp-metric-icon { color: var(--sfp-primary-xtralight); }
.sfp-metrics-primary .sfp-metric-card:nth-child(3) .sfp-metric-icon { color: var(--sfp-gray-100); }
.sfp-metrics-secondary .sfp-metric-card:nth-child(1) .sfp-metric-icon { color: var(--sfp-secondary-dark); }
.sfp-metrics-secondary .sfp-metric-card:nth-child(2) .sfp-metric-icon { color: var(--sfp-primary-dark); }
.sfp-metrics-secondary .sfp-metric-card:nth-child(3) .sfp-metric-icon { color: var(--sfp-danger); }

/* Expenses card two-column layout */
.sfp-expense-split {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 24px;
    align-items: start;
}
.sfp-expense-left {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
}
.sfp-expense-right {
    padding: 4px 0;
}
.sfp-expense-categories-mini {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sfp-expense-cat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}
.sfp-expense-cat-name {
    color: var(--sfp-gray-600);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.sfp-expense-cat-amount {
    color: var(--sfp-gray-800);
    font-weight: 600;
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", monospace;
}
.sfp-expense-cat-bar {
    height: 4px;
    background: var(--sfp-gray-200);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}
.sfp-expense-cat-fill {
    height: 100%;
    background: var(--sfp-gradient-blue-purple);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.sfp-expense-no-cats {
    color: var(--sfp-gray-400);
    font-size: 13px;
    font-style: italic;
    text-align: center;
    margin: 0;
    padding: 20px 0;
}
@media (max-width: 480px) {
    .sfp-expense-split {
        grid-template-columns: 1fr;
    }
}

/* Invoice Preview Card (Settings page) */
.sfp-invoice-preview-card {
    max-width: 400px;
    background: var(--sfp-white);
    border: 1px solid var(--sfp-gray-200);
    border-radius: var(--sfp-border-radius-lg);
    box-shadow: var(--sfp-shadow);
    overflow: hidden;
}
.sfp-invoice-preview-header {
    padding: 24px;
    border-left: 4px solid var(--sfp-primary);
}
.sfp-invoice-preview-logo {
    max-width: 140px;
    max-height: 50px;
    margin-bottom: 16px;
    display: block;
}
.sfp-invoice-preview-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--sfp-gray-400);
    margin-bottom: 8px;
}
.sfp-invoice-preview-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--sfp-gray-900);
    margin-bottom: 8px;
}
.sfp-invoice-preview-detail {
    font-size: 13px;
    color: var(--sfp-gray-600);
    line-height: 1.6;
}

/* ==========================================================================
   Settings Page — Vertical Tab Layout (FS-style)
   ========================================================================== */
.sfp-settings-wrap {
    max-width: 1200px;
}
.sfp-settings-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0;
    margin-top: 20px;
    background: var(--sfp-white);
    border: 1px solid var(--sfp-gray-200);
    border-radius: var(--sfp-border-radius-lg);
    box-shadow: var(--sfp-shadow);
    overflow: hidden;
    min-height: 600px;
}
.sfp-settings-nav {
    background: var(--sfp-gray-50);
    border-right: 1px solid var(--sfp-gray-200);
    padding: 8px 0;
    display: flex;
    flex-direction: column;
}
.sfp-settings-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sfp-gray-600);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}
.sfp-settings-nav-item:hover {
    color: var(--sfp-gray-900);
    background-color: var(--sfp-gray-100);
    text-decoration: none;
}
.sfp-settings-nav-item.active {
    color: var(--sfp-primary);
    background-color: var(--sfp-white);
    border-left-color: var(--sfp-primary);
    font-weight: 600;
}
.sfp-settings-nav-item svg {
    flex-shrink: 0;
    opacity: 0.6;
}
.sfp-settings-nav-item.active svg {
    opacity: 1;
    color: var(--sfp-primary);
}
.sfp-settings-content {
    padding: 0;
}
.sfp-settings-panel {
    display: none;
    padding: 30px 36px;
}
.sfp-settings-panel.active {
    display: block;
}
.sfp-settings-heading {
    font-size: 18px;
    font-weight: 600;
    color: var(--sfp-gray-900);
    margin: 0 0 4px 0;
    padding: 0;
    border: none;
}
.sfp-settings-subheading {
    font-size: 15px;
    font-weight: 600;
    color: var(--sfp-gray-800);
    margin: 0 0 4px 0;
}
.sfp-settings-desc {
    font-size: 13px;
    color: var(--sfp-gray-500);
    margin: 0 0 20px 0;
}
.sfp-settings-divider {
    border: none;
    border-top: 1px solid var(--sfp-gray-200);
    margin: 28px 0;
}
.sfp-settings-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sfp-settings-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sfp-settings-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sfp-gray-700);
}
.sfp-settings-field input[type="text"],
.sfp-settings-field input[type="email"],
.sfp-settings-field input[type="url"],
.sfp-settings-field input[type="password"],
.sfp-settings-field input[type="number"],
.sfp-settings-field select,
.sfp-settings-field textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--sfp-gray-300);
    border-radius: var(--sfp-border-radius);
    font-size: 14px;
    color: var(--sfp-gray-700);
    min-height: 40px;
    transition: border-color 0.2s;
}
.sfp-settings-field input:focus,
.sfp-settings-field select:focus,
.sfp-settings-field textarea:focus {
    border-color: var(--sfp-primary);
    box-shadow: 0 0 0 2px rgba(55, 154, 246, 0.1);
    outline: none;
}
.sfp-settings-field textarea {
    min-height: 60px;
    resize: vertical;
}
.sfp-settings-field .description {
    font-size: 12px;
    color: var(--sfp-gray-500);
    margin: 2px 0 0;
}
.sfp-settings-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.sfp-settings-submit {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--sfp-gray-200);
}
.sfp-color-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sfp-color-input-row input[type="color"] {
    width: 40px;
    height: 40px;
    padding: 2px;
    border: 1px solid var(--sfp-gray-300);
    border-radius: var(--sfp-border-radius);
    cursor: pointer;
}
.sfp-color-hex-input {
    width: 120px !important;
}
.sfp-mileage-current {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}
.sfp-mileage-override-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sfp-mileage-override-row .small-text {
    width: 100px;
}
.sfp-required {
    color: var(--sfp-danger);
    font-weight: 700;
}
@media (max-width: 768px) {
    .sfp-settings-layout {
        grid-template-columns: 1fr;
    }
    .sfp-settings-nav {
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--sfp-gray-200);
        padding: 0;
    }
    .sfp-settings-nav-item {
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
        padding: 12px 16px;
    }
    .sfp-settings-nav-item.active {
        border-left-color: transparent;
        border-bottom-color: var(--sfp-primary);
    }
    .sfp-settings-panel {
        padding: 20px;
    }
    .sfp-settings-row-2 {
        grid-template-columns: 1fr;
    }
}

/* ── Admin "View as User" Bar ── */
.sfp-admin-view-bar {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: #e2e8f0;
    padding: 10px 20px;
    margin-bottom: 16px;
    border-radius: 8px;
    font-size: 13px;
    border-left: 3px solid #6366f1;
}
.sfp-frontend-dashboard .sfp-admin-view-bar,
.sfp-frontend-section .sfp-admin-view-bar {
    margin: -20px -20px 20px -20px;
    border-radius: 12px 12px 0 0;
    border-left: none;
    border-bottom: 2px solid #6366f1;
}
.sfp-admin-view-bar-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.sfp-admin-view-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #a5b4fc;
    white-space: nowrap;
}
.sfp-admin-view-label svg {
    flex-shrink: 0;
}
.sfp-admin-view-select {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #475569 !important;
    border-radius: 6px !important;
    padding: 4px 28px 4px 10px !important;
    font-size: 13px !important;
    cursor: pointer;
    min-width: 160px;
}
.sfp-admin-view-select:focus {
    border-color: #6366f1 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3) !important;
}
.sfp-admin-view-status {
    color: #94a3b8;
    font-size: 12px;
}
.sfp-admin-view-status strong {
    color: #a5b4fc;
}

/* ── Data Export/Import ── */
.sfp-data-transfer-section {
    max-width: 560px;
}
.sfp-data-export-box,
.sfp-data-import-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 24px;
    margin-top: 12px;
}
.sfp-data-box-icon {
    color: #6366f1;
    margin-bottom: 12px;
}
.sfp-data-export-box p,
.sfp-data-import-box p {
    color: #475569;
    font-size: 13px;
    margin: 0 0 16px 0;
    line-height: 1.5;
}
.sfp-import-upload-area {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    margin-bottom: 16px;
    transition: border-color 0.2s, background-color 0.2s;
    cursor: pointer;
}
.sfp-import-upload-area:hover,
.sfp-import-upload-area.sfp-dropzone-active {
    border-color: #6366f1;
    background-color: #eef2ff;
}
.sfp-import-upload-area p {
    margin: 0;
    text-align: center;
}
.sfp-import-upload-area a {
    color: #6366f1;
    font-weight: 600;
    text-decoration: none;
}
.sfp-data-filename {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #6366f1;
    font-weight: 600;
}
.sfp-data-status {
    display: inline-block;
    margin-left: 12px;
    font-size: 13px;
    font-weight: 500;
}