/**
 * Freelance Studio Admin Styles
 * 
 * Color Palette (Modern UI):
 * - Primary Teal: #3ECFB2 (buttons, links, accents)
 * - Primary Dark: #2BA891 (hover states)
 * - Secondary Purple: #7B68A6 (headers, secondary elements)
 * - Coral: #F5896D (CTAs, warnings, attention)
 * - Lime: #C5E946 (success, highlights)
 * - Soft backgrounds with clean whites
 */

/* Variables */
:root {
    /* Primary Colors - Teal/Mint */
    --fs-primary: #3ECFB2;
    --fs-primary-dark: #2BA891;
    --fs-primary-light: #77D5C9;
    --fs-primary-xtralight: #E0F7F3;
    
    /* Secondary Colors - Purple */
    --fs-secondary: #81A5DF;
    --fs-secondary-dark: #5D4E80;
    --fs-secondary-light: #EDE9F5;
    
    /* Accent Colors */
    --fs-accent: #FFA26E;
    --fs-accent-light: #FFE0CE;
    --fs-highlight: #D2E767;
    --fs-highlight-light: #EBF2C7;
    
    /* Semantic Colors */
    --fs-success: #77D5C9;
    --fs-warning: #FFA26E;
    --fs-danger: #E85A5A;
    --fs-info: #7B68A6;
    
    /* Gradients */
    --fs-pink-purple: linear-gradient(90deg, #f2b6f6 0%, #81a5df 64.4%, #81a5df 100%);
    --fs-teal-lime: linear-gradient(90deg, #20bba6 0%, #77d5c9 37.9%, #77d5c9 67%, #d2e767 100%);
    --fs-pink-coral: linear-gradient(90deg, #f2b6f6 0%, #ffa26e 100%);
    --fs-teal-purple: linear-gradient(90deg, #20bba6 0%, #77d5c9 46.8%, #81a5df 100%);
    
    /* Neutral Colors */
    --fs-gray-50: #FAFBFC;
    --fs-gray-100: #F5F7FA;
    --fs-gray-200: #EEF1F5;
    --fs-gray-300: #E2E6EC;
    --fs-gray-400: #C5CAD3;
    --fs-gray-500: #9CA3AF;
    --fs-gray-600: #6B7280;
    --fs-gray-700: #4B5563;
    --fs-gray-800: #374151;
    --fs-gray-900: #1F2937;
    
    /* Layout */
    --fs-border-radius: 8px;
    --fs-border-radius-lg: 12px;
    --fs-border-radius-xl: 16px;
    --fs-shadow: 0 2px 8px rgba(123, 104, 166, 0.08);
    --fs-shadow-md: 0 4px 12px rgba(123, 104, 166, 0.12);
    --fs-shadow-lg: 0 8px 24px rgba(123, 104, 166, 0.16);
}

/* Wrap */
.fs-wrap {
    max-width: 1400px;
    padding: 20px;
}

.fs-wrap h1 {
    margin-bottom: 24px;
    color: var(--fs-gray-800);
    font-weight: 600;
}

.fs-client-profile-header h1 {
    margin-bottom: 0;
}

/* ============================================
   Stats Grid - Dashboard
   ============================================ */
.fs-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.fs-stats-grid.secondary {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.fs-stat-card {
    background: #fff;
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius-lg);
    padding: 24px;
    box-shadow: var(--fs-shadow);
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    gap: 16px;
}

.fs-stat-card:hover {
    box-shadow: var(--fs-shadow-lg);
    transform: translateY(-2px);
}

.fs-stat-card.small {
    text-align: center;
    padding: 16px;
}

.fs-stat-card.warning {
    background: #fff;
    border: 2px solid var(--fs-accent);
}

.fs-stat-card.highlight {
    border-left: 4px solid var(--fs-primary);
    background: linear-gradient(135deg, #fff 0%, var(--fs-primary-light) 100%);
}

.fs-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--fs-primary-dark);
}

.fs-stat-card.small .fs-stat-value {
    font-size: 28px;
}

.fs-stat-value.success {
    color: var(--fs-primary);
}

.fs-stat-value.warning {
    color: var(--fs-accent);
}

.fs-stat-value.danger {
    color: var(--fs-danger);
}

.fs-stat-label {
    font-size: 13px;
    color: var(--fs-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   Dashboard Grid & Cards
   ============================================ */
.fs-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
    margin-bottom: 30px;
}

.fs-dashboard-card {
    background: #fff;
    border: none;
    border-radius: var(--fs-border-radius-lg);
    padding: 24px;
    box-shadow: var(--fs-shadow);
}

.fs-dashboard-card.warning {
    border-left: 4px solid var(--fs-danger);
    background: linear-gradient(135deg, #fff 0%, #FFF5F5 100%);
}

.fs-dashboard-card h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fs-gray-200);
    color: var(--fs-secondary);
}

.fs-card-footer {
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--fs-gray-200);
    text-align: right;
}

/* ============================================
   Tables
   ============================================ */
.fs-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: var(--fs-border-radius-lg);
    box-shadow: var(--fs-shadow);
    overflow: visible;
}

.fs-table th,
.fs-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-table th {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fs-gray-600);
    background: var(--fs-gray-50);
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-table tbody tr:hover {
    background: var(--fs-gray-50);
}

.fs-table a {
    text-decoration: none;
    color: var(--fs-secondary);
    font-weight: 500;
}

.fs-table a:hover {
    color: var(--fs-primary-dark);
    text-decoration: underline;
}

.fs-table .actions {
    white-space: nowrap;
}

.fs-table .actions a {
    margin-right: 10px;
    color: var(--fs-gray-500);
}

.fs-table .actions a:hover {
    color: var(--fs-primary);
}

.fs-table .text-right {
    text-align: right;
}

.fs-table .text-success {
    color: var(--fs-primary);
}

.fs-table .text-danger {
    color: var(--fs-danger);
}

.fs-table .text-muted {
    color: var(--fs-gray-600);
}

/* ============================================
   Utility Classes (inline style migration)
   ============================================ */

/* Icon colors - replace inline style="color: var(--fs-primary);" etc. */
.fs-icon-success { color: var(--fs-primary); }
.fs-icon-danger { color: var(--fs-danger); }
.fs-icon-muted { opacity: 0.3; }

/* Text utilities */
.fs-text-success { color: var(--fs-success); }
.fs-text-danger { color: var(--fs-danger); }
.fs-text-muted-sm { font-size: 12px; color: var(--fs-gray-600); }
.fs-text-muted-xs { font-size: 12px; color: var(--fs-gray-500); margin-top: 8px; }
.fs-text-share-hint { margin-bottom: 12px; font-size: 13px; color: var(--fs-gray-500); }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Table utilities */
.fs-table-borderless,
.fs-table-borderless th,
.fs-table-borderless td { border: none !important; }
.fs-table-borderless { box-shadow: none !important; }

.fs-col-no-pad-left { padding-left: 0 !important; }

/* Spacing */
.fs-ml-sm { margin-left: 10px; }

/* Layout helpers */
.fs-flex-row-gap { display: flex; gap: 8px; margin-bottom: 12px; }
.fs-flex-row-gap > .button,
.fs-flex-row-gap > button { flex: 1; text-align: center; }

/* Table column widths for time entries */
.fs-table .col-checkbox { width: 30px; }
.fs-table .col-duration { width: 110px; }
.fs-table .col-time { width: 120px; }
.fs-table .col-activity { width: 100px; }
.fs-table .col-amount { width: 110px; }
.fs-table .col-status { width: 110px; }
.fs-table .col-actions { width: 60px; }

/* Form field width hints - use on .fs-form-group */
.fs-field-wide { flex: 2; }
.fs-field-narrow { flex: 1; }
.fs-field-zip { flex: 0 0 120px; min-width: 100px; }
.fs-field-phone { flex: 0 0 180px; min-width: 150px; }
.fs-field-email { flex: 2; }
.fs-field-state { flex: 0 0 160px; min-width: 120px; }

/* Delete link in action menus */
.fs-delete-link { color: var(--fs-danger); }
.fs-delete-link:hover { color: #991b1b; }

/* Full-width button */
.fs-btn-full { width: 100%; text-align: center; }

/* Spacing utilities */
.fs-mt-md { margin-top: 15px; }

/* Empty state large icon */
.fs-empty-icon-lg {
    font-size: 32px;
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
}

/* Contacts empty state */
.fs-contacts-empty-state {
    padding: 20px;
    background: var(--fs-gray-50);
    border-radius: 8px;
    text-align: center;
    color: var(--fs-gray-600);
}

/* ============================================
   Status Badges
   ============================================ */
.fs-status-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Draft/Inactive states - Gray */
.status-draft { background: var(--fs-gray-200); color: var(--fs-gray-600); }
.status-cancelled { background: var(--fs-gray-200); color: var(--fs-gray-600); }
.status-archived { background: var(--fs-gray-200); color: var(--fs-gray-600); }
.status-on-hold { background: var(--fs-gray-200); color: var(--fs-gray-600); }

/* Pending/Warning states - Coral */
.status-pending { background: var(--fs-accent-light); color: #C65D45; }
.status-partial { background: var(--fs-accent-light); color: #C65D45; }
.status-revision { background: var(--fs-accent-light); color: #C65D45; }
.status-revised { background: var(--fs-secondary-light); color: var(--fs-secondary); }
.status-requested { background: #fce7f3; color: #be185d; }

/* Active/Info states - Purple */
.status-active { background: var(--fs-secondary-light); color: var(--fs-secondary); }
.status-sent { background: var(--fs-secondary-light); color: var(--fs-secondary); }
.status-viewed { background: var(--fs-secondary-light); color: var(--fs-secondary-dark); }
.status-converted { background: var(--fs-secondary-light); color: var(--fs-secondary-dark); }

/* Success states - Teal */
.status-paid { background: var(--fs-primary-xtralight); color: var(--fs-primary-dark); }
.status-completed { background: var(--fs-primary-xtralight); color: var(--fs-primary-dark); }
.status-approved { background: var(--fs-primary-xtralight); color: var(--fs-primary-dark); }

/* Danger states - Red/Coral */
.status-overdue { background: #FFE5E5; color: #C53030; }
.status-rejected { background: #FFE5E5; color: #C53030; }
.status-dismissed { background: #FFE5E5; color: #C53030; }
.status-expired { background: #FFE5E5; color: #C53030; }

/* Income Category Badges */
.status-income-freelance { background: var(--fs-primary-xtralight); color: var(--fs-primary-dark); }
.status-income-etsy { background: #FFF3E0; color: #E65100; }
.status-income-art_fair { background: #F3E5F5; color: #7B1FA2; }
.status-income-commission { background: var(--fs-secondary-light); color: var(--fs-secondary-dark); }
.status-income-royalty { background: #E8F5E9; color: #2E7D32; }
.status-income-consulting { background: #E3F2FD; color: #1565C0; }
.status-income-workshop { background: var(--fs-highlight-light); color: #827717; }
.status-income-affiliate { background: #FCE4EC; color: #C2185B; }
.status-income-refund { background: var(--fs-gray-200); color: var(--fs-gray-700); }
.status-income-other { background: var(--fs-gray-200); color: var(--fs-gray-600); }

/* ============================================
   Revision Alert
   ============================================ */
.fs-revision-alert {
    background: #fff9f5;
    border: 1px solid var(--fs-accent);
    border-radius: var(--fs-border-radius);
    margin-top: 25px;
    margin-bottom: 20px;
    overflow: hidden;
}

.fs-revision-alert-header {
    background: #fff5f0;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--fs-accent);
}

.fs-revision-alert-header .dashicons {
    color: var(--fs-accent);
}

.fs-revision-alert-header strong {
    color: #c75a2e;
}

.fs-revision-date {
    margin-left: auto;
    font-size: 12px;
    color: var(--fs-accent);
}

.fs-revision-alert-body {
    padding: 16px;
    color: var(--fs-primary-dark);
    line-height: 1.6;
    white-space: pre-wrap;
}

.fs-revision-alert-actions {
    padding: 12px 16px;
    background: #fff5f0;
    border-top: 1px solid var(--fs-accent);
}

/* ============================================
   Tax Summary
   ============================================ */
.fs-tax-summary {
    padding: 10px 0;
}

.fs-tax-row {
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-tax-row.highlight {
    font-weight: 600;
    font-size: 16px;
    border-bottom: none;
    padding-top: 12px;
}

.fs-tax-row.warning-bg {
    background: #fff3cd;
    margin: 0 -10px;
    padding: 8px 10px;
}

.fs-tax-alert {
    background: #fff3cd;
    color: #856404;
    padding: 10px 15px;
    border-radius: var(--fs-border-radius);
    margin-top: 15px;
    font-size: 13px;
}

/* ============================================
   Quick Actions
   ============================================ */
.fs-quick-actions {
    background: #fff;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    padding: 20px;
    box-shadow: var(--fs-shadow);
}

.fs-quick-actions h2 {
    font-size: 16px;
    margin: 0 0 15px;
}

.fs-action-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ============================================
   Forms - General
   ============================================ */
.fs-form-section {
    background: #fff;
    border: none;
    border-radius: var(--fs-border-radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--fs-shadow);
}

.fs-form-section h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fs-gray-200);
    color: var(--fs-secondary);
}

.fs-form-section .description {
    margin-bottom: 15px;
    color: var(--fs-gray-600);
}

.fs-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.fs-form-row > .fs-form-group,
.fs-form-row > .fs-form-field {
    flex: 1;
    min-width: 200px;
}

/* Flexbox row layout for template forms only */
.fs-template-item-body .fs-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 16px;
}

/* Scoped form field styles for template forms only */
.fs-template-item-body .fs-form-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fs-template-item-body .fs-form-field > label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--fs-gray-700);
    font-size: 13px;
}

.fs-template-item-body .fs-form-field input,
.fs-template-item-body .fs-form-field select,
.fs-template-item-body .fs-form-field textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
}

.fs-template-item-body .fs-form-field input:focus,
.fs-template-item-body .fs-form-field select:focus,
.fs-template-item-body .fs-form-field textarea:focus {
    border-color: var(--fs-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(62, 207, 178, 0.15);
}

/* Column sizing - based on 12 column grid */
.fs-col-1 { flex: 0 0 calc(8.333% - 20px); }
.fs-col-2 { flex: 0 0 calc(16.666% - 15px); }
.fs-col-3 { flex: 0 0 calc(25% - 15px); }
.fs-col-4 { flex: 0 0 calc(33.333% - 14px); }
.fs-col-5 { flex: 0 0 calc(41.666% - 12px); }
.fs-col-6 { flex: 0 0 calc(50% - 10px); }
.fs-col-7 { flex: 0 0 calc(58.333% - 9px); }
.fs-col-8 { flex: 0 0 calc(66.666% - 7px); }
.fs-col-9 { flex: 0 0 calc(75% - 5px); }
.fs-col-10 { flex: 0 0 calc(83.333% - 4px); }
.fs-col-11 { flex: 0 0 calc(91.666% - 2px); }
.fs-col-12 { flex: 0 0 100%; }

/* Custom width for milestone name field */
.fs-col-35 { flex: 0 0 calc(35% - 15px); }

/* Checkbox field alignment - aligns checkbox with input fields */
.fs-checkbox-field {
    display: flex;
    align-items: flex-end;
    padding-bottom: 8px;
}

.fs-checkbox-field .fs-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--fs-gray-700);
    cursor: pointer;
    white-space: nowrap;
}

.fs-checkbox-field .fs-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    accent-color: var(--fs-primary);
}

.fs-form-row-inline {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.fs-form-row-inline > div {
    flex: 1;
}

.fs-form-row-inline label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--fs-gray-700);
    font-size: 13px;
}

.fs-form-row-inline input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.fs-form-group {
    margin-bottom: 16px;
}

.fs-form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--fs-gray-700);
}

.fs-form-group input[type="text"],
.fs-form-group input[type="email"],
.fs-form-group input[type="url"],
.fs-form-group input[type="tel"],
.fs-form-group input[type="number"],
.fs-form-group input[type="date"],
.fs-form-group select,
.fs-form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
}

.fs-form-group input:hover,
.fs-form-group select:hover,
.fs-form-group textarea:hover {
    border-color: var(--fs-gray-400);
}

.fs-form-group input:focus,
.fs-form-group select:focus,
.fs-form-group textarea:focus {
    border-color: var(--fs-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(62, 207, 178, 0.15);
}

.fs-form-group input:focus:not(:focus-visible),
.fs-form-group select:focus:not(:focus-visible),
.fs-form-group textarea:focus:not(:focus-visible) {
    box-shadow: none;
}

.fs-form-group .description {
    font-size: 12px;
    color: var(--fs-gray-500);
    margin-top: 6px;
}

.fs-form-group.required label::after {
    content: " *";
    color: var(--fs-accent);
}

.fs-required {
    color: var(--fs-danger);
}

/* Form Validation Error States */
.fs-form-group.has-error input,
.fs-form-group.has-error select,
.fs-form-group.has-error textarea {
    border-color: var(--fs-danger);
    box-shadow: 0 0 0 3px rgba(232, 90, 90, 0.1);
}

.fs-form-group.has-error input:focus,
.fs-form-group.has-error select:focus,
.fs-form-group.has-error textarea:focus {
    border-color: var(--fs-danger);
    box-shadow: 0 0 0 3px rgba(232, 90, 90, 0.15);
}

.fs-form-group.has-error label {
    color: var(--fs-danger);
}

.fs-form-group .fs-field-error {
    color: var(--fs-danger);
    font-size: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.fs-form-group .fs-field-error .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Payment Terms Custom Field */
.fs-payment-terms-custom {
    margin-top: 8px;
}

.fs-payment-terms-custom.fs-hidden {
    display: none;
}

/* ============================================
   List Page Header & Filters
   ============================================ */
.fs-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.fs-list-header h1 {
    margin: 0;
}

/* Page Header with Back Button */
.fs-page-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.fs-page-header h1 {
    margin: 0;
    font-size: 23px;
    font-weight: 400;
    line-height: 1.3;
}

.fs-page-header .fs-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.fs-page-header .fs-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

.fs-page-header .fs-view-toggle {
    margin-left: 5px;
}

.fs-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.fs-filters form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.fs-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
    width: 100%;
}

.fs-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fs-filter-group label {
    font-size: 12px;
    font-weight: 500;
    color: var(--fs-gray-600);
}

.fs-filter-group select {
    min-width: 140px;
}

.fs-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.fs-filters select {
    padding: 6px 12px;
}

.fs-year-filter {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
}

/* ============================================
   Cards Layout
   ============================================ */
.fs-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.fs-card {
    background: #fff;
    border: none;
    border-radius: var(--fs-border-radius-lg);
    padding: 24px;
    box-shadow: var(--fs-shadow);
    transition: box-shadow 0.2s, transform 0.2s;
}

.fs-card:hover {
    box-shadow: var(--fs-shadow-md);
    transform: translateY(-2px);
}

.fs-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.fs-card-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--fs-gray-800);
}

.fs-card-subtitle {
    color: var(--fs-gray-500);
    font-size: 13px;
    margin-top: 4px;
}

.fs-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: var(--fs-gray-500);
    margin-bottom: 16px;
}

.fs-card-actions {
    display: flex;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--fs-gray-200);
}

/* ============================================
   Form Builder
   ============================================ */
.fs-form-builder-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}

.fs-form-builder-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.fs-form-builder-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 32px;
}

/* Form Builder cards - ensure proper styling for labels/inputs */
.fs-form-builder .fs-card-body .fs-form-row,
.fs-form-builder .fs-form-row,
.wrap.fs-form-builder .fs-form-row {
    display: block !important;
    flex-direction: unset !important;
}

.fs-form-builder .fs-card-body .fs-form-row > label,
.fs-form-builder .fs-form-row > label {
    display: block !important;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--fs-gray-700);
    font-size: 13px;
    float: none !important;
    width: auto !important;
}

.fs-form-builder .fs-card-body .fs-form-row > input,
.fs-form-builder .fs-card-body .fs-form-row > textarea,
.fs-form-builder .fs-card-body .fs-form-row > select,
.fs-form-builder .fs-form-row > input,
.fs-form-builder .fs-form-row > textarea,
.fs-form-builder .fs-form-row > select,
.fs-form-builder .fs-form-row input.large-text,
.fs-form-builder .fs-form-row textarea.large-text,
.fs-form-builder .fs-form-row input.regular-text,
.fs-form-builder .fs-form-row input[type="text"],
.fs-form-builder .fs-form-row input[type="url"],
.fs-form-builder .fs-form-row input[type="email"],
.fs-form-builder .fs-form-row input[type="number"] {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    float: none !important;
}

/* Form Fields List */
.fs-form-fields-list {
    min-height: 200px;
}

.fs-empty-fields-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--fs-gray-500);
    border: 2px dashed var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    background: var(--fs-gray-50);
}

.fs-empty-fields-message .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
    color: var(--fs-gray-400);
}

.fs-empty-fields-message p {
    margin: 0;
    font-size: 14px;
}

/* Form Field Item */
.fs-form-field-item {
    background: #fff;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    margin-bottom: 10px;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.fs-form-field-item:hover {
    border-color: var(--fs-primary-light);
    box-shadow: var(--fs-shadow);
}

.fs-form-field-item.ui-sortable-helper {
    box-shadow: var(--fs-shadow-lg);
}

.fs-field-placeholder {
    background: var(--fs-primary-xtralight);
    border: 2px dashed var(--fs-primary);
    border-radius: var(--fs-border-radius);
    height: 60px;
    margin-bottom: 10px;
}

/* Field Header */
.fs-field-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--fs-gray-50);
    border-bottom: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius) var(--fs-border-radius) 0 0;
}

.fs-field-drag-handle {
    cursor: grab;
    color: var(--fs-gray-400);
    transition: color 0.2s;
}

.fs-field-drag-handle:hover {
    color: var(--fs-gray-600);
}

.fs-field-type-name {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fs-gray-500);
    background: var(--fs-gray-200);
    padding: 2px 8px;
    border-radius: 4px;
}

.fs-field-actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

.fs-field-actions button {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--fs-gray-400);
    border-radius: 4px;
    transition: all 0.2s;
}

.fs-field-actions button:hover {
    background: var(--fs-gray-200);
    color: var(--fs-gray-700);
}

.fs-field-actions button .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Field Preview */
.fs-field-preview {
    padding: 12px 15px;
    font-size: 14px;
    color: var(--fs-gray-800);
}

.fs-field-label-preview {
    font-weight: 500;
}

.fs-field-preview .required {
    color: var(--fs-danger);
    margin-left: 2px;
}

/* Field Settings */
.fs-field-settings {
    padding: 15px;
    background: var(--fs-gray-50);
    border-top: 1px solid var(--fs-gray-200);
}

.fs-field-setting-row {
    margin-bottom: 12px;
}

.fs-field-setting-row:last-child {
    margin-bottom: 0;
}

.fs-field-setting-row > label {
    display: block;
    font-weight: 500;
    font-size: 13px;
    color: var(--fs-gray-700);
    margin-bottom: 4px;
}

.fs-field-setting-row input[type="text"],
.fs-field-setting-row input[type="number"],
.fs-field-setting-row textarea,
.fs-field-setting-row select {
    width: 100%;
}

.fs-field-setting-row input[type="checkbox"] {
    margin-right: 6px;
}

/* Field Options (for choice fields) */
.fs-field-options-list {
    margin-bottom: 10px;
}

.fs-field-option-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.fs-field-option-row input {
    flex: 1;
}

.fs-field-option-row .fs-remove-option {
    color: var(--fs-gray-400);
    cursor: pointer;
}

.fs-field-option-row .fs-remove-option:hover {
    color: var(--fs-danger);
}

.fs-inline-fields {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}

.fs-inline-fields > div {
    flex: 1;
}

/* Field Type Buttons in Sidebar */
.fs-field-type-group {
    margin-bottom: 20px;
}

.fs-field-type-group:last-child {
    margin-bottom: 0;
}

.fs-field-type-group h4 {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fs-primary);
    margin: 0 0 10px 0;
}

.fs-field-type-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fs-add-field-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    font-size: 12px;
    color: var(--fs-gray-700);
    cursor: pointer;
    transition: all 0.2s;
}

.fs-add-field-btn:hover {
    background: var(--fs-primary-xtralight);
    border-color: var(--fs-primary);
    color: var(--fs-primary-dark);
}

.fs-add-field-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Form Builder Responsive */
@media (max-width: 960px) {
    .fs-form-builder-layout {
        grid-template-columns: 1fr;
    }
    
    .fs-form-builder-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

/* ============================================
   Contacts Section
   ============================================ */
.fs-contacts-list {
    margin-top: 10px;
}

.fs-contact-item {
    background: var(--fs-gray-100);
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    padding: 15px;
    margin-bottom: 10px;
}

.fs-contact-item .fs-form-row {
    margin-bottom: 10px;
}

.fs-contact-badges {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.fs-contact-badges label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: normal;
    font-size: 13px;
}

.fs-add-contact {
    margin-top: 10px;
}

/* ============================================
   Invoice Items
   ============================================ */
.fs-invoice-items {
    margin-top: 10px;
}

.fs-invoice-item {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    background: var(--fs-gray-100);
    border-radius: var(--fs-border-radius);
}

.fs-invoice-item input {
    width: 100%;
}

.fs-invoice-totals {
    margin-top: 20px;
    padding: 20px;
    background: var(--fs-gray-100);
    border-radius: var(--fs-border-radius);
}

.fs-invoice-totals table {
    width: 300px;
    margin-left: auto;
}

.fs-invoice-totals td {
    padding: 8px 0;
}

.fs-invoice-totals .total-row {
    font-weight: 600;
    font-size: 18px;
    border-top: 2px solid var(--fs-gray-300);
}

/* ============================================
   Receipt Upload
   ============================================ */
.fs-receipt-preview {
    max-width: 200px;
    margin-top: 10px;
}

.fs-receipt-preview img {
    max-width: 100%;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
}

.fs-receipt-actions {
    margin-top: 10px;
}

.fs-receipt-current {
    background: var(--fs-gray-100);
    padding: 15px;
    border-radius: var(--fs-border-radius);
    margin-bottom: 15px;
}

.fs-receipt-current p {
    margin: 0 0 10px;
}

.fs-file-upload {
    margin-top: 5px;
}

.fs-file-upload input[type="file"] {
    padding: 10px;
    background: var(--fs-gray-100);
    border: 2px dashed var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    width: 100%;
    cursor: pointer;
}

.fs-file-upload input[type="file"]:hover {
    border-color: var(--fs-primary);
}

/* ============================================
   Notices
   ============================================ */
.fs-notice {
    padding: 12px 15px;
    border-radius: var(--fs-border-radius);
    margin-bottom: 20px;
}

.fs-notice.success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.fs-notice.error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.fs-notice.warning {
    background: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
}

.fs-notice.info {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}

/* ============================================
   Empty State
   ============================================ */
.fs-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--fs-gray-100);
    border-radius: var(--fs-border-radius);
}

.fs-empty-state-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.fs-empty-state h3 {
    margin: 0 0 10px;
    color: var(--fs-gray-800);
}

.fs-empty-state p {
    color: var(--fs-gray-600);
    margin: 0 0 20px;
}

/* ============================================
   Settings Page
   ============================================ */
.fs-settings-section {
    padding: 0 0 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--fs-gray-200);
}

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

.fs-settings-section h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--fs-primary-dark);
    margin: 0 0 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--fs-primary-light);
}

.fs-settings-section .description {
    margin-bottom: 15px;
}

.fs-logo-preview {
    margin-top: 10px;
}

.fs-logo-preview img {
    max-width: 200px;
    max-height: 80px;
    border: 1px solid var(--fs-gray-300);
    padding: 10px;
    background: #fff;
}

/* Project Template Form Items */
.fs-template-item {
    background: #fff;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    margin-bottom: 15px;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.fs-template-item.moving {
    position: relative;
    z-index: 10;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--fs-primary);
}

.fs-milestone-block {
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.fs-milestone-block.moving {
    position: relative;
    z-index: 10;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--fs-primary);
}

.fs-template-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 15px;
    background: var(--fs-gray-300);
    border-bottom: 1px solid var(--fs-gray-200);
}

/* Milestone header - teal-purple gradient */
.milestone-item .fs-template-item-header {
    background: var(--fs-teal-purple);
    padding: 12px 15px;
}

.milestone-item .fs-template-item-header strong {
    color: #fff;
}

.milestone-item .fs-template-item-header .button-link {
    color: rgba(255, 255, 255, 0.9);
}

.milestone-item .fs-template-item-header .button-link:hover {
    color: #fff;
}

.fs-template-item-header strong {
    flex: 1;
    font-weight: 500;
}

.fs-template-item-header .button-link {
    color: var(--fs-danger);
    text-decoration: none;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
}

.fs-template-item-header .button-link:hover {
    color: #b91c1c;
    text-decoration: underline;
}

.fs-template-item-body {
    padding: 15px;
}

/* Description fields full width */
.fs-template-item-body input[name="milestone_description[]"],
.fs-template-item-body input[name="task_description[]"] {
    width: 100%;
}

.fs-template-item-body .fs-form-field:has(input[name="milestone_description[]"]),
.fs-template-item-body .fs-form-field:has(input[name="task_description[]"]) {
    flex: 1 1 100%;
    max-width: 100%;
}

.fs-reorder-buttons {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fs-reorder-buttons button {
    width: 24px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--fs-primary-light);
    background: var(--fs-primary-xtralight);
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    color: var(--fs-primary-dark);
}

.fs-reorder-buttons button:hover {
    background: var(--fs-primary);
    border-color: var(--fs-primary);
    color: #fff;
}

.fs-reorder-buttons button .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
}

.fs-reorder-buttons button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.fs-reorder-buttons button:disabled:hover {
    background: var(--fs-primary-xtralight);
    border-color: var(--fs-primary-light);
    color: var(--fs-primary-dark);
}

/* Nested Milestone-Task Structure */
.fs-milestone-block {
    margin-bottom: 24px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius-lg);
    background: var(--fs-gray-50);
    overflow: hidden;
}

.fs-milestone-block > .milestone-item {
    margin-bottom: 0;
    border: none;
    border-radius: 0;
}

.fs-milestone-tasks {
    padding: 16px 20px 20px 40px;
    background: var(--fs-gray-50);
}

.fs-milestone-tasks .task-item {
    margin-bottom: 12px;
}

.fs-milestone-tasks .task-item:last-of-type {
    margin-bottom: 16px;
}

.fs-add-task-to-milestone {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: transparent;
    border: 1px dashed var(--fs-primary);
    border-radius: var(--fs-border-radius);
    color: var(--fs-primary-dark);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.fs-add-task-to-milestone:hover {
    background: var(--fs-primary-xtralight);
    border-style: solid;
}

.fs-add-task-to-milestone .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* ============================================
   Reporting Page
   ============================================ */
.fs-report-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.fs-report-card {
    background: #fff;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    padding: 24px 20px;
    text-align: center;
    box-shadow: var(--fs-shadow);
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
    overflow: hidden;
}

.fs-report-card:hover {
    box-shadow: var(--fs-shadow-lg);
    transform: translateY(-2px);
}

.fs-report-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(135deg, #0da8a1 0%, var(--fs-highlight) 100%);
}

.fs-report-card:nth-child(2)::before {
    background: linear-gradient(135deg, var(--fs-danger) 0%, var(--fs-warning) 100%);
}

.fs-report-card:nth-child(3)::before {
    background: linear-gradient(135deg, #0975ab 0%, #49afe2 100%);
}

.fs-report-card:nth-child(4)::before {
    background: linear-gradient(135deg, var(--wp-block-synced-color) 0%, var(--fs-info) 100%);
}

.fs-report-card .label {
    font-size: 13px;
    text-transform: uppercase;
    color: var(--fs-gray-600);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.fs-report-card .value {
    font-size: 28px;
    font-weight: 600;
    color: var(--wp-bound-block-color);
}

.fs-report-card .value.positive {
    color: var(--fs-primary);
}

.fs-report-card .value.negative {
    color: var(--fs-accent);
}

.fs-report-section {
    background: #fff;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--fs-shadow);
}

.fs-report-section h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--fs-gray-600);
    margin: 0 0 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--fs-primary-light);
}

/* Chart Containers */
.fs-chart-section {
    min-height: 350px;
}

.fs-chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

.fs-pie-chart-container {
    height: 250px;
    max-width: 300px;
    margin: 0 auto;
}

/* Interactive Pie Chart Legend */
.fs-pie-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    justify-content: center;
}

.fs-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--fs-gray-50);
    border: 1px solid var(--fs-gray-200);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
}

.fs-legend-item:hover {
    background: var(--fs-gray-100);
    border-color: var(--fs-primary-light);
}

.fs-legend-item.active {
    background: var(--fs-primary-xtralight);
    border-color: var(--fs-primary);
}

.fs-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.fs-legend-label {
    color: var(--fs-gray-700);
    font-weight: 500;
}

.fs-legend-value {
    color: var(--fs-gray-800);
    font-weight: 600;
}

.fs-legend-percent {
    color: var(--fs-gray-500);
    font-size: 12px;
}

/* ============================================
   Utility Classes
   ============================================ */
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-success { color: var(--fs-primary); }
.text-danger { color: var(--fs-accent); }
.text-warning { color: var(--fs-warning); }
.text-muted { color: var(--fs-gray-600); }
.fs-text-accent { color: var(--fs-accent); }
.font-bold { font-weight: 600; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }

.fs-hr {
    border: 0;
    border-top: 1px solid var(--fs-gray-200);
    margin: 10px 0;
}

.fs-delete-link,
.fs-delete-btn,
.fs-remove-contact {
    color: var(--fs-danger);
}

.fs-delete-link:hover,
.fs-delete-btn:hover,
.fs-remove-contact:hover {
    color: #b32d2e;
}

.fs-remove-contact {
    margin-left: auto;
}

/* Conditional field visibility */
.fs-conditional-fields {
    display: none;
}

.fs-conditional-fields.visible {
    display: block;
}

/* Invoice form inline fields */
.fs-inline-input {
    width: auto;
    display: inline-block;
}

.fs-inline-input.small {
    width: 60px;
}

.fs-inline-input.medium {
    width: 80px;
}

/* Button margin utilities */
.ml-10 {
    margin-left: 10px;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 782px) {
    .fs-dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .fs-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .fs-list-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .fs-invoice-item {
        grid-template-columns: 1fr;
    }
    
    .fs-report-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .fs-wrap {
        padding: 0;
    }
    
    .fs-quick-actions,
    .fs-filters,
    .button {
        display: none !important;
    }
}

/* ============================================
   Invoice Preview
   ============================================ */
.fs-invoice-preview {
    background: #fff;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    padding: 40px;
    max-width: 800px;
    margin: 30px auto 0;
    box-shadow: var(--fs-shadow-lg);
}

.fs-preview-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 3px solid var(--fs-primary-light);
}

.fs-preview-from h2 {
    margin: 0 0 10px;
    font-size: 20px;
    color: var(--fs-primary-dark);
}

.fs-preview-from p {
    margin: 0;
    color: var(--fs-gray-600);
    font-size: 14px;
    line-height: 1.6;
}

.fs-preview-logo {
    max-width: 200px;
    max-height: 60px;
    margin-bottom: 15px;
}

.fs-preview-meta {
    text-align: right;
}

.fs-preview-title {
    font-size: 32px;
    color: var(--fs-primary);
    margin: 0 0 15px;
    font-weight: 700;
}

.fs-preview-meta-table {
    text-align: left;
}

.fs-preview-meta-table td {
    padding: 4px 0;
}

.fs-preview-meta-table td:first-child {
    padding-right: 15px;
    color: var(--fs-gray-600);
}

.fs-preview-billto {
    margin-bottom: 30px;
}

.fs-preview-billto h3 {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--fs-primary);
    margin: 0 0 10px;
    letter-spacing: 0.5px;
}

.fs-preview-billto p {
    margin: 0;
    line-height: 1.6;
}

.fs-preview-project {
    margin-bottom: 30px;
    padding: 16px;
    background: var(--fs-gray-50);
    border-radius: 6px;
    border-left: 4px solid var(--fs-primary);
}

.fs-preview-project h3 {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--fs-primary);
    margin: 0 0 6px;
    letter-spacing: 0.5px;
}

.fs-preview-project p {
    margin: 0;
    font-size: 16px;
}

.fs-preview-items {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

.fs-preview-items th {
    background: var(--fs-primary-light);
    padding: 12px;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fs-primary-dark);
    border-bottom: 2px solid var(--fs-primary);
}

.fs-preview-items td {
    padding: 12px;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-preview-items .description-col {
    width: 50%;
}

.fs-preview-items .qty-col,
.fs-preview-items .rate-col,
.fs-preview-items .amount-col {
    width: 16.66%;
}

/* Contract Services Table */
.fs-preview-services-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.fs-preview-services-table thead th {
    text-align: left;
    color: var(--fs-primary);
    padding: 12px 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--fs-primary);
}

.fs-preview-services-table thead th.text-right {
    text-align: right;
}

.fs-preview-services-table tbody td {
    padding: 12px 8px;
    border-bottom: 1px solid var(--fs-gray-200);
    vertical-align: top;
}

.fs-preview-services-table .fs-service-desc {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: var(--fs-gray-600);
}

.fs-preview-services-table tfoot td {
    padding: 12px 8px;
}

.fs-preview-services-table .fs-total-row td {
    border-top: 2px solid var(--fs-gray-800);
    font-size: 16px;
}

.fs-preview-services-table .fs-deposit-row td {
    color: var(--fs-gray-600);
}

.fs-preview-totals {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 30px;
}

.fs-preview-totals table {
    width: 300px;
}

.fs-preview-totals td {
    padding: 8px 0;
}

.fs-preview-totals td:last-child {
    text-align: right;
}

.fs-preview-totals .total-row {
    border-top: 2px solid var(--fs-gray-300);
    font-size: 18px;
}

.fs-preview-totals .total-row td {
    padding-top: 12px;
}

.fs-preview-totals .balance-row {
    background: #fff3cd;
    margin: 0 -8px;
}

.fs-preview-totals .balance-row td {
    padding: 8px;
}

.fs-preview-notes,
.fs-preview-payment {
    background: var(--fs-gray-100);
    padding: 15px;
    border-radius: var(--fs-border-radius);
    margin-top: 20px;
}

.fs-preview-notes h3,
.fs-preview-payment h3 {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--fs-gray-600);
    margin: 0 0 10px;
}

.fs-preview-notes p,
.fs-preview-payment p {
    margin: 0;
    font-size: 14px;
}

/* ============================================
   Client Detail View
   ============================================ */
.fs-detail-table {
    width: 100%;
}

.fs-detail-table th,
.fs-detail-table td {
    padding: 10px 0;
    border-bottom: 1px solid var(--fs-gray-200);
    vertical-align: top;
}

.fs-detail-table th {
    width: 120px;
    font-weight: 600;
    color: var(--fs-gray-600);
    text-align: left;
}

.fs-subsection-title {
    font-size: 14px;
    margin: 20px 0 10px;
    padding-top: 15px;
    border-top: 1px solid var(--fs-gray-200);
}

.fs-contact-card {
    background: var(--fs-gray-100);
    padding: 15px;
    border-radius: var(--fs-border-radius);
    margin-bottom: 10px;
}

.fs-contact-details {
    margin-top: 5px;
    font-size: 13px;
}

.fs-contact-details a,
.fs-contact-details span {
    margin-right: 15px;
}

.fs-contact-tags {
    margin-top: 8px;
}

.fs-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    margin-right: 5px;
}

.fs-tag.primary {
    background: #cce5ff;
    color: #004085;
}

.fs-tag.billing {
    background: #d4edda;
    color: #155724;
}

/* ============================================
   Client List - New Design
   ============================================ */
.fs-client-table {
    border-collapse: collapse;
    background: #fff;
}

.fs-client-table th {
    color: var(--fs-gray-600);
    font-weight: 400;
    font-size: 13px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--fs-gray-300);
}

.fs-client-table td {
    padding: 16px;
    border-bottom: 1px solid var(--fs-gray-200);
    vertical-align: middle;
}

.fs-client-table .column-name {
    vertical-align: middle;
}

.fs-client-table .column-name a {
    text-decoration: none;
    color: var(--fs-gray-800);
}

.fs-client-table .column-name a:hover {
    color: var(--fs-primary);
}

.fs-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fs-gray-400);
}

.fs-status-dot.active {
    background: #2ecc71;
}

.fs-status-dot.inactive {
    background: var(--fs-gray-400);
}

.fs-income-cell {
    text-align: right;
}

.fs-income-amount {
    display: block;
    font-weight: 600;
    color: var(--fs-gray-800);
}

.fs-income-percent {
    display: block;
    font-size: 12px;
    color: var(--fs-gray-600);
}

/* Row Menu (three dots) */
.fs-row-menu {
    position: relative;
    z-index: 1;
}

/* Ensure row menu gets higher z-index on hover */
.fs-row-menu:hover,
.fs-row-menu:focus-within {
    z-index: 100;
}

.fs-row-menu-trigger {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--fs-gray-600);
    cursor: pointer;
    padding: 5px 10px;
    border-radius: var(--fs-border-radius);
}

.fs-row-menu-trigger:hover {
    background: var(--fs-gray-200);
}

.fs-row-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 150px;
    z-index: 1000;
}

.fs-row-menu:hover .fs-row-menu-dropdown,
.fs-row-menu:focus-within .fs-row-menu-dropdown {
    display: block;
}

.fs-row-menu-dropdown a {
    display: block;
    padding: 8px 15px;
    color: var(--fs-gray-800);
    text-decoration: none;
}

.fs-row-menu-dropdown a:hover {
    background: var(--fs-gray-100);
}

.fs-row-menu-dropdown hr {
    margin: 5px 0;
    border: none;
    border-top: 1px solid var(--fs-gray-200);
}

/* Actions column alignment */
.fs-table .column-actions,
.wp-list-table .column-actions {
    width: 60px;
    text-align: center;
}

.fs-table .column-actions .fs-row-menu,
.wp-list-table .column-actions .fs-row-menu {
    display: inline-block;
}

/* Header Filters */
.fs-header-filters {
    display: flex;
    align-items: center;
    gap: 15px;
}

.fs-status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fs-minimal-select {
    border: none;
    background: none;
    font-size: 14px;
    color: var(--fs-gray-800);
    cursor: pointer;
    padding: 5px;
}

.fs-sort-control {
    color: var(--fs-gray-600);
    cursor: pointer;
}

/* ============================================
   Client Detail - Tabbed Interface
   ============================================ */
.fs-tab-nav {
    display: inline-flex;
    border-bottom: none;
    margin-bottom: 0;
    background: var(--fs-gray-100);
    padding: 4px;
    gap: 0;
    border-radius: var(--fs-border-radius-xl);
    border: 1px solid var(--fs-gray-300);
}

.fs-tab-link {
    padding: 10px 22px;
    text-decoration: none;
    color: var(--fs-gray-600);
    border-bottom: none;
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    border-radius: var(--fs-border-radius-lg);
    position: relative;
}

.fs-tab-link:hover {
    color: var(--fs-gray-800);
    background: var(--fs-gray-200);
}

.fs-tab-link.active {
    color: var(--fs-gray-800);
    font-weight: 600;
    border-bottom-color: transparent;
    background: var(--fs-primary-light);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.fs-tab-content {
    background: transparent;
    padding: 30px;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.fs-tab-pane {
    /* Tab pane content */
}

.fs-tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

/* Client Info Section */
.fs-client-info-section {
    margin-bottom: 40px;
}

.fs-client-info-section h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 20px;
    color: var(--fs-secondary);
}

.fs-info-grid {
    max-width: 500px;
}

.fs-info-row {
    margin-bottom: 15px;
}

.fs-info-row.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Info List (sidebar) */
.fs-info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fs-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fs-info-label {
    font-size: 12px;
    color: var(--fs-gray-500);
    font-weight: 500;
}

.fs-info-item .fs-info-value {
    padding: 0;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--fs-gray-800);
}

.fs-info-field label {
    display: block;
    font-size: 11px;
    color: var(--fs-gray-600);
    margin-bottom: 5px;
    text-transform: uppercase;
}

.fs-info-value {
    font-size: 14px;
    color: var(--fs-gray-800);
    padding: 10px 12px;
    background: var(--fs-gray-100);
    border-radius: var(--fs-border-radius);
    border: 1px solid var(--fs-gray-200);
}

/* Contacts Table */
.fs-contacts-section {
    margin-top: 40px;
}

.fs-contacts-table th {
    font-weight: 600;
}

.fs-contacts-table .column-actions {
    width: 80px;
    text-align: right;
    white-space: nowrap;
}

.fs-contacts-table .column-actions .fs-icon-btn {
    display: inline-block;
    vertical-align: middle;
}

/* fs-icon-btn: canonical definition is in the Milestone/Task card section below */

/* Badge */
.fs-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 20px;
    margin-left: 8px;
}

.fs-badge.primary {
    background: var(--fs-primary-xtralight);
    color: var(--fs-primary-dark);
}

.fs-badge.billing {
    background: var(--fs-secondary-light);
    color: var(--fs-secondary-dark);
}

.fs-badge.project {
    background: var(--fs-accent-light);
    color: #C65D45;
}

.fs-badge.fs-badge-internal {
    background: var(--fs-gray-200);
    color: var(--fs-gray-600);
    font-size: 10px;
    padding: 2px 8px;
}

/* Contact form badges (v3.5.0) */
.fs-contact-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--fs-gray-200);
    margin-top: 10px;
}

.fs-contact-badges label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--fs-gray-600);
    cursor: pointer;
}

.fs-contact-badges label:hover {
    color: var(--fs-gray-800);
}

.fs-contact-badge-primary {
    font-weight: 600;
    color: var(--fs-primary-dark) !important;
}

.fs-contact-badge-primary input[type="radio"]:checked + input + span,
.fs-contact-badge-primary input[type="radio"]:checked ~ span {
    color: var(--fs-primary);
}

.fs-contact-badges .fs-remove-contact {
    margin-left: auto;
    color: var(--fs-danger);
    text-decoration: none;
    font-size: 13px;
}

.fs-contact-badges .fs-remove-contact:hover {
    text-decoration: underline;
}

/* Invoice Stats */
.fs-invoice-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 25px;
    padding: 20px 0;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-stat-item {
    display: flex;
    flex-direction: column;
}

.fs-stat-item .fs-stat-label {
    font-size: 12px;
    color: var(--fs-gray-500);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fs-stat-item .fs-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--fs-gray-800);
}

.fs-stat-item .fs-stat-value.success {
    color: var(--fs-success);
}

.fs-stat-item .fs-stat-value.warning {
    color: var(--fs-warning);
}

/* Notes Section */
.fs-notes-section {
    max-width: 900px;
}

.fs-notes-content {
    background: var(--fs-gray-100);
    padding: 20px;
    border-radius: var(--fs-border-radius-lg);
    margin-bottom: 15px;
    line-height: 1.6;
}

.fs-notes-actions {
    margin-top: 15px;
}

/* Notes WYSIWYG Editor */
.fs-notes-editor-wrapper {
    margin-bottom: 16px;
}
.fs-notes-editor-wrapper .wp-editor-container {
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
}
.fs-notes-editor-wrapper .mce-toolbar-grp {
    border-bottom: 1px solid var(--fs-gray-200);
}
.fs-notes-save-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}
.fs-notes-save-status {
    font-size: 13px;
    font-weight: 500;
    transition: opacity 0.3s;
}
.fs-notes-save-status.saved {
    color: var(--fs-primary-dark);
}
.fs-notes-save-status.error {
    color: var(--fs-danger);
}
.fs-notes-hint {
    font-size: 13px;
    color: var(--fs-gray-500);
    margin-left: auto;
}

/* Empty State Small */
.fs-empty-state.small {
    padding: 30px;
    text-align: center;
}

.fs-empty-state.small p {
    margin: 0;
    color: var(--fs-gray-500);
}

/* Dropdown */
.fs-dropdown {
    position: relative;
    display: inline-block;
}

.fs-dropdown-trigger {
    cursor: pointer;
}

.fs-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 160px;
    z-index: 1000;
    padding-top: 5px;
    margin-top: 0;
}

/* Invisible bridge to prevent gap between trigger and menu */
.fs-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 15px;
    background: transparent;
}

.fs-dropdown:hover .fs-dropdown-menu,
.fs-dropdown:focus-within .fs-dropdown-menu {
    display: block;
}

.fs-dropdown-menu a {
    display: block;
    padding: 10px 15px;
    color: var(--fs-gray-800);
    text-decoration: none;
}

.fs-dropdown-menu a:hover {
    background: var(--fs-gray-100);
}

.fs-dropdown-menu hr {
    margin: 5px 0;
    border: none;
    border-top: 1px solid var(--fs-gray-200);
}

/* Template menu items with delete button */
.fs-template-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fs-template-menu-item a {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fs-delete-section-template {
    background: none;
    border: none;
    color: var(--fs-gray-400);
    cursor: pointer;
    font-size: 16px;
    padding: 4px 10px;
    line-height: 1;
    flex-shrink: 0;
    border-radius: 4px;
    transition: all 0.15s;
}

.fs-delete-section-template:hover {
    color: var(--fs-danger);
    background: #fff5f5;
}

/* Header Actions */
.fs-header-actions {
    display: flex;
    gap: 10px;
}

/* ============================================
   Project List & Detail View
   ============================================ */
.fs-project-table td {
    vertical-align: middle;
}

.fs-project-table .column-project a {
    text-decoration: none;
    color: var(--fs-gray-800);
}

.fs-project-table .column-project a:hover {
    color: var(--fs-primary);
}

.fs-project-table .column-amount {
    text-align: right;
}

/* Breadcrumb */
.fs-breadcrumb {
    font-size: 13px;
    color: var(--fs-gray-600);
    margin-bottom: 15px;
}

.fs-breadcrumb a {
    color: var(--fs-gray-600);
    text-decoration: none;
}

.fs-breadcrumb a:hover {
    color: var(--fs-primary);
}

.fs-breadcrumb span {
    margin: 0 8px;
}

/* Header with Client */
.fs-header-client {
    color: var(--fs-gray-600);
    margin-right: 15px;
}

.fs-header-client a {
    color: var(--fs-gray-800);
    text-decoration: none;
}

.fs-header-client a:hover {
    color: var(--fs-primary);
}

/* Tab indicator dot */
.fs-tab-indicator {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    margin-right: 5px;
}

/* Project Sections */
.fs-project-section {
    padding: 25px 0;
    border-bottom: 1px solid var(--fs-gray-200);
}

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

.fs-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.fs-section-header h2 {
    margin: 0;
    font-size: 20px;
}

.fs-section-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.fs-edit-link {
    font-size: 11px;
    color: var(--fs-gray-600);
    text-decoration: none;
    text-transform: uppercase;
}

.fs-edit-link:hover {
    color: var(--fs-primary);
}

.fs-section-description {
    color: var(--fs-gray-600);
    font-size: 14px;
    margin: 10px 0 20px;
}

/* Billing Details */
.fs-billing-details {
    max-width: 400px;
}

.fs-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-detail-row:last-child {
    border-bottom: none;
}

.fs-detail-label {
    color: var(--fs-gray-600);
}

.fs-detail-value {
    color: var(--fs-gray-800);
}

.fs-detail-value a {
    color: var(--fs-primary);
    text-decoration: none;
}

/* Services List */
.fs-services-list {
    margin-bottom: 20px;
}

/* v3.8.6 - Project Services Table styling */
.fs-services-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 15px;
}

.fs-services-table thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fs-gray-500);
    padding: 10px 15px;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-services-table thead th.text-right {
    text-align: right;
}

.fs-services-table tbody td {
    padding: 15px;
    border-bottom: 1px solid var(--fs-gray-100);
    vertical-align: top;
    color: var(--fs-gray-700);
}

.fs-services-table tbody tr:last-child td {
    border-bottom: none;
}

.fs-services-table tbody td strong {
    color: var(--fs-gray-800);
    font-weight: 500;
}

.fs-services-table tbody td small.text-muted {
    color: var(--fs-gray-500);
    display: block;
    margin-top: 4px;
}

.fs-services-table tbody td.text-right {
    text-align: right;
    font-weight: 500;
}

.fs-tracked-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--fs-secondary-light);
    color: var(--fs-secondary-dark);
    border-radius: 4px;
    font-size: 12px;
}

.fs-service-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 30px;
    padding: 15px 0;
    border-bottom: 1px solid var(--fs-gray-200);
    align-items: center;
}

.fs-service-name {
    font-weight: 500;
}

.fs-service-rate,
.fs-service-qty {
    color: var(--fs-gray-600);
}

.fs-service-total {
    font-weight: 600;
    text-align: right;
}

/* Project Total */
.fs-project-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    margin-bottom: 15px;
}

.fs-currency-label {
    color: var(--fs-primary);
    font-size: 13px;
}

.fs-total-amount {
    font-size: 24px;
    font-weight: 600;
}

.fs-add-link {
    margin: 0;
}

.fs-add-link a {
    color: var(--fs-gray-600);
    text-decoration: none;
}

.fs-add-link a:hover {
    color: var(--fs-primary);
}

/* Filter Link */
.fs-filter-link {
    color: var(--fs-gray-600);
    cursor: pointer;
}

.fs-filter-link:hover {
    color: var(--fs-primary);
}

/* ============================================
   Modal Styles
   ============================================ */
/* ============================================
   Unified Modal System
   All modals in the plugin should use these classes
   ============================================ */

/* Modal Overlay - the semi-transparent background */
.fs-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(123, 104, 166, 0.4);
    z-index: 100000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(4px);
}

.fs-modal.active {
    display: flex;
}

/* Modal Content Box */
.fs-modal-content {
    background: #ffffff;
    border-radius: var(--fs-border-radius-xl);
    width: 100%;
    max-width: 600px;
    max-height: calc(100vh - 40px);
    overflow: hidden;
    box-shadow: var(--fs-shadow-lg);
    display: flex;
    flex-direction: column;
    animation: fsModalFadeIn 0.25s ease-out;
}

/* Form inside modal should take full width */
.fs-modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
}

/* Size modifiers */
.fs-modal-content.fs-modal--small {
    max-width: 400px;
}

.fs-modal-content.fs-modal--large {
    max-width: 800px;
}

.fs-modal-content.fs-modal-large,
.fs-modal-content.fs-modal-xlarge {
    max-width: 1000px;
}

@keyframes fsModalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal Header */
.fs-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--fs-gray-200);
    background: linear-gradient(135deg, var(--fs-secondary-light) 0%, #fff 100%);
    flex-shrink: 0;
}

.fs-modal-header h2,
.fs-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--fs-secondary);
}

.fs-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--fs-gray-500);
    padding: 0;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--fs-border-radius);
    transition: background 0.15s, color 0.15s;
}

.fs-modal-close:hover {
    background: var(--fs-gray-200);
    color: var(--fs-gray-800);
}

/* Modal Body */
.fs-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.fs-modal-body .fs-form-group,
.fs-modal-body .fs-form-row {
    margin-bottom: 20px;
    display: block;
}

.fs-modal-body .fs-form-group:last-child,
.fs-modal-body .fs-form-row:last-child {
    margin-bottom: 0;
}

.fs-modal-body label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
    color: #374151;
}

.fs-modal-body label .required {
    color: #ef4444;
}

.fs-modal-body input[type="text"],
.fs-modal-body input[type="email"],
.fs-modal-body input[type="tel"],
.fs-modal-body input[type="number"],
.fs-modal-body input[type="date"],
.fs-modal-body textarea,
.fs-modal-body select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--fs-gray-300);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: var(--fs-gray-900);
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.fs-modal-body input:hover,
.fs-modal-body textarea:hover,
.fs-modal-body select:hover {
    border-color: var(--fs-gray-400);
}

.fs-modal-body input:focus,
.fs-modal-body textarea:focus,
.fs-modal-body select:focus {
    outline: none;
    border-color: var(--fs-primary);
    box-shadow: 0 0 0 3px rgba(62, 207, 178, 0.15);
}

.fs-modal-body textarea {
    min-height: 80px;
    resize: vertical;
}

.fs-modal-body .fs-form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.fs-modal-body .description {
    margin-top: 6px;
    font-size: 13px;
    color: var(--fs-gray-600);
}

/* Time Entry Modal Form */
.fs-time-entry-modal-form .fs-form-row {
    margin-bottom: 16px;
}

.fs-time-entry-modal-form .fs-form-row:last-child {
    margin-bottom: 0;
}

.fs-time-entry-modal-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 14px;
    color: var(--fs-gray-700);
}

.fs-time-entry-modal-form .fs-optional {
    font-weight: 400;
    font-size: 12px;
    color: var(--fs-gray-500);
}

.fs-time-entry-modal-form .fs-duration-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fs-time-entry-modal-form .fs-duration-input {
    width: 70px !important;
    text-align: center;
}

.fs-time-entry-modal-form .fs-duration-label {
    color: var(--fs-gray-600);
    font-size: 13px;
}

.fs-time-entry-modal-form .fs-time-range-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fs-time-entry-modal-form .fs-time-input {
    width: 130px !important;
}

.fs-time-entry-modal-form .fs-time-range-row > span {
    color: var(--fs-gray-500);
    font-size: 13px;
}

.fs-time-entry-modal-form .fs-checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 400 !important;
}

.fs-time-entry-modal-form .fs-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
}

/* Send Email Modal - Contact Selection */
.fs-send-to-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-contact-checkboxes-container {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius);
    background: var(--fs-gray-50);
}

/* Send modal To/CC contact rows */
.fs-contact-send-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--fs-gray-200);
    transition: background 0.15s;
}

.fs-contact-send-row:last-child {
    border-bottom: none;
}

.fs-contact-send-row:hover {
    background: #fff;
}

.fs-contact-info-col {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.fs-contact-info-col .fs-contact-name {
    font-weight: 500;
    color: var(--fs-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    flex-shrink: 1;
}

.fs-contact-info-col .fs-contact-email {
    color: var(--fs-gray-500);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 120px;
}

.fs-contact-info-col .fs-contact-role {
    color: var(--fs-gray-400);
    font-size: 12px;
}

.fs-contact-info-col .fs-contact-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

.fs-contact-info-col .fs-contact-badge.primary {
    background: var(--fs-primary-xtralight);
    color: var(--fs-primary-dark);
}

.fs-contact-action-col {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: 16px;
}

.fs-send-role-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--fs-gray-600);
    padding: 3px 8px;
    border-radius: 4px;
    transition: all 0.15s;
    white-space: nowrap;
}

.fs-send-role-label:hover {
    background: var(--fs-gray-200);
    color: var(--fs-gray-800);
}

.fs-send-role-label input[type="radio"],
.fs-send-role-label input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    max-width: 16px;
    max-height: 16px;
    box-sizing: border-box;
    background: #fff;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    top: -1px;
    transition: border-color 0.15s, background 0.15s;
}

.fs-send-role-label input[type="radio"] {
    border-radius: 50%;
}

.fs-send-role-label input[type="checkbox"] {
    border-radius: 3px;
}

.fs-send-role-label input[type="radio"]:checked {
    accent-color: var(--fs-primary);
}


.fs-send-role-label input[type="radio"]:disabled,
.fs-send-role-label input[type="checkbox"]:disabled {
    border-color: var(--fs-gray-300);
    background: var(--fs-gray-100);
    cursor: not-allowed;
}

.fs-send-role-label input:disabled + span {
    color: var(--fs-gray-400);
}

/* Legacy checkbox items (kept for backwards compat) */
.fs-contact-checkbox-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--fs-gray-200);
    cursor: pointer;
    transition: background 0.15s;
}

.fs-contact-checkbox-item:last-child {
    border-bottom: none;
}

.fs-contact-checkbox-item:hover {
    background: #fff;
}

.fs-contact-checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    margin-right: 10px;
    flex-shrink: 0;
}

.fs-contact-checkbox-item .fs-contact-name {
    font-weight: 500;
    color: var(--fs-gray-800);
}

.fs-contact-checkbox-item .fs-contact-email {
    color: var(--fs-gray-500);
    font-size: 13px;
    margin-right: 8px;
}

.fs-contact-checkbox-item .fs-contact-role {
    color: var(--fs-gray-400);
    font-size: 12px;
    margin-left: auto;
}

.fs-contact-checkbox-item .fs-contact-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
}

.fs-contact-checkbox-item .fs-contact-badge.primary {
    background: var(--fs-primary-xtralight);
    color: var(--fs-primary-dark);
}

/* High Contrast */
.fs-high-contrast .fs-contact-send-row:hover {
    background: var(--fs-gray-100);
}
.fs-high-contrast .fs-send-role-label {
    color: var(--fs-gray-700);
}

.fs-contact-loading {
    padding: 20px;
    text-align: center;
    color: var(--fs-gray-500);
}

.fs-no-contacts,
.fs-contact-error {
    padding: 16px;
    text-align: center;
    color: var(--fs-gray-500);
    font-size: 13px;
}

/* =========================================
   Template Library Styles
   ========================================= */

.fs-template-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    max-height: 500px;
    overflow-y: auto;
    padding: 4px;
}

.fs-library-template-card {
    border: 2px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius-lg);
    transition: all 0.2s ease;
    background: #fff;
}

.fs-library-template-card:hover:not(.is-imported) {
    border-color: var(--fs-primary);
    box-shadow: var(--fs-shadow-md);
}

.fs-library-template-card.is-imported {
    background: var(--fs-gray-50);
    opacity: 0.7;
}

.fs-library-template-card label {
    display: block;
    cursor: pointer;
    padding: 0;
}

.fs-library-template-card.is-imported label {
    cursor: not-allowed;
}

.fs-library-template-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fs-library-template-card input[type="checkbox"]:checked + .fs-library-template-content {
    background: var(--fs-primary-xtralight);
}

.fs-library-template-card input[type="checkbox"]:checked + .fs-library-template-content::before {
    content: '\2713';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    background: var(--fs-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}

.fs-library-template-content {
    padding: 16px;
    position: relative;
}

.fs-library-template-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.fs-library-template-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--fs-gray-800);
}

.fs-imported-badge {
    background: var(--fs-gray-300);
    color: var(--fs-gray-600);
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.fs-library-template-desc {
    font-size: 13px;
    color: var(--fs-gray-600);
    line-height: 1.4;
    margin: 0 0 12px 0;
}

.fs-library-template-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--fs-gray-500);
}

.fs-library-template-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fs-library-template-meta strong {
    color: var(--fs-gray-700);
    font-weight: 600;
}

.fs-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.fs-header-actions .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: middle;
}

/* Invoice Project Modal Options */
.fs-invoice-options {
    margin: 20px 0;
}

.fs-invoice-option {
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 12px;
    background: #fafafa;
}

.fs-invoice-option:last-child {
    margin-bottom: 0;
}

.fs-invoice-option .fs-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.fs-invoice-option .fs-checkbox-label strong {
    font-weight: 600;
}

.fs-invoice-option .description {
    margin: 4px 0 0 26px;
    font-size: 13px;
    color: var(--fs-gray-600);
}

.fs-invoice-option .fs-note {
    color: var(--fs-gray-500);
    font-size: 12px;
}

.fs-invoice-option.fs-muted {
    background: var(--fs-gray-100);
    color: #9ca3af;
}

.fs-notice {
    padding: 12px 16px;
    border-radius: 6px;
    margin: 16px 0;
}

.fs-notice-warning {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
}

.fs-notice p {
    margin: 0;
}

/* Modal Footer */
.fs-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
    border-radius: 0 0 var(--fs-border-radius-xl) var(--fs-border-radius-xl);
    overflow: visible;
}

.fs-modal-footer .button,
.fs-modal-footer .fs-btn {
    min-width: 100px;
    padding: 10px 20px;
    flex-shrink: 0;
}

/* Modal Responsive */
@media (max-width: 600px) {
    .fs-modal {
        padding: 10px;
    }
    
    .fs-modal-content {
        max-height: calc(100vh - 20px);
    }
    
    .fs-modal-header {
        padding: 16px 20px;
    }
    
    .fs-modal-body {
        padding: 20px;
    }
    
    .fs-modal-body .fs-form-row-2col {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .fs-modal-footer {
        padding: 12px 20px;
    }
    
    .fs-modal-footer .button,
    .fs-modal-footer .fs-btn {
        flex: 1;
    }
}

/* Section Header with Button */
.fs-contacts-section .fs-section-header {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--fs-gray-200);
}

.fs-contacts-section .fs-section-header h3 {
    margin: 0;
}

/* ============================================
   Stylized Action Buttons
   ============================================ */
.fs-btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--fs-border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    vertical-align: middle;
}

.fs-btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.fs-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(62, 207, 178, 0.25);
}

.fs-btn:focus:not(:focus-visible) {
    box-shadow: none;
}

.fs-btn:focus-visible {
    outline: 2px solid var(--fs-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(62, 207, 178, 0.2);
}

.fs-btn:active {
    transform: translateY(0);
    box-shadow: none;
    filter: brightness(0.92);
}

.fs-btn[disabled],
.fs-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

.fs-btn-loading {
    pointer-events: none;
    opacity: 0.75;
    position: relative;
}

.fs-btn-loading::after {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}

.fs-btn-small {
    padding: 6px 12px;
    font-size: 12px;
}

.fs-btn-primary {
    background: linear-gradient(135deg, var(--fs-primary) 0%, #2BA891 100%);
    color: #fff;
    border: 0 !important;
}

.fs-btn-primary:hover {
    background: linear-gradient(135deg, #2BA891 0%, #239B85 100%);
    color: #fff;
}

.fs-btn-primary:active {
    background: linear-gradient(135deg, #239B85 0%, #1E8A75 100%);
}

.fs-btn-secondary {
    background: #fff;
    border: 1px solid var(--fs-gray-400) !important;
    color: var(--fs-gray-700);
    box-shadow: none;
}

.fs-btn-secondary:hover {
    background: var(--fs-gray-100);
    border-color: var(--fs-gray-500) !important;
    color: var(--fs-gray-800);
    box-shadow: none;
}

.fs-btn-secondary:active {
    background: var(--fs-gray-200);
    border-color: var(--fs-gray-500) !important;
}

/* Ensure button element resets for fs-btn */
button.fs-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.fs-btn-success {
    background: linear-gradient(135deg, var(--fs-highlight) 0%, #B5D63A 100%);
    color: var(--fs-gray-800);
    box-shadow: 0 2px 8px rgba(197, 233, 70, 0.3);
}

.fs-btn-success:hover {
    background: linear-gradient(135deg, #B5D63A 0%, #A5C62A 100%);
    color: var(--fs-gray-900);
    box-shadow: 0 4px 12px rgba(197, 233, 70, 0.4);
}

.fs-btn-success:active {
    background: linear-gradient(135deg, #A5C62A 0%, #95B61A 100%);
}

.fs-btn-accent {
    background: linear-gradient(135deg, var(--fs-accent) 0%, #E57A5E 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(245, 137, 109, 0.3);
}

.fs-btn-accent:hover {
    background: linear-gradient(135deg, #E57A5E 0%, #D56B4F 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(245, 137, 109, 0.4);
}

.fs-btn-accent:active {
    background: linear-gradient(135deg, #D56B4F 0%, #C55C40 100%);
}

.fs-btn-deposit {
    background: var(--fs-accent);
    border: 1px solid var(--fs-accent) !important;
    color: var(--fs-gray-50) !important;
}

.fs-btn-deposit:hover {
    filter: brightness(1.05);
    border-color: var(--fs-accent) !important;
    color: var(--fs-gray-50) !important;
}

.fs-btn-deposit:active {
    filter: brightness(0.92);
}

.fs-deposit-paid-note {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fs-primary);
    font-weight: 500;
    margin-top: 10px;
}

.fs-deposit-paid-note .dashicons {
    color: var(--fs-primary);
}

.fs-btn-danger {
    background: #fff;
    border: 1px solid var(--fs-danger);
    color: var(--fs-danger);
}

.fs-btn-danger:hover {
    background: var(--fs-danger);
    color: #fff;
}

.fs-btn-danger:active {
    background: #d04444;
    color: #fff;
}

/* Invoice Wizard Button */
.fs-open-invoice-wizard {
    background: var(--fs-secondary) !important;
    color: #fff !important;
    border: none !important;
}

.fs-open-invoice-wizard:hover {
    background: var(--fs-secondary-dark) !important;
    color: #fff !important;
}

/* Submit Button - Teal-Purple Gradient */
.fs-btn-submit {
    background: var(--fs-teal-purple) !important;
    color: #fff !important;
    border: none !important;
}

.fs-btn-submit:hover {
    filter: brightness(1.05);
}

/* Action Buttons Container */
.fs-action-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ============================================
   Inline Status Select
   ============================================ */
/* Inline Status Select - Badge Style */
.fs-inline-status-select {
    padding: 5px 28px 5px 12px;
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    min-width: 90px;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}

.fs-inline-status-select:hover {
    filter: brightness(0.95);
}

.fs-inline-status-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.fs-inline-status-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.fs-inline-status-select.fs-status-updated {
    animation: statusFlash 0.5s ease;
}

@keyframes statusFlash {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 0 3px rgba(62, 207, 178, 0.4); }
}

/* Status Select Color Variants */
.fs-inline-status-select.status-draft {
    background-color: var(--fs-gray-200);
    color: var(--fs-gray-600);
}

.fs-inline-status-select.status-cancelled {
    background-color: var(--fs-gray-200);
    color: var(--fs-gray-600);
}

.fs-inline-status-select.status-pending {
    background-color: var(--fs-accent-light);
    color: #C65D45;
}

.fs-inline-status-select.status-partial {
    background-color: var(--fs-accent-light);
    color: #C65D45;
}

.fs-inline-status-select.status-sent {
    background-color: var(--fs-secondary-light);
    color: var(--fs-secondary);
}

.fs-inline-status-select.status-viewed {
    background-color: var(--fs-secondary-light);
    color: var(--fs-secondary-dark);
}

.fs-inline-status-select.status-paid {
    background-color: var(--fs-primary-xtralight);
    color: var(--fs-primary-dark);
}

.fs-inline-status-select.status-overdue {
    background-color: #FFE5E5;
    color: #C53030;
}

/* Adjust dropdown arrow color for light backgrounds */
.fs-inline-status-select.status-draft,
.fs-inline-status-select.status-cancelled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
}

.fs-inline-status-select.status-pending,
.fs-inline-status-select.status-partial {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23C65D45' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
}

.fs-inline-status-select.status-sent,
.fs-inline-status-select.status-viewed {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235D4E80' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
}

.fs-inline-status-select.status-paid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232BA891' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
}

.fs-inline-status-select.status-overdue {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23C53030' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
}

/* Task Status Select - Kanban Status Colors */
.fs-inline-status-select.task-status-requested {
    background-color: #fef3c7;
    color: #92400e;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2392400e' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
}

.fs-inline-status-select.task-status-pending {
    background-color: var(--fs-gray-200);
    color: var(--fs-gray-600);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
}

.fs-inline-status-select.task-status-in_progress {
    background-color: #dbeafe;
    color: #1d4ed8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231d4ed8' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
}

.fs-inline-status-select.task-status-needs_info {
    background-color: #fef3c7;
    color: #92400e;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2392400e' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
}

.fs-inline-status-select.task-status-with_client {
    background-color: #ede9fe;
    color: #6d28d9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236d28d9' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
}

.fs-inline-status-select.task-status-completed {
    background-color: var(--fs-primary-xtralight);
    color: var(--fs-primary-dark);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232BA891' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
}

.fs-inline-status-select.task-status-cancelled {
    background-color: #fee2e2;
    color: #dc2626;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23dc2626' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
}

/* ============================================
   Proposals
   ============================================ */

/* Proposal Form */
.fs-form-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    margin-top: 20px;
}

.fs-form-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.fs-form-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 62px; /* WordPress admin bar height (32px) + extra margin (30px) */
    align-self: start;
    max-height: calc(100vh - 94px);
    overflow-y: auto;
}

.fs-form-sidebar .fs-form-section {
    background: #fff;
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius);
    padding: 16px;
}

.fs-form-sidebar .fs-form-section h3 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
}

.fs-full-width {
    width: 100%;
    text-align: center;
}

.fs-status-display {
    margin: 8px 0;
}

.fs-meta-item {
    font-size: 13px;
    margin: 6px 0;
    color: var(--fs-gray-600);
}

.fs-copy-link {
    width: 100%;
    font-size: 11px;
    padding: 8px;
    background: var(--fs-gray-100);
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
}

/* Services Builder */
#fs-services-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fs-service-item {
    background: var(--fs-gray-50);
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius);
    overflow: hidden;
}

.fs-service-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-service-drag {
    cursor: grab;
    color: var(--fs-gray-400);
    font-size: 16px;
}

.fs-service-name {
    flex: 1;
    border: none;
    font-size: 15px;
    font-weight: 500;
    padding: 4px 0;
    background: transparent;
}

.fs-service-name:focus {
    outline: none;
}

.fs-remove-service {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--fs-gray-400);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.fs-remove-service:hover {
    color: var(--fs-danger);
}

.fs-service-body {
    padding: 16px;
}

.fs-service-description {
    width: 100%;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 14px;
    resize: vertical;
}

.fs-service-pricing {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fs-service-pricing-type {
    padding: 6px 12px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    font-size: 14px;
}

.fs-pricing-fields {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fs-pricing-fields input {
    width: 100px;
    padding: 6px 10px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    font-size: 14px;
    text-align: right;
}

.fs-service-quantity {
    width: 70px !important;
}

.fs-service-amount {
    width: 110px !important;
    background: var(--fs-gray-100);
    font-weight: 500;
}

.fs-pricing-separator {
    color: var(--fs-gray-400);
    font-size: 14px;
}

/* Hourly service options */
.fs-hourly-options {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fs-hourly-source {
    padding: 6px 12px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    font-size: 14px;
}

.fs-tracked-hours-note {
    font-size: 13px;
    color: var(--fs-primary);
    font-style: italic;
    white-space: nowrap;
}

.fs-services-total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--fs-gray-100);
    border-radius: var(--fs-border-radius);
    margin-top: 16px;
    font-size: 18px;
    font-weight: 600;
}

.fs-add-service-btn {
    background: var(--fs-primary-light) !important;
    color: var(--fs-gray-700) !important;
    border: none !important;
}

/* Services actions row */
.fs-services-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.fs-services-actions-divider {
    color: var(--fs-gray-400);
}

.fs-preset-service-select {
    min-width: 200px;
}

/* Deposit fields */
.fs-deposit-fields {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--fs-gray-200);
}

/* First invoice field */
.fs-first-invoice-field {
    transition: opacity 0.2s ease;
}

/* Proposal Preview */
.fs-proposal-preview,
.fs-contract-preview,
.fs-document-preview {
    background: #fff;
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius-lg);
    padding: 40px;
    margin-top: 20px;
    max-width: 800px;
    box-shadow: var(--fs-shadow);
}

.fs-preview-header {
    text-align: center;
    margin-bottom: 32px;
}

.fs-preview-logo {
    max-width: 200px;
    max-height: 80px;
    margin-bottom: 16px;
}

.fs-preview-business-name {
    font-size: 24px;
    font-weight: 600;
    color: var(--fs-gray-900);
}

.fs-preview-title-section {
    margin-bottom: 40px;
}

.fs-preview-title {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--fs-gray-900);
    line-height: 1.2;
}

.fs-preview-type {
    font-size: 14px;
    font-weight: 500;
    color: var(--fs-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fs-preview-date {
    color: var(--fs-gray-600);
    font-size: 14px;
}

.fs-preview-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.fs-preview-party h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--fs-gray-400);
    margin: 0 0 8px 0;
    font-weight: 600;
}

.fs-party-name {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--fs-gray-900);
}

.fs-preview-party p {
    margin: 4px 0;
    color: var(--fs-gray-700);
    font-size: 14px;
}

/* Preview dates section */
.fs-preview-dates {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    padding: 20px;
    background: var(--fs-gray-50);
    border-radius: var(--fs-border-radius);
}

.fs-preview-date-item {
    flex: 1;
}

.fs-preview-date-item label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--fs-gray-400);
    margin-bottom: 4px;
}

.fs-preview-date-item span {
    font-weight: 600;
    color: var(--fs-gray-900);
}

.fs-preview-section {
    margin-bottom: 32px;
}

.fs-preview-section h2 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--fs-gray-400);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--fs-primary);
    font-weight: 600;
}

.fs-preview-service {
    padding: 16px 0;
    border-bottom: 1px solid var(--fs-gray-100);
}

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

.fs-service-header-preview {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.fs-service-header-preview h3 {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    color: var(--fs-gray-900);
}

.fs-service-price {
    font-weight: 600;
    color: var(--fs-gray-900);
}

.fs-service-price small {
    font-weight: 400;
    color: var(--fs-gray-500);
    margin-left: 8px;
}

.fs-service-description-preview {
    margin: 4px 0 0 0;
    color: var(--fs-gray-500);
    font-size: 13px;
    line-height: 1.5;
}

.fs-service-meta-preview {
    font-size: 12px;
    color: var(--fs-gray-400);
    margin-top: 2px;
}

.fs-billing-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--fs-gray-50);
    padding: 16px;
    border-radius: var(--fs-border-radius);
    margin: 16px 0;
}

.fs-billing-summary h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.fs-billing-amount {
    font-size: 20px;
    font-weight: 600;
}

.fs-deposit-info {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    padding: 16px;
    border-radius: var(--fs-border-radius);
    margin-top: 16px;
}

.fs-deposit-info h3 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 500;
    color: #92400e;
}

.fs-deposit-info p {
    margin: 0;
    font-weight: 600;
    color: #92400e;
}

.fs-preview-total {
    display: flex;
    justify-content: flex-end;
    gap: 40px;
    padding: 8px 16px;
    margin-top: 24px;
}

.fs-preview-total.grand-total {
    font-size: 20px;
    font-weight: 700;
    background: var(--fs-gray-50);
    border-radius: var(--fs-border-radius);
    padding: 16px;
}

.fs-total-label {
    color: var(--fs-gray-600);
    min-width: 100px;
    text-align: right;
}

.fs-total-amount {
    min-width: 120px;
    text-align: right;
    font-weight: 600;
    color: var(--fs-gray-900);
}

.fs-preview-notes {
    background: var(--fs-gray-50);
    padding: 20px;
    border-radius: var(--fs-border-radius);
    border: none;
    margin-top: 32px;
}

.fs-preview-notes h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--fs-gray-400);
    margin-bottom: 8px;
}

/* Signatures Section */
.fs-preview-signatures {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 2px solid var(--fs-gray-200);
    border-bottom: none;
}

.fs-signature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.fs-signature-block {
    text-align: center;
}

.fs-signature-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--fs-gray-400);
    margin-bottom: 16px;
}

.fs-signature-image {
    min-height: 60px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 8px;
}

.fs-signature-image img {
    max-width: 200px;
    max-height: 60px;
}

.fs-signature-line {
    border-bottom: 2px solid var(--fs-gray-300);
    margin-bottom: 8px;
}

.fs-signature-name {
    font-weight: 600;
    margin: 0;
    color: var(--fs-gray-900);
}

.fs-signature-company {
    color: var(--fs-gray-500);
    font-size: 13px;
    margin: 4px 0;
}

.fs-signature-date {
    color: var(--fs-gray-400);
    font-size: 13px;
    margin: 4px 0;
}

.fs-signature-pending {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    color: var(--fs-gray-400);
    font-style: italic;
    margin-bottom: 8px;
}

/* Status bar */
.fs-proposal-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--fs-gray-50);
    padding: 12px 20px;
    border-radius: var(--fs-border-radius);
    margin-top: 16px;
}

.fs-status-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fs-status-label {
    font-weight: 500;
    color: var(--fs-gray-600);
}

.fs-status-meta {
    color: var(--fs-gray-500);
    font-size: 13px;
    padding-left: 12px;
    border-left: 1px solid var(--fs-gray-300);
}

.fs-expiry-info {
    font-size: 13px;
    color: var(--fs-gray-600);
}

.fs-expiry-info.expired {
    color: var(--fs-danger);
    font-weight: 500;
}

/* Client link section */
.fs-client-link-section {
    background: var(--fs-gray-50);
    padding: 20px;
    border-radius: var(--fs-border-radius);
    margin-top: 24px;
    max-width: 800px;
}

.fs-client-link-section h3 {
    margin: 0 0 8px 0;
}

.fs-link-copy-group {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.fs-link-copy-group input {
    flex: 1;
}

/* Portal Link Section in Client View */
.fs-portal-link-section {
    background: var(--fs-primary-xtralight);
    border: 1px solid var(--fs-primary);
    border-radius: var(--fs-border-radius);
    padding: 20px;
    margin-bottom: 24px;
}

.fs-portal-link-section .fs-section-header {
    margin-bottom: 12px;
}

.fs-portal-link-section .fs-section-header h3 {
    margin: 0;
    color: var(--fs-primary-dark);
}

.fs-portal-link-section .description {
    margin: 0 0 12px 0;
    color: var(--fs-primary-dark);
}

.fs-portal-link-section .fs-link-copy-group {
    margin-top: 12px;
}

.fs-portal-link-section .fs-copy-link {
    background: #fff;
}

/* Empty state for proposals */
.fs-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--fs-gray-50);
    border-radius: var(--fs-border-radius);
    margin-top: 20px;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .fs-form-grid {
        grid-template-columns: 1fr;
    }
    
    .fs-preview-parties {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .fs-signature-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Settings Signature Pad
   ============================================ */

.fs-signature-upload-container {
    max-width: 450px;
}

.fs-signature-preview {
    background: #fff;
    border: 2px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    padding: 16px;
    text-align: center;
    margin-bottom: 12px;
}

.fs-signature-preview img {
    max-width: 300px;
    max-height: 100px;
    display: block;
    margin: 0 auto 12px;
}

.fs-signature-input-wrapper {
    margin-top: 12px;
}

.fs-signature-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--fs-gray-300);
}

.fs-signature-tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    color: var(--fs-gray-600);
    transition: all 0.15s;
}

.fs-signature-tab:hover {
    color: var(--fs-primary);
}

.fs-signature-tab.active {
    color: var(--fs-primary);
    border-bottom-color: var(--fs-primary);
    font-weight: 500;
}

.fs-signature-tab-content {
    display: none;
}

.fs-signature-tab-content.active {
    display: block;
}

.fs-signature-pad-container {
    background: #fff;
    border: 2px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    padding: 12px;
}

.fs-signature-pad-container .fs-signature-pad {
    display: block;
    width: 100%;
    border: 1px dashed var(--fs-gray-400);
    border-radius: var(--fs-border-radius);
    cursor: crosshair;
    touch-action: none;
    background: #fafafa;
}

.fs-signature-pad-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.fs-signature-upload-area {
    margin-top: 8px;
}

.fs-signature-dropzone {
    background: #fafafa;
    border: 2px dashed var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
}

.fs-signature-dropzone:hover,
.fs-signature-dropzone.dragover {
    border-color: var(--fs-primary);
    background: #f0f7ff;
}

.fs-signature-dropzone .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    color: var(--fs-gray-400);
    margin-bottom: 8px;
}

.fs-signature-dropzone p {
    margin: 0 0 12px;
    color: var(--fs-gray-600);
}

.fs-settings-section .fs-signature-preview img {
    background: repeating-linear-gradient(
        45deg,
        #fafafa,
        #fafafa 10px,
        #f0f0f0 10px,
        #f0f0f0 20px
    );
    padding: 8px;
}

/* ============================================
   Contact Selection Checkboxes
   ============================================ */
.fs-send-to-section .description {
    margin-bottom: 16px;
}

.fs-contact-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fs-contact-checkbox {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.fs-contact-checkbox:hover {
    border-color: var(--fs-primary-light);
    background: #fafbfc;
}

.fs-contact-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    margin-right: 8px;
    cursor: pointer;
}

.fs-contact-checkbox input[type="checkbox"]:checked + .fs-contact-name {
    color: var(--fs-primary-dark);
}

.fs-contact-name {
    font-weight: 500;
    color: var(--fs-gray-800);
}

.fs-contact-title {
    font-size: 13px;
    color: var(--fs-gray-500);
}

.fs-contact-title::before {
    content: '·';
    margin: 0 6px;
}

.fs-contact-email {
    font-size: 13px;
    color: var(--fs-gray-500);
}

.fs-contact-email::before {
    content: '·';
    margin: 0 6px;
}

/* ============================================
   Custom Message Input (for email forms)
   ============================================ */
.fs-custom-message-input {
    width: 100%;
    min-height: 120px;
    padding: 12px 14px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.fs-custom-message-input:focus {
    outline: none;
    border-color: var(--fs-primary);
    box-shadow: 0 0 0 3px rgba(65, 115, 176, 0.15);
}

.fs-custom-message-input::placeholder {
    color: var(--fs-gray-400);
}

/* ============================================
   Contract Styles
   ============================================ */
.fs-preview-parties {
    display: flex;
    gap: 40px;
    margin-bottom: 32px;
    padding: 24px;
    background: #f9fafb;
    border-radius: 8px;
}

.fs-preview-party {
    flex: 1;
}

.fs-preview-party h3 {
    margin: 0 0 12px 0;
    color: var(--fs-gray-500);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fs-preview-party p {
    margin: 0 0 4px 0;
    color: var(--fs-text);
}

.fs-term-dates p {
    margin: 0 0 8px 0;
}

.fs-terms-section {
    margin-top: 32px;
}

.fs-terms-content {
    line-height: 1.7;
    color: var(--fs-text);
}

.fs-terms-content h2 {
    font-size: 20px;
    margin: 24px 0 16px 0;
    color: var(--fs-primary-dark);
}

.fs-terms-content h3 {
    font-size: 16px;
    margin: 20px 0 10px 0;
    color: var(--fs-text);
}

.fs-terms-content p {
    margin: 0 0 12px 0;
}

.fs-signatures-section {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 2px solid #e5e7eb;
}

.fs-signature-boxes {
    display: flex;
    gap: 40px;
}

.fs-signature-box {
    flex: 1;
    padding: 24px;
    background: #f9fafb;
    border-radius: 8px;
    text-align: center;
}

.fs-signature-box h4 {
    margin: 0 0 16px 0;
    color: var(--fs-gray-500);
    font-size: 14px;
    text-transform: uppercase;
}

.fs-signature-display {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.fs-signature-display .fs-signature-image {
    max-height: 80px;
    max-width: 200px;
}

.fs-signature-name {
    margin: 0 0 4px 0;
    font-weight: 600;
    color: var(--fs-text);
}

.fs-signature-date {
    margin: 0 0 4px 0;
    font-size: 13px;
    color: var(--fs-gray-500);
}

.fs-signature-ip {
    margin: 0;
    font-size: 12px;
    color: var(--fs-gray-400);
}

.fs-signature-pending {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--fs-gray-300);
    border-radius: 8px;
    color: var(--fs-gray-400);
}

.fs-signature-pending p {
    margin: 0;
    font-style: italic;
}

/* ============================================
   Contract Sections Selection
   ============================================ */
.fs-contract-sections-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.fs-contract-section-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.fs-contract-section-item:hover {
    border-color: var(--fs-gray-300);
    background: var(--fs-gray-50);
}

.fs-contract-section-item.is-enabled {
    border-color: var(--fs-primary);
    background: #f0f9ff;
}

.fs-contract-section-item.is-required {
    border-left: 3px solid var(--fs-primary);
}

.fs-section-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    flex: 1;
}

.fs-section-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
}

.fs-section-checkbox input[type="checkbox"]:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.fs-section-title {
    font-weight: 500;
    color: var(--fs-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.fs-required-badge {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 6px;
    background: var(--fs-primary);
    color: #fff;
    border-radius: 3px;
}

.fs-section-preview-btn {
    background: none;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--fs-gray-400);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.fs-section-preview-btn:hover {
    background: #e5e7eb;
    color: var(--fs-text);
}

.fs-section-preview-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Section Preview Area */
.fs-section-preview-area {
    margin-top: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.fs-section-preview-area .fs-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.fs-section-preview-area .fs-preview-header h4 {
    margin: 0;
    font-size: 15px;
}

.fs-close-preview {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--fs-gray-500);
    padding: 0 4px;
}

.fs-close-preview:hover {
    color: var(--fs-text);
}

.fs-preview-content {
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.7;
    color: var(--fs-text);
}

.fs-preview-content p {
    margin: 0 0 12px 0;
}

.fs-preview-content strong {
    font-weight: 600;
}

.fs-preview-content em {
    color: var(--fs-primary);
    font-style: normal;
    background: #fef3c7;
    padding: 1px 4px;
    border-radius: 2px;
}

/* =====================================================
   TIME TRACKING STYLES
   ===================================================== */

/* Tab Navigation */
.fs-tab-nav {
    display: inline-flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: none;
    background: var(--fs-gray-100);
    padding: 4px;
    border-radius: var(--fs-border-radius-xl);
    border: 1px solid var(--fs-gray-300);
}

.fs-tab {
    padding: 10px 22px;
    text-decoration: none;
    color: var(--fs-gray-600);
    border-bottom: none;
    margin-bottom: 0;
    transition: all 0.2s ease;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--fs-border-radius-lg);
}

.fs-tab:hover {
    color: var(--fs-gray-800);
    background: var(--fs-gray-200);
}

.fs-tab.active {
    color: var(--fs-gray-800);
    border-bottom-color: transparent;
    font-weight: 600;
    background: var(--fs-primary-light);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.fs-tab-count {
    display: inline-block;
    background: var(--fs-gray-300);
    color: var(--fs-gray-600);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
}

.fs-tab.active .fs-tab-count {
    background: var(--fs-primary-xtralight);
    color: var(--fs-primary-dark);
}

/* Timer Section */
.fs-timer-section {
    background: #fff;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    padding: 20px;
    margin-bottom: 20px;
}

.fs-timer-widget {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.fs-timer-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--fs-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.fs-timer-btn:hover {
    background: var(--fs-primary-dark);
    transform: scale(1.05);
}

.fs-timer-btn.running {
    background: var(--fs-danger);
}

.fs-timer-btn .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
}

.fs-timer-display {
    font-size: 32px;
    font-weight: 600;
    font-family: 'SF Mono', Monaco, monospace;
    color: var(--fs-primary-dark);
    min-width: 130px;
}

.fs-timer-description {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fs-timer-description input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    font-size: 14px;
}

.fs-timer-description .dashicons {
    color: var(--fs-gray-400);
}

.fs-timer-project {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fs-timer-project select {
    padding: 10px 12px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    min-width: 180px;
}

.fs-timer-project .dashicons {
    color: var(--fs-gray-400);
}

/* Summary Bar */
.fs-summary-bar {
    display: flex;
    gap: 30px;
    background: var(--fs-highlight-light);
    padding: 15px 20px;
    border-radius: var(--fs-border-radius);
    margin-bottom: 20px;
}

.fs-summary-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fs-summary-label {
    font-size: 12px;
    color: var(--fs-gray-600);
    text-transform: uppercase;
}

.fs-summary-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--fs-primary-dark);
}

.fs-summary-sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--fs-gray-600);
}

.fs-stat-sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--fs-gray-500);
    display: block;
    margin-top: 2px;
}

/* Rounded duration indicator on time entries */
.fs-rounded-duration {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--fs-gray-500);
    margin-top: 1px;
}

/* High Contrast */
.fs-high-contrast .fs-rounded-duration {
    color: var(--fs-gray-700);
}
.fs-high-contrast .fs-summary-sub,
.fs-high-contrast .fs-stat-sub {
    color: var(--fs-gray-700);
}

/* Activity Badges */
.fs-activity-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.fs-activity-development { background: #e3f2fd; color: #1565c0; }
.fs-activity-design { background: #fce4ec; color: #c2185b; }
.fs-activity-meeting { background: #fff3e0; color: #ef6c00; }
.fs-activity-research { background: #e8f5e9; color: #2e7d32; }
.fs-activity-admin { background: #f3e5f5; color: #7b1fa2; }
.fs-activity-other { background: var(--fs-gray-200); color: var(--fs-gray-600); }

/* Status Badges with Text Labels */
.fs-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px 3px 6px;
    border-radius: 12px;
    white-space: nowrap;
}
.fs-status-badge .fs-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.fs-status-badge.fs-status-invoiced {
    background: rgba(65, 115, 176, 0.1);
    color: var(--fs-primary);
}
.fs-status-badge.fs-status-invoiced .fs-status-dot {
    background: var(--fs-primary);
}
.fs-status-badge.fs-status-billable {
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
}
.fs-status-badge.fs-status-billable .fs-status-dot {
    background: var(--fs-highlight);
}
.fs-status-badge.fs-status-non-billable {
    background: var(--fs-gray-100);
    color: var(--fs-gray-500);
}
.fs-status-badge.fs-status-non-billable .fs-status-dot {
    background: var(--fs-gray-400);
}

/* Status Dots (standalone, for backwards compatibility) */
.fs-status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.fs-status-invoiced:not(.fs-status-badge) { background: var(--fs-primary); }
.fs-status-billable:not(.fs-status-badge) { background: var(--fs-highlight); }
.fs-status-non-billable:not(.fs-status-badge) { background: var(--fs-gray-300); }

/* Entry Description */
.fs-entry-description {
    color: var(--fs-gray-600);
    font-style: italic;
}

.fs-no-project,
.fs-no-client {
    color: var(--fs-gray-400);
}

/* Running Entry */
tr.fs-running {
    background: #fff9e6 !important;
}

/* Date Label */
.fs-date {
    color: var(--fs-gray-600);
    font-size: 12px;
}

/* Row Actions */
.fs-row-actions {
    display: flex;
    gap: 5px;
}

.fs-action-link {
    color: var(--fs-gray-600);
    text-decoration: none;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
    background: none;
    border: none;
    cursor: pointer;
}

.fs-action-link:hover {
    color: var(--fs-primary);
    background: var(--fs-primary-light);
}

/* Week View */
.fs-week-nav {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.fs-week-range {
    font-size: 18px;
}

.fs-week-summary {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}

.fs-week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.fs-day-column {
    background: #fff;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    min-height: 300px;
}

.fs-day-column.fs-today {
    border-color: var(--fs-primary);
    box-shadow: 0 0 0 1px var(--fs-primary);
}

.fs-day-header {
    padding: 10px;
    background: var(--fs-gray-100);
    border-bottom: 1px solid var(--fs-gray-300);
    text-align: center;
}

.fs-day-name {
    display: block;
    font-weight: 600;
    color: var(--fs-primary-dark);
}

.fs-day-date {
    display: block;
    font-size: 12px;
    color: var(--fs-gray-600);
}

.fs-day-total {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--fs-primary);
    margin-top: 5px;
}

.fs-day-entries {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fs-day-entry {
    background: var(--fs-primary-light);
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    position: relative;
}

.fs-day-entry.fs-non-billable {
    background: var(--fs-gray-200);
}

.fs-day-entry.fs-invoiced {
    opacity: 0.7;
}

.fs-entry-duration {
    font-weight: 600;
    color: var(--fs-primary-dark);
}

.fs-entry-project {
    color: var(--fs-gray-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fs-entry-desc {
    color: var(--fs-gray-400);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fs-day-entry .fs-entry-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.fs-day-entry:hover .fs-entry-actions {
    opacity: 1;
}

.fs-no-entries {
    text-align: center;
    padding: 20px;
    color: var(--fs-gray-300);
}

.fs-no-entries .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
}

.fs-quick-add-btn {
    width: 100%;
    padding: 8px;
    background: none;
    border: 1px dashed var(--fs-gray-300);
    border-radius: 4px;
    color: var(--fs-gray-400);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}

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

/* Reports */
.fs-report-filters {
    background: #fff;
    padding: 20px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    margin-bottom: 20px;
}

.fs-filter-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.fs-report-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.fs-report-breakdown {
    background: #fff;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    padding: 20px;
}

.fs-progress-bar {
    height: 6px;
    background: var(--fs-gray-200);
    border-radius: 3px;
    overflow: hidden;
    width: 60px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.fs-progress-fill {
    height: 100%;
    background: var(--fs-primary);
    border-radius: 3px;
}

/* ============================================
   MODERN MILESTONES TAB STYLES
   ============================================ */

/* Overview Card */
.fs-milestone-overview-card {
    background: var(--fs-teal-lime);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    color: var(--fs-gray-700);
    box-shadow: 0 4px 15px rgba(32, 187, 166, 0.3);
}

.fs-milestone-overview-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 20px;
}

.fs-milestone-stat {
    text-align: center;
}

.fs-milestone-stat .fs-stat-number {
    display: block;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: var(--fs-gray-700);
}

.fs-milestone-stat .fs-stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fs-gray-700);
}

.fs-milestone-progress-wrapper {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 12px 16px;
}

.fs-milestone-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
}

.fs-milestone-progress-percent {
    font-weight: 600;
}

.fs-milestone-progress-bar-modern {
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    overflow: hidden;
}

.fs-milestone-progress-fill-modern {
    height: 100%;
    background: var(--fs-highlight-light);
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* Milestones Grid */
.fs-milestones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

/* Milestone Card */
.fs-milestone-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--fs-gray-200);
    overflow: hidden;
    transition: all 0.2s ease;
}

.fs-milestone-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.fs-milestone-card.completed {
    background: linear-gradient(to bottom, var(--fs-primary-xtralight) 0%, #fff 100%);
    border-color: var(--fs-primary-light);
}

.fs-milestone-card.overdue {
    background: linear-gradient(to bottom, #FEE2E2 0%, #fff 100%);
    border-color: var(--fs-danger);
}

.fs-milestone-card.upcoming {
    background: #fff;
    border-color: transparent;
}

/* Card Header */
.fs-milestone-card-header {
    display: flex;
    align-items: center;
    padding: 16px 16px 0;
    gap: 12px;
}

.fs-milestone-number {
    width: 32px;
    height: 32px;
    background: var(--fs-pink-purple);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.fs-milestone-card.completed .fs-milestone-number {
    background: linear-gradient(135deg, var(--fs-primary) 0%, var(--fs-primary-dark) 100%);
}

.fs-milestone-card.overdue .fs-milestone-number {
    background: linear-gradient(135deg, var(--fs-danger) 0%, #C53030 100%);
}

.fs-milestone-status-indicator {
    flex: 1;
}

.fs-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.fs-status-dot.pending {
    background: var(--fs-gray-400);
}

.fs-status-dot.completed {
    background: var(--fs-primary);
    box-shadow: 0 0 0 3px rgba(62, 207, 178, 0.2);
}

.fs-status-dot.overdue {
    background: var(--fs-danger);
    box-shadow: 0 0 0 3px rgba(232, 90, 90, 0.2);
    animation: pulse-red 2s infinite;
}

.fs-status-dot.upcoming {
    background: var(--fs-accent);
    box-shadow: 0 0 0 3px rgba(255, 162, 110, 0.2);
}

@keyframes pulse-red {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.fs-milestone-card-actions {
    display: flex;
    gap: 4px;
}

.fs-icon-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fs-gray-500);
    transition: all 0.15s ease;
}

.fs-icon-btn:hover {
    background: var(--fs-gray-100);
    color: var(--fs-gray-700);
}

.fs-icon-btn:focus-visible {
    outline: 2px solid var(--fs-primary);
    outline-offset: 1px;
}

.fs-icon-btn:active {
    background: var(--fs-gray-200);
}

.fs-icon-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Card Body */
.fs-milestone-card-body {
    padding: 16px;
}

.fs-milestone-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--fs-gray-900);
    margin: 0 0 8px;
    line-height: 1.4;
}

.fs-milestone-title.completed {
    text-decoration: line-through;
    color: var(--fs-gray-500);
}

.fs-milestone-description {
    font-size: 13px;
    color: var(--fs-gray-600);
    margin: 0 0 12px;
    line-height: 1.5;
}

.fs-milestone-due {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--fs-gray-600);
    margin-bottom: 8px;
}

.fs-milestone-due .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.fs-milestone-due.overdue {
    color: var(--fs-danger);
    font-weight: 500;
}

.fs-milestone-due.upcoming {
    color: var(--fs-accent);
}

.fs-milestone-invoice-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--fs-secondary-light);
    color: var(--fs-secondary-dark);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    margin-top: 8px;
}

.fs-milestone-invoice-badge .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.fs-milestone-invoice-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--fs-primary);
    font-size: 13px;
    text-decoration: none;
    margin-top: 8px;
}

.fs-milestone-invoice-link:hover {
    text-decoration: underline;
}

/* Card Footer */
.fs-milestone-card-footer {
    padding: 12px 16px;
    background: var(--fs-gray-50);
    border-top: 1px solid var(--fs-gray-200);
}

.fs-complete-milestone-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: #fff;
    border: 2px dashed var(--fs-gray-300);
    border-radius: 8px;
    color: var(--fs-gray-600);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.fs-complete-milestone-btn:hover {
    border-color: var(--fs-primary);
    color: var(--fs-primary-dark);
    background: var(--fs-primary-xtralight);
}

.fs-complete-milestone-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.fs-completed-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--fs-primary-dark);
    font-weight: 500;
    font-size: 14px;
}

.fs-completed-badge .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Empty State Card */
.fs-empty-state-card {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px dashed var(--fs-gray-300);
    border-radius: 16px;
    padding: 48px;
    text-align: center;
}

.fs-empty-state-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.fs-empty-state-icon .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    color: #fff;
}

.fs-empty-state-card h3 {
    margin: 0 0 8px;
    color: var(--fs-gray-900);
    font-size: 18px;
}

.fs-empty-state-card p {
    margin: 0 0 20px;
    color: var(--fs-gray-600);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.fs-empty-state-card .button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Button icon alignment */
.fs-tab-header .button .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

/* ============================================
   MODERN TASKS TAB STYLES
   ============================================ */

/* Task Overview Card */
.fs-task-overview-card {
    background: var(--fs-teal-lime);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    color: var(--fs-gray-700);
    box-shadow: 0 4px 15px rgba(32, 187, 166, 0.3);
}

.fs-task-overview-stats {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.fs-task-stat {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fs-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--fs-primary-dark);
    color: var(--fs-primary-dark);
}

.fs-stat-icon .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: var(--fs-primary-dark);
}

.fs-stat-icon.completed { 
    border-color: var(--fs-primary-dark);
    color: var(--fs-primary-dark);
}
.fs-stat-icon.completed .dashicons { color: var(--fs-primary-dark); }
.fs-stat-icon.pending { 
    border-color: var(--fs-accent);
    color: var(--fs-accent);
}
.fs-stat-icon.pending .dashicons { color: var(--fs-accent); }
.fs-stat-icon.designer { 
    border-color: var(--fs-secondary);
    color: var(--fs-secondary);
}
.fs-stat-icon.designer .dashicons { color: var(--fs-secondary); }
.fs-stat-icon.client { 
    border-color: #db2777;
    color: #db2777;
}
.fs-stat-icon.client .dashicons { color: #db2777; }

/* Stat icons on task overview card (white border on gradient bg) */
.fs-task-overview-card .fs-stat-icon {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--fs-gray-700);
}

.fs-task-overview-card .fs-stat-icon .dashicons {
    color: var(--fs-gray-700);
}

/* Stat icons on milestone overview card (white border on gradient bg) */
.fs-milestone-overview-card .fs-stat-icon {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--fs-gray-700);
}

.fs-milestone-overview-card .fs-stat-icon .dashicons {
    color: var(--fs-gray-700);
}

.fs-stat-content {
    display: flex;
    flex-direction: column;
}

.fs-stat-content .fs-stat-number {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--fs-primary-dark);
}

.fs-stat-content .fs-stat-label {
    font-size: 12px;
    color: var(--fs-gray-600);
    margin-top: 4px;
}

/* Override for stat content on gradient backgrounds */
.fs-task-overview-card .fs-stat-content .fs-stat-number {
    color: var(--fs-gray-700);
}

.fs-task-overview-card .fs-stat-content .fs-stat-label {
    color: var(--fs-gray-700);
}

/* Milestone overview uses dark text on teal-lime gradient */
.fs-milestone-overview-card .fs-stat-content .fs-stat-number {
    color: var(--fs-gray-700);
}

.fs-milestone-overview-card .fs-stat-content .fs-stat-label {
    color: var(--fs-gray-700);
}

.fs-task-progress-wrapper {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    padding: 12px 16px;
}

.fs-task-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
}

.fs-task-progress-percent {
    font-weight: 600;
}

.fs-task-progress-bar-modern {
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    overflow: hidden;
}

.fs-task-progress-fill-modern {
    height: 100%;
    background: var(--fs-highlight-light);
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* Task Filters */
.fs-task-filters {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.fs-filter-select {
    padding: 6px 12px;
    border: 1px solid var(--fs-gray-300);
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
}

/* Tasks Grid */
.fs-tasks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

/* Task Card */
.fs-task-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 2px solid var(--fs-primary-light);
    overflow: hidden;
    transition: all 0.2s ease;
    position: relative;
}

.fs-task-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.fs-task-card.completed {
    background: #fff;
    border-color: var(--fs-gray-300);
}

.fs-task-card.overdue {
    border-color: var(--fs-danger);
}

.fs-task-card.client-task {
    border-color: #F2B6F6;
}

.fs-task-card.client-task.overdue {
    border-color: var(--fs-danger);
}

/* Hide priority bar - using border colors instead */
.fs-task-card-priority-bar {
    display: none;
}

/* Task Card Header */
.fs-task-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px 0;
}

.fs-task-card-actions {
    display: flex;
    gap: 4px;
}

.fs-task-assignee-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
}

.fs-task-assignee-badge .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.fs-task-assignee-badge.designer {
    background: var(--fs-primary-xtralight);
    color: var(--fs-primary-dark);
}

.fs-task-assignee-badge.client {
    background: rgba(242, 182, 246, 0.3);
    color: #c026d3;
}

/* Task Card Body */
.fs-task-card-body {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
}

.fs-task-card-checkbox {
    flex-shrink: 0;
    padding-top: 2px;
}

/* Custom Checkbox */
.fs-custom-checkbox {
    display: block;
    cursor: pointer;
}

.fs-custom-checkbox input {
    display: none;
}

.fs-checkbox-mark {
    width: 22px;
    height: 22px;
    border: 2px solid var(--fs-gray-300);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.fs-custom-checkbox input:checked + .fs-checkbox-mark {
    background: var(--fs-primary);
    border-color: var(--fs-primary);
}

.fs-custom-checkbox input:checked + .fs-checkbox-mark::after {
    content: '✓';
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

.fs-custom-checkbox:hover .fs-checkbox-mark {
    border-color: var(--fs-primary);
}

.fs-task-card-content {
    flex: 1;
    min-width: 0;
}

.fs-task-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--fs-gray-900);
    margin: 0 0 4px;
    line-height: 1.4;
}

.fs-task-card-title.completed {
    text-decoration: line-through;
    color: var(--fs-gray-500);
}

.fs-task-card-description {
    font-size: 13px;
    color: var(--fs-gray-500);
    margin: 0 0 8px;
    line-height: 1.4;
}

.fs-task-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fs-task-priority-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.fs-task-milestone-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 4px;
    font-size: 11px;
}

.fs-task-milestone-tag .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
}

/* Task Card Footer */
.fs-task-card-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--fs-gray-50);
    border-top: 1px solid var(--fs-gray-100);
    font-size: 12px;
    color: var(--fs-gray-500);
}

.fs-task-due,
.fs-task-hours {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fs-task-due .dashicons,
.fs-task-hours .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.fs-task-due.overdue {
    color: var(--fs-danger);
    font-weight: 500;
}

.fs-task-completed-check {
    margin-left: auto;
    width: 24px;
    height: 24px;
    background: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.fs-task-completed-check .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Empty state blue variant */
.fs-empty-state-icon.blue {
    background: linear-gradient(135deg, var(--fs-secondary) 0%, var(--fs-secondary-dark) 100%);
}

/* ============================================
   Tasks List Page
   ============================================ */
/* Task Tabs (Active/Archived) */
.fs-tasks-tabs {
    display: inline-flex;
    gap: 0;
    margin: 16px 0 20px;
    border-bottom: none;
    background: var(--fs-gray-100);
    padding: 4px;
    border-radius: var(--fs-border-radius-xl);
    border: 1px solid var(--fs-gray-300);
}

.fs-tasks-tab {
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fs-gray-600);
    text-decoration: none;
    border-bottom: none;
    margin-bottom: 0;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--fs-border-radius-lg);
}

.fs-tasks-tab:hover {
    color: var(--fs-gray-800);
    background: var(--fs-gray-200);
}

.fs-tasks-tab.active {
    color: var(--fs-gray-800);
    border-bottom-color: transparent;
    background: var(--fs-primary-light);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.fs-tasks-tab-count {
    background: var(--fs-gray-300);
    color: var(--fs-gray-600);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    line-height: 1.4;
}

.fs-tasks-tab.active .fs-tasks-tab-count {
    background: var(--fs-primary-light);
    color: var(--fs-primary-dark);
}

/* Archived tab action bar */
.fs-archived-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: var(--fs-border-radius);
    margin-bottom: 16px;
}
.fs-archived-actions .fs-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.fs-archived-actions .fs-btn-danger .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}
.fs-archived-actions-hint {
    font-size: 12px;
    color: var(--fs-gray-500);
}

.fs-high-contrast .fs-archived-actions {
    background: #3a1a1a;
    border-color: var(--fs-danger);
}
.fs-high-contrast .fs-archived-actions-hint {
    color: var(--fs-gray-400);
}

/* Kanban Archive All Button */
.fs-kanban-archive-all {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--fs-gray-400);
    transition: all 0.2s;
}

.fs-kanban-archive-all:hover {
    background: var(--fs-gray-200);
    color: var(--fs-gray-600);
}

.fs-kanban-archive-all .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.fs-tasks-stats-row {
    display: flex;
    gap: 16px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.fs-tasks-stat-card {
    background: #fff;
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius);
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
}

/* Combined task stats card */
.fs-tasks-stat-card.combined-tasks {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 16px 28px;
    border-left: 3px solid var(--fs-primary);
}

.fs-combined-stat-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 24px;
    border-right: 1px solid var(--fs-gray-200);
}

.fs-combined-stat-breakdown {
    display: flex;
    gap: 20px;
}

.fs-combined-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 8px;
}

.fs-combined-stat-item.my-tasks {
    border-left: 2px solid #8b5cf6;
    padding-left: 12px;
}

.fs-combined-stat-item.client-tasks {
    border-left: 2px solid #ec4899;
    padding-left: 12px;
}

.fs-combined-stat-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--fs-gray-700);
    line-height: 1;
}

.fs-combined-stat-label {
    font-size: 10px;
    color: var(--fs-gray-500);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.fs-tasks-stat-card.my-tasks {
    border-left: 3px solid #8b5cf6;
}

.fs-tasks-stat-card.client-tasks {
    border-left: 3px solid #ec4899;
}

.fs-tasks-stat-card.overdue {
    border-left: 3px solid #ef4444;
    background: #fef2f2;
}

.fs-tasks-stat-card.completed {
    border-left: 3px solid #22c55e;
}

.fs-tasks-stat-number {
    font-size: 28px;
    font-weight: 700;
    color: var(--fs-primary-dark);
    line-height: 1;
}

.fs-tasks-stat-card.overdue .fs-tasks-stat-number {
    color: #ef4444;
}

.fs-tasks-stat-label {
    font-size: 12px;
    color: var(--fs-gray-500);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fs-filters-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
}

.fs-filters-form .fs-filter-select {
    min-width: 0;
}

.fs-filter-select {
    min-width: 140px;
}

/* Tasks table styles */
.fs-table tr.task-completed {
    background: #f9fafb;
}

.fs-table tr.task-overdue {
    background: #fef2f2;
}

.fs-task-checkbox-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.fs-task-checkbox-wrapper input[type="checkbox"] {
    display: none;
}

.fs-task-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--fs-gray-300);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.fs-task-checkbox-wrapper input:checked + .fs-task-checkbox-custom {
    background: #22c55e;
    border-color: #22c55e;
}

.fs-task-checkbox-wrapper input:checked + .fs-task-checkbox-custom::after {
    content: '✓';
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

.fs-task-title-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fs-task-title {
    font-weight: 500;
    color: var(--fs-primary-dark);
}

.fs-task-title-link {
    font-weight: 500;
    color: var(--fs-primary-dark);
    text-decoration: none;
    cursor: pointer;
}

.fs-task-title-link:hover {
    color: var(--fs-primary);
    text-decoration: underline;
}

.fs-task-title-link.completed {
    text-decoration: line-through;
    color: var(--fs-gray-400);
}

.fs-task-title.completed {
    text-decoration: line-through;
    color: var(--fs-gray-400);
}

.fs-task-description {
    font-size: 12px;
    color: var(--fs-gray-500);
}

.fs-assignee-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.fs-assignee-badge.designer {
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
}

.fs-assignee-badge.client {
    background: rgba(236, 72, 153, 0.1);
    color: #db2777;
}

.fs-assignee-badge .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.fs-priority-badge {
    display: inline-block;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

.fs-kanban-status-badge {
    display: inline-block;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 500;
    white-space: nowrap;
}

/* Dashboard task status dropdown - matches kanban badge sizing */
.fs-inline-status-select.fs-dashboard-task-status {
    font-size: 11px;
    padding: 3px 24px 3px 10px;
    border-radius: 20px;
    font-weight: 500;
    min-width: auto;
    line-height: 1.3;
    background-position: right 6px center;
    background-size: 10px;
}

.fs-sortable-header {
    color: var(--fs-gray-600);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: color 0.15s ease;
}

.fs-sortable-header:hover {
    color: var(--fs-primary-dark);
    text-decoration: none;
}

.fs-sortable-header.active {
    color: var(--fs-gray-800);
    font-weight: 600;
}

.fs-sort-indicator {
    font-size: 11px;
    line-height: 1;
    color: var(--fs-gray-400);
    transition: color 0.15s ease;
}

.fs-sortable-header:hover .fs-sort-indicator {
    color: var(--fs-primary);
}

.fs-sortable-header.active .fs-sort-indicator {
    color: var(--fs-primary-dark);
}

.fs-due-date {
    font-size: 13px;
    color: var(--fs-gray-600);
}

.fs-due-date.overdue {
    color: #ef4444;
    font-weight: 600;
}

.fs-due-date .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 2px;
}

.fs-no-date {
    color: var(--fs-gray-400);
}

.column-actions .button-small {
    padding: 0 6px;
    min-height: 28px;
}

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

/* ============================================
   Client Logo Styles
   ============================================ */
.fs-client-logo-group {
    max-width: 200px;
}

.fs-logo-upload-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fs-logo-preview {
    width: 100px;
    height: 100px;
    border: 2px dashed var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fs-gray-100);
    overflow: hidden;
}

.fs-logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fs-logo-placeholder {
    color: var(--fs-gray-400);
}

.fs-logo-placeholder .dashicons {
    font-size: 40px;
    width: 40px;
    height: 40px;
}

.fs-logo-actions {
    display: flex;
    gap: 8px;
}

.fs-logo-actions .button {
    font-size: 12px;
    padding: 2px 10px;
}

/* Logo preview - transparent checkerboard background */
.fs-logo-preview.has-logo {
    border-style: solid;
    border-color: var(--fs-gray-200);
    background-image:
        linear-gradient(45deg, var(--fs-gray-200) 25%, transparent 25%),
        linear-gradient(-45deg, var(--fs-gray-200) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--fs-gray-200) 75%),
        linear-gradient(-45deg, transparent 75%, var(--fs-gray-200) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    background-color: #fff;
}

/* Document header preview */
.fs-header-preview-wrapper {
    margin-top: 16px;
}

.fs-header-preview-wrapper label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--fs-gray-700);
    font-size: 13px;
}

.fs-header-preview {
    border-radius: var(--fs-border-radius-lg);
    overflow: hidden;
    box-shadow: var(--fs-shadow-md);
    max-width: 480px;
    border: 1px solid var(--fs-gray-200);
}

.fs-header-preview-bar {
    padding: 24px 28px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: background-color 0.3s ease;
}

.fs-header-preview-logo {
    max-height: 40px;
    max-width: 160px;
    object-fit: contain;
}

.fs-header-preview-biz-name {
    font-size: 12px;
    opacity: 0.85;
}

.fs-header-preview-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.fs-header-preview-subtitle {
    font-size: 12px;
    opacity: 0.7;
}

.fs-header-preview-body {
    background: #fff;
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fs-header-preview-body-line {
    height: 10px;
    background: var(--fs-gray-200);
    border-radius: 4px;
}

.fs-header-preview-body-line:nth-child(2) { width: 80%; }
.fs-header-preview-body-line:nth-child(3) { width: 60%; }

/* White header preview variant */
.fs-header-preview-bar-white {
    background: #fff !important;
    color: var(--fs-gray-800) !important;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-header-preview-bar-white .fs-header-preview-biz-name {
    opacity: 0.7;
    color: var(--fs-gray-600);
}

.fs-header-preview-bar-white .fs-header-preview-title {
    color: var(--fs-gray-800);
}

/* Side-by-side preview pair */
.fs-header-preview-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.fs-header-preview-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fs-header-preview-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--fs-gray-600);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Logo variant tags (Dark / Light) */
.fs-logo-variant-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    vertical-align: middle;
}

.fs-logo-tag-dark {
    background: var(--fs-gray-800);
    color: #fff;
}

.fs-logo-tag-light {
    background: var(--fs-gray-200);
    color: var(--fs-gray-600);
    border: 1px solid var(--fs-gray-300);
}

/* Light logo preview thumbnail — brand color bg, no checkerboard */
.fs-logo-preview-light.has-logo {
    background-image: none !important;
    transition: background-color 0.3s ease;
}

.fs-logo-preview-light:not(.has-logo) {
    background-image: none;
}

/* Logo usage map */
.fs-logo-usage-map {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.fs-logo-usage-group {
    background: var(--fs-gray-50);
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius);
    padding: 16px;
}

.fs-logo-usage-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--fs-gray-700);
    margin-bottom: 10px;
}

.fs-logo-usage-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fs-logo-usage-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    color: var(--fs-gray-600);
}

.fs-logo-usage-list li .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--fs-gray-400);
}

/* Color mode toggle (Solid / Gradient) */
.fs-color-mode-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fs-color-mode-toggle {
    display: inline-flex;
    background: var(--fs-gray-100);
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    padding: 3px;
    width: fit-content;
}

.fs-color-mode-option {
    display: flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fs-gray-600);
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 0 !important;
}

.fs-color-mode-option:hover {
    color: var(--fs-gray-800);
}

.fs-color-mode-option.active {
    background: #fff;
    color: var(--fs-gray-800);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.fs-color-mode-option input[type="radio"] {
    display: none;
}

/* Color pickers row */
.fs-color-pickers {
    display: flex;
    gap: 20px;
    align-items: flex-end;
}

.fs-color-picker-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fs-color-picker-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--fs-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.fs-color-picker-group input[type="color"] {
    width: 48px;
    height: 36px;
    border: 2px solid var(--fs-gray-300);
    border-radius: 6px;
    padding: 2px;
    cursor: pointer;
    background: transparent;
}

.fs-color-picker-group input[type="color"]:hover {
    border-color: var(--fs-gray-400);
}

/* Direction presets */
.fs-gradient-direction-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fs-gradient-direction-wrapper > label {
    font-size: 12px;
    font-weight: 600;
    color: var(--fs-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.fs-direction-presets {
    display: flex;
    gap: 4px;
}

.fs-direction-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--fs-gray-300);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fs-gray-500);
    transition: all 0.15s;
    padding: 0;
    line-height: 1;
}

.fs-direction-btn:hover {
    border-color: var(--fs-gray-400);
    color: var(--fs-gray-700);
    background: var(--fs-gray-50);
}

.fs-direction-btn.active {
    border-color: var(--fs-primary);
    background: var(--fs-primary-xtralight);
    color: var(--fs-primary-dark);
}

/* Color swatch preview */
.fs-color-swatch-preview {
    width: 100%;
    max-width: 240px;
    height: 36px;
    border-radius: var(--fs-border-radius);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
    transition: background 0.3s ease;
}

/* Client list logo thumbnail */
.fs-client-name-cell,
.fs-project-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fs-client-logo-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: contain;
    background: var(--fs-gray-100);
    border: 1px solid var(--fs-gray-200);
}

.fs-client-logo-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: var(--fs-gray-100);
    border: 1px solid var(--fs-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fs-gray-400);
}

.fs-client-logo-placeholder .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.fs-client-name-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============================================
   Settings Tabs - Vertical Sidebar Layout
   ============================================ */
.fs-settings-layout {
    display: flex;
    gap: 0;
    align-items: stretch;
}

.fs-settings-sidebar {
    width: 200px;
    min-width: 200px;
    background: #fff;
    border-radius: 10px 0 0 10px;
    border: none;
    padding: 8px 0;
    position: sticky;
    top: 32px;
    align-self: flex-start;
}

.fs-settings-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: var(--fs-gray-600);
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
}

.fs-settings-nav-item:hover {
    color: var(--fs-gray-800);
    background: var(--fs-gray-50);
}

.fs-settings-nav-item.active {
    color: var(--fs-primary-dark);
    background: var(--fs-primary-xtralight);
    border-left-color: var(--fs-primary);
    font-weight: 500;
}

.fs-settings-nav-item .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
}

.fs-settings-content {
    flex: 1;
    min-width: 0;
    background: #fff;
    border-radius: 0 10px 10px 0;
    border: none;
    padding: 24px 30px;
    margin-right: 15px;
}

/* Override WordPress buttons inside Settings/Bookings content to match FS design */
.fs-settings-content .button,
.fs-settings-content input[type="submit"].button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    background: #fff;
    color: var(--fs-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
    min-height: auto;
}

.fs-settings-content .button:hover,
.fs-settings-content input[type="submit"].button:hover {
    background: var(--fs-gray-100);
    border-color: var(--fs-gray-400);
    color: var(--fs-gray-800);
    box-shadow: none;
}

.fs-settings-content .button.button-primary,
.fs-settings-content input[type="submit"].button-primary {
    background: linear-gradient(135deg, var(--fs-primary) 0%, #2BA891 100%);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(62, 207, 178, 0.3);
}

.fs-settings-content .button.button-primary:hover,
.fs-settings-content input[type="submit"].button-primary:hover {
    background: linear-gradient(135deg, #2BA891 0%, #239B85 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(62, 207, 178, 0.4);
}

.fs-settings-content .button.button-small {
    padding: 5px 10px;
    font-size: 12px;
}

.fs-settings-content .button.button-hero {
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 50px;
}

.fs-settings-content .button.button-link-delete {
    background: none;
    border: none;
    color: var(--fs-danger);
    padding: 8px 16px;
    box-shadow: none;
}

.fs-settings-content .button.button-link-delete:hover {
    color: #991b1b;
    background: none;
    border: none;
}

/* Service table Edit = teal text link, Delete = danger text link */
.fs-settings-content .fs-edit-service.button,
.fs-settings-content .fs-edit-service.button:hover {
    background: none;
    border: none;
    color: var(--fs-primary-dark);
    padding: 4px 8px;
    font-weight: 500;
    box-shadow: none;
}

.fs-settings-content .fs-edit-service.button:hover {
    color: var(--fs-primary);
}

.fs-settings-content .fs-delete-service.button,
.fs-settings-content .fs-delete-service.button:hover {
    background: none;
    border: none;
    color: var(--fs-danger);
    padding: 4px 8px;
    font-weight: 500;
    box-shadow: none;
}

.fs-settings-content .fs-delete-service.button:hover {
    color: #991b1b;
}

/* Style "Edit" text links inside settings tables consistently */
.fs-settings-content td a:not(.fs-btn):not(.button):not([class]),
.fs-settings-content td a.fs-edit-link {
    color: var(--fs-primary-dark);
    text-decoration: none;
    font-weight: 500;
}

.fs-settings-content td a:not(.fs-btn):not(.button):not([class]):hover,
.fs-settings-content td a.fs-edit-link:hover {
    color: var(--fs-primary);
}

.fs-settings-content td a.text-danger,
.fs-settings-content td a.fs-delete-btn {
    color: var(--fs-danger);
    font-weight: 500;
}

.fs-settings-content td a.text-danger:hover,
.fs-settings-content td a.fs-delete-btn:hover {
    color: #991b1b;
}

/* Reminder Schedule */
.fs-reminder-schedule {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fs-reminder-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fs-reminder-row strong {
    min-width: 100px;
}

.fs-reminder-row .small-text {
    width: 60px;
}

/* ============================================
   Payment Reminders
   ============================================ */
.fs-reminders-card {
    margin-top: 20px;
    background: #fff;
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius);
}

.fs-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-card-header h3 {
    margin: 0;
    font-size: 16px;
}

.fs-card-actions {
    display: flex;
    gap: 8px;
}

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

.fs-card-actions .button .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.button .dashicons {
    vertical-align:middle;
    margin-bottom: 3px;
}

.fs-card-body {
    padding: 20px;
}

.fs-card-body h4 {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--fs-gray-600);
}

.fs-empty-message {
    color: var(--fs-gray-500);
    font-style: italic;
    margin: 0;
}

.fs-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.fs-mini-table th,
.fs-mini-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-mini-table th {
    background: var(--fs-gray-50);
    font-weight: 500;
    color: var(--fs-gray-600);
}

.fs-mini-table td small {
    display: block;
    color: var(--fs-gray-500);
    font-size: 11px;
}

.fs-reminder-history {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fs-reminder-history li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--fs-gray-100);
    font-size: 13px;
}

.fs-reminder-history li:last-child {
    border-bottom: none;
}

.fs-reminder-history .dashicons {
    color: var(--fs-primary);
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* ============================================
   Filter & Sort Controls
   ============================================ */
.fs-filter-toggle,
.fs-sort-trigger {
    background: #fff;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    color: var(--fs-gray-800);
    transition: all 0.2s;
}

.fs-filter-toggle:hover,
.fs-sort-trigger:hover {
    background: var(--fs-gray-100);
    border-color: var(--fs-gray-400);
}

.fs-filter-toggle.has-filters {
    background: var(--fs-primary-light);
    border-color: var(--fs-primary);
    color: var(--fs-primary-dark);
}

.fs-filter-count {
    color: var(--fs-primary);
    margin-left: 4px;
}

.fs-sort-dropdown {
    position: relative;
    display: inline-block;
}

.fs-sort-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    box-shadow: var(--fs-shadow-lg);
    min-width: 180px;
    z-index: 100;
    margin-top: 4px;
}

.fs-sort-dropdown:hover .fs-sort-menu,
.fs-sort-dropdown:focus-within .fs-sort-menu {
    display: block;
}

.fs-sort-menu a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--fs-gray-800);
    font-size: 13px;
}

.fs-sort-menu a:hover {
    background: var(--fs-gray-100);
}

.fs-sort-menu a.active {
    background: var(--fs-primary-light);
    color: var(--fs-primary-dark);
    font-weight: 500;
}

.fs-sort-dir {
    font-weight: bold;
    color: var(--fs-primary);
}

.fs-filter-panel {
    background: var(--fs-gray-100);
    padding: 15px;
    border-radius: var(--fs-border-radius);
    margin-bottom: 20px;
}

.fs-filter-panel form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.fs-filter-panel select {
    min-width: 160px;
}

/* ============================================
   Dashboard Timer Alert
   ============================================ */
.fs-timer-alert {
    background: linear-gradient(135deg, var(--fs-primary-light) 0%, #fff 100%);
    border-left: 4px solid var(--fs-primary);
    margin-bottom: 20px;
}

.fs-timer-alert-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.fs-timer-icon {
    font-size: 28px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.fs-timer-info {
    flex: 1;
}

.fs-timer-info strong {
    display: block;
    color: var(--fs-primary-dark);
    font-size: 14px;
}

.fs-timer-project {
    display: block;
    color: var(--fs-gray-600);
    font-size: 13px;
}

.fs-timer-description {
    display: block;
    color: var(--fs-gray-500);
    font-size: 12px;
}

.fs-timer-duration {
    font-size: 24px;
    font-weight: 600;
    font-family: monospace;
    color: var(--fs-primary-dark);
    background: #fff;
    padding: 8px 16px;
    border-radius: var(--fs-border-radius);
}

/* ============================================
   Expense Billback
   ============================================ */
.fs-expense-billback-section {
    background: var(--fs-gray-50);
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius);
}

.fs-expense-options {
    margin-bottom: 15px;
}

.fs-expense-table {
    background: #fff;
}

.fs-expense-table th.check-column,
.fs-expense-table td.check-column {
    width: 30px;
    padding: 8px;
}

.fs-expense-row.selected {
    background: var(--fs-primary-light);
}

.fs-expense-totals {
    margin-top: 15px;
    padding: 15px;
    background: #fff;
    border-radius: var(--fs-border-radius);
    display: flex;
    justify-content: flex-end;
    gap: 30px;
}

.fs-expense-total-item {
    text-align: right;
}

.fs-expense-total-item label {
    display: block;
    font-size: 12px;
    color: var(--fs-gray-600);
    text-transform: uppercase;
}

.fs-expense-total-item .amount {
    font-size: 18px;
    font-weight: 600;
    color: var(--fs-primary-dark);
}

.fs-expense-empty {
    padding: 20px;
    text-align: center;
    color: var(--fs-gray-500);
    background: #fff;
    border-radius: var(--fs-border-radius);
}

/* ============================================
   Text utilities
   ============================================ */
.text-warning {
    color: var(--fs-accent) !important;
}

.text-success {
    color: var(--fs-primary) !important;
}

.text-danger {
    color: var(--fs-danger) !important;
}

.text-muted {
    color: var(--fs-gray-500) !important;
}

/* ============================================
   Dashboard Layout
   ============================================ */
.fs-dashboard-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    margin-top: 20px;
}

.fs-dashboard-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.fs-dashboard-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fs-dashboard-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 1200px) {
    .fs-dashboard-layout {
        grid-template-columns: 1fr;
    }
    .fs-dashboard-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .fs-dashboard-sidebar > * {
        flex: 1;
        min-width: 280px;
    }
}

@media (max-width: 782px) {
    .fs-dashboard-two-col {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Financial Overview Card
   ============================================ */
.fs-financial-overview {
    border-radius: 12px;
    padding: 24px;
    color: #fff;
}

.fs-financial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.fs-financial-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color:var(--fs-gray-700);
}

.fs-year-badge {
    background: rgba(255,255,255,0.2);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
}

.fs-link-subtle {
    color: var(--fs-gray-700);
    text-decoration: none;
    font-size: 13px;
}

.fs-link-subtle:hover {
    color:var(--fs-primary-dark);
}

.fs-financial-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 900px) {
    .fs-financial-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.fs-financial-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 16px;
}

.fs-financial-gross .fs-ring-fill { stroke: #4ade80; }
.fs-financial-pending .fs-ring-fill { stroke: var(--fs-highlight); }
.fs-financial-expenses .fs-ring-fill { stroke: var(--fs-accent); }
.fs-financial-tax .fs-ring-fill { stroke: var(--fs-accent-light); }

.fs-financial-details {
    display: flex;
    flex-direction: column;
}

.fs-financial-label {
    font-size: 12px;
    opacity: 0.8;
    margin-bottom: 2px;
}

.fs-financial-value {
    font-size: 20px;
    font-weight: 700;
}

.fs-financial-gross {
    background:linear-gradient(135deg, #0da8a1 0%, var(--fs-highlight) 100%);
}

.fs-financial-pending {
    background:linear-gradient(135deg, #0975ab 0%, #49afe2 100%);
}

.fs-financial-expenses {
    background:linear-gradient(135deg, var(--fs-danger) 0%, var(--fs-warning) 100%);
}

.fs-financial-tax {
    background:linear-gradient(135deg, var(--wp-block-synced-color) 0%, var(--fs-info) 100%);
}

/* ============================================
   Dashboard Cards
   ============================================ */
.fs-dashboard-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--fs-shadow);
    overflow: hidden;
}

.fs-btn-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fs-primary);
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    transition: background 0.2s;
    border: none;
    cursor: pointer;
}

.fs-btn-icon:hover {
    background: var(--fs-primary-dark);
    color: #fff;
}

.fs-btn-icon:focus-visible {
    outline: 2px solid var(--fs-primary);
    outline-offset: 2px;
}

.fs-btn-icon:active {
    background: #1E8A75;
}

.fs-item-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fs-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--fs-gray-100);
    transition: background 0.15s ease;
}

.fs-item-row:hover {
    background: var(--fs-gray-100);
}

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

.fs-item-title {
    flex: 1;
    color: var(--fs-gray-800);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

.fs-item-title:hover {
    color: var(--fs-primary);
}

.fs-item-meta {
    color: var(--fs-gray-600);
    font-size: 13px;
}

.fs-item-amount {
    font-weight: 600;
    color: var(--fs-gray-800);
    font-size: 14px;
}

.fs-invoice-status {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.fs-status-paid {
    background: #d1fae5;
    color: #065f46;
}

.fs-status-sent {
    background: var(--fs-gray-200);
    color: var(--fs-gray-700);
}

.fs-status-overdue {
    background: #fce7f3;
    color: #9d174d;
} 

.fs-dashboard-card .fs-card-footer {
    padding: 12px 20px;
    background: var(--fs-gray-50);
    border-top: 1px solid var(--fs-gray-100);
}

.fs-card-footer a {
    color: var(--fs-gray-700);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.fs-card-footer a:hover {
    color:var(--fs-primary-dark);
}

/* ============================================
   Tasks Card
   ============================================ */
.fs-tasks-card {
    padding-bottom: 0;
}

.fs-quick-add-task {
    padding: 16px 20px;
    border-bottom: 1px solid var(--fs-gray-200);
    background: var(--fs-gray-50);
}

.fs-quick-form {
    display: flex;
    gap: 10px;
}

.fs-quick-form input[type="text"] {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    font-size: 14px;
    background: #fff;
}

.fs-quick-form input[type="text"]:focus {
    border-color: var(--fs-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(62, 207, 178, 0.15);
}

.fs-quick-form select {
    width: 150px;
    padding: 10px 12px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    font-size: 13px;
    background: #fff;
}

.fs-quick-form select:focus {
    border-color: var(--fs-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(62, 207, 178, 0.15);
}

#fs-quick-task-form button[type="submit"] {
    background: var(--fs-accent);
    border: 1px solid var(--fs-accent);
    color: #fff;
    padding: 0 20px;
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

#fs-quick-task-form button[type="submit"]:hover {
    background: #E57A5E;
    border-color: #E57A5E;
}
}

.fs-task-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fs-task-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--fs-gray-100);
    transition: background 0.2s, opacity 0.3s;
}

.fs-task-item:hover {
    background: var(--fs-gray-100);
}

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

.fs-task-item.completed {
    opacity: 0.5;
    text-decoration: line-through;
}

.fs-task-checkbox {
    position: relative;
    cursor: pointer;
}

.fs-task-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.fs-checkmark {
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--fs-gray-400);
    border-radius: 4px;
    transition: all 0.2s;
}

.fs-task-checkbox:hover .fs-checkmark {
    border-color: var(--fs-primary);
}

.fs-task-checkbox input:checked + .fs-checkmark {
    background: var(--fs-primary);
    border-color: var(--fs-primary);
}

.fs-task-checkbox input:checked + .fs-checkmark::after {
    content: '✓';
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.fs-task-title {
    flex: 1;
    font-size: 14px;
    color: var(--fs-gray-800);
}

.fs-task-project {
    font-size: 12px;
    color: var(--fs-gray-500);
    background: var(--fs-gray-100);
    padding: 2px 8px;
    border-radius: 4px;
}

.fs-task-due {
    font-size: 12px;
    color: var(--fs-gray-600);
}

.fs-task-due.overdue {
    color: var(--fs-danger);
    font-weight: 500;
}

/* Dashboard Task Widget */
.fs-task-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.fs-task-widget-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fs-task-limit-select {
    padding: 3px 6px;
    font-size: 12px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    color: var(--fs-gray-600);
    background: #fff;
    cursor: pointer;
    min-width: 50px;
    line-height: 1.4;
    height: auto;
}

.fs-task-limit-select:hover {
    border-color: var(--fs-gray-400);
}

.fs-task-limit-select:focus {
    border-color: var(--fs-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(31, 187, 166, 0.15);
}

.fs-task-widget-header {
    overflow: visible;
    position: relative;
    z-index: 10;
}

/* Allow task filter dropdown to overflow the widget card boundary */
.fs-widget[data-widget-id="tasks"],
.fs-widget[data-widget-id="internal-tasks"] {
    overflow: visible;
}

.fs-task-filter-dropdown {
    position: relative;
}

.fs-task-filter-toggle {
    color: var(--fs-gray-400);
}

.fs-task-filter-toggle:hover {
    color: var(--fs-primary);
    background: var(--fs-gray-100);
}

.fs-task-filter-menu {
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius);
    box-shadow: var(--fs-shadow-md);
    padding: 12px;
    min-width: 160px;
    z-index: 100;
}

.fs-task-filter-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--fs-gray-500);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.fs-task-filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    cursor: pointer;
}

.fs-task-filter-option input {
    margin: 0;
}

.fs-save-task-filter {
    width: 100%;
    margin-top: 10px;
}

#fs-dashboard-tasks .fs-task-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

#fs-dashboard-tasks .fs-task-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-shrink: 1;
}

#fs-dashboard-tasks .fs-task-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
}

#fs-dashboard-tasks .fs-status-badge {
    font-size: 9px;
    padding: 3px 8px;
    flex-shrink: 0;
}

#fs-dashboard-tasks .fs-task-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
    min-width: 200px;
    text-align: right;
}

#fs-dashboard-tasks .fs-task-project {
    font-size: 12px;
    color: var(--fs-gray-500);
}

#fs-dashboard-tasks .fs-task-due {
    font-size: 12px;
    color: var(--fs-gray-600);
}

#fs-dashboard-tasks .fs-task-due.overdue {
    color: var(--fs-danger);
    font-weight: 500;
}

/* ============================================
   Timer Widget
   ============================================ */
.fs-timer-widget {
    background: linear-gradient(135deg, var(--fs-primary) 0%, var(--fs-primary-dark) 100%);
    border-radius: 12px;
    overflow: hidden;
    color: #fff;
}

.fs-timer-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.fs-timer-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.fs-timer-running,
.fs-timer-start {
    padding: 20px;
    text-align: center;
}

.fs-timer-display,
.fs-timer-display-idle {
    font-size: 42px;
    font-weight: 700;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.fs-timer-display-idle {
    opacity: 0.5;
}

.fs-timer-meta {
    margin-bottom: 16px;
}

.fs-timer-project {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.fs-timer-desc {
    display: block;
    font-size: 12px;
    opacity: 0.8;
}

.fs-timer-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.fs-timer-view {
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
    border: none !important;
}

.fs-timer-view:hover {
    background: rgba(255,255,255,0.3) !important;
}

.fs-quick-timer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fs-quick-timer select,
.fs-quick-timer input {
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 13px;
}

.fs-quick-timer select option {
    color: var(--fs-gray-800);
}

.fs-quick-timer input::placeholder {
    color: rgba(255,255,255,0.6);
}

.fs-start-timer-btn {
    background: #fff !important;
    color: var(--fs-primary-dark) !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 12px !important;
}

.fs-start-timer-btn:hover {
    background: var(--fs-gray-100) !important;
}

.fs-start-timer-btn .dashicons {
    margin-right: 4px;
}

/* ============================================
   Sidebar Cards
   ============================================ */
.fs-sidebar-card {
    background: #fff;
}

.fs-compact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fs-compact-list li {
    padding: 10px 16px;
    border-bottom: 1px solid var(--fs-gray-100);
    transition: background 0.15s ease;
}

.fs-compact-list li:hover {
    background: var(--fs-gray-100);
}

.fs-compact-list li:last-child {
    border-bottom: none;
}

.fs-compact-list a {
    display: block;
    color: var(--fs-gray-800);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 2px;
}

.fs-compact-list a:hover {
    color: var(--fs-primary);
}

.fs-compact-list .fs-meta {
    font-size: 12px;
    color: var(--fs-gray-500);
}

.fs-sidebar-card .fs-card-footer {
    padding: 10px 16px;
}

/* ============================================
   Quick Actions Widget
   ============================================ */
.fs-quick-actions-widget {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fs-quick-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--fs-shadow);
    color: var(--fs-gray-800);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.fs-quick-action:hover {
    background: var(--fs-primary);
    color: #fff;
    transform: translateX(4px);
}

.fs-quick-action .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.fs-input-group {
    display: flex;
    align-items: stretch;
}

.fs-input-prefix,
.fs-input-suffix {
    padding: 6px 10px;
    background: var(--fs-gray-200);
    border: 1px solid var(--fs-gray-300);
    color: var(--fs-gray-600);
    display: flex;
    align-items: center;
}

.fs-input-prefix {
    border-right: none;
    border-radius: var(--fs-border-radius) 0 0 var(--fs-border-radius);
}

.fs-input-suffix {
    border-left: none;
    border-radius: 0 var(--fs-border-radius) var(--fs-border-radius) 0;
}

.fs-input-group input {
    flex: 1;
    border-radius: 0 !important;
    margin: 0 !important;
}

.fs-input-group input:only-child {
    border-radius: var(--fs-border-radius) !important;
}

.fs-deduction-presets {
    margin: 30px 0;
    padding: 20px;
    background: #fff;
    border: 1px dashed var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
}

.fs-deduction-presets h4 {
    margin: 0 0 5px 0;
    color: var(--fs-gray-800);
}

.fs-preset-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.fs-preset-form {
    display: inline-block;
    margin: 0;
}

.fs-preset-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 15px !important;
    min-width: 140px;
    height: auto !important;
    text-align: left;
    background: var(--fs-gray-100) !important;
    border: 1px solid var(--fs-gray-300) !important;
    border-radius: var(--fs-border-radius) !important;
    transition: all 0.2s !important;
}

.fs-preset-btn:hover {
    background: var(--fs-primary-light) !important;
    border-color: var(--fs-primary) !important;
}

.fs-preset-btn .preset-name {
    font-weight: 500;
    font-size: 12px;
    color: var(--fs-gray-800);
}

.fs-preset-btn .preset-amount {
    font-size: 14px;
    font-weight: 600;
    color: var(--fs-primary);
    margin-top: 3px;
}

.fs-deductions-list {
    margin-top: 30px;
}

.fs-deductions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.fs-deductions-header h3 {
    margin: 0;
}

.fs-deductions-total {
    font-size: 16px;
}

.fs-deductions-total strong {
    color: var(--wp-bound-block-color);
    font-size: 18px;
    margin-left: 5px;
}

.fs-inactive-row {
    opacity: 0.5;
}

.fs-note-indicator {
    cursor: help;
    margin-left: 5px;
}

.fs-copy-deductions {
    background: var(--fs-info);
    padding: 15px 20px;
    border-radius: var(--fs-border-radius);
    margin-top: 20px;
    color:#fff;
}

.fs-copy-deductions p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.fs-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.fs-section-actions {
    display: flex;
    gap: 10px;
}

.mt-20 {
    margin-top: 20px;
}

@media (max-width: 782px) {
    .fs-form-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .fs-preset-buttons {
        flex-direction: column;
    }
    
    .fs-preset-btn {
        width: 100%;
    }
    
    .fs-deductions-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}

/* ============================================
   Tax Disclaimer
   ============================================ */
.fs-tax-disclaimer {
    display: flex;
    gap: 12px;
    padding: 15px 20px;
    background: rgba(255, 229, 222, 0.74);
    border: 1px solid var(--fs-warning);
    border-left: 4px solid var(--fs-warning);
    border-radius: var(--fs-border-radius);
    margin: 15px 0 20px 0;
}

.fs-tax-disclaimer .dashicons {
    color: var(--fs-warning);
    flex-shrink: 0;
    margin-top: 2px;
}

.fs-tax-disclaimer p {
    margin: 0;
    font-size: 13px;
    color: #5c4a1f;
    line-height: 1.5;
}

.fs-tax-disclaimer-compact {
    padding: 10px 15px;
    margin: 0 0 15px 0;
}

.fs-tax-disclaimer-compact p {
    font-size: 12px;
}

/* ============================================
   Quarterly Tax Payments
   ============================================ */
.fs-quarterly-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 20px 0;
}

.fs-quarterly-card {
    background: #fff;
    padding: 20px;
    border-radius: var(--fs-border-radius);
    border: 1px solid var(--fs-gray-200);
    text-align: center;
}

.fs-quarterly-card.warning {
    background: #fff8e5;
    border-color: #f0d78c;
}

.fs-quarterly-card.success {
    background: #e8f5e9;
    border-color: #a5d6a7;
}

.fs-quarterly-card-label {
    font-size: 12px;
    color: var(--fs-gray-600);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fs-quarterly-card-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--fs-gray-800);
}

.fs-quarterly-card-value.text-success {
    color: #2e7d32;
}

.fs-quarterly-card-sublabel {
    font-size: 11px;
    color: var(--fs-gray-500);
    margin-top: 4px;
}

.fs-quarterly-table {
    margin-top: 20px;
}

.fs-quarterly-table input[type="number"],
.fs-quarterly-table input[type="date"] {
    width: 100%;
    max-width: 140px;
}

.fs-input-group-sm {
    max-width: 120px;
    display:flex;
}

.fs-input-group-sm input {
    padding: 4px 8px;
    font-size: 13px;
}

.fs-input-group-sm .fs-input-prefix {
    padding: 4px 8px;
    font-size: 13px;
}

.fs-payment-input {
    text-align: right;
}

.fs-date-input {
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
}

.fs-paid-row {
    background: #f0fdf4 !important;
}

.fs-overdue-row {
    background: #fef2f2 !important;
}

.fs-quarterly-form .submit {
    margin-top: 15px;
}

@media (max-width: 1200px) {
    .fs-quarterly-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .fs-quarterly-summary {
        grid-template-columns: 1fr;
    }
    
    .fs-quarterly-table {
        font-size: 12px;
    }
}

/* ============================================
   Email Template Editor
   ============================================ */
.fs-email-template-editor {
    background: #fff;
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius);
    overflow: hidden;
}

.fs-editor-header {
    padding: 20px;
    border-bottom: 1px solid var(--fs-gray-200);
    background: var(--fs-gray-100);
}

.fs-editor-header h3 {
    margin: 0 0 5px 0;
    color: var(--fs-gray-800);
}

.fs-editor-header .description {
    margin: 0;
}

.fs-editor-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 0;
}

.fs-editor-main {
    padding: 20px;
    border-right: 1px solid var(--fs-gray-200);
}

.fs-editor-main .form-table th {
    width: 120px;
    padding-top: 15px;
}

.fs-editor-sidebar {
    padding: 20px;
    background: var(--fs-gray-100);
}

.fs-variables-card,
.fs-preview-card {
    background: #fff;
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius);
    padding: 15px;
    margin-bottom: 15px;
}

.fs-variables-card h4,
.fs-preview-card h4 {
    margin: 0 0 5px 0;
    font-size: 14px;
    color: var(--fs-gray-800);
}

.fs-variables-card .description,
.fs-preview-card .description {
    margin: 0 0 10px 0;
    font-size: 12px;
}

.fs-variables-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fs-variables-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--fs-gray-100);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fs-variables-list li:last-child {
    border-bottom: none;
}

.fs-variable-tag {
    display: inline-block;
    padding: 3px 8px;
    background: var(--fs-primary-light);
    color: var(--fs-primary-dark);
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.fs-variable-tag:hover {
    background: var(--fs-primary);
    color: #fff;
}

.fs-variable-tag.copied {
    background: var(--fs-success);
    color: #fff;
}

.fs-variable-desc {
    font-size: 11px;
    color: var(--fs-gray-600);
}

.fs-email-tips {
    margin-top: 30px;
    padding: 20px;
    background: var(--fs-highlight-light);
    border-radius: var(--fs-border-radius);
}

.fs-email-tips h4 {
    margin: 0 0 10px 0;
    color: var(--fs-gray-800);
}

.fs-email-tips ul {
    margin: 0;
    padding-left: 20px;
}

.fs-email-tips li {
    margin-bottom: 5px;
    color: var(--fs-gray-600);
    font-size: 13px;
}

/* Email Header Preview */
.fs-email-header-preview {
    margin-bottom: 28px;
    padding: 20px;
    background: var(--fs-gray-50);
    border-radius: var(--fs-border-radius-lg);
    border: 1px solid var(--fs-gray-200);
}

.fs-email-header-preview h4 {
    margin: 0 0 4px 0;
    color: var(--fs-gray-800);
    font-size: 15px;
}

.fs-email-header-preview > .description {
    margin: 0 0 16px 0;
    font-size: 13px;
}

.fs-email-header-preview > .description a {
    color: var(--fs-primary-dark);
    text-decoration: none;
    font-weight: 500;
}

.fs-email-header-preview > .description a:hover {
    text-decoration: underline;
}

.fs-email-header-demo {
    max-width: 480px;
    box-shadow: var(--fs-shadow);
    border-radius: var(--fs-border-radius);
    overflow: hidden;
}

/* High contrast overrides */
.fs-high-contrast .fs-email-header-preview {
    border-color: #000;
    background: #fff;
}

.fs-high-contrast .fs-email-header-demo {
    border: 2px solid #000;
}

.fs-btn-link {
    background: none !important;
    border: none !important;
    color: var(--fs-danger) !important;
    text-decoration: underline;
    cursor: pointer;
    padding: 0 10px !important;
}

.fs-btn-link:hover {
    color: #991b1b !important;
}

@media (max-width: 1024px) {
    .fs-editor-layout {
        grid-template-columns: 1fr;
    }
    
    .fs-editor-main {
        border-right: none;
        border-bottom: 1px solid var(--fs-gray-200);
    }
}

/* ============================================
   Split-Screen Email Editor (with Live Preview)
   ============================================ */
.fs-email-editor-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 600px;
}

.fs-editor-code-panel {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--fs-gray-200);
}

.fs-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background: var(--fs-gray-100);
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-toolbar-label {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fs-gray-600);
}

.fs-toolbar-buttons {
    display: flex;
    gap: 5px;
}

.fs-toolbar-btn {
    padding: 5px 10px;
    background: #fff;
    border: 1px solid var(--fs-gray-300);
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 36px;
}

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

.fs-editor-code-panel .form-table {
    margin: 0;
    padding: 15px;
    background: #fff;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-editor-code-panel .form-table th {
    padding: 8px 10px 8px 0;
    font-size: 13px;
}

.fs-editor-code-panel .form-table td {
    padding: 8px 0;
}

.fs-code-editor {
    flex: 1;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 0;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
    resize: none;
    background: #1e1e1e;
    color: #d4d4d4;
}

.fs-code-editor:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--fs-primary);
}

/* Syntax Highlighting Editor */
.fs-syntax-editor-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    min-height: 350px;
}

.fs-syntax-editor-wrapper .fs-code-editor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    color: transparent;
    caret-color: #fff;
    z-index: 2;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
}

.fs-syntax-editor-wrapper .fs-code-editor::selection {
    background: rgba(62, 207, 178, 0.3);
}

.fs-syntax-highlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 15px;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
    background: #1e1e1e;
    color: #d4d4d4;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
    pointer-events: none;
    z-index: 1;
    border: none;
    box-sizing: border-box;
}

/* Syntax Highlighting Colors - VS Code Dark+ inspired */
.fs-syntax-highlight .hl-tag {
    color: #569cd6;
    font-weight: 500;
}

.fs-syntax-highlight .hl-attr-name {
    color: #9cdcfe;
}

.fs-syntax-highlight .hl-attr-value {
    color: #ce9178;
}

.fs-syntax-highlight .hl-punctuation {
    color: #808080;
}

.fs-syntax-highlight .hl-variable {
    color: #4ec9b0;
    font-weight: 600;
    background: rgba(78, 201, 176, 0.15);
    padding: 1px 3px;
    border-radius: 3px;
}

.fs-syntax-highlight .hl-url {
    color: #3794ff;
    text-decoration: underline;
}

.fs-syntax-highlight .hl-comment {
    color: #6a9955;
    font-style: italic;
}

.fs-editor-actions {
    display: flex;
    gap: 10px;
    padding: 15px;
    background: var(--fs-gray-100);
    border-top: 1px solid var(--fs-gray-200);
}

.fs-editor-preview-panel {
    display: flex;
    flex-direction: column;
    background: var(--fs-gray-100);
}

.fs-preview-header {
    padding: 10px 15px;
    background: var(--fs-gray-100);
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-preview-email-wrapper {
    flex: 1;
    padding: 20px;
    overflow: auto;
    background: #e5e5e5;
}

.fs-preview-email-frame {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 30px;
    min-height: 300px;
}

.fs-variables-panel {
    padding: 15px;
    background: #fff;
    border-top: 1px solid var(--fs-gray-200);
}

.fs-variables-panel h4 {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: var(--fs-gray-700);
}

.fs-variables-panel h4 small {
    font-weight: normal;
    color: var(--fs-gray-500);
}

.fs-variables-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fs-variables-grid .fs-variable-tag {
    font-size: 11px;
    padding: 2px 6px;
}

@media (max-width: 1200px) {
    .fs-email-editor-split {
        grid-template-columns: 1fr;
    }
    
    .fs-editor-code-panel {
        border-right: none;
        border-bottom: 1px solid var(--fs-gray-200);
    }
    
    .fs-preview-email-wrapper {
        max-height: 400px;
    }
}

/* ============================================
   Tax Reminder Settings
   ============================================ */
.fs-reminder-settings {
    margin-top: 30px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius);
}

.fs-reminder-settings h3 {
    margin: 0 0 5px 0;
    color: var(--fs-gray-800);
}

.fs-reminder-settings > .description {
    margin: 0 0 15px 0;
}

.fs-reminder-settings .form-table {
    margin-bottom: 0;
}

.fs-reminder-settings .form-table th {
    width: 150px;
    padding-top: 15px;
}

/* ============================================
   Export Dropdown
   ============================================ */
.fs-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.fs-export-dropdown {
    position: relative;
    display: inline-block;
}

.fs-export-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
}

.fs-export-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.fs-export-btn .dashicons-arrow-down-alt2 {
    font-size: 14px;
    width: 14px;
    height: 14px;
    margin-left: 4px;
}

.fs-export-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    z-index: 100;
    margin-top: 4px;
}

.fs-export-dropdown:hover .fs-export-menu,
.fs-export-dropdown:focus-within .fs-export-menu {
    display: block;
}

.fs-export-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    color: var(--fs-gray-700);
    text-decoration: none;
    transition: background 0.15s;
}

.fs-export-option:hover {
    background: var(--fs-gray-50);
    color: var(--fs-primary);
}

.fs-export-option .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--fs-gray-500);
}

.fs-export-option:hover .dashicons {
    color: var(--fs-primary);
}

/* ============================================
   Modern Timer Widget
   ============================================ */
.fs-timer-widget-modern {
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid var(--fs-gray-200);
    border-radius: 16px;
    padding: 30px 25px;
    text-align: center;
    margin-bottom: 20px;
}

.fs-timer-ring-container {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 20px;
}

.fs-timer-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.fs-timer-ring-bg {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 6;
}

.fs-timer-ring-progress {
    fill: none;
    stroke: url(#timerGradient);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 327;
    stroke-dashoffset: 82;
    transition: stroke-dashoffset 1s ease;
}

.fs-timer-ring-container.idle .fs-timer-ring-bg {
    stroke: #e2e8f0;
}

.fs-timer-time {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    font-weight: 600;
    color: var(--fs-gray-800);
    letter-spacing: 1px;
}

.fs-timer-time.idle {
    color: var(--fs-gray-400);
}

.fs-timer-hours,
.fs-timer-mins {
    font-variant-numeric: tabular-nums;
}

.fs-timer-project-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    color: var(--fs-gray-600);
    font-size: 14px;
}

.fs-timer-project-info .dashicons {
    color: var(--fs-primary);
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.fs-timer-project-info.idle {
    color: var(--fs-gray-400);
}

.fs-timer-project-info.idle .dashicons {
    color: var(--fs-gray-400);
}

.fs-timer-project-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Timer Controls - Running State */
.fs-timer-btn-circle {
    width: 50px;
    height: 37px;
    border-radius: 50%;
    border: 2px solid var(--fs-primary);
    background: transparent;
    color: var(--fs-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.fs-timer-btn-circle:hover {
    background: var(--fs-primary);
    color: #fff;
}

.fs-timer-btn-circle .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.fs-timer-btn-stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    min-width: 140px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.fs-timer-btn-stop:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
}

.fs-timer-btn-stop .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #fff !important;
}

.fs-icon-stop {
    vertical-align: middle;
    flex-shrink: 0;
}

/* Timer Form - Idle State */
.fs-timer-form-modern {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fs-timer-select,
.fs-timer-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--fs-gray-200);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.fs-timer-select:focus,
.fs-timer-input:focus {
    outline: none;
    border-color: var(--fs-primary);
    box-shadow: 0 0 0 3px rgba(62, 207, 178, 0.15);
}

.fs-timer-btn-start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--fs-pink-purple);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 5px;
}

.fs-timer-btn-start:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.fs-timer-btn-start .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Timer Animation */
@keyframes timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.fs-timer-time:not(.idle) {
    animation: timer-pulse 2s ease-in-out infinite;
}

/* ============================================
   Timer Widget - Inline Admin Version
   ============================================ */
.fs-timer-section-modern {
    margin: 20px 0;
}

/* Timer + Quick Add Container */
.fs-timer-quickadd-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.fs-timer-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: visible;
    padding: 20px;
}

.fs-quickadd-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.fs-timer-card .fs-card-header {
    display: none;
}

.fs-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    color: #374151;
}

.fs-card-header .dashicons {
    color: #10b981;
}

.fs-quickadd-card .fs-card-header .dashicons {
    color: var(--fs-secondary);
}

.fs-timer-card .fs-timer-widget-modern {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    padding: 20px 0;
    margin-bottom: 0;
    min-height: auto;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.fs-timer-card .fs-timer-ring-container {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    flex-shrink: 0;
}

.fs-timer-card .fs-timer-time {
    font-size: 22px;
}

.fs-timer-card .fs-timer-main-content {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fs-timer-card .fs-timer-selects {
    display: flex;
    gap: 10px;
}

.fs-timer-card .fs-timer-selects .fs-timer-select {
    flex: 1;
}

/* Timer form fields layout - matching manual entry */
.fs-timer-form-fields {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
}

.fs-timer-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.fs-timer-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fs-timer-field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--fs-gray-600);
}

.fs-timer-field label .fs-optional {
    font-weight: 400;
    color: var(--fs-gray-400);
}

.fs-timer-field-activity,
.fs-timer-field-description {
    /* Both fields fill their grid cell */
}

.fs-timer-card .fs-timer-input,
.fs-timer-card .fs-timer-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    font-size: 14px;
}

.fs-timer-card .fs-timer-controls-modern {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-top: 10px;
    min-height: auto;
}

/* Quick Add Form */
.fs-quickadd-form {
    padding: 20px;
}

.fs-quickadd-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.fs-quickadd-row:last-child {
    margin-bottom: 0;
}

.fs-quickadd-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.fs-quickadd-field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--fs-gray-700);
}

.fs-quickadd-field label .description {
    font-weight: 400;
    color: var(--fs-gray-500);
    font-size: 11px;
}

.fs-quickadd-field input,
.fs-quickadd-field select {
    padding: 8px 12px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    font-size: 14px;
    max-width: 100%;
    box-sizing: border-box;
}

.fs-quickadd-field input:focus,
.fs-quickadd-field select:focus {
    border-color: var(--fs-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(62, 207, 178, 0.15);
}

.fs-quickadd-field-project {
    flex: 1;
}

.fs-quickadd-field-task {
    flex: 1;
}

.fs-quickadd-field-activity {
    width: 150px;
    flex-shrink: 0;
}

.fs-quickadd-field-desc {
    flex: 1;
}

.fs-quickadd-field-date {
    width: 150px;
    flex-shrink: 0;
}

.fs-quickadd-field-duration {
    flex-shrink: 0;
}

.fs-quickadd-duration {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fs-quickadd-duration input {
    width: 60px;
    text-align: center;
}

.fs-quickadd-duration span {
    color: var(--fs-gray-600);
    font-size: 13px;
}

.fs-quickadd-field-billable {
    display: flex;
    align-items: flex-end;
    padding-bottom: 4px;
}

.fs-quickadd-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
}

.fs-quickadd-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.fs-quickadd-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    margin-top: 15px;
}

.fs-quickadd-actions .button {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fs-quickadd-actions .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Spinning animation for loading state */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.dashicons.spin {
    animation: spin 1s linear infinite;
}

/* Responsive */
@media (max-width: 1200px) {
    .fs-timer-quickadd-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .fs-quickadd-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .fs-quickadd-field-date,
    .fs-quickadd-field-duration,
    .fs-quickadd-field-billable {
        width: 100%;
    }
    
    .fs-timer-card .fs-timer-widget-modern {
        flex-direction: column;
        text-align: center;
    }
    
    .fs-timer-form-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Timer page (full width) - use 2-column layout */
.fs-timer-quickadd-container .fs-timer-form-row {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 782px) {
    .fs-timer-quickadd-container .fs-timer-form-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Stack timer fields when in single-column dashboard widget or sidebar */
.fs-widget-cols-1 .fs-timer-form-row,
.fs-widgets-sidebar .fs-timer-form-row {
    grid-template-columns: 1fr;
    gap: 12px;
}

/* When widget is 2 columns wide, allow side-by-side fields */
.fs-widget-cols-2 .fs-timer-form-row {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.fs-timer-widget-modern.fs-timer-inline {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 20px 30px;
    flex-wrap: wrap;
}

.fs-timer-inline .fs-timer-ring-container {
    width: 100px;
    height: 100px;
    margin: 0;
    flex-shrink: 0;
}

.fs-timer-inline .fs-timer-time {
    font-size: 22px;
}

.fs-timer-inline .fs-timer-main-content {
    flex: 1;
    min-width: 250px;
}

.fs-timer-inline .fs-timer-project-info {
    margin-bottom: 12px;
    justify-content: flex-start;
}

.fs-timer-inline .fs-timer-inputs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.fs-timer-inline .fs-timer-input,
.fs-timer-inline .fs-timer-select {
    flex: 1;
    min-width: 180px;
}

.fs-timer-inline .fs-timer-controls-modern {
    flex-shrink: 0;
}

/* Timer widget min-height to prevent size changes */
.fs-timer-widget-modern {
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

/* Form always takes space */
.fs-timer-form-modern {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* Controls match form height */
.fs-timer-controls-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 140px;
    padding-top: 10px;
}

.fs-timer-widget-modern.fs-timer-inline {
    min-height: auto;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .fs-timer-widget-modern.fs-timer-inline {
        flex-direction: column;
        text-align: center;
    }
    
    .fs-timer-inline .fs-timer-ring-container {
        margin: 0 auto;
    }
    
    .fs-timer-inline .fs-timer-project-info {
        justify-content: center;
    }
    
    .fs-timer-inline .fs-timer-inputs {
        flex-direction: column;
    }
    
    .fs-timer-inline .fs-timer-input,
    .fs-timer-inline .fs-timer-select {
        width: 100%;
    }
}

/* Timer Seconds Display */
.fs-timer-secs {
    font-size: 0.7em;
    opacity: 0.7;
}

.fs-timer-inline .fs-timer-secs {
    font-size: 0.8em;
}

/* Timer Paused State */
.fs-timer-widget-modern.paused .fs-timer-ring-progress {
    opacity: 0.5;
}

.fs-timer-widget-modern.paused .fs-timer-time {
    animation: none;
    opacity: 0.7;
}

.fs-timer-resume .dashicons {
    color: var(--fs-green);
}

.fs-timer-btn-circle.fs-timer-resume {
    border-color: var(--fs-green);
    color: var(--fs-green);
}

.fs-timer-btn-circle.fs-timer-resume:hover {
    background: var(--fs-green);
    color: #fff;
}

/* ============================================
   Time Goals Widget
   ============================================ */
.fs-time-goals-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.fs-time-goals {
    padding: 15px;
}

.fs-goal-item {
    margin-bottom: 15px;
}

.fs-goal-item:last-child {
    margin-bottom: 0;
}

.fs-goal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.fs-goal-label {
    font-weight: 500;
    color: var(--fs-gray-800);
}

.fs-goal-value {
    font-size: 13px;
    color: var(--fs-gray-600);
    font-weight: 500;
}

.fs-goal-progress-bar {
    height: 8px;
    background: rgba(255,255,255,0.8);
    border-radius: 4px;
    overflow: hidden;
}

.fs-goal-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fs-primary) 0%, var(--fs-primary-dark) 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.fs-goal-progress-fill.complete {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

/* ============================================
   Time Tracking Settings Styles
   ============================================ */
.fs-work-days-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fs-work-day-checkbox {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    background: var(--fs-gray-100);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.fs-work-day-checkbox:hover {
    background: var(--fs-gray-200);
}

.fs-work-day-checkbox input:checked + span {
    color: var(--fs-primary);
}

.fs-custom-activity-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.fs-custom-activity-row input {
    flex: 1;
    max-width: 300px;
}

.fs-custom-activity-row .button {
    padding: 0 8px;
    line-height: 28px;
}

.fs-custom-activity-row .dashicons {
    vertical-align: middle;
    margin-top: 2px;
}

#fs-add-activity .dashicons {
    vertical-align: middle;
    margin-right: 3px;
}

/* ============================================
   Keyboard Shortcuts Overlay
   ============================================ */
.fs-shortcuts-help {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--fs-shadow-lg);
    padding: 15px 20px;
    z-index: 9999;
    display: none;
    min-width: 200px;
}

.fs-shortcuts-help.visible {
    display: block;
    animation: fadeIn 0.2s ease;
}

.fs-shortcuts-help h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: var(--fs-gray-800);
}

.fs-shortcut-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 13px;
}

.fs-shortcut-key {
    background: var(--fs-gray-100);
    padding: 3px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
}

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

/* ============================================
   Mobile Responsive - Timer Widget
   ============================================ */
@media (max-width: 782px) {
    .fs-timer-widget-modern {
        padding: 20px 15px;
        min-height: auto;
    }
    
    .fs-timer-ring-container {
        width: 120px;
        height: 120px;
    }
    
    .fs-timer-time {
        font-size: 22px;
    }
    
    .fs-timer-controls-modern {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .fs-timer-btn-stop,
    .fs-timer-btn-start {
        padding: 12px 24px;
        font-size: 14px;
    }
    
    .fs-timer-btn-circle {
        width: 44px;
        height: 44px;
    }
    
    .fs-timer-form-modern {
        gap: 10px;
    }
    
    .fs-timer-select,
    .fs-timer-input {
        font-size: 14px;
    }
}

/* ============================================
   Mobile Responsive - Dashboard
   ============================================ */
@media (max-width: 1200px) {
    .fs-dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .fs-dashboard-sidebar {
        order: -1;
    }
}

@media (max-width: 782px) {
    .fs-wrap h1 {
        font-size: 20px;
    }
    
    .fs-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .fs-stat-card {
        padding: 15px;
    }
    
    .fs-stat-value {
        font-size: 20px;
    }
    
    .fs-dashboard-card {
        margin-bottom: 15px;
    }
    
    .fs-card-header {
        padding: 12px 15px;
    }
    
    .fs-card-header h3 {
        font-size: 14px;
    }
    
    /* Action needed mobile */
    .fs-action-needed-item {
        padding: 10px 12px;
        gap: 10px;
    }
    
    .fs-action-needed-meta .fs-status-badge {
        font-size: 9px;
        padding: 2px 6px;
    }
    
    .fs-time-goals {
        padding: 12px;
    }
    
    .fs-goal-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

@media (max-width: 480px) {
    .fs-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .fs-timer-widget-modern.fs-timer-inline {
        padding: 15px;
    }
    
    .fs-timer-inline .fs-timer-ring-container {
        width: 80px;
        height: 80px;
    }
    
    .fs-timer-inline .fs-timer-time {
        font-size: 18px;
    }
}

/* ============================================
   Mobile Responsive - Time Tracking List
   ============================================ */
@media (max-width: 782px) {
    .fs-timer-section-modern {
        margin: 10px 0;
    }
    
    .fs-timer-widget-modern.fs-timer-inline {
        flex-direction: column;
        text-align: center;
        padding: 15px;
        gap: 15px;
    }
    
    .fs-timer-inline .fs-timer-ring-container {
        margin: 0 auto;
    }
    
    .fs-timer-inline .fs-timer-main-content {
        width: 100%;
    }
    
    .fs-timer-inline .fs-timer-project-info {
        justify-content: center;
    }
    
    .fs-timer-inline .fs-timer-inputs {
        flex-direction: column;
    }
    
    .fs-timer-inline .fs-timer-input,
    .fs-timer-inline .fs-timer-select {
        width: 100%;
        min-width: auto;
    }
    
    .fs-filters {
        padding: 15px;
    }
    
    .fs-filter-form {
        flex-direction: column;
        gap: 10px;
    }
    
    .fs-filter-group {
        width: 100%;
    }
    
    .fs-filter-group select {
        width: 100%;
    }
    
    .fs-time-entries-table {
        font-size: 13px;
    }
    
    .fs-time-entries-table th,
    .fs-time-entries-table td {
        padding: 8px 6px;
    }
    
    /* Hide less important columns on mobile */
    .fs-time-entries-table th:nth-child(3),
    .fs-time-entries-table td:nth-child(3),
    .fs-time-entries-table th:nth-child(5),
    .fs-time-entries-table td:nth-child(5) {
        display: none;
    }
}

/* ============================================
   Mobile Responsive - Settings
   ============================================ */
@media (max-width: 782px) {
    .fs-settings-layout {
        flex-direction: column;
    }
    
    .fs-settings-sidebar {
        width: 100%;
        min-width: 100%;
        position: static;
        border-radius: 10px 10px 0 0;
        border: none;
        display: flex;
        flex-wrap: wrap;
        padding: 6px;
        gap: 2px;
    }
    
    .fs-settings-nav-item {
        padding: 6px 10px;
        font-size: 12px;
        gap: 4px;
        border-left: none;
        border-radius: 6px;
    }
    
    .fs-settings-nav-item.active {
        border-left-color: transparent;
    }
    
    .fs-settings-content {
        border-radius: 0 0 10px 10px;
        border: none;
        padding: 16px;
        margin-right: 0;
    }
    
    .form-table th {
        padding-bottom: 5px;
    }
    
    .form-table td {
        padding-top: 5px;
    }
    
    .fs-work-days-grid {
        flex-direction: column;
    }
    
    .fs-work-day-checkbox {
        justify-content: flex-start;
    }
}

/* ============================================
   Mobile Responsive - General Tables
   ============================================ */
@media (max-width: 782px) {
    .wp-list-table {
        font-size: 13px;
    }
    
    .wp-list-table th,
    .wp-list-table td {
        padding: 8px 10px;
    }
    
    .fs-row-actions {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .fs-action-link {
        padding: 5px;
    }
}

/* ============================================
   Mobile Responsive - Forms
   ============================================ */
@media (max-width: 782px) {
    .fs-form-section {
        padding: 15px;
    }
    
    .fs-form-row {
        flex-direction: column;
    }
    
    .fs-form-row > div {
        width: 100% !important;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    textarea,
    select {
        width: 100%;
        max-width: none;
    }
    
    .button {
        width: 100%;
        text-align: center;
    }
    
    .button + .button {
        margin-top: 10px;
        margin-left: 0;
    }
}

/* ============================================
   Bulk Actions Bar
   ============================================ */
.fs-bulk-actions-bar {
    background: var(--fs-primary-light);
    padding: 12px 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.fs-selected-count {
    font-weight: 500;
    color: var(--fs-primary-dark);
}

.fs-bulk-count {
    font-weight: 500;
    color: var(--fs-primary-dark);
}

.fs-bulk-select-all-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

.fs-bulk-actions-bar select {
    min-width: 150px;
}

.check-column {
    width: 30px !important;
    padding: 8px !important;
}

.check-column input[type="checkbox"] {
    margin: 0;
}

@media (max-width: 782px) {
    .fs-bulk-actions-bar {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .fs-bulk-actions-bar select {
        flex: 1;
        min-width: 120px;
    }
    
    .check-column {
        display: none !important;
    }
}

/* ============================================
   Timer History Widget
   ============================================ */
.fs-timer-history-card {
    max-height: 400px;
    overflow: hidden;
}

.fs-timer-history {
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
}

.fs-history-day {
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-history-day:last-child {
    border-bottom: none;
}

.fs-history-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: var(--fs-gray-100);
    font-size: 12px;
    font-weight: 600;
}

.fs-date-label {
    color: var(--fs-gray-800);
}

.fs-date-total {
    color: var(--fs-primary-dark);
    font-family: 'SF Mono', 'Consolas', monospace;
}

.fs-history-entries {
    padding: 0;
}

.fs-history-entry {
    display: flex;
    gap: 12px;
    padding: 10px 15px;
    border-bottom: 1px solid var(--fs-gray-100);
    align-items: flex-start;
}

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

.fs-entry-time {
    flex-shrink: 0;
    text-align: right;
    min-width: 70px;
}

.fs-entry-duration {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--fs-gray-800);
    font-family: 'SF Mono', 'Consolas', monospace;
}

.fs-entry-range {
    display: block;
    font-size: 11px;
    color: var(--fs-gray-600);
}

.fs-entry-details {
    flex: 1;
    min-width: 0;
}

.fs-entry-project {
    display: block;
    font-weight: 500;
    font-size: 13px;
    color: var(--fs-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fs-entry-desc {
    display: block;
    font-size: 12px;
    color: var(--fs-gray-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Shortcuts help platform note */
.fs-platform-note {
    font-weight: normal;
    font-size: 11px;
    color: var(--fs-gray-600);
}

/* ============================================
   Mobile Responsive - Timer History
   ============================================ */
@media (max-width: 782px) {
    .fs-timer-history-card {
        max-height: none;
    }
    
    .fs-timer-history {
        max-height: none;
    }
    
    .fs-history-entry {
        flex-direction: column;
        gap: 4px;
    }
    
    .fs-entry-time {
        text-align: left;
        display: flex;
        gap: 10px;
        align-items: baseline;
    }
}

/* ============================================
   Dashboard Customization Mode
   ============================================ */
.fs-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.fs-dashboard-header h1 {
    margin: 0;
}

.fs-customize-dashboard {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 15px;
    border-radius: 10px;
}

.fs-customize-dashboard .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.fs-customize-dashboard.active {
    background: var(--fs-primary);
    color: #fff;
    border-color: var(--fs-primary);
}

.fs-customize-notice {
    background: var(--fs-gray-300);
    border-left: 4px solid var(--fs-primary);
    padding: 12px 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 0 4px 4px 0;
}

.fs-customize-notice .dashicons {
    color: var(--fs-primary);
}

.fs-customize-notice .button {
    margin-left: auto;
}

.fs-customize-notice .button + .button {
    margin-left: 8px;
}

/* New Dashboard Grid Layout */
.fs-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
}

.fs-widgets-main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-content: start;
}

.fs-widgets-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Widget base styles */
.fs-widget {
    background: #fff;
    border-radius: var(--fs-border-radius);
    box-shadow: var(--fs-shadow);
    overflow: hidden;
}

.fs-widget-cols-1 {
    grid-column: span 1;
}

.fs-widget-cols-2 {
    grid-column: span 2;
}

/* Widget body inherits card styling */
.fs-widget-body {
    display: flex;
    flex-direction: column;
}

.fs-widget-body .fs-card-header {
    padding: 15px 20px 10px;
    border-bottom: none;
}

.fs-widget-body .fs-card-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--fs-gray-800);
}

.fs-widget-subhead {
    display: block;
    font-size: 11px;
    color: var(--fs-gray-500);
    font-weight: 400;
    margin-top: 2px;
}

.fs-widget-body .fs-item-list,
.fs-widget-body .fs-compact-list,
.fs-widget-body .fs-task-list {
    padding: 0 20px;
    margin: 0;
}

.fs-widget-body .fs-card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--fs-gray-200);
    margin-top: auto;
}

.fs-widget-body .fs-empty-message {
    padding: 20px;
    margin: 0;
}

/* ============================================
   Action Needed Widget
   ============================================ */
.fs-action-needed-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--fs-danger);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
    vertical-align: middle;
    line-height: 1;
}

.fs-action-needed-list {
    padding: 0;
}

.fs-action-needed-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--fs-gray-200);
    text-decoration: none;
    color: var(--fs-gray-800);
    transition: background 0.15s;
}

.fs-action-needed-item:last-child {
    border-bottom: none;
}

.fs-action-needed-item:hover {
    background: var(--fs-gray-50);
    text-decoration: none;
    color: var(--fs-gray-800);
}

.fs-action-needed-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--fs-gray-100);
    color: var(--fs-gray-600);
}

.fs-action-needed-icon .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Icon color coding by type */
.fs-action-type-invoice_overdue .fs-action-needed-icon {
    background: #fff0f0;
    color: var(--fs-danger);
}

.fs-action-type-proposal_revision .fs-action-needed-icon {
    background: var(--fs-accent-light);
    color: #C65D45;
}

.fs-action-type-task_requested .fs-action-needed-icon {
    background: var(--fs-secondary-light);
    color: var(--fs-secondary-dark);
}

.fs-action-type-contract_viewed .fs-action-needed-icon {
    background: var(--fs-secondary-light);
    color: var(--fs-secondary);
}

.fs-action-type-proposal_expiring .fs-action-needed-icon {
    background: var(--fs-accent-light);
    color: #C65D45;
}

.fs-action-type-task_needs_info .fs-action-needed-icon {
    background: var(--fs-accent-light);
    color: #C65D45;
}

.fs-action-needed-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fs-action-needed-title {
    font-weight: 500;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fs-action-needed-subtitle {
    font-size: 12px;
    color: var(--fs-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fs-action-needed-meta {
    flex-shrink: 0;
}

.fs-action-needed-meta .fs-status-badge {
    font-size: 10px;
    padding: 3px 8px;
    white-space: nowrap;
}

.fs-action-needed-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--fs-gray-500);
}

.fs-action-needed-empty .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    color: var(--fs-primary);
    margin-bottom: 8px;
    display: block;
}

.fs-action-needed-empty p {
    margin: 0;
    font-size: 14px;
}

/* Dashboard Mini Calendar - Specific Overrides */
.fs-widget-body .fs-sidebar-mini-cal {
    padding: 15px 20px;
    margin-bottom: 0;
}

.fs-widget-body .fs-sidebar-mini-cal .fs-sidebar-mini-cal-header {
    margin-bottom: 12px;
}

.fs-widget-body .fs-sidebar-mini-cal .fs-sidebar-mini-cal-day {
    padding: 4px;
    min-width: 32px;
    min-height: 32px;
}

/* Drag handle - hidden by default */
.fs-widget-drag-handle {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--fs-gray-100);
    border-bottom: 1px solid var(--fs-gray-200);
    cursor: move;
    font-size: 13px;
    color: var(--fs-gray-600);
}

.fs-widget-drag-handle .dashicons-move {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--fs-gray-400);
}

.fs-widget-drag-handle .fs-widget-title {
    font-weight: 500;
    flex: 1;
}

.fs-widget-resize {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: 4px;
    color: var(--fs-gray-500);
}

.fs-widget-resize:hover {
    background: var(--fs-gray-200);
    color: var(--fs-primary);
}

/* Show drag handle in customize mode */
body.fs-customizing-dashboard .fs-widget-drag-handle {
    display: flex;
}

/* Sortable effects */
body.fs-customizing-dashboard .fs-widget {
    transition: box-shadow 0.2s, transform 0.2s;
}

body.fs-customizing-dashboard .fs-widget:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

body.fs-customizing-dashboard .fs-widget.ui-sortable-helper {
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    transform: rotate(1deg);
    z-index: 1000;
}

.fs-widget-placeholder {
    background: var(--fs-gray-100);
    border: 2px dashed var(--fs-gray-400);
    border-radius: var(--fs-border-radius);
    min-height: 100px;
}

.fs-widget-placeholder.fs-widget-cols-2 {
    grid-column: span 2;
}

/* Financial Overview in widget */
.fs-widget .fs-financial-overview {
    padding: 20px;
    color: #fff;
    border-radius: 0;
}

.fs-widget .fs-financial-header {
    margin-bottom: 20px;
}

.fs-widget .fs-financial-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Financial grid in single column */
.fs-widget-cols-1 .fs-financial-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Timer widget styling */
.fs-timer-widget-inner {
    padding: 20px;
    text-align: center;
}

/* Quick actions styling */
.fs-quick-actions {
    display: flex;
    gap: 10px;
    padding: 15px;
}

.fs-quick-actions .fs-quick-action {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 15px 10px;
    background: var(--fs-gray-50);
    border-radius: var(--fs-border-radius);
    text-decoration: none;
    color: var(--fs-gray-700);
    transition: all 0.2s;
}

.fs-quick-actions .fs-quick-action:hover {
    background: var(--fs-primary-light);
    color: var(--fs-gray-700);
}

.fs-quick-actions .fs-quick-action .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.fs-quick-actions .fs-quick-action span:last-child {
    font-size: 12px;
    font-weight: 500;
}

/* Tasks widget */
.fs-widget-body .fs-quick-add-task {
    padding: 0 20px 15px;
}

/* Time goals styling */
.fs-widget-body .fs-time-goals {
    padding: 0 20px 15px;
}

/* Recent sessions styling */
.fs-widget-body .fs-timer-history {
    padding: 0 20px;
    max-height: 280px;
    overflow-y: auto;
}

/* Sidebar-specific overrides */
.fs-widgets-sidebar .fs-widget-resize {
    display: none;
}

/* Hide some elements during customization */
body.fs-customizing-dashboard .fs-card-footer {
    opacity: 0.5;
}

/* Responsive */
@media (max-width: 1200px) {
    .fs-dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .fs-widgets-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .fs-widgets-sidebar .fs-widget {
        flex: 1;
        min-width: 280px;
    }
}

@media (max-width: 782px) {
    .fs-widgets-main {
        grid-template-columns: 1fr;
    }
    
    .fs-widget-cols-1,
    .fs-widget-cols-2 {
        grid-column: span 1;
    }
    
    .fs-widget .fs-financial-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .fs-quick-actions {
        flex-direction: column;
    }
}

/* ============================================
   Google Calendar Settings
   ============================================ */

.fs-gcal-status-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-radius: var(--fs-border-radius);
    margin-bottom: 25px;
    border: 1px solid var(--fs-gray-300);
}

.fs-gcal-status-card.connected {
    background: linear-gradient(135deg, #f0f9f0, #e8f5e8);
    border-color: #4caf50;
}

.fs-gcal-status-card.disconnected {
    background: linear-gradient(135deg, #fff8e1, #fff3cd);
    border-color: var(--fs-highlight);
}

.fs-gcal-status-icon {
    font-size: 32px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--fs-shadow);
}

.fs-gcal-status-card.connected .fs-gcal-status-icon {
    color: #4caf50;
}

.fs-gcal-status-card.disconnected .fs-gcal-status-icon {
    color: var(--fs-accent);
}

.fs-gcal-status-icon .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
}

.fs-gcal-status-info h3 {
    margin: 0 0 5px 0;
    color: var(--fs-primary-dark);
}

.fs-gcal-status-info p {
    margin: 0;
    color: var(--fs-gray-600);
}

/* Setup Box */
.fs-gcal-setup-box {
    background: #fff;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    padding: 25px;
    margin-bottom: 25px;
}

.fs-gcal-setup-box h3 {
    margin-top: 0;
    color: var(--fs-primary-dark);
    border-bottom: 2px solid var(--fs-primary-light);
    padding-bottom: 10px;
}

.fs-gcal-setup-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fs-gcal-step {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: var(--fs-gray-100);
    border-radius: var(--fs-border-radius);
    border-left: 4px solid var(--fs-primary);
}

.fs-gcal-step .step-number {
    width: 36px;
    height: 36px;
    background: var(--fs-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
}

.fs-gcal-step .step-content h4 {
    margin: 0 0 8px 0;
    color: var(--fs-primary-dark);
}

.fs-gcal-step .step-content p {
    margin: 0 0 10px 0;
    color: var(--fs-gray-600);
}

.fs-gcal-step .step-content ul {
    margin: 10px 0;
    padding-left: 20px;
}

.fs-gcal-step .step-content li {
    margin-bottom: 8px;
    color: var(--fs-gray-600);
}

.fs-copy-text {
    display: inline-block;
    background: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    border: 1px solid var(--fs-gray-300);
    word-break: break-all;
    margin-top: 5px;
}

.fs-copy-btn {
    vertical-align: middle;
    margin-left: 5px !important;
    padding: 4px 8px !important;
}

.fs-copy-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Connect Box */
.fs-gcal-connect-box {
    background: linear-gradient(135deg, var(--fs-primary-light), #e3edf7);
    border: 1px solid var(--fs-primary);
    border-radius: var(--fs-border-radius);
    padding: 25px;
    text-align: center;
    margin-top: 20px;
}

.fs-gcal-connect-box h4 {
    margin: 0 0 10px 0;
    color: var(--fs-primary-dark);
}

.fs-gcal-connect-box p {
    margin: 0 0 20px 0;
    color: var(--fs-gray-600);
}

.fs-gcal-connect-box .button-hero {
    font-size: 15px !important;
    padding: 12px 30px !important;
}

.fs-gcal-connect-box .button-hero .dashicons {
    margin-right: 8px;
}

/* Credentials Form */
.fs-gcal-credentials-form {
    background: #fff;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    padding: 25px;
    margin-bottom: 25px;
}

.fs-toggle-password {
    vertical-align: middle;
    margin-left: 8px !important;
}

.fs-toggle-password .dashicons {
    margin: 0;
}

/* Section Titles */
.fs-gcal-section-title {
    color: var(--fs-primary-dark);
    border-bottom: 2px solid var(--fs-primary-light);
    padding-bottom: 10px;
    margin-top: 30px;
}

/* Feature List */
.fs-feature-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fs-feature-list li {
    padding: 4px 0;
    color: var(--fs-gray-700);
    display: flex;
    align-items: center;
    gap: 8px;
}

.fs-feature-list li .dashicons-yes {
    color: var(--fs-primary);
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Toggle Switch */
label.fs-switch,
.fs-wrap .fs-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    vertical-align: middle;
    margin-right: 10px;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    text-shadow: none;
    color: inherit;
    min-height: 0;
    line-height: 1;
}

label.fs-switch input,
.fs-wrap .fs-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
}

label.fs-switch input:focus + .fs-slider,
.fs-wrap .fs-switch input:focus + .fs-slider {
    box-shadow: 0 0 0 3px rgba(31, 187, 166, 0.25);
}

label.fs-switch .fs-slider,
.fs-wrap .fs-switch .fs-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--fs-gray-400);
    transition: .3s;
    border-radius: 26px;
}

label.fs-switch .fs-slider:before,
.fs-wrap .fs-switch .fs-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

label.fs-switch input:checked + .fs-slider,
.fs-wrap .fs-switch input:checked + .fs-slider {
    background-color: var(--fs-primary);
}

label.fs-switch input:checked + .fs-slider:before,
.fs-wrap .fs-switch input:checked + .fs-slider:before {
    transform: translateX(24px);
}

/* Digest Preview */
.fs-gcal-digest-preview {
    background: var(--fs-gray-100);
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    padding: 20px;
    margin-top: 20px;
}

.fs-gcal-digest-preview h4 {
    margin: 0 0 10px 0;
    color: var(--fs-primary-dark);
}

.fs-gcal-digest-preview .description {
    margin-bottom: 15px;
}

.fs-gcal-digest-preview .button {
    margin-right: 10px;
}

/* Danger Zone */
.fs-gcal-danger-zone {
    background: #fff5f5;
    border: 1px solid #c53030;
    border-radius: var(--fs-border-radius);
    padding: 20px;
    margin-top: 30px;
}

.fs-gcal-danger-zone h3 {
    margin: 0 0 10px 0;
    color: #c53030;
}

.fs-gcal-danger-zone p {
    margin: 0 0 15px 0;
    color: var(--fs-gray-600);
}

.fs-gcal-danger-zone .button-link-delete {
    color: #c53030;
    border-color: #c53030;
    background: transparent;
}

.fs-gcal-danger-zone .button-link-delete:hover {
    background: #c53030;
    color: #fff;
}

/* ============================================
   Calendar Page Styles
   ============================================ */

.fs-calendar-wrap {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 25px;
    align-items: start;
}

.fs-calendar-wrap .fs-calendar-grid {
    overflow-x: auto;
}

.fs-calendar-wrap > h1 {
    grid-column: 1 / -1;
}

.fs-calendar-header {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.fs-calendar-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fs-calendar-nav .button {
    padding: 6px 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--fs-gray-300);
    box-shadow: none;
}

.fs-calendar-nav .button:hover {
    background: var(--fs-gray-100);
    border-color: var(--fs-gray-400);
}

.fs-calendar-nav .button .dashicons {
    margin: 0;
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: var(--fs-gray-600);
}

.fs-calendar-title {
    margin: 0 15px;
    font-size: 22px;
    font-weight: 600;
    color: var(--fs-primary-dark);
    min-width: 200px;
    text-align: center;
}

.fs-calendar-view-toggle {
    display: flex;
    gap: 5px;
}

.fs-calendar-view-toggle .button {
    border-radius: 8px;
}

.fs-calendar-legend {
    grid-column: 1 / -1;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 12px 18px;
    background: #fff;
    border: 1px solid var(--fs-gray-200);
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.fs-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--fs-gray-600);
}

.fs-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

/* Month Grid - Modern Card Style */
.fs-calendar-grid {
    background: #fff;
    border: 1px solid var(--fs-gray-200);
    border-radius: 16px;
    overflow: hidden;
    min-width: 700px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.fs-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background: transparent;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-weekday {
    padding: 16px 8px;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    color: var(--fs-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fs-weekday:first-child {
    /* Time column header */
    background: transparent;
}

.fs-weekday.fs-weekend {
    color: var(--fs-gray-400);
}

.fs-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.fs-calendar-day {
    min-height: 120px;
    border-right: 1px solid var(--fs-gray-100);
    border-bottom: 1px solid var(--fs-gray-100);
    padding: 8px;
    background: #fff;
    transition: background 0.2s;
    overflow: hidden;
}

.fs-calendar-day:nth-child(7n) {
    border-right: none;
}

.fs-calendar-day:hover {
    background: rgba(65, 115, 176, 0.02);
}

.fs-calendar-day.fs-other-month {
    background: var(--fs-gray-50);
}

.fs-calendar-day.fs-other-month .fs-day-number {
    color: var(--fs-gray-300);
}

.fs-calendar-day.fs-today {
    background: rgba(65, 115, 176, 0.04);
}

.fs-calendar-day.fs-today .fs-day-number {
    background: var(--fs-accent);
    color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.fs-calendar-day.fs-weekend {
    background: rgba(0, 0, 0, 0.01);
}

.fs-day-number {
    font-weight: 600;
    font-size: 14px;
    color: var(--fs-gray-600);
    margin-bottom: 6px;
}

.fs-day-events {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Modern Event Cards - Pastel Style */
.fs-calendar-event {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--fs-secondary-light);
    border-radius: var(--fs-border-radius);
    font-size: 11px;
    text-decoration: none;
    color: var(--fs-secondary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: all 0.2s;
    border-left: none;
    font-weight: 500;
}

.fs-calendar-event:hover {
    transform: translateY(-1px);
    box-shadow: var(--fs-shadow);
}

/* Event Type Colors - New Palette */
.fs-calendar-event[style*="border-left-color: #81A5DF"],
.fs-calendar-event.fs-event-project {
    background: var(--fs-secondary-light);
    color: var(--fs-secondary);
    border-left: none;
}

.fs-calendar-event[style*="border-left-color: #3ECFB2"],
.fs-calendar-event.fs-event-milestone {
    background: var(--fs-primary-xtralight);
    color: var(--fs-primary-dark);
    border-left: none;
}

.fs-calendar-event[style*="border-left-color: #9CA3AF"],
.fs-calendar-event.fs-event-task {
    background: var(--fs-gray-200);
    color: var(--fs-gray-700);
    border-left: none;
}

.fs-calendar-event[style*="border-left-color: #FFA26E"],
.fs-calendar-event.fs-event-invoice {
    background: var(--fs-accent-light);
    color: #C65D45;
    border-left: none;
}

.fs-calendar-event[style*="border-left-color: #E85A5A"],
.fs-calendar-event.fs-event-expiring {
    background: #FFE5E5;
    color: #B91C1C;
    border-left: none;
}

.fs-calendar-event[style*="border-left-color: #5D4E80"],
.fs-calendar-event.fs-event-tax {
    background: var(--fs-secondary-light);
    color: var(--fs-secondary-dark);
    border-left: none;
}

.fs-calendar-event[style*="border-left-color: #77D5C9"],
.fs-calendar-event.fs-event-booking {
    background: var(--fs-primary-light);
    color: var(--fs-primary-dark);
    border-left: none;
}

.fs-calendar-event[style*="border-left-color: #10B981"],
.fs-calendar-event.fs-event-google {
    background: var(--fs-primary-light);
    color: var(--fs-primary-dark);
    border-left: none;
}

.fs-event-icon {
    font-size: 12px;
    flex-shrink: 0;
    opacity: 0.8;
}

.fs-event-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.fs-event-more {
    font-size: 10px;
    color: var(--fs-gray-600);
    padding: 4px 8px;
    font-weight: 600;
    background: var(--fs-gray-200);
    border-radius: var(--fs-border-radius);
    text-align: center;
}

/* Week View - Modern Style */
.fs-calendar-week-view {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background: #fff;
    border: 1px solid var(--fs-gray-200);
    border-radius: 16px;
    overflow: hidden;
    min-width: 700px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.fs-week-day {
    border-right: 1px solid var(--fs-gray-100);
    min-height: 400px;
}

.fs-week-day:last-child {
    border-right: none;
}

.fs-week-day-header {
    background: #fff;
    color: var(--fs-gray-600);
    padding: 16px 12px;
    text-align: center;
    border-bottom: 1px solid var(--fs-gray-100);
}

.fs-week-day.fs-today .fs-week-day-header {
    background: rgba(235, 136, 97, 0.08);
}

.fs-week-day.fs-today .fs-week-day-header .fs-week-day-date {
    background: var(--fs-accent);
    color: #fff;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fs-week-day.fs-weekend .fs-week-day-header {
    background: var(--fs-gray-50);
}

.fs-week-day-name {
    display: block;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fs-gray-500);
}

.fs-week-day-date {
    display: block;
    font-size: 20px;
    font-weight: 700;
    margin-top: 4px;
    color: var(--fs-primary-dark);
}

.fs-week-day-events {
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fs-week-event {
    display: block;
    padding: 10px 12px;
    background: #E8F4FD;
    border-radius: 8px;
    text-decoration: none;
    color: #1E6BB8;
    transition: all 0.2s;
    border-left: none;
}

.fs-week-event:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Week Event Type Colors */
.fs-week-event[style*="border-left-color: #4173B0"] {
    background: #E8F4FD;
    color: #1E6BB8;
    border-left: none;
}

.fs-week-event[style*="border-left-color: #EDCE7A"] {
    background: #FFF8E1;
    color: #B8860B;
    border-left: none;
}

.fs-week-event[style*="border-left-color: #9CA3AF"] {
    background: #F3F4F6;
    color: #4B5563;
    border-left: none;
}

.fs-week-event[style*="border-left-color: #EB8861"] {
    background: #FFECE5;
    color: #C65D39;
    border-left: none;
}

.fs-week-event[style*="border-left-color: #c53030"] {
    background: #FFE5E5;
    color: #B91C1C;
    border-left: none;
}

.fs-week-event[style*="border-left-color: #6B21A8"] {
    background: #F3E8FF;
    color: #7C3AED;
    border-left: none;
}

.fs-week-event[style*="border-left-color: #10B981"] {
    background: #ECFDF5;
    color: #059669;
    border-left: none;
}

.fs-week-event-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 12px;
}

.fs-week-event .fs-event-subtitle {
    font-size: 11px;
    opacity: 0.8;
    margin-top: 4px;
}

.fs-no-events {
    color: var(--fs-gray-400);
    font-size: 12px;
    text-align: center;
    padding: 20px 10px;
    font-style: italic;
}

/* Calendar Sidebar - Modern Design */
.fs-calendar-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fs-calendar-sidebar-section {
    background: #fff;
    border: none;
    border-radius: var(--fs-border-radius-xl);
    padding: 20px;
    box-shadow: var(--fs-shadow);
}

.fs-calendar-sidebar-section h3 {
    margin: 0 0 15px 0;
    font-size: 15px;
    color: var(--fs-secondary);
    font-weight: 600;
}

/* Quick Add Button - Calendar Sidebar Coral Style */
.fs-calendar-quick-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--fs-accent) 0%, #E57A5E 100%);
    color: #fff;
    border: none;
    border-radius: var(--fs-border-radius-lg);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(245, 137, 109, 0.3);
    text-decoration: none;
}

.fs-calendar-quick-add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(245, 137, 109, 0.4);
    background: linear-gradient(135deg, #E57A5E 0%, #D56B4F 100%);
    color: #fff;
}

.fs-calendar-quick-add-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Sidebar Mini Calendar - Modern Design */
.fs-sidebar-mini-cal {
    margin-bottom: 5px;
}

.fs-sidebar-mini-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.fs-sidebar-mini-cal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--fs-secondary);
}

.fs-sidebar-mini-cal-nav {
    display: flex;
    gap: 4px;
}

.fs-sidebar-mini-cal-nav .fs-mini-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--fs-gray-500);
    border-radius: 6px;
    transition: all 0.2s;
    text-decoration: none;
}

.fs-sidebar-mini-cal-nav .fs-mini-nav-btn:hover {
    background: var(--fs-gray-100);
    color: var(--fs-primary);
}

.fs-sidebar-mini-cal-nav .fs-mini-nav-btn .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

#fs-mini-cal-prev,
#fs-mini-cal-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--fs-gray-500);
    border-radius: 6px;
    transition: all 0.2s;
}

#fs-mini-cal-prev:hover,
#fs-mini-cal-next:hover {
    background: var(--fs-gray-100);
    color: var(--fs-primary);
}

#fs-mini-cal-prev .dashicons,
#fs-mini-cal-next .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.fs-sidebar-mini-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.fs-sidebar-mini-cal-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--fs-gray-500);
    padding: 8px 0;
}

.fs-sidebar-mini-cal-day {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--fs-gray-700);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.fs-sidebar-mini-cal-day:hover {
    background: var(--fs-gray-100);
}

.fs-sidebar-mini-cal-day.fs-other-month {
    color: var(--fs-gray-300);
}

.fs-sidebar-mini-cal-day.fs-today {
    background: var(--fs-accent);
    color: #fff;
    font-weight: 700;
}

.fs-sidebar-mini-cal-day.fs-has-events::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--fs-primary);
    border-radius: 50%;
}

.fs-sidebar-mini-cal-day.fs-today.fs-has-events::after {
    background: #fff;
}

/* Upcoming List - Modern Style */
.fs-upcoming-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fs-upcoming-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: var(--fs-gray-50);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s;
}

.fs-upcoming-item:hover {
    background: var(--fs-gray-100);
    transform: translateX(3px);
}

.fs-upcoming-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    width: 40px;
    padding: 3px;
    background: var(--fs-primary);
    color: #fff;
    border-radius: 8px;
}

.fs-upcoming-month {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
    opacity: 0.9;
}

.fs-upcoming-day {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
}

.fs-upcoming-content {
    display: flex;
    gap: 10px;
    flex: 1;
    min-width: 0;
    align-items: center;
}

.fs-upcoming-icon {
    display: none;
}

.fs-upcoming-details {
    flex: 1;
    min-width: 0;
}

.fs-upcoming-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--fs-gray-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.fs-upcoming-subtitle {
    font-size: 11px;
    color: var(--fs-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fs-no-upcoming {
    color: var(--fs-gray-500);
    font-size: 13px;
    text-align: center;
    padding: 25px 10px;
}

.fs-calendar-sync-status {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--fs-gray-200);
    font-size: 12px;
    color: var(--fs-gray-600);
    display: flex;
    align-items: center;
    gap: 6px;
}

.fs-calendar-sync-status a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--fs-primary);
    text-decoration: none;
}

.fs-calendar-sync-status a:hover {
    color: var(--fs-primary-dark);
} 

/* Dashboard Calendar Widget */
.fs-widget-calendar-list {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 0 auto;
    gap: 8px;
}

.fs-widget-calendar-item {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    background: var(--fs-gray-50);
    border-radius: var(--fs-border-radius);
    text-decoration: none;
    transition: all 0.2s;
    border-left: 15px solid transparent;
    margin-bottom: 15px;
}

.fs-widget-calendar-item:hover {
    background: var(--fs-gray-100);
}

.fs-widget-calendar-item .fs-cal-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
}

.fs-widget-calendar-item .fs-cal-month {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--fs-gray-500);
}

.fs-widget-calendar-item .fs-cal-day {
    font-size: 18px;
    font-weight: 700;
    color: var(--fs-gray-700);
    line-height: 1;
}

.fs-widget-calendar-item .fs-cal-content {
    flex: 1;
    min-width: 0;
}

.fs-widget-calendar-item .fs-cal-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--fs-gray-700); 
    display: flex;
    align-items: center;
    gap: 6px;
}

.fs-widget-calendar-item .fs-cal-subtitle {
    font-size: 11px;
    color: var(--fs-gray-500);
}

.fs-widget-calendar-item.fs-cal-overdue {
    border-left-color: #c53030;
    background: #fff5f5;
}

.fs-widget-calendar-item.fs-cal-today {
    border-left-color: var(--fs-accent);
    background: rgba(235, 136, 97, 0.1);
}

.fs-widget-no-events {
    text-align: center;
    padding: 30px 20px;
    color: var(--fs-gray-500);
}

.fs-widget-no-events .dashicons {
    font-size: 40px;
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    color: var(--fs-gray-300);
}

/* Responsive Calendar */
@media (max-width: 1200px) {
    .fs-calendar-wrap {
        grid-template-columns: 1fr;
    }
    
    .fs-calendar-sidebar {
        grid-row: 1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    
    .fs-calendar-quick-add-btn {
        grid-column: 1 / -1;
    }
    
    .fs-calendar-grid,
    .fs-calendar-week-view {
        grid-row: 2;
    }
}

@media (max-width: 782px) {
    .fs-calendar-header {
        flex-direction: column;
        gap: 15px;
    }
    
    .fs-calendar-sidebar {
        grid-template-columns: 1fr;
    }
    
    .fs-calendar-day {
        min-height: 80px;
    }
    
    .fs-calendar-event {
        padding: 4px 6px;
        font-size: 10px;
    }
    
    .fs-event-title {
        display: none;
    }
    
    .fs-week-day {
        min-height: 300px;
    }
    
    .fs-week-day-name {
        font-size: 11px;
    }
    
    .fs-week-day-date {
        font-size: 14px;
    }
    
    .fs-sidebar-mini-cal-day {
        font-size: 12px;
    }
}

/* ============================================
   Mini Calendar Widget Styles
   ============================================ */

.fs-mini-calendar-widget {
    padding: 5px;
}

.fs-mini-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.fs-mini-cal-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--fs-primary-dark);
}

.fs-mini-cal-nav {
    color: var(--fs-gray-500);
    text-decoration: none;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.fs-mini-cal-nav:hover {
    color: var(--fs-primary);
    background: var(--fs-gray-100);
}

.fs-mini-cal-nav .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.fs-mini-cal-grid {
    background: var(--fs-gray-50);
    border-radius: var(--fs-border-radius);
    padding: 10px;
}

.fs-mini-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 8px;
}

.fs-mini-cal-weekdays span {
    font-size: 11px;
    font-weight: 600;
    color: var(--fs-gray-500);
    padding: 4px 0;
}

.fs-mini-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.fs-mini-cal-day {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--fs-gray-700);
    text-decoration: none;
    border-radius: 50%;
    transition: all 0.2s;
}

.fs-mini-cal-day:hover:not(.fs-other-month) {
    background: var(--fs-primary-light);
    color: var(--fs-primary-dark);
}

.fs-mini-cal-day.fs-other-month {
    color: var(--fs-gray-300);
}

.fs-mini-cal-day.fs-today {
    background: var(--fs-primary);
    color: #fff;
    font-weight: 700;
}

.fs-mini-cal-day.fs-has-events {
    font-weight: 600;
}

.fs-mini-cal-dot {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

.fs-mini-cal-day.fs-today .fs-mini-cal-dot {
    background: #fff !important;
}

.fs-mini-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--fs-gray-200);
}

.fs-mini-cal-legend span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--fs-gray-500);
}

.fs-mini-cal-legend .fs-legend-dot {
    width: 8px;
    height: 8px;
}

/* ============================================
   Week View Widget Styles
   ============================================ */

/* Week at a Glance Widget */
.fs-week-glance-widget {
    padding: 15px 20px;
}

.fs-week-glance-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 15px;
}

.fs-week-glance-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fs-week-external-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--fs-gray-500);
    transition: color 0.15s ease;
    user-select: none;
}

.fs-week-external-toggle:hover {
    color: var(--fs-gray-700);
}

.fs-week-external-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--fs-primary);
}

.fs-week-external-toggle .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
}

.fs-week-external-toggle input:checked ~ .dashicons,
.fs-week-external-toggle input:checked ~ .fs-week-external-label {
    color: var(--fs-primary-dark);
}

.fs-week-external-label {
    font-weight: 500;
}

.fs-week-glance-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--fs-gray-800);
}

.fs-week-glance-range {
    font-size: 13px;
    color: var(--fs-gray-500);
}

.fs-week-glance-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.fs-week-glance-day {
    background: var(--fs-gray-50);
    border-radius: var(--fs-border-radius);
    border: 1px solid var(--fs-gray-200);
    padding: 10px 6px;
    text-align: center;
    min-height: 110px;
    display: flex;
    flex-direction: column;
}

.fs-week-glance-day.fs-today {
    background: rgba(62, 207, 178, 0.1);
    border: 2px solid var(--fs-primary);
}

.fs-week-glance-day.fs-weekend {
    background: var(--fs-gray-100);
}

.fs-week-glance-day-header {
    margin-bottom: 8px;
}

.fs-week-glance-day-name {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--fs-gray-500);
    letter-spacing: 0.5px;
}

.fs-week-glance-day-num {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--fs-gray-700);
    line-height: 1.3;
}

.fs-week-glance-day.fs-today .fs-week-glance-day-num {
    color: var(--fs-primary-dark);
}

.fs-week-glance-events {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.fs-week-glance-event {
    display: block;
    padding: 4px 6px;
    border-radius: 4px;
    text-decoration: none;
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.2s;
    text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}

.fs-week-glance-event:hover {
    opacity: 0.85;
    transform: scale(1.02);
    color: #fff;
}

/* Dark text for light background events */
.fs-week-glance-event.fs-week-event-project {
    color: var(--fs-gray-800);
    text-shadow: none;
}

.fs-week-glance-event.fs-week-event-project:hover {
    color: var(--fs-gray-800);
}

/* Task events - card style with left accent border */
.fs-week-glance-event.fs-week-event-task {
    background: #fff !important;
    color: var(--fs-gray-600);
    text-shadow: none;
    border: 1px solid var(--fs-task-accent, var(--fs-gray-300));
    border-left: 15px solid var(--fs-task-accent, var(--fs-gray-300));
}

.fs-week-glance-event.fs-week-event-task:hover {
    color: var(--fs-gray-700);
}

.fs-week-glance-empty {
    color: var(--fs-gray-300);
    font-size: 14px;
    margin-top: auto;
    margin-bottom: auto;
}

.fs-week-glance-more {
    font-size: 9px;
    color: var(--fs-gray-500);
    font-weight: 600;
    margin-top: 2px;
}

/* Desktop: show short title, hide full title and time */
.fs-week-event-title-full,
.fs-week-event-time {
    display: none;
}

/* Responsive adjustments for week glance widget */
@media (max-width: 1200px) {
    .fs-week-glance-grid {
        grid-template-columns: repeat(7, 1fr);
    }
    
    .fs-week-glance-day {
        min-height: 100px;
        padding: 8px 4px;
    }
    
    .fs-week-glance-day-num {
        font-size: 16px;
    }
}

@media (max-width: 782px) {
    .fs-week-glance-header {
        flex-direction: column;
        gap: 4px;
    }

    /* Mobile timeline layout */
    .fs-week-glance-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .fs-week-glance-day {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        min-height: auto;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        text-align: left;
    }

    .fs-week-glance-day.fs-today {
        background: transparent;
        border: none;
    }

    .fs-week-glance-day.fs-weekend {
        background: transparent;
    }

    .fs-week-glance-day-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 52px;
        flex-shrink: 0;
        margin-bottom: 0;
        padding: 12px 0 12px 4px;
        position: relative;
    }

    /* Timeline line */
    .fs-week-glance-day-header::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--fs-gray-200);
    }

    /* Timeline dot */
    .fs-week-glance-day-header::before {
        content: '';
        position: absolute;
        right: -4px;
        top: 20px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--fs-gray-300);
        z-index: 1;
    }

    .fs-week-glance-day.fs-today .fs-week-glance-day-header::before {
        background: var(--fs-primary);
        box-shadow: 0 0 0 3px rgba(62, 207, 178, 0.25);
        width: 12px;
        height: 12px;
        right: -5px;
    }

    .fs-week-glance-day-name {
        font-size: 10px;
        font-weight: 600;
        color: var(--fs-gray-500);
        order: 2;
    }

    .fs-week-glance-day.fs-today .fs-week-glance-day-name {
        color: var(--fs-primary-dark);
    }

    .fs-week-glance-day-num {
        font-size: 22px;
        font-weight: 700;
        color: var(--fs-gray-600);
        line-height: 1.1;
        order: 1;
    }

    .fs-week-glance-day.fs-today .fs-week-glance-day-num {
        color: var(--fs-primary-dark);
    }

    .fs-week-glance-events {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 12px 12px 12px 18px;
        min-height: 48px;
        min-width: 0;
        overflow: hidden;
        justify-content: center;
    }

    .fs-week-glance-event {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fs-week-glance-empty {
        color: var(--fs-gray-300);
        font-size: 13px;
    }

    .fs-week-glance-more {
        font-size: 11px;
        color: var(--fs-gray-500);
        font-weight: 600;
        padding-left: 4px;
    }

    /* Mobile: show full title + time, hide short title */
    .fs-week-event-title {
        display: none;
    }

    .fs-week-event-title-full {
        display: inline;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }

    .fs-week-event-time {
        display: inline;
        margin-left: auto;
        padding-left: 10px;
        font-size: 11px;
        opacity: 0.85;
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ============================================
   Calendar Event Modal Styles
   ============================================ */

#fs-event-modal .fs-modal-body {
    padding: 20px;
}

#fs-event-modal .fs-form-row {
    margin-bottom: 15px;
}

#fs-event-modal label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--fs-gray-800);
    font-size: 13px;
}

#fs-event-modal input[type="text"],
#fs-event-modal input[type="date"],
#fs-event-modal input[type="time"],
#fs-event-modal textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    font-size: 14px;
}

#fs-event-modal input[type="checkbox"] {
    margin-right: 8px;
}

#fs-event-modal .required {
    color: var(--fs-danger);
}

#fs-event-modal .fs-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--fs-gray-200);
}

.fs-calendar-day {
    cursor: pointer;
}

/* ============================================
   Booking System Styles
   ============================================ */

/* Meeting Types Grid */
.fs-meeting-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.fs-meeting-type-card {
    background: #fff;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    overflow: hidden;
}

.fs-meeting-type-card.fs-inactive {
    opacity: 0.7;
}

.fs-meeting-type-header {
    padding: 15px;
    border-left: 4px solid var(--fs-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-meeting-type-header h3 {
    margin: 0;
    font-size: 16px;
}

.fs-meeting-type-body {
    padding: 15px;
}

.fs-meeting-type-body .fs-description {
    color: var(--fs-gray-600);
    margin: 0 0 15px;
    font-size: 14px;
}

.fs-meeting-type-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.fs-meeting-type-meta .fs-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--fs-gray-600);
}

.fs-meeting-type-meta .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.fs-meeting-type-footer {
    padding: 15px;
    border-top: 1px solid var(--fs-gray-200);
    display: flex;
    gap: 10px;
    background: var(--fs-gray-100);
    flex-wrap: wrap;
}

.fs-meeting-type-footer .fs-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.fs-meeting-type-footer .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Booking URL Box */
.fs-booking-url-box {
    display: flex;
    gap: 10px;
    margin: 10px 0;
}

.fs-booking-url-box input {
    flex: 1;
    background: var(--fs-gray-100);
}

/* Availability Schedule */
.fs-availability-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

@media (max-width: 1200px) {
    .fs-availability-layout {
        grid-template-columns: 1fr;
    }
}

.fs-schedule-days {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
}

.fs-schedule-day {
    padding: 15px;
    background: var(--fs-gray-100);
    border-radius: var(--fs-border-radius);
}

.fs-day-header {
    margin-bottom: 10px;
}

.fs-day-blocks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.fs-time-block {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fs-time-block input[type="time"] {
    padding: 6px 10px;
    border: 1px solid var(--fs-gray-300);
    border-radius: 4px;
}

.fs-time-block span {
    color: var(--fs-gray-600);
}

.fs-unavailable {
    color: var(--fs-gray-400);
    font-style: italic;
    font-size: 13px;
}

.fs-override-form {
    background: var(--fs-gray-100);
    padding: 15px;
    border-radius: var(--fs-border-radius);
    margin-bottom: 20px;
}

.fs-override-blocks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

/* Booking List */
.fs-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 15px;
}

.fs-view-toggle {
    display: flex;
    gap: 5px;
}

.fs-booking-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--fs-gray-600);
}

.fs-meeting-type-badge {
    display: inline-block;
    padding: 4px 8px;
    background: var(--fs-gray-100);
    border-radius: 4px;
    font-size: 13px;
}

.fs-duration, .fs-time, .fs-company, .fs-email {
    font-size: 12px;
    color: var(--fs-gray-600);
}

/* Booking View */
.fs-booking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fs-booking-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fs-booking-details .fs-detail-row {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    padding: 0;
    border-bottom: none;
    align-items: flex-start;
}

.fs-booking-details .fs-detail-row .fs-detail-content {
    line-height: 1.5;
}

.fs-detail-icon {
    color: var(--fs-primary);
    flex-shrink: 0;
    width: 24px;
}

.fs-detail-icon .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.fs-timezone {
    font-size: 12px;
    color: var(--fs-gray-400);
}

.fs-meet-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--fs-primary);
    font-weight: 500;
    text-decoration: none;
}

.fs-meet-link:hover {
    color: var(--fs-primary-dark);
    text-decoration: underline;
}

.fs-meet-link .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* View Columns Layout (for single item views like bookings) */
.fs-view-columns {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    margin-top: 20px;
}

.fs-view-two-col {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    margin-top: 20px;
}

.fs-view-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fs-view-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

/* Link card - no padding on card body */
.fs-link-card .fs-card-body {
    padding: 0;
}

.fs-view-sidebar .fs-card h3 {
    margin: 0 0 15px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--fs-gray-700);
}

/* Vertical link copy wrapper for sidebar */
.fs-link-vertical {
    flex-direction: column;
}

.fs-link-vertical .fs-link-input {
    width: 100%;
    margin-bottom: 8px;
    font-size: 12px;
}

.fs-link-vertical .fs-link-buttons {
    display: flex;
    gap: 8px;
}

.fs-link-vertical .fs-link-buttons .button {
    flex: 1;
    text-align: center;
    justify-content: center;
}

/* Summary rows for sidebar */
.fs-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-summary-row:last-child {
    border-bottom: none;
}

.fs-summary-label {
    font-size: 13px;
    color: var(--fs-gray-600);
}

.fs-summary-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--fs-gray-800);
}

@media (max-width: 900px) {
    .fs-view-columns {
        grid-template-columns: 1fr;
    }
    
    .fs-view-two-col {
        grid-template-columns: 1fr;
    }
    
    .fs-view-sidebar {
        order: 2;
    }
}

.fs-attendee-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fs-attendee-name {
    font-size: 16px;
    font-weight: 600;
}

.fs-attendee-name .fs-company {
    display: block;
    font-weight: normal;
    font-size: 14px;
}

.fs-attendee-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.fs-attendee-detail .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--fs-gray-400);
}

.fs-card-warning {
    background: #fff5f5;
    border-color: #c53030;
}

.fs-info-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fs-info-item {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

.fs-info-label {
    color: var(--fs-gray-600);
}

/* Remove block button */
.fs-remove-block,
.fs-remove-override-block {
    color: var(--fs-danger);
    padding: 0;
    line-height: 1;
}

.fs-remove-block .dashicons,
.fs-remove-override-block .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}



/* ========================================
   KANBAN BOARD STYLES
   ======================================== */

/* Kanban Wrap */
/* Lock page scroll when kanban board is active */
body.fs-kanban-page {
    overflow: hidden;
    height: 100vh;
}

body.fs-kanban-page #wpcontent {
    height: calc(100vh - 32px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.fs-kanban-page #wpbody {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

body.fs-kanban-page #wpbody-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 0;
}

.fs-kanban-wrap {
    max-width: 100%;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Kanban Header */
.fs-kanban-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.fs-kanban-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.fs-kanban-header-left h1 {
    margin: 0;
}

.fs-kanban-header-right {
    display: flex;
    gap: 10px;
}

/* View Toggle */
.fs-view-toggle {
    display: flex;
    gap: 0;
}

.fs-view-toggle .fs-btn {
    border-radius: 0;
}

.fs-view-toggle .fs-btn:first-child {
    border-radius: var(--fs-border-radius) 0 0 var(--fs-border-radius);
}

.fs-view-toggle .fs-btn:last-child {
    border-radius: 0 var(--fs-border-radius) var(--fs-border-radius) 0;
    border-left: none;
}

.fs-view-toggle .fs-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Kanban Filters */
.fs-kanban-filters {
    margin-bottom: 20px;
    flex-shrink: 0;
}

.fs-kanban-filters .fs-filters-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* Kanban Board */
.fs-kanban-board {
    display: flex;
    gap: 20px;
    overflow-x: scroll;
    overflow-y: hidden;
    padding-bottom: 20px;
    padding-right: 80px;
    flex: 1;
    min-height: 0;
    align-items: stretch;
    scrollbar-width: thin;
    scrollbar-color: var(--fs-gray-400) var(--fs-gray-200);
    -webkit-overflow-scrolling: touch;
}

/* Force scrollbar always visible in Safari/WebKit */
.fs-kanban-board::-webkit-scrollbar {
    height: 8px;
    -webkit-appearance: none;
}

.fs-kanban-board::-webkit-scrollbar-track {
    background: var(--fs-gray-200);
    border-radius: 4px;
}

.fs-kanban-board::-webkit-scrollbar-thumb {
    background: var(--fs-gray-400);
    border-radius: 4px;
    min-width: 40px;
}

.fs-kanban-board::-webkit-scrollbar-thumb:hover {
    background: var(--fs-gray-500);
}

/* Scroll indicator arrow */
.fs-kanban-scroll-hint {
    position: fixed;
    bottom: 50%;
    right: 32px;
    width: 40px;
    height: 40px;
    background: var(--fs-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--fs-shadow-md);
    cursor: pointer;
    z-index: 50;
    transition: opacity 0.3s, transform 0.3s;
    animation: fs-scroll-hint-pulse 2s ease-in-out infinite;
}

.fs-kanban-scroll-hint.fs-kanban-scroll-left {
    right: auto;
    left: 180px;
    animation: fs-scroll-hint-pulse-left 2s ease-in-out infinite;
}

.fs-kanban-scroll-hint:hover {
    background: var(--fs-primary-dark);
    transform: scale(1.1);
}

.fs-kanban-scroll-hint .dashicons {
    font-size: 22px;
    width: 22px;
    height: 22px;
}

.fs-kanban-scroll-hint.fs-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(20px);
}

@keyframes fs-scroll-hint-pulse {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

@keyframes fs-scroll-hint-pulse-left {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-4px); }
}

/* Kanban Column */
.fs-kanban-column {
    flex: 0 0 340px;
    min-width: 340px;
    background: var(--fs-gray-50);
    border-radius: 15px 15px 12px 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.fs-kanban-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-radius: 15px 15px 0 0;
    flex-shrink: 0;
}

/* Column header colors by status */
.fs-kanban-column[data-status="pending"] .fs-kanban-column-header {
    background: #81A5DF;
}
.fs-kanban-column[data-status="in_progress"] .fs-kanban-column-header {
    background: #77D5C9;
}
.fs-kanban-column[data-status="needs_info"] .fs-kanban-column-header {
    background: #FFA26E;
}
.fs-kanban-column[data-status="with_client"] .fs-kanban-column-header {
    background: #1FBBA6;
}
.fs-kanban-column[data-status="completed"] .fs-kanban-column-header {
    background: #D2E767;
}

.fs-kanban-column-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
}

.fs-kanban-column-dot {
    display: none;
}

.fs-kanban-column-count {
    background: rgba(255, 255, 255, 0.7);
    color: var(--fs-gray-700);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.fs-kanban-add-task {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.fs-kanban-add-task:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.fs-kanban-add-task .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Column name edit button */
.fs-column-edit-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    transition: all 0.2s;
    opacity: 0;
    margin-left: -4px;
}

.fs-kanban-column-title:hover .fs-column-edit-btn {
    opacity: 1;
}

.fs-column-edit-btn:hover {
    color: #fff;
    background: rgba(0, 0, 0, 0.1);
}

.fs-column-edit-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Column name inline input */
.fs-column-name-input {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--fs-gray-800);
    min-width: 100px;
    max-width: 180px;
}

.fs-column-name-input:focus {
    outline: none;
    border-color: #fff;
    background: #fff;
}

/* Kanban Column Body */
.fs-kanban-column-body {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--fs-gray-200) transparent;
}

.fs-kanban-column-body::-webkit-scrollbar {
    width: 5px;
}

.fs-kanban-column-body::-webkit-scrollbar-track {
    background: transparent;
}

.fs-kanban-column-body::-webkit-scrollbar-thumb {
    background: var(--fs-gray-200);
    border-radius: 3px;
}

.fs-kanban-column-body::-webkit-scrollbar-thumb:hover {
    background: var(--fs-gray-400);
}

.fs-kanban-column-body.drag-over {
    background: var(--fs-primary-light);
}

/* Kanban Empty State */
.fs-kanban-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--fs-gray-400);
    text-align: center;
}

.fs-kanban-empty .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
    opacity: 0.5;
}

.fs-kanban-empty p {
    margin: 0;
    font-size: 13px;
}

/* Kanban Card - Sticky Note Style */
.fs-kanban-card {
    background: var(--fs-gray-100);
    border: 1px solid var(--fs-secondary);
    border-radius: 4px;
    box-shadow: 
        2px 2px 6px rgba(0, 0, 0, 0.08),
        0 1px 1px rgba(0, 0, 0, 0.05);
    cursor: grab;
    transition: all 0.2s;
    position: relative;
}

/* Client task cards - sticky note style */
.fs-kanban-card.client-task {
    background: #FFFEF0;
    border: none;
}

/* Sticky note colors based on priority - only for client tasks */
.fs-kanban-card.client-task[data-priority="low"] {
    background: var(--fs-gray-200);
}
.fs-kanban-card.client-task[data-priority="medium"] {
    background: var(--fs-primary-light);
}
.fs-kanban-card.client-task[data-priority="high"] {
    background: var(--fs-accent-light);
}
.fs-kanban-card.client-task[data-priority="urgent"] {
    background: #FFE5E5;
}

.fs-kanban-card:hover {
    box-shadow: 
        4px 4px 12px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px) rotate(-0.5deg);
}

.fs-kanban-card.dragging {
    opacity: 0.8;
    transform: rotate(3deg) scale(1.02);
    cursor: grabbing;
    box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.15);
}

/* Completed card styling */
.fs-kanban-card.completed {
    background: var(--fs-gray-50);
    opacity: 0.85;
    position: relative;
}

.fs-kanban-card.completed .fs-kanban-card-title {
    color: var(--fs-gray-500);
    text-decoration: line-through;
    text-decoration-color: var(--fs-gray-400);
}

.fs-kanban-card.completed .fs-kanban-card-description {
    color: var(--fs-gray-400);
}

.fs-kanban-card-completed-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--fs-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.fs-kanban-card-completed-badge .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.fs-kanban-card.completed:hover .fs-kanban-card-actions {
    opacity: 1;
}

.fs-kanban-card.client-task {
    background: var(--fs-secondary-light);
}

.fs-kanban-card.client-task.completed {
    background: var(--fs-gray-100);
}

/* Card Priority Bar - Hidden, using background colors instead */
.fs-kanban-card-priority {
    display: none;
}

/* Card Header */
.fs-kanban-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 12px 0;
}

.fs-kanban-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fs-kanban-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 4px;
    font-weight: 500;
}

.fs-kanban-badge.project {
    background: #fff;
    color: var(--fs-primary-dark);
}

.fs-kanban-badge.internal,
.fs-kanban-badge.generic {
    background: var(--fs-secondary-light);
    color: var(--fs-secondary-dark);
}

.fs-kanban-badge.client {
    background: var(--fs-accent-light);
    color: #C65D45;
}

.fs-kanban-badge.requested {
    background: #fce7f3;
    color: #be185d;
}

.fs-kanban-badge.recurring {
    background: var(--fs-secondary-light, #EDE9F5);
    color: var(--fs-secondary-dark, #5D4E80);
    font-weight: 700;
    font-size: 14px;
    padding: 2px 8px;
    line-height: 1;
}

/* Recurring task form styles */
.fs-recurring-toggle-row {
    padding-top: 8px;
    border-top: 1px solid var(--fs-gray-200, #EEF1F5);
}

.fs-recurring-toggle-row .fs-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fs-recurring-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--fs-secondary-light, #EDE9F5);
    color: var(--fs-secondary-dark, #5D4E80);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    cursor: help;
}

.fs-recurring-options {
    background: var(--fs-gray-50, #FAFBFC);
    border: 1px solid var(--fs-gray-200, #EEF1F5);
    border-radius: var(--fs-border-radius, 8px);
    padding: 16px;
    margin-top: 8px;
}

.fs-recurring-hint {
    margin: 10px 0 0 0;
    font-size: 12px;
    color: var(--fs-gray-500, #9CA3AF);
    font-style: italic;
}

/* Recurring indicator in project task list */
.fs-task-recurring-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--fs-secondary-light, #EDE9F5);
    color: var(--fs-secondary-dark, #5D4E80);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    margin-right: 4px;
    flex-shrink: 0;
}

.fs-kanban-badge.overdue {
    background: #FEE2E2;
    color: #DC2626;
    padding: 3px 6px;
}

.fs-kanban-badge.overdue .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.fs-kanban-badge .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
}

.fs-kanban-card-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.fs-kanban-card:hover .fs-kanban-card-actions {
    opacity: 1;
}

.fs-kanban-card-btn {
    background: none;
    border: none;
    color: var(--fs-gray-400);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s;
}

.fs-kanban-card-btn:hover {
    background: var(--fs-gray-100);
    color: var(--fs-primary);
}

.fs-kanban-card-btn.accept-task-request {
    color: #059669;
}

.fs-kanban-card-btn.accept-task-request:hover {
    background: #ecfdf5;
    color: #047857;
}

.fs-kanban-card-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Card Body */
.fs-kanban-card-body {
    padding: 10px 12px;
}

.fs-kanban-card-title {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 6px;
    color: var(--fs-gray-800);
    line-height: 1.4;
}

.fs-kanban-card-description {
    font-size: 12px;
    color: var(--fs-gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Card Footer */
.fs-kanban-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 12px;
    border-top: 1px solid var(--fs-gray-100);
    margin-top: 4px;
}

.fs-kanban-card-meta {
    display: flex;
    gap: 12px;
}

.fs-kanban-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--fs-gray-600);
}

.fs-kanban-meta-item .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.fs-kanban-meta-item.overdue {
    color: #ef4444;
    font-weight:bold;
}

.fs-kanban-card-assignee {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.fs-kanban-card-assignee.designer {
    background: var(--fs-primary);
    color: var(--fs-primary-xtralight);
}

.fs-kanban-card-assignee.client {
    background: var(--wp-bound-block-color);
    color: var(--fs-secondary-light);
}

.fs-kanban-card-assignee.team {
    background: var(--fs-secondary);
    color: #fff;
}

.fs-kanban-card-assignee .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Tasks Page Header (List View) */
.fs-tasks-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.fs-tasks-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.fs-tasks-header-left h1 {
    margin: 0;
}

/* Form Row Group */
.fs-form-row-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Responsive */
@media (max-width: 1200px) {
    .fs-kanban-column {
        flex: 0 0 300px;
        min-width: 300px;
    }
}

@media (max-width: 768px) {
    .fs-kanban-board {
        flex-direction: column;
    }
    
    .fs-kanban-column {
        flex: none;
        min-width: 100%;
    }
    
    .fs-kanban-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .fs-form-row-group {
        grid-template-columns: 1fr;
    }
} 
/* ====================================================================== */
/* Quarterly Tax Section
/* ====================================================================== */

.fs-quarterly-tax-section {
    grid-column: 1 / -1;
}

.fs-section-description {
    color: var(--fs-gray-600);
    font-size: 14px;
    margin-top: -15px;
    margin-bottom: 20px;
}

.fs-tax-warning {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.fs-tax-warning .dashicons {
    color: #856404;
    font-size: 24px;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.fs-tax-warning p {
    margin: 4px 0;
}

.fs-tax-warning a {
    color: #2271b1;
    font-weight: 600;
    text-decoration: none;
}

.fs-tax-warning a:hover {
    text-decoration: underline;
}

.fs-tax-info {
    background: var(--fs-primary-xtralight);
    border-left: 4px solid var(--fs-primary);
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.fs-tax-info p {
    margin: 0;
    font-size: 14px;
}

.fs-tax-info-note {
    margin-top: 8px !important;
    font-size: 13px !important;
    color: var(--fs-gray-600);
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.fs-tax-info-note .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--fs-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.fs-quarterly-tax-table-container {
    overflow-x: auto;
    margin: 20px 0;
}

.fs-quarterly-tax-table {
    width: 100%;
    border-collapse: collapse;
}

.fs-quarterly-tax-table thead {
    background: var(--fs-gray-100);
}

.fs-quarterly-tax-table th {
    padding: 16px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: var(--fs-gray-700);
    border-bottom: 2px solid var(--fs-gray-300);
}

.fs-quarterly-tax-table th small {
    display: block;
    font-size: 11px;
    font-weight: 500;
    margin-top: 4px;
    color: var(--fs-gray-500);
}

.fs-quarterly-tax-table td {
    padding: 16px 12px;
    border-bottom: 1px solid var(--fs-gray-200);
    font-size: 14px;
}

.fs-quarterly-tax-table tbody tr:hover {
    background: var(--fs-gray-50);
}

.fs-quarterly-tax-table tbody tr.paid-row {
    background: var(--fs-primary-xtralight);
}

.fs-quarterly-tax-table tbody tr.paid-row:hover {
    background: #cef0eb;
}

.fs-quarterly-tax-table tfoot {
    background: var(--fs-gray-100);
    border-top: 2px solid var(--fs-gray-300);
}

.fs-quarterly-tax-table tfoot td {
    padding: 16px 12px;
    font-size: 14px;
    border-bottom: none;
}

.fs-totals-row td {
    font-weight: 600;
}

.fs-actual-payment-input {
    width: 110px;
    padding: 8px 12px;
    border: 2px solid var(--fs-gray-300);
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    text-align: right;
}

.fs-actual-payment-input:focus {
    outline: none;
    border-color: var(--fs-primary);
    box-shadow: 0 0 0 3px rgba(62, 207, 178, 0.15);
}

.fs-actual-payment-input.success {
    border-color: var(--fs-primary);
    background: var(--fs-primary-xtralight);
}

.fs-actual-payment-input.error {
    border-color: var(--fs-danger);
    background: #fff5f5;
}

.fs-variance {
    font-weight: 600;
}

.fs-variance.positive {
    color: var(--fs-primary-dark);
}

.fs-variance.negative {
    color: var(--fs-danger);
}

.fs-tax-notes {
    background: var(--fs-gray-100);
    border-radius: 8px;
    padding: 16px 20px;
    margin-top: 20px;
}

.fs-tax-notes p {
    margin: 8px 0;
    font-size: 13px;
    color: var(--fs-gray-600);
}

.fs-tax-notes p:first-child {
    margin-top: 0;
}

.fs-tax-notes p:last-child {
    margin-bottom: 0;
}

.fs-tax-notes strong {
    color: var(--fs-gray-800);
}

/* ============================================
   v3.8.0 - Batch Invoice Actions
   ============================================ */
.fs-batch-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, var(--fs-secondary-light) 0%, #f0f7ff 100%);
    border: 1px solid var(--fs-secondary);
    border-radius: var(--fs-border-radius);
    padding: 12px 20px;
    margin-bottom: 15px;
}

.fs-batch-count {
    font-weight: 600;
    color: var(--fs-secondary-dark);
}

.column-cb {
    width: 30px !important;
    text-align: center;
}

.column-cb input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* ============================================
   v3.8.0 - Export Tools Section
   ============================================ */
.fs-export-tools {
    background: var(--fs-gray-50);
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius-lg);
    padding: 20px 25px;
    margin-bottom: 30px;
}

.fs-export-tools h2 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: var(--fs-gray-800);
}

.fs-export-buttons {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.fs-export-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fs-export-group h4 {
    margin: 0 0 5px 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fs-gray-500);
}

.fs-export-group .fs-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-start;
}

.fs-export-group .fs-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Spinning animation for loading state */
.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   v3.8.0 - Retainer Tracking
   ============================================ */
.fs-retainer-summary {
    background: var(--fs-info);
    border: none;
    border-radius: var(--fs-border-radius-lg);
    padding: 20px;
    margin-bottom: 20px;
}

.fs-retainer-summary h4,
.fs-retainer-summary h3 {
    margin: 0 0 15px 0;
    color: var(--fs-gray-100);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Push the reset button to the right side of the header */
.fs-retainer-reset-btn {
    margin-left: auto !important;
    font-size: 11px !important;
    padding: 3px 10px !important;
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.3) !important;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fs-retainer-reset-btn:hover {
    background: rgba(255,255,255,0.25) !important;
    color: #fff !important;
}

.fs-retainer-reset-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: #fff !important;
}

.fs-retainer-period-label {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    margin: -8px 0 12px 0;
}

/* Reset day row in the project form */
.fs-retainer-reset-day-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.fs-retainer-reset-day-row label {
    font-size: 13px;
    color: var(--fs-gray-700);
    white-space: nowrap;
}

.fs-retainer-reset-day-select {
    font-size: 13px;
    padding: 4px 8px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    background: #fff;
    color: var(--fs-gray-700);
}

.fs-retainer-reset-day-select:focus {
    border-color: var(--fs-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(31,187,166,0.15);
}

.fs-reset-day-hint {
    font-size: 11px;
    color: var(--fs-gray-500);
}

.fs-high-contrast .fs-retainer-reset-day-select {
    border-color: #000;
    color: #000;
}

@media (max-width: 600px) {
    .fs-retainer-reset-day-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

.fs-retainer-summary h4 .dashicons,
.fs-retainer-summary h3 .dashicons {
    color: var(--fs-gray-100);
}

.fs-retainer-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
}

.fs-retainer-stat {
    text-align: center;
}

.fs-retainer-stat .label,
.fs-retainer-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 4px;
}

.fs-retainer-stat .value,
.fs-retainer-stat-value {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.fs-retainer-stat .value.positive,
.fs-retainer-stat-value.fs-text-success {
    color: var(--fs-highlight);
}

.fs-retainer-stat .value.warning {
    color: var(--fs-accent-light);
}

.fs-retainer-stat .value.danger,
.fs-retainer-stat-value.fs-text-danger {
    color: #ff8a8a;
}

.fs-retainer-stat-value.fs-text-info {
    color: var(--fs-highlight);
}

.fs-retainer-progress {
    margin-top: 15px;
}

.fs-retainer-progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    overflow: hidden;
}

.fs-retainer-progress-fill {
    height: 100%;
    background: var(--fs-pink-coral);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.fs-retainer-progress-fill.warning {
    background: var(--fs-accent);
}

.fs-retainer-progress-fill.danger {
    background: var(--fs-danger);
}

.fs-retainer-billing-summary {
    margin-top: 15px;
    padding: 12px 14px;
    background: var(--fs-primary-xtralight);
    border-radius: var(--fs-border-radius);
    border-top: none;
}

.fs-retainer-billing-item {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--fs-gray-700);
    padding: 3px 0;
}

.fs-retainer-billing-total {
    font-weight: 600;
    border-top: 1px solid var(--fs-primary-light);
    margin-top: 4px;
    padding-top: 6px;
    color: var(--fs-gray-900);
}

.fs-retainer-billing-item.fs-text-warning {
    color: var(--fs-warning);
}

.fs-high-contrast .fs-retainer-billing-summary {
    border: 2px solid var(--fs-primary);
}

/* ============================================
   v3.8.1 - Export Sidebar Styles
   ============================================ */
.fs-export-sidebar {
    background: var(--fs-gray-50);
}

.fs-export-sidebar h2 {
    margin-bottom: 15px;
}

.fs-export-sidebar-group {
    margin-bottom: 20px;
}

.fs-export-sidebar-group:last-of-type {
    margin-bottom: 15px;
}

.fs-export-sidebar-group h4 {
    margin: 0 0 10px 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fs-gray-500);
}

.fs-export-sidebar-group .fs-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: flex-start;
    margin-bottom: 8px;
}

.fs-export-sidebar-group .fs-btn:last-child {
    margin-bottom: 0;
}

.fs-export-sidebar-group .fs-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.fs-export-sidebar .description {
    font-size: 11px;
    color: var(--fs-gray-500);
    margin: 0;
    line-height: 1.4;
}

/* Reporting sidebar: stack Top Clients + Export in one grid cell */
.fs-report-sidebar-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.fs-report-sidebar-stack .fs-report-section {
    flex: none;
}

/* Reporting page two-column layout */
.fs-report-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    margin-bottom: 30px;
    align-items: start;
}

.fs-report-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

@media (max-width: 960px) {
    .fs-report-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   v3.8.1 - Retainer Section Styles
   ============================================ */
.fs-retainer-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--fs-gray-200);
}

.fs-retainer-fields {
    margin-top: 15px;
    padding: 20px;
    background: var(--fs-gray-50);
    border-radius: var(--fs-border-radius);
    border: 1px solid var(--fs-gray-200);
}

/* v3.8.5 - New retainer input layout */
.fs-retainer-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.fs-retainer-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fs-retainer-input-group label {
    font-weight: 500;
    color: var(--fs-gray-700);
    font-size: 13px;
}

/* Currency input with $ prefix */
.fs-currency-input {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    overflow: hidden;
    background: #fff;
}

.fs-currency-input:focus-within {
    border-color: var(--fs-primary);
    box-shadow: 0 0 0 2px rgba(62, 207, 178, 0.1);
}

.fs-currency-symbol {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--fs-gray-100);
    border-right: 1px solid var(--fs-gray-300);
    color: var(--fs-gray-600);
    font-size: 14px;
    font-weight: 500;
}

.fs-currency-input input[type="number"] {
    flex: 1;
    border: none !important;
    padding: 10px 12px !important;
    font-size: 14px;
    outline: none;
    background: transparent;
    min-width: 0;
    -moz-appearance: textfield;
}

.fs-currency-input input[type="number"]::-webkit-outer-spin-button,
.fs-currency-input input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hours input with hrs suffix */
.fs-hours-input {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    overflow: hidden;
    background: #fff;
}

.fs-hours-input:focus-within {
    border-color: var(--fs-primary);
    box-shadow: 0 0 0 2px rgba(62, 207, 178, 0.1);
}

.fs-hours-input input[type="number"] {
    flex: 1;
    border: none !important;
    padding: 10px 12px !important;
    font-size: 14px;
    outline: none;
    background: transparent;
    min-width: 0;
    -moz-appearance: textfield;
}

.fs-hours-input input[type="number"]::-webkit-outer-spin-button,
.fs-hours-input input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fs-hours-suffix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--fs-gray-100);
    border-left: 1px solid var(--fs-gray-300);
    color: var(--fs-gray-600);
    font-size: 14px;
}

.fs-retainer-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 15px;
    padding: 12px;
    background: var(--fs-secondary-light);
    border-radius: var(--fs-border-radius);
    font-size: 12px;
    color: var(--fs-secondary-dark);
    line-height: 1.4;
}

.fs-retainer-info .dashicons {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    font-size: 16px;
    margin-top: 1px;
}

/* Legacy input styles - keep for backwards compatibility */
.fs-input-with-prefix {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.fs-input-with-prefix .fs-input-prefix {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fs-gray-500);
    font-size: 14px;
    font-weight: 500;
    pointer-events: none;
    z-index: 1;
}

.fs-input-with-prefix input[type="number"],
.fs-input-with-prefix input[type="text"] {
    padding-left: 32px !important;
    width: 100% !important;
}

/* ============================================
   v3.8.2 - Retainer Service Note
   ============================================ */
.fs-retainer-note {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--fs-secondary-light);
    border-radius: var(--fs-border-radius);
    font-size: 12px;
    color: var(--fs-secondary-dark);
    margin-top: 8px;
}

.fs-retainer-note .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: var(--fs-secondary);
}

/* v3.9.0 - Retainer service pricing fields */
.fs-retainer-service-fields {
    width: 100%;
    margin-top: 12px;
    padding: 15px;
    background: var(--fs-primary-xtralight);
    border-radius: var(--fs-border-radius);
    border: 1px solid var(--fs-primary-light);
}

.fs-retainer-service-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.fs-retainer-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fs-retainer-field label {
    font-size: 12px;
    font-weight: 500;
    color: var(--fs-gray-600);
}

.fs-retainer-field .fs-currency-input,
.fs-retainer-field .fs-hours-input {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    overflow: hidden;
}

.fs-retainer-field .fs-currency-symbol {
    padding: 8px 10px;
    background: var(--fs-gray-100);
    color: var(--fs-gray-600);
    font-size: 13px;
    border-right: 1px solid var(--fs-gray-300);
}

.fs-retainer-field .fs-hours-suffix,
.fs-retainer-field .fs-rate-suffix {
    padding: 8px 10px;
    background: var(--fs-gray-100);
    color: var(--fs-gray-600);
    font-size: 12px;
    border-left: 1px solid var(--fs-gray-300);
    white-space: nowrap;
}

.fs-retainer-field input[type="number"] {
    flex: 1;
    padding: 8px 10px;
    border: none;
    font-size: 14px;
    min-width: 0;
}

.fs-retainer-field input[type="number"]:focus {
    outline: none;
    box-shadow: none;
}

.fs-retainer-options {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--fs-primary-light);
}

.fs-retainer-options .fs-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--fs-gray-700);
    cursor: pointer;
}

.fs-retainer-options .fs-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--fs-primary);
}

/* v7.9.0 - Hour Cap fields */
.fs-hour-cap-fields {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--fs-gray-200);
}

.fs-hour-cap-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fs-gray-700);
    cursor: pointer;
}

.fs-hour-cap-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--fs-primary);
}

.fs-hour-cap-options {
    margin-top: 12px;
    padding: 12px;
    background: var(--fs-gray-50);
    border-radius: var(--fs-border-radius);
    border: 1px solid var(--fs-gray-200);
}

.fs-hour-cap-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 12px;
}

.fs-hour-cap-field label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--fs-gray-600);
    margin-bottom: 4px;
}

.fs-hour-cap-field .fs-hours-input,
.fs-hour-cap-field .fs-currency-input {
    display: flex;
    align-items: center;
}

.fs-hour-cap-field input[type="number"] {
    width: 100%;
    max-width: 120px;
}

.fs-hour-cap-options > .fs-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--fs-gray-600);
    cursor: pointer;
}

.fs-hour-cap-options > .fs-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--fs-primary);
}

.fs-cap-notify-hint {
    font-size: 12px;
    color: var(--fs-gray-500);
    font-style: italic;
    margin-left: 4px;
}

.fs-hour-cap-notify-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.fs-hour-cap-notify-row .fs-checkbox-label {
    margin: 0;
}

.fs-hour-cap-contact-select {
    font-size: 13px;
    padding: 4px 8px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    background: #fff;
    color: var(--fs-gray-700);
    max-width: 280px;
}

.fs-hour-cap-contact-select:focus {
    border-color: var(--fs-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(31, 187, 166, 0.15);
}

/* High contrast overrides */
.fs-high-contrast .fs-hour-cap-contact-select {
    border-color: #000;
    color: #000;
}

.fs-hour-cap-warn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.fs-hour-cap-warn-row .fs-checkbox-label {
    margin: 0;
    white-space: nowrap;
}

.fs-hour-cap-warn-fields {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fs-warn-threshold-input {
    width: 80px;
}

.fs-warn-threshold-input input[type="number"] {
    width: 100%;
}

.fs-warn-label {
    font-size: 13px;
    color: var(--fs-gray-600);
    white-space: nowrap;
}

.fs-high-contrast .fs-warn-label {
    color: #000;
}

@media (max-width: 768px) {
    .fs-hour-cap-warn-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .fs-hour-cap-notify-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .fs-hour-cap-contact-select {
        max-width: 100%;
        width: 100%;
    }
}

/* v7.9.0 - Over Cap badge for capped hourly widget */
.fs-badge-warning {
    background: var(--fs-accent-light) !important;
    color: #C65D45 !important;
}

/* High contrast - hour cap */
.fs-high-contrast .fs-hour-cap-options {
    border-color: var(--fs-gray-400);
}

@media (max-width: 768px) {
    .fs-hour-cap-row {
        grid-template-columns: 1fr;
    }
}

/* Responsive retainer fields */
@media (max-width: 768px) {
    .fs-retainer-service-row {
        grid-template-columns: 1fr;
    }
}

/* v3.9.0 - Retainer widget timer wrapper */
.fs-retainer-timer-wrapper .fs-retainer-widget {
    margin: 20px 0;
    padding: 20px;
    background: var(--fs-teal-purple);
    border: none;
    border-radius: var(--fs-border-radius-lg);
}

.fs-retainer-timer-wrapper .fs-retainer-widget h4 {
    color: var(--fs-gray-100);
}

.fs-retainer-timer-wrapper .fs-retainer-stat-label {
    color: rgba(255, 255, 255, 0.8);
}

.fs-retainer-timer-wrapper .fs-retainer-stat-value {
    color: #fff;
}

.fs-retainer-timer-wrapper .fs-retainer-progress-bar {
    background: rgba(255, 255, 255, 0.3);
}

.fs-retainer-timer-wrapper .fs-retainer-progress-fill {
    background: var(--fs-pink-coral);
}

.fs-retainer-timer-wrapper .fs-retainer-progress-label {
    color: rgba(255, 255, 255, 0.9);
}

.fs-retainer-timer-wrapper .fs-retainer-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.fs-retainer-timer-wrapper .fs-retainer-billing-summary {
    background: var(--fs-primary-xtralight);
    border-top-color: var(--fs-primary-light);
}

.fs-retainer-timer-wrapper .fs-retainer-billing-item {
    color: var(--fs-gray-700);
}

/* v3.8.2 - Retainer widget on timer tab */
.fs-retainer-timer-widget {
    margin: 20px 0;
    padding: 20px;
    background: var(--fs-info);
    border: none;
    border-radius: var(--fs-border-radius-lg);
}

.fs-retainer-timer-widget h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 15px 0;
    font-size: 14px;
    color: var(--fs-gray-100);
}

.fs-retainer-timer-widget h3 .dashicons {
    color: var(--fs-gray-100);
}

.fs-retainer-badge {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 10px;
    margin-left: auto;
}

.fs-retainer-progress-label {
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 8px;
}

.fs-text-info {
    color: var(--fs-highlight) !important;
}

/* Client Tasks UI */
.fs-task-client-subtext {
    display: block;
    font-size: 11px;
    color: var(--fs-gray-500);
    margin-top: 2px;
}

.fs-internal-badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 6px;
    background: var(--fs-secondary-light);
    color: var(--fs-secondary-dark);
    border-radius: 10px;
    margin-left: 6px;
    font-weight: 500;
    text-transform: uppercase;
}

.fs-section-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--fs-gray-700);
    margin: 20px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-task-count-badge {
    font-size: 13px;
    color: var(--fs-gray-600);
}

.fs-empty-hint {
    font-size: 13px;
    color: var(--fs-gray-500);
    margin-top: 8px;
}

/* Internal Tasks Dashboard Widget */
.fs-internal-tasks-widget {
    padding: 0;
}

.fs-internal-tasks-widget .fs-task-item {
    display: flex;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-internal-tasks-widget .fs-task-item:last-child {
    border-bottom: none;
}

.fs-internal-tasks-widget .fs-task-checkbox-wrapper {
    margin-right: 12px;
    flex-shrink: 0;
}

.fs-internal-tasks-widget .fs-task-content {
    flex: 1;
    min-width: 0;
}

.fs-internal-tasks-widget .fs-task-title {
    font-weight: 500;
    color: var(--fs-gray-800);
    margin-bottom: 4px;
}

.fs-internal-tasks-widget .fs-task-meta {
    font-size: 12px;
    color: var(--fs-gray-500);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.fs-internal-tasks-widget .fs-task-meta .overdue {
    color: var(--fs-danger);
    font-weight: 500;
}

.fs-tasks-table .task-completed {
    opacity: 0.6;
}

.fs-tasks-table .task-completed .fs-task-title {
    text-decoration: line-through;
}

/* ============================================
   Recurring Invoice View Styles
   ============================================ */

.fs-header-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fs-header-title-group h1 {
    margin: 0;
}

.fs-header-client {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--fs-gray-100);
    border-radius: var(--fs-border-radius);
    font-size: 14px;
    color: var(--fs-gray-700);
}

.fs-header-client .dashicons {
    color: var(--fs-gray-500);
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.fs-header-client a {
    color: var(--fs-gray-800);
    text-decoration: none;
    font-weight: 500;
}

.fs-header-client a:hover {
    color: var(--fs-primary);
}

.fs-header-project-link {
    color: var(--fs-gray-500);
}

.fs-recurring-stats {
    grid-template-columns: repeat(4, 1fr);
}

.fs-stat-icon {
    width: 48px;
    height: 48px;
    background: var(--fs-primary-xtralight);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.fs-stat-card.warning .fs-stat-icon {
    background: var(--fs-accent-light);
    border: 2px solid var(--fs-accent);
}

.fs-stat-card.warning .fs-stat-icon .dashicons {
    color: var(--fs-accent);
}

.fs-stat-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fs-stat-label {
    font-size: 12px;
    color: var(--fs-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.fs-stat-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--fs-gray-800);
}

.fs-stat-value.warning {
    color: var(--fs-accent);
}

.fs-due-badge {
    display: inline-block;
    background: var(--fs-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    text-transform: uppercase;
    vertical-align: middle;
}

.fs-recurring-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fs-detail-list {
    display: flex;
    flex-direction: column;
}

.fs-detail-list .fs-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-detail-list .fs-detail-row:last-child {
    border-bottom: none;
}

.fs-detail-list .fs-detail-label {
    color: var(--fs-gray-600);
    font-size: 14px;
}

.fs-detail-list .fs-detail-value {
    font-weight: 500;
    color: var(--fs-gray-800);
}

.fs-text-primary {
    color: var(--fs-primary) !important;
}

.fs-text-large {
    font-size: 18px !important;
}

/* Clean table styling */
.fs-table {
    width: 100%;
    border-collapse: collapse;
}

.fs-table th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 500;
    color: var(--fs-gray-600);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--fs-gray-200);
    background: var(--fs-gray-50);
}

.fs-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--fs-gray-200);
    color: var(--fs-gray-700);
}

.fs-table tbody tr:hover {
    background: var(--fs-gray-50);
}

.fs-table-number {
    text-align: right !important;
}

.fs-table-total-label {
    text-align: right;
    font-weight: 600;
    color: var(--fs-gray-700);
}

.fs-table-total {
    font-weight: 700;
    color: var(--fs-primary-dark);
    font-size: 16px;
}

.fs-table tfoot td {
    border-top: 2px solid var(--fs-gray-300);
    border-bottom: none;
    padding-top: 16px;
}

.fs-action-buttons-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.fs-action-buttons-row .fs-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fs-action-buttons-row .fs-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

@media (max-width: 1200px) {
    .fs-recurring-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .fs-recurring-stats {
        grid-template-columns: 1fr;
    }
    
    .fs-header-title-group {
        flex-wrap: wrap;
    }
    
    .fs-action-buttons-row {
        flex-direction: column;
    }
    
    .fs-action-buttons-row .fs-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Bookings Page Layout
   ========================================================================== */

.fs-bookings-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    margin-top: 20px;
}

.fs-bookings-main {
    min-width: 0;
}

.fs-bookings-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fs-bookings-sidebar .fs-card {
    margin: 0;
}

.fs-bookings-sidebar .fs-widget {
    padding: 10px;
}

.fs-bookings-sidebar .fs-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--fs-gray-200);
    margin: 0;
}

.fs-bookings-sidebar .fs-card-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.fs-bookings-sidebar .fs-widget-calendar-list {
    padding: 12px;
}

.fs-bookings-sidebar .fs-widget-no-events {
    padding: 30px 20px;
    text-align: center;
    color: var(--fs-gray-500);
}

.fs-bookings-sidebar .fs-widget-no-events .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
    opacity: 0.5;
}

.fs-bookings-sidebar .fs-widget-no-events p {
    margin: 0;
    font-size: 13px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .fs-bookings-layout {
        grid-template-columns: 1fr;
    }
    
    .fs-bookings-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .fs-bookings-sidebar .fs-card {
        flex: 1;
        min-width: 280px;
    }
}

/* ==========================================================================
   COMPREHENSIVE RESPONSIVE STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLET BREAKPOINT (1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* Form grid layouts - stack sidebar below main */
    .fs-form-grid,
    .fs-form-container {
        grid-template-columns: 1fr;
    }
    
    .fs-form-sidebar {
        order: 2;
    }
    
    /* Project view tabs */
    .fs-project-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Two column layouts */
    .fs-two-col-layout {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   TABLET/MOBILE BREAKPOINT (782px) - WordPress Admin breakpoint
   -------------------------------------------------------------------------- */
@media (max-width: 782px) {
    /* Base wrap padding */
    .fs-wrap {
        padding: 15px 10px;
        overflow-x: hidden;
    }
    
    /* Stats grid - 2 columns on tablet, will be 1 on phone */
    .fs-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .fs-stat-card {
        padding: 16px;
    }
    
    /* List headers with buttons */
    .fs-list-header {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .fs-header-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .fs-header-actions .fs-btn {
        flex: 1;
        min-width: 120px;
        text-align: center;
        justify-content: center;
    }
    
    .fs-header-filters {
        width: 100%;
        display: flex;
        gap: 8px;
    }
    
    /* Filter panels - stack vertically */
    .fs-filters {
        flex-direction: column;
        gap: 10px;
    }
    
    .fs-filters form {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .fs-filters select,
    .fs-filter-select {
        width: 100%;
    }
    
    .fs-filter-form {
        flex-wrap: wrap;
    }
    
    .fs-filter-group {
        flex: 1 1 calc(50% - 8px);
        min-width: 140px;
    }
    
    /* Tables - horizontal scroll wrapper */
    .fs-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -10px;
        padding: 0 10px;
    }
    
    .fs-table,
    .wp-list-table {
        min-width: 600px;
    }
    
    /* Table cell padding reduction */
    .fs-table th,
    .fs-table td {
        padding: 10px 8px;
        font-size: 13px;
    }
    
    /* Hide less important columns on mobile */
    .fs-table .column-ends,
    .fs-table .column-project,
    .wp-list-table .column-ends,
    .wp-list-table .column-project {
        display: none;
    }
    
    /* Form rows - stack vertically */
    .fs-form-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .fs-form-row > .fs-form-group,
    .fs-form-row > .fs-form-field {
        min-width: 100%;
    }
    
    /* Column classes override */
    .fs-col-1, .fs-col-2, .fs-col-3, .fs-col-4, .fs-col-5, .fs-col-6,
    .fs-col-7, .fs-col-8, .fs-col-9, .fs-col-10, .fs-col-11, .fs-col-12,
    .fs-col-35 {
        flex: 0 0 100%;
    }
    
    /* Modals - full width */
    .fs-modal-content {
        width: 95%;
        max-width: none;
        margin: 10px;
        max-height: calc(100vh - 20px);
    }
    
    .fs-modal-body {
        max-height: calc(100vh - 160px);
    }
    
    /* Invoice preview */
    .fs-invoice-preview {
        padding: 20px;
        margin: 15px 0;
    }
    
    .fs-preview-header {
        flex-direction: column;
        gap: 20px;
    }
    
    /* Project view header */
    .fs-project-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .fs-project-header-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    /* Tab navigation - scrollable */
    .fs-tab-nav,
    .nav-tab-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
    
    /* Kanban board - horizontal scroll */
    .fs-kanban-board {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }
    
    .fs-kanban-columns {
        min-width: max-content;
    }
    
    .fs-kanban-column {
        min-width: 260px;
    }
    
    /* Calendar - smaller cells */
    .fs-calendar-grid {
        font-size: 12px;
    }
    
    .fs-calendar-day {
        min-height: 60px;
        padding: 4px;
    }
    
    /* View toggle buttons */
    .fs-view-toggle {
        flex-wrap: wrap;
    }
    
    /* Booking link section */
    .fs-booking-link {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .fs-booking-link a {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Timer widget */
    .fs-timer-quickadd-container {
        flex-direction: column;
    }
    
    /* Card layouts */
    .fs-card {
        margin: 0 0 15px 0;
    }
    
    /* Empty states */
    .fs-empty-state {
        padding: 30px 20px;
    }
    
    /* Action buttons in rows */
    .fs-row-menu-dropdown {
        right: auto;
        left: 0;
    }
    
    /* Batch actions bar */
    .fs-batch-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* --------------------------------------------------------------------------
   MOBILE BREAKPOINT (600px)
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    /* Stats grid - single column */
    .fs-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .fs-stats-grid.secondary {
        grid-template-columns: 1fr;
    }
    
    /* Hide more columns on phone */
    .fs-table .column-client,
    .fs-table .column-starts,
    .fs-table .column-meeting,
    .wp-list-table .column-client,
    .wp-list-table .column-starts {
        display: none;
    }
    
    /* Show only essential columns */
    .fs-table th:first-child,
    .fs-table td:first-child,
    .fs-table .column-status,
    .fs-table .column-amount,
    .fs-table .column-actions {
        display: table-cell;
    }
    
    /* Filter groups - full width */
    .fs-filter-group {
        flex: 1 1 100%;
    }
    
    /* Header actions - stack */
    .fs-header-actions {
        flex-direction: column;
    }
    
    .fs-header-actions .fs-btn {
        width: 100%;
    }
    
    /* Tab nav - compact on mobile */
    .fs-tab-nav .fs-tab,
    .fs-tab-nav .fs-tab-link,
    .nav-tab-wrapper .nav-tab {
        padding: 8px 14px;
        font-size: 11px;
    }
    
    /* Forms - more compact */
    .fs-form-section {
        padding: 16px;
    }
    
    .fs-form-section h2 {
        font-size: 15px;
    }
    
    /* Report summary grid */
    .fs-report-summary {
        grid-template-columns: 1fr;
    }
    
    /* Time tracking filters */
    .fs-timer-quickadd-container .fs-timer-form-row {
        grid-template-columns: 1fr;
    }
    
    /* Invoiced status dropdown */
    .fs-inline-status-select {
        font-size: 11px;
        padding: 4px 6px;
    }
    
    /* Calendar navigation */
    .fs-calendar-nav {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    
    /* Project tabs - wrap */
    .fs-project-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .fs-project-tabs a {
        flex: 1;
        min-width: calc(33% - 5px);
        text-align: center;
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* --------------------------------------------------------------------------
   SMALL MOBILE BREAKPOINT (480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    /* Minimal table - show name and actions only */
    .fs-table th,
    .fs-table td {
        padding: 8px 6px;
    }
    
    /* Status badges smaller */
    .fs-status-badge {
        padding: 3px 8px;
        font-size: 10px;
    }
    
    /* Modal footer buttons */
    .fs-modal-footer {
        flex-direction: column;
        gap: 8px;
    }
    
    .fs-modal-footer .fs-btn {
        width: 100%;
    }
    
    /* Service item grid in forms */
    .fs-service-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    /* Currency amounts */
    .fs-stat-value {
        font-size: 20px;
    }
    
    /* Breadcrumbs */
    .fs-breadcrumb {
        font-size: 12px;
    }
    
    /* Quick add button */
    .fs-quick-add-btn {
        padding: 10px;
        font-size: 13px;
    }
}

/* --------------------------------------------------------------------------
   UTILITY CLASSES FOR RESPONSIVE BEHAVIOR
   -------------------------------------------------------------------------- */

/* Hide on mobile */
@media (max-width: 782px) {
    .fs-hide-mobile {
        display: none !important;
    }
    
    .fs-header-preview-pair,
    .fs-logo-usage-map {
        grid-template-columns: 1fr;
    }
}

/* Hide on desktop */
@media (min-width: 783px) {
    .fs-hide-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
@media (min-width: 783px) {
    .fs-mobile-only {
        display: none !important;
    }
}

@media (max-width: 782px) {
    .fs-mobile-only {
        display: block !important;
    }
    .fs-mobile-only.fs-projects-grid {
        display: grid !important;
    }
    .fs-desktop-only {
        display: none !important;
    }
}

/* ===== Project Cards (mobile) ===== */
.fs-projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.fs-project-card {
    background: #fff;
    border-radius: var(--fs-border-radius-lg);
    box-shadow: var(--fs-shadow);
    overflow: visible;
    transition: box-shadow 0.2s;
    position: relative;
    z-index: 1;
}

.fs-project-card:hover {
    box-shadow: var(--fs-shadow-md);
}

.fs-project-card:has(.fs-card-actions-menu.open) {
    z-index: 10;
}

.fs-project-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 12px;
}

.fs-project-card-header .fs-avatar-sm {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.fs-project-card-header .fs-avatar-sm .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #fff;
}

.fs-project-card-header .fs-avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.fs-project-card-info {
    flex: 1;
    min-width: 0;
}

.fs-project-card-name {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.fs-project-card-name a {
    color: var(--fs-gray-900);
    text-decoration: none;
}

.fs-project-card-client {
    font-size: 13px;
    color: var(--fs-gray-500);
    margin: 2px 0 0;
}

.fs-project-card-stats {
    display: flex;
    justify-content: space-evenly;
    padding: 12px 16px;
    border-top: 1px solid var(--fs-gray-100);
}

/* ===== Mobile Invoice List ===== */
.fs-invoice-mobile-list {
    background: #fff;
    border-radius: var(--fs-border-radius-lg);
    box-shadow: var(--fs-shadow);
    overflow: hidden;
}

.fs-invoice-mobile-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    text-decoration: none;
    border-bottom: 1px solid var(--fs-gray-100);
    transition: background 0.15s;
}

.fs-invoice-mobile-row:last-child {
    border-bottom: none;
}

.fs-invoice-mobile-row:active {
    background: var(--fs-gray-50);
}

.fs-invoice-mobile-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.fs-invoice-mobile-client {
    font-size: 16px;
    font-weight: 600;
    color: var(--fs-gray-900);
    line-height: 1.3;
}

.fs-invoice-mobile-number {
    font-size: 13px;
    color: var(--fs-gray-500);
}

.fs-invoice-mobile-left .fs-status-badge {
    align-self: flex-start;
    margin-top: 2px;
}

.fs-invoice-mobile-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.fs-invoice-mobile-amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--fs-gray-900);
}

.fs-invoice-mobile-date {
    font-size: 13px;
    color: var(--fs-gray-500);
}

.fs-invoice-mobile-date.fs-text-danger {
    color: var(--fs-danger);
}

/* Table responsive wrapper */
.fs-table-responsive {
    position: relative;
}

/* Only add horizontal scroll on smaller screens */
@media (max-width: 1024px) {
    .fs-table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Allow dropdown menus to show */
        overflow-y: visible;
        padding-bottom: 150px;
        margin-bottom: -150px;
    }
}

/* Ensure buttons don't overflow */
.fs-btn {
    white-space: nowrap;
}

/* Touch-friendly tap targets */
@media (max-width: 782px) {
    .fs-btn,
    .button,
    .fs-action-link,
    .fs-icon-btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .fs-btn-small {
        min-height: 36px;
        padding: 8px 12px;
    }
    
    /* Larger checkboxes on touch */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 20px;
        min-height: 20px;
    }
    
    /* More space for row menu triggers */
    .fs-row-menu-trigger {
        padding: 8px 12px;
        font-size: 18px;
    }
}

/* ============================================
   Proposal Custom Sections (v4.0.13)
   ============================================ */

.fs-custom-sections-container {
    margin-top: 20px;
}

.fs-custom-sections-container .fs-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.fs-custom-sections-container .fs-section-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.fs-custom-sections-container .fs-dropdown {
    position: relative;
}

.fs-custom-sections-container .fs-dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid var(--fs-gray-300, #e2e6ec);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 200px;
    z-index: 100;
    padding: 5px 0;
    margin-top: 5px;
}

.fs-custom-sections-container .fs-dropdown-menu a {
    display: block;
    padding: 10px 15px;
    color: var(--fs-gray-800, #374151);
    text-decoration: none;
    transition: background 0.15s;
}

.fs-custom-sections-container .fs-dropdown-menu a:hover {
    background: var(--fs-gray-100, #f5f7fa);
}

.fs-custom-sections-list {
    min-height: 50px;
}

.fs-custom-section-item {
    background: #fff;
    border: 1px solid var(--fs-gray-300, #e2e6ec);
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
}

.fs-custom-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: var(--fs-gray-50, #fafbfc);
    border-bottom: 1px solid var(--fs-gray-200, #eef1f5);
}

.fs-custom-section-header .fs-section-drag {
    cursor: move;
    color: var(--fs-gray-400, #c5cad3);
    font-size: 14px;
    user-select: none;
}

.fs-custom-section-title {
    flex: 1;
    border: 1px solid var(--fs-gray-300, #e2e6ec);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
}

.fs-custom-section-title:focus {
    border-color: var(--fs-primary, #3ECFB2);
    outline: none;
    box-shadow: 0 0 0 2px rgba(62, 207, 178, 0.2);
}

.fs-save-section-template {
    padding: 4px 8px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.fs-save-section-template .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin: 0;
}

.fs-save-section-template:hover .dashicons {
    color: var(--fs-accent, #FFA26E);
}

.fs-remove-custom-section {
    background: transparent;
    border: none;
    color: var(--fs-gray-400, #c5cad3);
    font-size: 20px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.15s;
}

.fs-remove-custom-section:hover {
    color: var(--fs-danger, #E85A5A);
}

.fs-custom-section-body {
    padding: 15px;
}

.fs-custom-section-body textarea.fs-custom-section-content {
    width: 100%;
    min-height: 150px;
    border: 1px solid var(--fs-gray-300, #e2e6ec);
    border-radius: 4px;
    padding: 12px;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
}

.fs-custom-section-body textarea.fs-custom-section-content:focus {
    border-color: var(--fs-primary, #3ECFB2);
    outline: none;
    box-shadow: 0 0 0 2px rgba(62, 207, 178, 0.2);
}

/* WordPress editor in custom sections */
.fs-custom-section-body .wp-editor-wrap {
    border-radius: 4px;
    overflow: hidden;
}

.fs-custom-section-body .wp-editor-container {
    border-color: var(--fs-gray-300, #e2e6ec);
}

.fs-custom-section-body .mce-tinymce {
    box-shadow: none !important;
}

/* Section placeholder during drag */
.fs-section-placeholder {
    background: var(--fs-primary-xtralight, #e0f7f3);
    border: 2px dashed var(--fs-primary, #3ECFB2);
    border-radius: 8px;
    height: 100px;
    margin-bottom: 15px;
}

/* Empty state */
.fs-custom-sections-list:empty::after {
    content: 'No sections added yet. Click "+ Add Section" to create one.';
    display: block;
    padding: 20px;
    text-align: center;
    color: var(--fs-gray-500, #9ca3af);
    font-style: italic;
    background: var(--fs-gray-50, #fafbfc);
    border: 1px dashed var(--fs-gray-300, #e2e6ec);
    border-radius: 8px;
}

/* Custom Section Preview in Proposal View */
.fs-custom-section-preview {
    background: var(--fs-gray-50, #fafbfc);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.fs-custom-section-preview h2 {
    margin-top: 0;
    margin-bottom: 15px;
}

.fs-custom-section-content {
    line-height: 1.7;
    color: var(--fs-gray-700, #4b5563);
}

.fs-custom-section-content p {
    margin-bottom: 1em;
}

.fs-custom-section-content p:last-child {
    margin-bottom: 0;
}

.fs-custom-section-content ul,
.fs-custom-section-content ol {
    margin: 1em 0;
    padding-left: 1.5em;
}

.fs-custom-section-content li {
    margin-bottom: 0.5em;
}

/* ==========================================
   CLIENT CARDS GRID LAYOUT
   ========================================== */

.fs-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.fs-page-title {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    color: var(--fs-gray-900, #1f2937);
}

.fs-clients-filters {
    margin-bottom: 20px;
}

.fs-clients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 1200px) {
    .fs-clients-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 782px) {
    .fs-clients-grid {
        grid-template-columns: 1fr;
    }
}

.fs-client-card {
    background: #fff;
    border-radius: var(--fs-border-radius-lg, 12px);
    padding: 24px;
    box-shadow: var(--fs-shadow, 0 2px 8px rgba(123, 104, 166, 0.08));
    transition: box-shadow 0.2s ease;
    position: relative;
    z-index: 1;
}

.fs-client-card:hover {
    box-shadow: var(--fs-shadow-md, 0 4px 12px rgba(123, 104, 166, 0.12));
}

.fs-client-card:has(.fs-card-actions-menu.open) {
    z-index: 10;
}

.fs-client-card-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.fs-client-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.fs-client-avatar-logo {
    background: var(--fs-gray-100, #f5f7fa);
    padding: 0;
    overflow: hidden;
}

.fs-client-avatar-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fs-client-info {
    flex: 1;
    min-width: 0;
}

.fs-client-name {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--fs-gray-900, #1f2937);
    line-height: 1.3;
}

.fs-client-name a {
    color: inherit;
    text-decoration: none;
}

.fs-client-name a:hover {
    color: var(--fs-primary, #3ECFB2);
}

.fs-client-name .fs-badge-internal {
    font-size: 9px;
    padding: 2px 5px;
    margin-left: 6px;
    vertical-align: middle;
}

.fs-client-contact {
    margin: 0;
    font-size: 14px;
    color: var(--fs-gray-500, #9ca3af);
}

/* Client Card Action Menu */
.fs-card-actions-menu {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
}

.fs-card-menu-trigger {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fs-gray-400, #c5cad3);
    transition: all 0.15s ease;
}

.fs-card-menu-trigger:hover {
    background: var(--fs-gray-100, #f5f7fa);
    color: var(--fs-gray-600, #6b7280);
}

.fs-card-menu-trigger .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.fs-card-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid var(--fs-gray-200, #eef1f5);
    border-radius: var(--fs-border-radius, 8px);
    box-shadow: var(--fs-shadow-lg, 0 8px 24px rgba(123, 104, 166, 0.16));
    min-width: 160px;
    z-index: 100;
    padding: 6px 0;
    margin-top: 4px;
    display: none;
}

.fs-card-actions-menu.open .fs-card-dropdown {
    display: block;
}

.fs-card-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--fs-gray-700, #4b5563);
    text-decoration: none;
    font-size: 13px;
    transition: background 0.15s;
}

.fs-card-dropdown a:hover {
    background: var(--fs-gray-50, #fafbfc);
}

.fs-card-dropdown a .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--fs-gray-500, #9ca3af);
}

.fs-card-dropdown a:hover .dashicons {
    color: var(--fs-primary, #3ECFB2);
}

.fs-card-dropdown hr {
    margin: 6px 0;
    border: none;
    border-top: 1px solid var(--fs-gray-200, #eef1f5);
}

.fs-card-dropdown a.fs-text-danger {
    color: var(--fs-danger, #E85A5A);
}

.fs-card-dropdown a.fs-text-danger .dashicons {
    color: var(--fs-danger, #E85A5A);
}

.fs-card-dropdown a.fs-text-danger:hover {
    background: #fff5f5;
}

.fs-client-card-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--fs-gray-200, #eef1f5);
}

.fs-client-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fs-stat-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--fs-gray-500, #9ca3af);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.fs-stat-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--fs-gray-900, #1f2937);
}

.fs-client-card-actions {
    display: flex;
    gap: 8px;
}

.fs-btn-card {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fs-gray-600, #6b7280);
    background: var(--fs-gray-100, #f5f7fa);
    border: 1px solid var(--fs-gray-200, #eef1f5);
    border-radius: var(--fs-border-radius, 8px);
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
}

.fs-btn-card:hover {
    background: var(--fs-gray-200, #eef1f5);
    border-color: var(--fs-gray-300, #e2e6ec);
    color: var(--fs-gray-800, #374151);
}

.fs-btn-card:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--fs-primary-light, #77d5c9);
}

.fs-btn-card:focus:not(:focus-visible) {
    box-shadow: none;
}

.fs-btn-card:focus-visible {
    outline: 2px solid var(--fs-primary);
    outline-offset: 2px;
    box-shadow: none;
}

/* ==========================================
   CLIENT VIEW TOGGLE & TOOLBAR
   ========================================== */

.fs-clients-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.fs-clients-toolbar .fs-clients-filters {
    margin-bottom: 0;
}

/* Small avatar for list view */
.fs-client-avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.fs-client-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fs-client-name-cell .fs-client-logo-thumb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.fs-client-name-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Income cell in list view */
.fs-income-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

.fs-income-percent {
    font-size: 12px;
    color: var(--fs-gray-500, #9ca3af);
}

/* ==========================================================================
   Project Files Management
   ========================================================================== */

/* Actions bar */
.fs-files-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}

.fs-files-filters {
    display: flex;
    gap: 12px;
}

.fs-files-actions {
    display: flex;
    gap: 8px;
}

/* Dropzone */
.fs-file-upload-area {
    border: 2px dashed var(--fs-gray-300);
    border-radius: var(--fs-border-radius-lg);
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--fs-gray-50);
    margin-bottom: 20px;
}

.fs-file-upload-area:hover,
.fs-file-upload-area.fs-dropzone-active {
    border-color: var(--fs-primary);
    background: var(--fs-primary-xtralight);
}

.fs-dropzone-content .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: var(--fs-gray-400);
    margin-bottom: 12px;
}

.fs-file-upload-area:hover .dashicons,
.fs-file-upload-area.fs-dropzone-active .dashicons {
    color: var(--fs-primary);
}

.fs-dropzone-text {
    font-size: 16px;
    color: var(--fs-gray-700);
    margin: 0 0 8px 0;
}

.fs-dropzone-hint {
    font-size: 13px;
    color: var(--fs-gray-500);
    margin: 0;
}

/* Upload options */
.fs-upload-options {
    background: var(--fs-gray-100);
    border-radius: var(--fs-border-radius);
    padding: 16px;
    margin-bottom: 20px;
}

.fs-upload-options-row {
    display: flex;
    gap: 24px;
    align-items: center;
    margin-bottom: 12px;
}

.fs-upload-options-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.fs-upload-queue {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fs-upload-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #fff;
    border-radius: 6px;
    font-size: 13px;
}

.fs-upload-filename {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fs-upload-size {
    color: var(--fs-gray-500);
}

.fs-upload-status {
    width: 24px;
    text-align: center;
}

.fs-upload-status .spinner {
    float: none;
    margin: 0;
}

/* Files stats */
.fs-files-stats {
    display: flex;
    gap: 24px;
    padding: 12px 16px;
    background: var(--fs-gray-100);
    border-radius: var(--fs-border-radius);
    margin-bottom: 20px;
    font-size: 14px;
}

.fs-stat-item {
    color: var(--fs-gray-600);
}

.fs-stat-item strong {
    color: var(--fs-gray-800);
}

/* Files table */
.fs-files-table {
    width: 100%;
}

.fs-files-table th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 500;
    font-size: 13px;
    color: var(--fs-gray-600);
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-files-table td {
    padding: 12px 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-files-table .column-icon {
    width: 50px;
    text-align: center;
}

.fs-files-table .column-icon .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--fs-gray-500);
}

.fs-file-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}

.fs-files-table .column-name {
    min-width: 200px;
}

.fs-file-name {
    font-weight: 500;
    color: var(--fs-gray-800);
    text-decoration: none;
    display: block;
}

.fs-file-name:hover {
    color: var(--fs-primary);
}

.fs-file-notes {
    display: block;
    font-size: 12px;
    color: var(--fs-gray-500);
    margin-top: 2px;
}

.fs-files-table .column-category {
    width: 140px;
}

.fs-category-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: capitalize;
}

.fs-category-contract {
    background: var(--fs-secondary-light);
    color: var(--fs-secondary-dark);
}

.fs-category-deliverable {
    background: var(--fs-primary-xtralight);
    color: var(--fs-primary-dark);
}

.fs-category-reference {
    background: var(--fs-highlight-light);
    color: #6B7B1A;
}

.fs-category-client_upload {
    background: var(--fs-accent-light);
    color: #B85C36;
}

.fs-category-general {
    background: var(--fs-gray-200);
    color: var(--fs-gray-600);
}

.fs-files-table .column-size {
    width: 100px;
    color: var(--fs-gray-600);
    font-size: 13px;
}

.fs-files-table .column-uploaded {
    width: 150px;
}

.fs-file-date {
    display: block;
    font-size: 13px;
    color: var(--fs-gray-700);
}

.fs-file-uploader {
    display: block;
    font-size: 12px;
    color: var(--fs-gray-500);
}

.fs-files-table .column-shared {
    width: 100px;
    text-align: center;
}

.fs-files-table .column-actions {
    width: 60px;
    text-align: right;
}

/* Small switch variant */
label.fs-switch.fs-switch-small,
.fs-wrap .fs-switch-small {
    width: 36px;
    height: 20px;
}

label.fs-switch.fs-switch-small .fs-slider:before,
.fs-wrap .fs-switch-small .fs-slider:before {
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
}

label.fs-switch.fs-switch-small input:checked + .fs-slider:before,
.fs-wrap .fs-switch-small input:checked + .fs-slider:before {
    transform: translateX(16px);
}

/* Copy input wrapper */
.fs-copy-input-wrapper {
    display: flex;
    gap: 8px;
}

.fs-copy-input-wrapper .fs-input {
    flex: 1;
}

.fs-hint {
    font-size: 12px;
    color: var(--fs-gray-500);
    margin-top: 8px;
}

/* Badge for client uploads */
.fs-badge-info {
    background: var(--fs-accent-light);
    color: #B85C36;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: 500;
}

/* ===============================================
   Project Detail - Two Column Card Layout (v5.1.2)
   =============================================== */

/* Two-column layout container */
.fs-terms-two-col {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1024px) {
    .fs-terms-two-col {
        grid-template-columns: 1fr;
    }
}

/* Main content column */
.fs-terms-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Sidebar column */
.fs-terms-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Project cards */
.fs-project-card {
    background: #fff;
    border: 1px solid var(--fs-gray-200, #eef1f5);
    border-radius: var(--fs-border-radius-lg, 12px);
    padding: 24px;
    box-shadow: var(--fs-shadow, 0 2px 8px rgba(123, 104, 166, 0.08));
}

/* Card header */
.fs-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.fs-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--fs-gray-900, #1F2937);
    margin: 0;
}

.fs-card-header h2.fs-card-title {
    font-size: 22px;
}

/* Edit link buttons in card headers */
.fs-card-header .fs-edit-link,
.fs-card-section-header .fs-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.fs-card-header .fs-edit-link .dashicons,
.fs-card-section-header .fs-edit-link .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
}

/* Card sections (e.g., Billing Schedule inside the main card) */
.fs-card-section {
    border-top: 1px solid var(--fs-gray-200, #eef1f5);
    padding-top: 20px;
    margin-top: 20px;
}

.fs-card-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.fs-card-section-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--fs-gray-800, #374151);
    margin: 0;
}

/* Set date link styling */
.fs-set-date-link {
    color: var(--fs-primary, #3ECFB2);
    text-decoration: none;
    font-weight: 500;
}

.fs-set-date-link:hover {
    text-decoration: underline;
}

/* Modern services list */
.fs-services-list-modern {
    display: flex;
    flex-direction: column;
}

.fs-service-row-modern {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid var(--fs-gray-100, #F5F7FA);
}

.fs-service-row-modern:last-child {
    border-bottom: none;
}

.fs-service-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fs-service-name-modern {
    font-weight: 500;
    color: var(--fs-gray-800, #374151);
    display: block;
}

.fs-service-desc-modern {
    display: block;
    font-size: 13px;
    color: var(--fs-gray-500, #9CA3AF);
    margin-top: 2px;
}

.fs-service-cap-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--fs-primary-dark);
    background: var(--fs-primary-xtralight);
    border: 1px solid var(--fs-primary-light);
    border-radius: 20px;
    padding: 2px 10px;
}

.fs-service-cap-badge .dashicons {
    font-size: 13px;
    width: 13px;
    height: 13px;
}

.fs-service-cap-badge.fs-cap-reached {
    color: var(--fs-danger);
    background: #FFE5E5;
    border-color: #FFBBBB;
}

.fs-high-contrast .fs-service-cap-badge {
    border-width: 2px;
}

.fs-service-pricing-modern {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.fs-service-rate-qty {
    font-size: 13px;
    color: var(--fs-gray-600, #6B7280);
    line-height: 1.4;
}

.fs-service-rate-qty small {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: var(--fs-gray-500, #9CA3AF);
}

.fs-service-rate-qty .fs-tracked-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--fs-secondary-light, #EDE9F5);
    color: var(--fs-secondary-dark, #5D4E80);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.fs-service-rate-qty .fs-tracked-indicator .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.fs-service-amount-modern {
    font-weight: 600;
    font-size: 15px;
    color: var(--fs-gray-800, #374151);
}

/* Currency label */
.fs-currency-label {
    color: var(--fs-primary, #3ECFB2);
    font-size: 13px;
    font-weight: 500;
    margin-top: 16px;
    display: block;
}

/* Project total row */
.fs-project-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    margin-top: 8px;
    border-top: 1px solid var(--fs-gray-200, #eef1f5);
}

.fs-project-total-label {
    font-weight: 500;
    color: var(--fs-primary, #3ECFB2);
}

.fs-project-total-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--fs-gray-800, #374151);
}

/* Add service link */
.fs-add-service-link {
    margin-top: 16px;
}

.fs-add-service-link .fs-quick-add-btn {
    width: 100%;
}

/* Deposit card styling */
.fs-deposit-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fs-deposit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fs-deposit-label {
    color: var(--fs-gray-600, #6B7280);
    font-size: 14px;
}

.fs-deposit-amount {
    font-weight: 600;
    font-size: 16px;
    color: var(--fs-gray-800, #374151);
}

.fs-deposit-status .fs-status-badge {
    font-size: 10px;
    padding: 4px 10px;
}

/* Milestones preview card */
.fs-milestones-preview {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fs-milestone-preview-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--fs-gray-100, #F5F7FA);
}

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

.fs-milestone-indicator {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--fs-gray-100, #F5F7FA);
    color: var(--fs-gray-400, #C5CAD3);
}

.fs-milestone-indicator.completed {
    background: var(--fs-primary, #3ECFB2);
    color: #fff;
}

.fs-milestone-indicator.current {
    background: var(--fs-secondary, #81A5DF);
    color: #fff;
}

.fs-milestone-indicator .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.fs-milestone-preview-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fs-milestone-preview-name {
    font-weight: 500;
    color: var(--fs-gray-800, #374151);
    font-size: 14px;
}

.fs-milestone-preview-date {
    font-size: 12px;
    color: var(--fs-gray-500, #9CA3AF);
}

/* Completed milestone styling */
.fs-milestone-preview-item.completed .fs-milestone-preview-name {
    color: var(--fs-gray-500, #9CA3AF);
}

/* Clickable milestone indicators on Terms tab sidebar */
.fs-milestone-preview-item:not(.completed) .fs-milestone-indicator {
    cursor: pointer;
    transition: all 0.2s ease;
}
.fs-milestone-preview-item:not(.completed) .fs-milestone-indicator:hover {
    background: var(--fs-primary-light, #77d5c9);
    color: #fff;
    transform: scale(1.1);
}

/* ========================================
   UNIFIED DOCUMENT PREVIEW (matches client view)
   Used for Proposal, Contract, Invoice admin previews
   ======================================== */

.fs-doc-preview {
    background: #fff;
    border-radius: var(--fs-border-radius-lg);
    box-shadow: var(--fs-shadow-md);
    overflow: hidden;
    max-width: 900px;
}

/* Colored Header */
.fs-doc-preview-header {
    background: var(--fs-primary-bg, var(--fs-primary));
    padding: 32px;
    color: #fff;
}

.fs-doc-preview-logo {
    max-height: 50px;
    margin-bottom: 16px;
}

.fs-doc-preview-business {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 20px;
}

.fs-doc-preview-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px 0;
    line-height: 1.2;
    color: #fff !important;
}

.fs-doc-preview-header .fs-doc-preview-title {
    color: #fff !important;
}

.fs-doc-preview-header h1 {
    color: #fff !important;
}

.fs-doc-preview-number {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 12px;
}

/* Header status badge */
.fs-doc-preview-header .fs-status-badge {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.fs-doc-preview-header .fs-status-badge.status-approved,
.fs-doc-preview-header .fs-status-badge.status-paid,
.fs-doc-preview-header .fs-status-badge.status-completed {
    background: #d1fae5;
    color: #065f46;
}

.fs-doc-preview-header .fs-status-badge.status-overdue,
.fs-doc-preview-header .fs-status-badge.status-expired,
.fs-doc-preview-header .fs-status-badge.status-rejected {
    background: #fef2f2;
    color: #dc2626;
}

/* Body Content */
.fs-doc-preview-body {
    padding: 40px;
}

/* Section Titles */
.fs-doc-preview-section-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--fs-gray-500);
    margin-bottom: 16px;
    font-weight: 600;
}

/* Parties Grid */
.fs-doc-preview-parties {
    margin-bottom: 32px;
}

.fs-doc-preview-parties-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.fs-doc-preview-party-card {
    background: var(--fs-gray-50);
    border-radius: 8px;
    padding: 20px;
}

.fs-doc-preview-party-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 600;
}

.fs-doc-preview-party-label.contractor {
    color: var(--fs-secondary);
}

.fs-doc-preview-party-label.client {
    color: var(--fs-primary);
}

.fs-doc-preview-party-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--fs-gray-900);
    margin-bottom: 4px;
}

.fs-doc-preview-party-card p {
    margin: 2px 0;
    color: var(--fs-gray-600);
    font-size: 14px;
}

/* Dates */
.fs-doc-preview-dates {
    display: flex;
    gap: 40px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-doc-preview-date-item label {
    display: block;
    font-size: 12px;
    color: var(--fs-gray-500);
    margin-bottom: 4px;
}

.fs-doc-preview-date-item span {
    font-weight: 600;
    color: var(--fs-gray-900);
}

.fs-doc-preview-date-item.overdue span {
    color: var(--fs-danger);
}

/* Services Table */
.fs-doc-preview-section {
    margin-bottom: 32px;
}

.fs-doc-preview-table {
    width: 100%;
    border-collapse: collapse;
}

.fs-doc-preview-table th {
    text-align: left;
    padding: 12px 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--fs-gray-500);
    font-weight: 600;
    border-bottom: 2px solid var(--fs-primary);
}

.fs-doc-preview-table th:last-child {
    text-align: right;
}

.fs-doc-preview-table td {
    padding: 16px 0;
    border-bottom: 1px solid var(--fs-gray-100);
    vertical-align: top;
}

.fs-doc-preview-table td:last-child {
    text-align: right;
    font-weight: 500;
}

.fs-doc-preview-item-name {
    font-weight: 500;
    color: var(--fs-gray-900);
}

.fs-doc-preview-item-desc {
    font-size: 13px;
    color: var(--fs-gray-500);
    margin-top: 4px;
}

.fs-doc-preview-item-meta {
    font-size: 12px;
    color: var(--fs-gray-400);
    margin-top: 2px;
}

/* Totals */
.fs-doc-preview-totals {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 2px solid var(--fs-gray-200);
}

.fs-doc-preview-totals-row {
    display: flex;
    justify-content: flex-end;
    gap: 40px;
    padding: 8px 0;
}

.fs-doc-preview-totals-row.grand-total {
    font-size: 20px;
    font-weight: 700;
    background: var(--fs-gray-50);
    border-radius: 8px;
    margin-top: 8px;
    padding: 16px;
}

.fs-doc-preview-totals-label {
    color: var(--fs-gray-600);
    min-width: 120px;
    text-align: right;
}

.fs-doc-preview-totals-value {
    min-width: 120px;
    text-align: right;
    font-weight: 500;
}

/* Custom Sections & Notes */
.fs-doc-preview-custom-section {
    background: var(--fs-gray-50);
    padding: 24px;
    border-radius: 8px;
    margin-bottom: 24px;
}

.fs-doc-preview-custom-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--fs-gray-900);
    margin: 0 0 12px 0;
}

.fs-doc-preview-notes {
    background: var(--fs-gray-50);
    padding: 20px;
    border-radius: 8px;
    margin-top: 32px;
}

.fs-doc-preview-notes h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--fs-gray-500);
    margin: 0 0 8px 0;
    font-weight: 600;
}

/* Contract Terms */
.fs-doc-preview-terms {
    margin-top: 40px;
}

.fs-doc-preview-term-section {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-doc-preview-term-section:last-child {
    border-bottom: none;
}

.fs-doc-preview-term-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--fs-gray-900);
    margin: 0 0 12px 0;
}

.fs-doc-preview-term-content {
    color: var(--fs-gray-700);
    font-size: 14px;
    line-height: 1.7;
}

/* Signatures */
.fs-doc-preview-signatures {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 2px solid var(--fs-gray-200);
}

.fs-doc-preview-signatures-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.fs-doc-preview-signature-block {
    text-align: center;
}

.fs-doc-preview-signature-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--fs-gray-400);
    margin-bottom: 16px;
    font-weight: 600;
}

.fs-doc-preview-signature-image {
    min-height: 60px;
    margin-bottom: 8px;
}

.fs-doc-preview-signature-image img {
    max-height: 60px;
    max-width: 200px;
}

.fs-doc-preview-signature-line {
    border-bottom: 2px solid var(--fs-gray-300);
    margin-bottom: 8px;
}

.fs-doc-preview-signature-name {
    font-weight: 600;
    color: var(--fs-gray-900);
}

.fs-doc-preview-signature-title {
    font-size: 13px;
    color: var(--fs-gray-500);
}

.fs-doc-preview-signature-date {
    font-size: 13px;
    color: var(--fs-gray-400);
    margin-top: 4px;
}

.fs-doc-preview-signature-pending {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--fs-gray-300);
    border-radius: 8px;
    color: var(--fs-gray-400);
    font-style: italic;
    margin-bottom: 8px;
}

/* Client Link Card in sidebar */
.fs-client-link-card {
    background: #fff;
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius-lg);
    overflow: hidden;
}

.fs-client-link-card-header {
    background: var(--fs-gray-50);
    padding: 12px 16px;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-client-link-card-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--fs-gray-700);
}

.fs-client-link-card-body {
    padding: 16px;
}

.fs-client-link-card .fs-link-input {
    width: 100%;
    margin-bottom: 12px;
    font-size: 12px;
    padding: 8px 10px;
}

.fs-client-link-card .fs-link-buttons {
    display: flex;
    gap: 8px;
}

.fs-client-link-card .fs-link-buttons .button {
    flex: 1;
    text-align: center;
    justify-content: center;
}

/* Responsive */
@media (max-width: 768px) {
    .fs-doc-preview-parties-grid {
        grid-template-columns: 1fr;
    }
    
    .fs-doc-preview-dates {
        flex-direction: column;
        gap: 16px;
    }
    
    .fs-doc-preview-signatures-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Recurring Day Picker */
.fs-day-picker {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.fs-day-chip {
    display: inline-block;
    cursor: pointer;
    margin: 0;
}

.fs-day-chip input {
    display: none;
}

.fs-day-chip span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    color: var(--fs-gray-500);
    background: var(--fs-gray-100);
    border: 2px solid var(--fs-gray-200);
    transition: all 0.15s ease;
}

.fs-day-chip:hover span {
    border-color: var(--fs-primary-light);
    color: var(--fs-primary-dark);
}

.fs-day-chip input:checked + span {
    background: var(--fs-primary);
    border-color: var(--fs-primary);
    color: #fff;
}

.fs-recurring-days-row {
    margin-top: 8px;
}

.fs-recurring-days-row label:first-child {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 13px;
}

/* Task Timer Button */
.fs-task-start-timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--fs-gray-400);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.fs-task-start-timer:hover {
    background: var(--fs-primary-xtralight);
    color: var(--fs-primary-dark);
}

.fs-task-start-timer .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.fs-dashboard-task-timer {
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.fs-task-item:hover .fs-dashboard-task-timer {
    opacity: 1;
}

/* ============================================
   Bug Report Footer & Modal
   ============================================ */
.fs-bug-report-footer {
    position: fixed;
    bottom: 16px;
    left: 176px;
    z-index: 99999;
}

.fs-bug-report-footer button {
    margin-left: 130px;
}

.folded .fs-bug-report-footer,
.auto-fold .fs-bug-report-footer {
    left: 52px;
}

@media screen and (max-width: 782px) {
    .fs-bug-report-footer {
        left: -4px;
        bottom: 20px;
        transition: left 0.3s ease;
    }

    .fs-bug-report-footer button {
        padding: 10px 12px 10px 14px;
        border-radius: 0 50px 50px 0;
    }

    .fs-bug-report-footer .fs-bug-report-label {
        display: none;
    }
}

.fs-bug-report-footer button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--fs-gray-800);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.fs-bug-report-footer button:hover {
    background: var(--fs-gray-900);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    transform: translateY(-1px);
}

.fs-bug-report-footer button .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
}

.fs-bug-report-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 100000;
    backdrop-filter: blur(2px);
}

.fs-bug-report-overlay.active {
    display: block;
}

.fs-bug-report-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 520px;
    max-width: 90vw;
    max-height: 85vh;
    background: #fff;
    border-radius: var(--fs-border-radius-xl);
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    z-index: 100001;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.fs-bug-report-modal.active {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.fs-bug-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-bug-report-header h2 {
    font-size: 17px;
    font-weight: 600;
    color: var(--fs-gray-900);
    margin: 0;
    padding: 0;
    border: none;
}

.fs-bug-report-close {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--fs-gray-400);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s;
}

.fs-bug-report-close:hover {
    color: var(--fs-gray-700);
}

.fs-bug-report-body {
    padding: 20px 24px 24px;
    overflow-y: auto;
    max-height: calc(85vh - 70px);
}

.fs-bug-report-intro {
    font-size: 13px;
    color: var(--fs-gray-600);
    margin: 0 0 20px;
}

.fs-bug-field {
    margin-bottom: 16px;
}

.fs-bug-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--fs-gray-700);
    margin-bottom: 5px;
}

.fs-bug-optional {
    font-weight: 400;
    color: var(--fs-gray-400);
}

.fs-bug-field input[type="text"],
.fs-bug-field textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.15s;
    resize: vertical;
}

.fs-bug-field input[type="text"]:focus,
.fs-bug-field textarea:focus {
    border-color: var(--fs-primary);
    outline: none;
    box-shadow: 0 0 0 2px var(--fs-primary-xtralight);
}

/* Upload area */
.fs-bug-upload-area {
    position: relative;
    border: 2px dashed var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
}

.fs-bug-upload-area:hover,
.fs-bug-upload-area.dragover {
    border-color: var(--fs-primary);
    background: var(--fs-primary-xtralight);
}

.fs-bug-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.fs-bug-upload-prompt .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--fs-gray-400);
    display: block;
    margin: 0 auto 6px;
}

.fs-bug-upload-prompt p {
    font-size: 13px;
    color: var(--fs-gray-600);
    margin: 0 0 2px;
}

.fs-bug-upload-hint {
    font-size: 11px;
    color: var(--fs-gray-400);
}

/* Screenshot previews */
.fs-bug-preview-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.fs-bug-preview-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--fs-gray-200);
}

.fs-bug-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fs-bug-preview-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    line-height: 18px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fs-bug-preview-remove:hover {
    background: var(--fs-danger);
}

.fs-bug-preview-name {
    display: none;
}

/* Debug details */
.fs-bug-debug-details {
    margin: 16px 0;
    font-size: 12px;
}

.fs-bug-debug-details summary {
    color: var(--fs-gray-500);
    cursor: pointer;
    padding: 4px 0;
}

.fs-bug-debug-details summary:hover {
    color: var(--fs-gray-700);
}

.fs-bug-debug-info {
    background: var(--fs-gray-50);
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius);
    padding: 10px 12px;
    font-size: 11px;
    color: var(--fs-gray-600);
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    margin: 8px 0 0;
    white-space: pre-wrap;
    max-height: 120px;
    overflow-y: auto;
}

/* Actions */
.fs-bug-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--fs-gray-200);
}

.fs-bug-actions .fs-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
    margin-right: 2px;
    vertical-align: middle;
}

/* Success state */
.fs-bug-success {
    text-align: center;
    padding: 40px 20px;
}

.fs-bug-success .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: var(--fs-primary);
    display: block;
    margin: 0 auto 12px;
}

.fs-bug-success h3 {
    font-size: 16px;
    color: var(--fs-gray-800);
    margin: 0 0 6px;
}

.fs-bug-success p {
    font-size: 13px;
    color: var(--fs-gray-500);
    margin: 0;
}

/* Spinner reuse */
.dashicons.fs-spin {
    animation: fs-bug-spin 1s linear infinite;
}
@keyframes fs-bug-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   Recurring Invoice - Time Entry Options
   ============================================ */
.fs-info-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    background: var(--fs-secondary-light);
    border-radius: var(--fs-border-radius);
    font-size: 12px;
    color: var(--fs-secondary-dark);
    margin-top: 12px;
}

.fs-info-notice .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.fs-time-entry-options {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--fs-gray-200);
}

/* ============================================
   Pagination
   ============================================ */
.fs-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 12px 0;
    border-top: 1px solid var(--fs-gray-200);
    flex-wrap: wrap;
    gap: 12px;
}

.fs-pagination-info {
    font-size: 13px;
    color: var(--fs-gray-600);
}

.fs-pagination-perpage {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
}

.fs-pagination-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fs-pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--fs-border-radius);
    font-size: 13px;
    color: var(--fs-gray-700);
    text-decoration: none;
    transition: all 0.2s;
}

.fs-pagination-link:hover {
    background: var(--fs-gray-100);
    color: var(--fs-primary);
}

.fs-pagination-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--fs-border-radius);
    font-size: 13px;
    font-weight: 600;
    background: var(--fs-primary);
    color: #fff;
}

.fs-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 32px;
    color: var(--fs-gray-400);
    font-size: 14px;
}

/* ============================================
   High Contrast Mode
   WCAG AAA (7:1 contrast ratio) overrides
   Activated via body.fs-high-contrast
   ============================================ */

/* --- Global text & background --- */
.fs-high-contrast .fs-wrap,
.fs-high-contrast .fs-wrap * {
    border-color: #444 !important;
}

.fs-high-contrast .fs-wrap {
    color: #111;
}

.fs-high-contrast .fs-gray-text,
.fs-high-contrast .description,
.fs-high-contrast .fs-text-muted,
.fs-high-contrast p.description,
.fs-high-contrast .fs-card-subtitle,
.fs-high-contrast .fs-card-meta,
.fs-high-contrast .fs-task-project,
.fs-high-contrast .fs-task-due,
.fs-high-contrast .fs-detail-label,
.fs-high-contrast .fs-form-group .description,
.fs-high-contrast .fs-optional,
.fs-high-contrast .fs-empty-message,
.fs-high-contrast .fs-bug-optional {
    color: #333 !important;
}

/* --- Links: always underlined --- */
.fs-high-contrast .fs-wrap a:not(.fs-btn):not(.fs-settings-nav-item):not(.fs-view-btn):not(.nav-tab):not(.button) {
    text-decoration: underline;
}

/* --- Cards & sections: strong borders --- */
.fs-high-contrast .fs-card,
.fs-high-contrast .fs-stat-card,
.fs-high-contrast .fs-form-container,
.fs-high-contrast .fs-settings-section,
.fs-high-contrast .fs-modal-content,
.fs-high-contrast .fs-invoice-items,
.fs-high-contrast .fs-form-section {
    border: 2px solid #333 !important;
    box-shadow: none !important;
}

.fs-high-contrast .fs-settings-sidebar {
    border: 2px solid #333 !important;
    border-right: none !important;
}

.fs-high-contrast .fs-settings-content {
    border: 2px solid #333 !important;
}

/* --- Settings nav active state --- */
.fs-high-contrast .fs-settings-nav-item.active {
    background: #111 !important;
    color: #fff !important;
    border-left-color: #111 !important;
}

.fs-high-contrast .fs-settings-nav-item {
    color: #111 !important;
}

.fs-high-contrast .fs-settings-nav-item:hover {
    background: #e5e5e5 !important;
}

/* --- Primary Button --- */
.fs-high-contrast .fs-btn-primary,
.fs-high-contrast .fs-btn-submit {
    background: #111 !important;
    color: #fff !important;
    box-shadow: none !important;
    border: 2px solid #111 !important;
}

.fs-high-contrast .fs-btn-primary:hover,
.fs-high-contrast .fs-btn-submit:hover {
    background: #333 !important;
    border-color: #333 !important;
}

/* --- Secondary Button --- */
.fs-high-contrast .fs-btn-secondary {
    background: #fff !important;
    color: #111 !important;
    border: 2px solid #111 !important;
    box-shadow: none !important;
}

.fs-high-contrast .fs-btn-secondary:hover {
    background: #e5e5e5 !important;
}

/* --- Success Button --- */
.fs-high-contrast .fs-btn-success {
    background: #1a5c1a !important;
    color: #fff !important;
    box-shadow: none !important;
    border: 2px solid #1a5c1a !important;
}

.fs-high-contrast .fs-btn-success:hover {
    background: #0e3d0e !important;
    border-color: #0e3d0e !important;
}

/* --- Accent Button --- */
.fs-high-contrast .fs-btn-accent {
    background: #8b3a00 !important;
    color: #fff !important;
    box-shadow: none !important;
    border: 2px solid #8b3a00 !important;
}

.fs-high-contrast .fs-btn-accent:hover {
    background: #6b2d00 !important;
    border-color: #6b2d00 !important;
}

/* --- Danger Button --- */
.fs-high-contrast .fs-btn-danger {
    background: #fff !important;
    color: #8b0000 !important;
    border: 2px solid #8b0000 !important;
}

.fs-high-contrast .fs-btn-danger:hover {
    background: #8b0000 !important;
    color: #fff !important;
}

/* --- Deposit Button --- */
.fs-high-contrast .fs-btn-deposit {
    background: #1a5c1a !important;
    color: #fff !important;
    border: 2px solid #1a5c1a !important;
}

/* --- Icon buttons --- */
.fs-high-contrast .fs-btn-icon {
    background: #111 !important;
    color: #fff !important;
}

.fs-high-contrast .fs-icon-btn {
    color: #333 !important;
}

.fs-high-contrast .fs-icon-btn:hover {
    background: #ddd !important;
    color: #111 !important;
}

/* --- Timer buttons --- */
.fs-high-contrast .fs-timer-btn-start {
    background: #1a5c1a !important;
    color: #fff !important;
    box-shadow: none !important;
    border: 2px solid #1a5c1a !important;
}

.fs-high-contrast .fs-timer-btn-stop {
    background: #8b0000 !important;
    color: #fff !important;
    box-shadow: none !important;
    border: 2px solid #8b0000 !important;
}

.fs-high-contrast .fs-timer-btn-circle {
    border: 2px solid #111 !important;
    color: #111 !important;
}

.fs-high-contrast .fs-timer-btn-circle:hover {
    background: #111 !important;
    color: #fff !important;
}

/* --- View toggle --- */
.fs-high-contrast .fs-view-toggle {
    border: 2px solid #333 !important;
    background: #fff !important;
}

.fs-high-contrast .fs-view-btn.active {
    background: #111 !important;
    color: #fff !important;
}

/* --- Toggle switch --- */
.fs-high-contrast label.fs-switch .fs-slider,
.fs-high-contrast .fs-wrap .fs-switch .fs-slider {
    background-color: #777 !important;
    border: 2px solid #333 !important;
}

.fs-high-contrast label.fs-switch input:checked + .fs-slider,
.fs-high-contrast .fs-wrap .fs-switch input:checked + .fs-slider {
    background-color: #1a5c1a !important;
}

/* --- Focus states: thick visible outline --- */
.fs-high-contrast .fs-wrap input:focus,
.fs-high-contrast .fs-wrap select:focus,
.fs-high-contrast .fs-wrap textarea:focus,
.fs-high-contrast .fs-wrap button:focus,
.fs-high-contrast .fs-wrap a:focus {
    outline: 3px solid #111 !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

.fs-high-contrast .fs-wrap button:focus:not(:focus-visible),
.fs-high-contrast .fs-wrap a:focus:not(:focus-visible) {
    outline: none !important;
}

.fs-high-contrast .fs-wrap button:focus-visible,
.fs-high-contrast .fs-wrap a:focus-visible {
    outline: 3px solid #111 !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* --- Form inputs --- */
.fs-high-contrast .fs-wrap input[type="text"],
.fs-high-contrast .fs-wrap input[type="email"],
.fs-high-contrast .fs-wrap input[type="url"],
.fs-high-contrast .fs-wrap input[type="number"],
.fs-high-contrast .fs-wrap input[type="date"],
.fs-high-contrast .fs-wrap input[type="time"],
.fs-high-contrast .fs-wrap input[type="password"],
.fs-high-contrast .fs-wrap select,
.fs-high-contrast .fs-wrap textarea,
.fs-high-contrast .fs-modal input[type="text"],
.fs-high-contrast .fs-modal select,
.fs-high-contrast .fs-modal textarea {
    border: 2px solid #333 !important;
    color: #111 !important;
    background: #fff !important;
}

/* --- Tables --- */
.fs-high-contrast .fs-wrap table th {
    color: #111 !important;
    font-weight: 700 !important;
}

.fs-high-contrast .fs-wrap table td {
    color: #111 !important;
    border-color: #999 !important;
}

.fs-high-contrast .fs-wrap table tr {
    border-color: #999 !important;
}

.fs-high-contrast .fs-wrap table thead tr {
    border-bottom: 3px solid #333 !important;
}

/* =============================================
   Status Badges — High Contrast
   Each category gets: strong border, dark text,
   and a distinct left-border accent for
   differentiation without relying on color alone
   ============================================= */

/* Gray — Draft/Inactive: Dashed border */
.fs-high-contrast .fs-status-badge.status-draft,
.fs-high-contrast .fs-status-badge.status-cancelled,
.fs-high-contrast .fs-status-badge.status-on-hold {
    background: #f0f0f0 !important;
    color: #111 !important;
    border: 2px dashed #666 !important;
    border-radius: 4px !important;
}

/* Coral — Pending/Warning: Solid + left accent */
.fs-high-contrast .fs-status-badge.status-pending,
.fs-high-contrast .fs-status-badge.status-partial,
.fs-high-contrast .fs-status-badge.status-revision {
    background: #fff3e0 !important;
    color: #111 !important;
    border: 2px solid #8b3a00 !important;
    border-left: 6px solid #8b3a00 !important;
    border-radius: 4px !important;
}

/* Purple — Active/Info: Solid + double left accent */
.fs-high-contrast .fs-status-badge.status-active,
.fs-high-contrast .fs-status-badge.status-sent,
.fs-high-contrast .fs-status-badge.status-viewed,
.fs-high-contrast .fs-status-badge.status-converted {
    background: #e8eaf6 !important;
    color: #111 !important;
    border: 2px solid #1a237e !important;
    border-left: 6px double #1a237e !important;
    border-radius: 4px !important;
}

/* Teal — Success: Solid thick */
.fs-high-contrast .fs-status-badge.status-paid,
.fs-high-contrast .fs-status-badge.status-completed,
.fs-high-contrast .fs-status-badge.status-approved {
    background: #e8f5e9 !important;
    color: #111 !important;
    border: 2px solid #1a5c1a !important;
    border-left: 6px solid #1a5c1a !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
}

/* Red — Danger: Solid + dark red */
.fs-high-contrast .fs-status-badge.status-overdue,
.fs-high-contrast .fs-status-badge.status-rejected,
.fs-high-contrast .fs-status-badge.status-dismissed,
.fs-high-contrast .fs-status-badge.status-expired {
    background: #fce4ec !important;
    color: #111 !important;
    border: 2px solid #8b0000 !important;
    border-left: 6px solid #8b0000 !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
}

/* --- Kanban status badges (inline-styled) — force override --- */
.fs-high-contrast .fs-kanban-status-badge {
    background: #f0f0f0 !important;
    color: #111 !important;
    border: 2px solid #666 !important;
    border-radius: 4px !important;
}

.fs-high-contrast .fs-kanban-scroll-hint {
    background: #333 !important;
    color: #fff !important;
    border: 2px solid #000 !important;
}

.fs-high-contrast .fs-task-limit-select {
    border: 2px solid #333 !important;
    color: #111 !important;
    background: #fff !important;
}

/* --- Inline status selects --- */
.fs-high-contrast .fs-inline-status-select {
    border: 2px solid #333 !important;
    color: #111 !important;
    background: #fff !important;
    font-weight: 600 !important;
}

/* --- Stat cards --- */
.fs-high-contrast .fs-stat-card .fs-stat-value {
    color: #111 !important;
}

.fs-high-contrast .fs-stat-card .fs-stat-label {
    color: #333 !important;
}

.fs-high-contrast .fs-stat-card .fs-stat-icon {
    color: #333 !important;
    opacity: 1 !important;
}

/* --- Dashboard card headers --- */
.fs-high-contrast .fs-card-header {
    border-bottom: 3px solid #333 !important;
}

.fs-high-contrast .fs-card-title {
    color: #111 !important;
}

/* --- Action Needed Widget --- */
.fs-high-contrast .fs-action-needed-count {
    background: #c00 !important;
    color: #fff !important;
}

.fs-high-contrast .fs-action-needed-item {
    border-bottom: 2px solid #ccc !important;
    color: #111 !important;
}

.fs-high-contrast .fs-action-needed-item:hover {
    background: #e5e5e5 !important;
}

.fs-high-contrast .fs-action-needed-icon {
    background: #e5e5e5 !important;
    color: #111 !important;
    border: 2px solid #333 !important;
}

.fs-high-contrast .fs-action-needed-title {
    color: #111 !important;
    font-weight: 600 !important;
}

.fs-high-contrast .fs-action-needed-subtitle {
    color: #333 !important;
}

/* --- Quick-add button --- */
.fs-high-contrast .fs-quick-add-btn {
    border: 2px dashed #333 !important;
    color: #333 !important;
}

.fs-high-contrast .fs-quick-add-btn:hover {
    border-color: #111 !important;
    color: #111 !important;
    background: #e5e5e5 !important;
}

/* --- Navigation buttons --- */
.fs-high-contrast .fs-nav-btn {
    border: 2px solid #333 !important;
}

/* --- Dropdown menus --- */
.fs-high-contrast .fs-dropdown-menu {
    border: 2px solid #333 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

.fs-high-contrast .fs-dropdown-menu a {
    color: #111 !important;
}

.fs-high-contrast .fs-dropdown-menu a:hover {
    background: #e5e5e5 !important;
}

.fs-high-contrast .fs-delete-section-template {
    color: #333 !important;
}

.fs-high-contrast .fs-delete-section-template:hover {
    color: #c00 !important;
    background: #fee !important;
}

/* --- Breadcrumb --- */
.fs-high-contrast .fs-breadcrumb a {
    color: #111 !important;
    font-weight: 600 !important;
}

/* --- Tab navigation --- */
.fs-high-contrast .fs-tab-nav {
    border-color: #111 !important;
}

.fs-high-contrast .fs-tab.active,
.fs-high-contrast .fs-tab-link.active,
.fs-high-contrast .fs-tasks-tab.active,
.fs-high-contrast .nav-tab-active {
    background: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
}

.fs-high-contrast .fs-tab,
.fs-high-contrast .fs-tab-link,
.fs-high-contrast .fs-tasks-tab {
    color: #111 !important;
}

.fs-high-contrast .fs-tab.active .fs-tab-count,
.fs-high-contrast .fs-tasks-tab.active .fs-tasks-tab-count {
    background: #333 !important;
    color: #fff !important;
}

/* --- Modals --- */
.fs-high-contrast .fs-modal-content {
    border: 3px solid #111 !important;
}

.fs-high-contrast .fs-header-preview {
    border: 3px solid #111 !important;
}

.fs-high-contrast .fs-logo-variant-tag {
    border: 2px solid #111 !important;
}

.fs-high-contrast .fs-logo-usage-group {
    border: 2px solid #333 !important;
}

.fs-high-contrast .fs-color-mode-toggle {
    border: 2px solid #333 !important;
}

.fs-high-contrast .fs-direction-btn {
    border: 2px solid #333 !important;
}

.fs-high-contrast .fs-color-swatch-preview {
    border: 2px solid #333 !important;
}

.fs-high-contrast .fs-modal-header {
    border-bottom: 3px solid #333 !important;
}

.fs-high-contrast .fs-modal-footer {
    border-top: 3px solid #333 !important;
}

/* --- Calendar/scheduler --- */
.fs-high-contrast .fs-calendar-day {
    border: 1px solid #999 !important;
}

.fs-high-contrast .fs-calendar-day.today {
    border: 3px solid #111 !important;
    font-weight: 700 !important;
}

/* --- Bug report footer --- */
.fs-high-contrast .fs-bug-report-footer button {
    background: #111 !important;
    border: 2px solid #111 !important;
}

/* --- Info notices --- */
.fs-high-contrast .fs-info-notice {
    background: #e5e5e5 !important;
    color: #111 !important;
    border: 2px solid #333 !important;
}

/* --- Wizard step indicators --- */
.fs-high-contrast .fs-wizard-step.active .fs-step-number {
    background: #111 !important;
    color: #fff !important;
}

.fs-high-contrast .fs-wizard-step .fs-step-number {
    border: 2px solid #333 !important;
}

/* --- Financial overview cards --- */
.fs-high-contrast .fs-financial-overview {
    background: #fff !important;
    border: 2px solid #333 !important;
    color: #111 !important;
}

.fs-high-contrast .fs-financial-item {
    background: #f5f5f5 !important;
    border: 2px solid #333 !important;
}

.fs-high-contrast .fs-financial-gross {
    background: #e8f5e9 !important;
    border-left: 6px solid #1a5c1a !important;
}

.fs-high-contrast .fs-financial-pending {
    background: #e8eaf6 !important;
    border-left: 6px solid #1a237e !important;
}

.fs-high-contrast .fs-financial-expenses {
    background: #fce4ec !important;
    border-left: 6px solid #8b0000 !important;
}

.fs-high-contrast .fs-financial-tax {
    background: #f3e5f5 !important;
    border-left: 6px solid #4a148c !important;
}

.fs-high-contrast .fs-financial-label {
    color: #333 !important;
    opacity: 1 !important;
}

.fs-high-contrast .fs-financial-value {
    color: #111 !important;
}

.fs-high-contrast .fs-year-badge {
    background: #e5e5e5 !important;
    color: #111 !important;
}

.fs-high-contrast .fs-ring-fill {
    stroke: #333 !important;
}

/* --- Invoice status badges (dashboard) --- */
.fs-high-contrast .fs-invoice-status {
    border: 2px solid #333 !important;
    border-radius: 4px !important;
}

.fs-high-contrast .fs-invoice-status.fs-status-paid {
    background: #e8f5e9 !important;
    color: #111 !important;
    border-color: #1a5c1a !important;
    border-left: 6px solid #1a5c1a !important;
}

.fs-high-contrast .fs-invoice-status.fs-status-sent {
    background: #e8eaf6 !important;
    color: #111 !important;
    border-color: #1a237e !important;
    border-left: 6px double #1a237e !important;
}

.fs-high-contrast .fs-invoice-status.fs-status-overdue {
    background: #fce4ec !important;
    color: #111 !important;
    border-color: #8b0000 !important;
    border-left: 6px solid #8b0000 !important;
    font-weight: 700 !important;
}

/* --- Generic fs-badge (contacts, etc.) --- */
.fs-high-contrast .fs-badge {
    border: 2px solid #333 !important;
    border-radius: 4px !important;
    color: #111 !important;
}

.fs-high-contrast .fs-badge.primary {
    background: #e5e5e5 !important;
    border-color: #1a5c1a !important;
}

.fs-high-contrast .fs-badge.billing {
    background: #e5e5e5 !important;
    border-color: #1a237e !important;
}

.fs-high-contrast .fs-badge.project {
    background: #e5e5e5 !important;
    border-color: #8b3a00 !important;
}

.fs-high-contrast .fs-badge.fs-badge-internal {
    background: #f0f0f0 !important;
    border: 2px dashed #666 !important;
    color: #111 !important;
}

/* --- Assignee badges --- */
.fs-high-contrast .fs-assignee-badge {
    border: 2px solid #333 !important;
    border-radius: 4px !important;
    color: #111 !important;
    background: #f0f0f0 !important;
}

.fs-high-contrast .fs-assignee-badge.designer {
    background: #f3e5f5 !important;
    border-color: #4a148c !important;
}

.fs-high-contrast .fs-assignee-badge.client {
    background: #fce4ec !important;
    border-color: #880e4f !important;
}

/* --- Priority badges (inline-styled, need !important) --- */
.fs-high-contrast .fs-priority-badge {
    border: 2px solid #333 !important;
    border-radius: 4px !important;
    color: #111 !important;
    background: #f0f0f0 !important;
}

/* --- Stat value colored variants --- */
.fs-high-contrast .fs-stat-value.success {
    color: #1a5c1a !important;
    font-weight: 800 !important;
}

.fs-high-contrast .fs-stat-value.warning {
    color: #8b3a00 !important;
    font-weight: 800 !important;
}

.fs-high-contrast .fs-stat-value.danger {
    color: #8b0000 !important;
    font-weight: 800 !important;
}

.fs-high-contrast .fs-stat-item .fs-stat-value.success {
    color: #1a5c1a !important;
}

.fs-high-contrast .fs-stat-item .fs-stat-value.warning {
    color: #8b3a00 !important;
}

/* --- Activity badges (time tracking) --- */
.fs-high-contrast .fs-activity-badge {
    border: 2px solid #333 !important;
    border-radius: 4px !important;
    color: #111 !important;
    background: #f0f0f0 !important;
}

.fs-high-contrast .fs-activity-development {
    background: #e3f2fd !important;
    border-color: #0d47a1 !important;
}

.fs-high-contrast .fs-activity-design {
    background: #fce4ec !important;
    border-color: #880e4f !important;
}

.fs-high-contrast .fs-activity-meeting {
    background: #fff3e0 !important;
    border-color: #8b3a00 !important;
}

.fs-high-contrast .fs-activity-research {
    background: #e8f5e9 !important;
    border-color: #1a5c1a !important;
}

.fs-high-contrast .fs-activity-admin {
    background: #f3e5f5 !important;
    border-color: #4a148c !important;
}

.fs-high-contrast .fs-activity-other {
    background: #f0f0f0 !important;
    border-color: #666 !important;
}

/* --- Billable / Non-billable / Invoiced status badges --- */
.fs-high-contrast .fs-status-badge.fs-status-invoiced {
    background: #e8eaf6 !important;
    color: #111 !important;
    border: 2px solid #1a237e !important;
    border-radius: 4px !important;
}

.fs-high-contrast .fs-status-badge.fs-status-invoiced .fs-status-dot {
    background: #1a237e !important;
    border: 2px solid #111 !important;
}

.fs-high-contrast .fs-status-badge.fs-status-billable {
    background: #e8f5e9 !important;
    color: #111 !important;
    border: 2px solid #1a5c1a !important;
    border-radius: 4px !important;
}

.fs-high-contrast .fs-status-badge.fs-status-billable .fs-status-dot {
    background: #1a5c1a !important;
    border: 2px solid #111 !important;
}

.fs-high-contrast .fs-status-badge.fs-status-non-billable {
    background: #f0f0f0 !important;
    color: #111 !important;
    border: 2px dashed #666 !important;
    border-radius: 4px !important;
}

.fs-high-contrast .fs-status-badge.fs-status-non-billable .fs-status-dot {
    background: #666 !important;
    border: 2px solid #333 !important;
}

/* Standalone status dots */
.fs-high-contrast .fs-status-invoiced:not(.fs-status-badge) {
    background: #1a237e !important;
    border: 2px solid #111 !important;
}

.fs-high-contrast .fs-status-billable:not(.fs-status-badge) {
    background: #1a5c1a !important;
    border: 2px solid #111 !important;
}

.fs-high-contrast .fs-status-non-billable:not(.fs-status-badge) {
    background: #999 !important;
    border: 2px solid #333 !important;
}

/* --- Utility class overrides --- */
.fs-high-contrast .fs-icon-success { color: #1a5c1a !important; }
.fs-high-contrast .fs-icon-danger { color: #8b0000 !important; }
.fs-high-contrast .fs-text-success { color: #1a5c1a !important; }
.fs-high-contrast .fs-text-danger { color: #8b0000 !important; }
.fs-high-contrast .fs-delete-link { color: #8b0000 !important; }

/* --- Calendar events --- */
.fs-high-contrast .fs-calendar-event {
    background: #fff !important;
    color: #111 !important;
    border: 2px solid #333 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

.fs-high-contrast .fs-calendar-event .fs-event-icon {
    opacity: 1 !important;
    color: #111 !important;
}

/* Project events: solid left */
.fs-high-contrast .fs-calendar-event.fs-event-project,
.fs-high-contrast .fs-calendar-event[style*="border-left-color: #81A5DF"] {
    border-left: 6px solid #1a237e !important;
    background: #e8eaf6 !important;
}

/* Milestone events: thick left green */
.fs-high-contrast .fs-calendar-event.fs-event-milestone,
.fs-high-contrast .fs-calendar-event[style*="border-left-color: #3ECFB2"] {
    border-left: 6px solid #1a5c1a !important;
    background: #e8f5e9 !important;
}

/* Task events: dashed left */
.fs-high-contrast .fs-calendar-event.fs-event-task,
.fs-high-contrast .fs-calendar-event[style*="border-left-color: #9CA3AF"] {
    border-left: 6px dashed #333 !important;
    background: #f0f0f0 !important;
}

/* Invoice events: left accent orange */
.fs-high-contrast .fs-calendar-event.fs-event-invoice,
.fs-high-contrast .fs-calendar-event[style*="border-left-color: #FFA26E"] {
    border-left: 6px solid #8b3a00 !important;
    background: #fff3e0 !important;
}

/* Expiring events: left accent red */
.fs-high-contrast .fs-calendar-event.fs-event-expiring,
.fs-high-contrast .fs-calendar-event[style*="border-left-color: #E85A5A"] {
    border-left: 6px solid #8b0000 !important;
    background: #fce4ec !important;
}

/* Tax events: left accent purple */
.fs-high-contrast .fs-calendar-event.fs-event-tax,
.fs-high-contrast .fs-calendar-event[style*="border-left-color: #5D4E80"] {
    border-left: 6px solid #4a148c !important;
    background: #f3e5f5 !important;
}

/* Booking events: double left */
.fs-high-contrast .fs-calendar-event.fs-event-booking,
.fs-high-contrast .fs-calendar-event[style*="border-left-color: #77D5C9"] {
    border-left: 6px double #1a5c1a !important;
    background: #e8f5e9 !important;
}

/* Google calendar events */
.fs-high-contrast .fs-calendar-event.fs-event-google,
.fs-high-contrast .fs-calendar-event[style*="border-left-color: #10B981"] {
    border-left: 6px double #1a237e !important;
    background: #e8eaf6 !important;
}

.fs-high-contrast .fs-event-more {
    color: #111 !important;
    font-weight: 600 !important;
}

/* --- Calendar grid day cells --- */
.fs-high-contrast .fs-calendar-day {
    border: 1px solid #666 !important;
}

.fs-high-contrast .fs-calendar-day.today {
    border: 3px solid #111 !important;
    background: #f5f5f5 !important;
}

.fs-high-contrast .fs-calendar-day.other-month {
    background: #e5e5e5 !important;
}

.fs-high-contrast .fs-calendar-day-number {
    color: #111 !important;
    font-weight: 600 !important;
}

.fs-high-contrast .fs-calendar-header th {
    color: #111 !important;
    font-weight: 700 !important;
}

/* --- Week widget external events toggle --- */
.fs-high-contrast .fs-week-external-toggle {
    color: #333 !important;
}

.fs-high-contrast .fs-week-external-toggle input:checked ~ .dashicons,
.fs-high-contrast .fs-week-external-toggle input:checked ~ .fs-week-external-label {
    color: #111 !important;
    font-weight: 700 !important;
}

/* --- Print override: always use high contrast --- */
@media print {
    .fs-status-badge {
        border: 2px solid #333 !important;
        border-radius: 4px !important;
        color: #111 !important;
    }
}

/* --- Pagination high contrast --- */
.fs-high-contrast .fs-pagination-current {
    background: #111 !important;
    color: #fff !important;
}

.fs-high-contrast .fs-pagination-link {
    color: #111 !important;
    border: 1px solid #333 !important;
}

/* ============================================
   FREEMIUS UPGRADE NOTICES & PRO BADGES
   ============================================ */

/* Pro badge - small inline tag */
.fs-upgrade-badge {
    display: inline-block;
    padding: 2px 8px;
    background: linear-gradient(135deg, var(--fs-secondary) 0%, var(--fs-secondary-dark) 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    line-height: 1.4;
    vertical-align: middle;
}

.fs-upgrade-badge-sm {
    display: inline-block;
    padding: 1px 5px;
    background: var(--fs-secondary);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 3px;
    vertical-align: middle;
    cursor: help;
}

/* Inline upgrade notice - appears next to locked features */
.fs-upgrade-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--fs-secondary-light);
    border: 1px solid rgba(129, 165, 223, 0.3);
    border-radius: var(--fs-border-radius);
    font-size: 13px;
    color: var(--fs-gray-700);
    margin: 8px 0;
}

.fs-upgrade-inline a {
    color: var(--fs-secondary-dark);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.fs-upgrade-inline a:hover {
    color: var(--fs-secondary);
    text-decoration: underline;
}

/* Banner upgrade notice - full-width at top of sections */
.fs-upgrade-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--fs-secondary-light) 0%, #f3edfa 100%);
    border: 1px solid rgba(129, 165, 223, 0.25);
    border-radius: var(--fs-border-radius-lg);
    margin-bottom: 20px;
}

.fs-upgrade-banner-content {
    font-size: 13px;
    color: var(--fs-gray-700);
    line-height: 1.5;
}

.fs-upgrade-banner-content strong {
    color: var(--fs-gray-800);
}

/* Modal upgrade content */
.fs-upgrade-modal-content {
    text-align: center;
    padding: 30px 20px;
}

.fs-upgrade-modal-content .fs-upgrade-icon {
    font-size: 40px;
    margin-bottom: 16px;
}

.fs-upgrade-modal-content h3 {
    margin: 0 0 10px;
    color: var(--fs-gray-800);
    font-size: 18px;
}

.fs-upgrade-modal-content p {
    margin: 0 0 20px;
    color: var(--fs-gray-600);
    font-size: 14px;
}

/* Locked button state - for grayed-out premium buttons */
.fs-btn-locked {
    position: relative;
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.fs-btn-locked::after {
    content: 'PRO';
    position: absolute;
    top: -6px;
    right: -6px;
    padding: 1px 5px;
    background: var(--fs-secondary);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    border-radius: 3px;
    letter-spacing: 0.3px;
}

/* Clickable locked button - opens upgrade prompt */
.fs-btn-pro-gate {
    position: relative;
    opacity: 0.75;
    cursor: pointer;
}

.fs-btn-pro-gate::after {
    content: 'PRO';
    position: absolute;
    top: -6px;
    right: -6px;
    padding: 1px 5px;
    background: var(--fs-secondary);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    border-radius: 3px;
    letter-spacing: 0.3px;
}

.fs-btn-pro-gate:hover {
    opacity: 1;
}

/* Tooltip for pro features */
.fs-pro-tooltip {
    position: relative;
    cursor: help;
}

/* Soft limit warning (approaching limit) */
.fs-limit-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--fs-accent-light);
    border: 1px solid rgba(255, 162, 110, 0.3);
    border-radius: var(--fs-border-radius);
    font-size: 13px;
    color: var(--fs-gray-700);
    margin: 8px 0;
}

.fs-limit-warning a {
    color: #C65D45;
    font-weight: 600;
    text-decoration: none;
}

/* ===== Usage Counter ===== */
.fs-usage-counter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--fs-secondary-light);
    border: 1px solid rgba(129, 165, 223, 0.2);
    border-radius: var(--fs-border-radius);
    font-size: 13px;
    color: var(--fs-gray-600);
    margin: 8px 0;
}

.fs-usage-counter-text {
    white-space: nowrap;
    font-weight: 500;
    color: var(--fs-gray-700);
}

.fs-usage-bar {
    width: 80px;
    height: 6px;
    background: rgba(129, 165, 223, 0.2);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

.fs-usage-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fs-secondary) 0%, var(--fs-secondary-dark) 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.fs-usage-upgrade-link {
    margin-left: auto;
    color: var(--fs-secondary-dark);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    font-size: 12px;
}

.fs-usage-upgrade-link:hover {
    color: var(--fs-secondary);
    text-decoration: underline;
}

/* ===== Timer Pro Overlay ===== */
.fs-timer-card {
    position: relative;
}

.fs-timer-pro-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

.fs-timer-pro-overlay-content {
    text-align: center;
    padding: 20px;
}

.fs-timer-pro-overlay-content .fs-upgrade-badge {
    margin-bottom: 10px;
}

.fs-timer-pro-overlay-content p {
    margin: 10px 0 16px;
    font-size: 13px;
    color: var(--fs-gray-600);
    line-height: 1.5;
}

/* ===== General Pro Overlay (reusable on any section) ===== */
.fs-pro-overlay-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--fs-border-radius-lg);
}

.fs-pro-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

.fs-pro-overlay-content {
    text-align: center;
    padding: 24px;
    max-width: 360px;
}

.fs-pro-overlay-content .fs-upgrade-badge {
    margin-bottom: 8px;
}

.fs-pro-overlay-content h3 {
    margin: 10px 0 6px;
    font-size: 16px;
    color: var(--fs-gray-800);
}

.fs-pro-overlay-content p {
    margin: 6px 0 16px;
    font-size: 13px;
    color: var(--fs-gray-600);
    line-height: 1.5;
}

.fs-pro-overlay-compact {
    min-height: 120px;
}

.fs-pro-overlay-compact .fs-pro-overlay-content {
    padding: 16px;
}

.fs-pro-overlay-compact .fs-pro-overlay-content p {
    margin: 6px 0 12px;
    font-size: 12px;
}

/* ===== Menu Pro Badge ===== */
.fs-menu-pro-badge {
    display: inline-block;
    padding: 1px 5px;
    background: var(--fs-secondary);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 4px;
    line-height: 1.4;
}

/* ---- High Contrast Overrides ---- */
.fs-high-contrast .fs-usage-counter {
    background: #f0f0f0 !important;
    border-color: #333 !important;
    color: #111 !important;
}

.fs-high-contrast .fs-usage-bar {
    background: #ccc !important;
}

.fs-high-contrast .fs-usage-bar-fill {
    background: #333 !important;
}

.fs-high-contrast .fs-timer-pro-overlay {
    background: rgba(255, 255, 255, 0.95) !important;
}

.fs-high-contrast .fs-pro-overlay {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #333 !important;
}

.fs-high-contrast .fs-menu-pro-badge {
    background: #111 !important;
    color: #fff !important;
}

/* Powered by badge for free tier client-facing documents */
.fs-powered-badge {
    text-align: center;
    padding: 12px;
    margin-top: 20px;
    font-size: 11px;
    color: #999;
}

.fs-powered-badge a {
    color: #999;
    text-decoration: none;
}

.fs-powered-badge a:hover {
    color: var(--fs-primary);
}

/* ---- High Contrast Overrides ---- */
.fs-high-contrast .fs-upgrade-badge {
    background: #111 !important;
    color: #fff !important;
}

.fs-high-contrast .fs-upgrade-inline {
    background: #f0f0f0 !important;
    border-color: #333 !important;
    color: #111 !important;
}

.fs-high-contrast .fs-upgrade-banner {
    background: #f0f0f0 !important;
    border-color: #333 !important;
}

.fs-high-contrast .fs-limit-warning {
    background: #fff3e0 !important;
    border-color: #333 !important;
    color: #111 !important;
}

.fs-high-contrast .fs-btn-locked::after,
.fs-high-contrast .fs-btn-pro-gate::after {
    background: #111 !important;
}

/* ---- Premium Required Page ---- */
.fs-premium-required {
    max-width: 500px;
    margin: 80px auto;
    text-align: center;
    background: #fff;
    padding: 48px 40px;
    border-radius: var(--fs-border-radius-xl, 16px);
    box-shadow: var(--fs-shadow-md, 0 4px 12px rgba(123, 104, 166, 0.12));
}

.fs-premium-required-icon {
    font-size: 48px;
    margin-bottom: 16px;
    line-height: 1;
}

.fs-premium-required h1 {
    font-size: 22px;
    margin: 0 0 12px;
    color: var(--fs-gray-900, #1F2937);
}

.fs-premium-required p {
    font-size: 14px;
    color: var(--fs-gray-600, #6B7280);
    line-height: 1.6;
    margin: 0;
}

.fs-premium-help {
    margin-top: 24px !important;
    font-size: 12px !important;
    color: var(--fs-gray-500, #9CA3AF) !important;
}

.fs-high-contrast .fs-premium-required {
    background: #fff !important;
    border: 2px solid #333 !important;
}

/* ===== Non-Billable Task Indicator ===== */
.fs-non-billable-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--fs-gray-200, #EEF1F5);
    color: var(--fs-gray-600, #6B7280);
    border-radius: 50%;
    font-size: 12px;
    cursor: help;
    line-height: 1;
}

.fs-non-billable-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--fs-gray-500, #9CA3AF);
    background: var(--fs-gray-100, #F5F7FA);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.fs-high-contrast .fs-non-billable-badge {
    color: #333 !important;
    background: #e5e5e5 !important;
    border: 1px solid #666 !important;
}

/* ===== Floating Timer Indicator ===== */
.fs-floating-timer {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--fs-gray-900, #1F2937);
    color: #fff;
    padding: 8px 12px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    font-size: 13px;
    transition: all 0.3s ease;
    cursor: default;
}

.fs-floating-timer:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

.fs-floating-timer-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fs-primary, #1FBBA6);
    flex-shrink: 0;
}

.fs-floating-timer.running .fs-floating-timer-pulse {
    animation: fs-pulse 2s ease-in-out infinite;
}

.fs-floating-timer.paused .fs-floating-timer-pulse {
    background: var(--fs-accent, #FFA26E);
    animation: none;
}

@keyframes fs-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.fs-floating-timer-info {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.fs-floating-timer-info:hover {
    opacity: 0.85;
}

.fs-floating-timer-time {
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.fs-floating-timer-task {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.7;
    font-size: 12px;
}

.fs-floating-timer-popout {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.fs-floating-timer-popout:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fs-floating-timer-popout .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
}

/* ===== Timer Widget Pop-out Button ===== */
.fs-timer-popout-btn {
    width: 36px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--fs-gray-300, #E2E6EC);
    background: var(--fs-gray-50, #FAFBFC);
    color: var(--fs-gray-500, #9CA3AF);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.fs-timer-popout-btn:hover {
    border-color: var(--fs-primary, #1FBBA6);
    color: var(--fs-primary, #1FBBA6);
    background: var(--fs-primary-xtralight, #E0F7F3);
}

.fs-timer-popout-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* High contrast overrides */
.fs-high-contrast .fs-floating-timer {
    background: #000 !important;
    border: 2px solid #fff !important;
}

.fs-high-contrast .fs-floating-timer-popout {
    background: rgba(255, 255, 255, 0.25) !important;
    border: 1px solid #fff !important;
}

.fs-high-contrast .fs-timer-popout-btn {
    border: 2px solid #333 !important;
    color: #333 !important;
}

.fs-high-contrast .fs-status-dot-inline {
    border: 1px solid #333;
}

.fs-high-contrast .fs-dot-invoiced {
    background: #006644;
}

.fs-high-contrast .fs-dot-billable {
    background: #997700;
}


/* ===== Dashboard Mobile Responsive ===== */
@media screen and (max-width: 782px) {

    /* --- Global form controls --- */
    .wp-core-ui select,
    .wp-admin .form-table select {
        min-height: 40px;
        font-size: 14px;
        line-height: 1.625;
        padding: 5px 20px 5px 8px;
    }

    /* --- Financial Overview --- */
    .fs-financial-header {
        display: flex;
        flex-wrap: wrap;
    }

    .fs-financial-header h2 {
        margin: 0 0 5px 0;
        font-size: 18px;
        font-weight: 600;
        color: var(--fs-gray-700);
    }

    .fs-financial-label {
        line-height: 1.15;
    }

    /* --- Card headers --- */
    .fs-widget-body .fs-card-header h3 {
        font-size: 16px;
    }

    .fs-card-header {
        padding: 16px 16px 12px;
    }

    .fs-card-footer {
        padding: 10px 16px;
    }

    /* --- Task filter icon --- */
    .fs-icon-btn.fs-task-filter-toggle {
        padding: 0;
    }

    /* --- Task Widget --- */
    #fs-dashboard-tasks .fs-task-item {
        display: block;
        padding: 16px;
    }

    #fs-dashboard-tasks .fs-task-checkbox {
        float: left;
        margin-right: 8px;
        margin-top: -3px;
        line-height: 1.4;
    }

    #fs-dashboard-tasks .fs-task-info {
        display: block;
        min-width: 0;
        margin-bottom: 10px;
    }

    #fs-dashboard-tasks .fs-task-title {
        white-space: normal;
        font-size: 15px;
        line-height: 1.4;
        display: block;
        margin-bottom: 10px;
    }

    /* Row 2: status select full width, centered text */
    #fs-dashboard-tasks .fs-inline-status-select {
        font-size: 10px;
        padding: 5px 28px 5px 28px;
        text-align: center;
        text-align-last: center;
        -webkit-text-align-last: center;
        -moz-text-align-last: center;
        width: 100%;
        display: block;
    }

    /* Row 3+4: date+overdue, then project */
    #fs-dashboard-tasks .fs-task-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 6px 8px;
        min-width: 0;
        clear: both;
        margin-top: 10px;
    }

    #fs-dashboard-tasks .fs-task-due {
        white-space: nowrap;
        flex-shrink: 0;
    }

    #fs-dashboard-tasks .fs-status-badge {
        font-size: 9px;
        padding: 3px 8px;
        flex: 1;
        text-align: center !important;
    }

    /* Row 4: project name full width, centered */
    #fs-dashboard-tasks .fs-task-project {
        font-size: 13px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        flex-basis: 100%;
        text-align: center;
    }

    /* Hide timer button on mobile dashboard tasks */
    #fs-dashboard-tasks .fs-task-start-timer.fs-dashboard-task-timer {
        display: none;
    }

    /* Dashboard task widget header controls */
    .fs-task-widget-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .fs-task-widget-controls {
        flex-wrap: nowrap;
        flex-direction: row-reverse;
    }

    .fs-task-limit-select {
        width: auto;
    }

    /* --- Item List Widgets (Projects, Invoices) --- */
    .fs-item-row {
        flex-wrap: wrap;
        padding: 12px 16px;
        gap: 4px 10px;
    }

    .fs-item-title {
        flex: 1 1 60%;
        font-size: 13px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fs-item-amount {
        font-size: 13px;
    }

    /* --- Compact Lists (Proposals, Contracts) --- */
    .fs-compact-list li {
        padding: 10px 16px;
    }

    .fs-compact-list a {
        font-size: 13px;
    }

    .fs-compact-list .fs-meta {
        font-size: 11px;
    }

    /* --- Upcoming Events --- */
    .fs-event-item {
        flex-wrap: wrap;
        gap: 4px 10px;
    }

    .fs-event-info {
        flex: 1 1 100%;
    }

    /* --- Recent Sessions --- */
    .fs-session-item {
        flex-wrap: wrap;
        padding: 10px 16px;
        gap: 4px 8px;
    }

    .fs-session-duration {
        font-size: 12px;
    }

    .fs-session-project {
        font-size: 11px;
    }
}

@media screen and (max-width: 480px) {

    .fs-item-row {
        gap: 3px 8px;
    }

    .fs-item-title {
        flex: 1 1 100%;
    }

    .fs-item-amount,
    .fs-invoice-status {
        font-size: 12px;
    }
}

/* Hide mobile-only elements on desktop */
.fs-mobile-tab-dropdown {
    display: none;
}

/* ============================================
   MOBILE RESPONSIVE - ALL PAGE VIEWS
   ============================================ */
@media screen and (max-width: 782px) {

    /* --- Page Headers (all list pages) --- */
    .fs-page-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .fs-page-header .fs-page-title {
        font-size: 20px;
        flex: 1 1 100%;
    }

    .fs-page-header .fs-btn {
        font-size: 13px;
        padding: 8px 14px;
    }

    /* --- Breadcrumbs (project/client detail views) --- */
    .fs-breadcrumb {
        font-size: 13px;
        flex-wrap: wrap;
        gap: 4px;
    }

    /* --- Tab Navigation (project detail, time tracking, etc.) --- */
    .fs-tab-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        gap: 0;
        scrollbar-width: none;
    }

    .fs-tab-nav::-webkit-scrollbar {
        display: none;
    }

    .fs-tab-nav .fs-tab-link,
    .fs-tab-nav .fs-tab {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 13px;
        padding: 10px 14px;
    }

    /* --- List Headers (filter/sort bars) --- */
    .fs-list-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .fs-header-filters {
        flex-wrap: wrap;
        gap: 6px;
    }

    .fs-header-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    .fs-header-actions .fs-btn,
    .fs-header-actions .fs-dropdown {
        flex-shrink: 0;
    }

    .fs-header-client {
        flex-basis: 100%;
        font-size: 13px;
    }

    /* --- Filter Panels --- */
    .fs-filter-panel {
        flex-direction: column;
    }

    .fs-filter-panel .fs-filter-group {
        width: 100%;
    }

    .fs-filter-panel select {
        width: 100%;
    }

    /* --- Data Tables (all list views) --- */
    .fs-table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .fs-table {
        font-size: 13px;
    }

    .fs-table th,
    .fs-table td {
        padding: 10px 8px;
        white-space: nowrap;
    }

    .fs-table th {
        font-size: 11px;
    }

    /* Hide less critical columns on mobile */
    .fs-project-table .column-starts,
    .fs-project-table .column-ends {
        display: none;
    }

    .fs-proposal-table .column-starts,
    .fs-proposal-table .column-expires {
        display: none;
    }

    /* Invoices: hide project and sent date columns */
    .fs-table th:nth-child(4),
    .fs-table td:nth-child(4) {
        /* Only for invoice table - handled by specific class below */
    }

    /* --- Row Action Menus --- */
    .fs-row-menu-trigger {
        min-width: 36px;
        min-height: 36px;
    }

    .fs-row-menu-dropdown {
        right: 0;
        min-width: 180px;
    }

    .fs-row-menu-dropdown a {
        padding: 10px 16px;
        font-size: 14px;
    }

    /* --- Inline Status Selects (all list tables) --- */
    .fs-inline-status-select {
        font-size: 9px;
        min-width: 75px;
        padding: 4px 22px 4px 8px;
    }

    /* --- Project Detail View --- */
    .fs-project-card {
        padding: 16px;
    }

    .fs-project-card .fs-card-title {
        font-size: 15px;
    }

    .fs-billing-details dt {
        font-size: 13px;
    }

    .fs-billing-details dd {
        font-size: 13px;
    }

    .fs-services-list-modern .fs-service-row {
        flex-wrap: wrap;
        gap: 4px 8px;
    }

    .fs-services-list-modern .fs-service-name {
        flex: 1 1 100%;
    }

    /* --- Client Cards Grid --- */
    .fs-client-card {
        padding: 16px;
    }

    .fs-client-card-header {
        gap: 12px;
        margin-bottom: 14px;
    }

    .fs-client-avatar {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .fs-client-card-stats {
        gap: 8px;
        justify-content: space-evenly;
    }

    .fs-link-copy-group {
        flex-wrap: wrap;
    }

    .fs-info-row.two-col {
        grid-template-columns: 1fr;
    }

    /* Hide client list view toggle on mobile - cards only */
    #fs-clients-view-toggle {
        display: none;
    }

    #fs-clients-list-view {
        display: none !important;
    }

    #fs-clients-grid-view {
        display: grid !important;
    }

    .fs-client-stat-value {
        font-size: 16px;
    }

    /* --- Expense List --- */
    .fs-table .column-receipt {
        display: none;
    }

    /* --- Task List View --- */
    .fs-table .column-assignee,
    .fs-table .column-context {
        display: none;
    }

    /* --- Kanban Board --- */
    .fs-kanban-board {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }

    .fs-kanban-column {
        min-width: 260px;
    }

    /* --- Modals --- */
    .fs-modal-content {
        width: 95% !important;
        max-width: none;
        margin: 10px auto;
        max-height: 90vh;
    }

    .fs-modal-body {
        padding: 16px;
    }

    .fs-modal-footer {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .fs-modal-footer .fs-btn {
        flex: 1;
        text-align: center;
    }

    /* --- Invoice/Proposal/Contract Detail Views --- */
    .fs-document-header {
        flex-direction: column;
        gap: 12px;
    }

    .fs-document-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .fs-document-actions .fs-btn {
        flex: 1;
        text-align: center;
        min-width: 120px;
    }

    /* --- Time Tracking List --- */
    .fs-time-entries-table th,
    .fs-time-entries-table td {
        padding: 8px 6px;
        font-size: 12px;
    }

    /* --- Calendar View --- */
    .fs-calendar-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .fs-calendar-nav {
        flex: 1 1 100%;
        justify-content: center;
    }

    /* --- Forms (global) --- */
    .fs-form-row {
        flex-direction: column;
    }

    .fs-form-row .fs-form-group {
        width: 100%;
    }

    .fs-form-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .fs-form-actions .fs-btn {
        flex: 1;
        text-align: center;
    }

    /* --- Tab Navigation → Dropdown on Mobile --- */
    .fs-tab-nav-hidden-mobile {
        display: none !important;
    }

    .fs-mobile-tab-dropdown {
        display: block;
        position: relative;
        margin-bottom: 16px;
    }

    .fs-mobile-tab-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 12px 16px;
        background: #fff;
        border: 1px solid var(--fs-gray-300);
        border-radius: var(--fs-border-radius);
        font-size: 14px;
        font-weight: 600;
        color: var(--fs-gray-800);
        cursor: pointer;
        transition: border-color 0.2s;
    }

    .fs-mobile-tab-trigger:hover,
    .fs-mobile-tab-trigger:focus {
        border-color: var(--fs-primary);
        outline: none;
    }

    .fs-mobile-tab-arrow {
        color: var(--fs-gray-500);
        font-size: 12px;
    }

    .fs-mobile-tab-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border: 1px solid var(--fs-gray-300);
        border-top: none;
        border-radius: 0 0 var(--fs-border-radius) var(--fs-border-radius);
        box-shadow: var(--fs-shadow-md);
        z-index: 100;
        max-height: 300px;
        overflow-y: auto;
    }

    .fs-mobile-tab-menu.open {
        display: block;
    }

    .fs-mobile-tab-option {
        display: block;
        padding: 12px 16px;
        color: var(--fs-gray-700);
        text-decoration: none;
        font-size: 14px;
        border-bottom: 1px solid var(--fs-gray-100);
        transition: background 0.15s;
    }

    .fs-mobile-tab-option:hover {
        background: var(--fs-gray-50);
        color: var(--fs-gray-800);
    }

    .fs-mobile-tab-option.active {
        color: var(--fs-primary-dark);
        font-weight: 600;
        background: var(--fs-primary-xtralight);
    }

    .fs-mobile-tab-option:last-child {
        border-bottom: none;
    }

    /* --- Settings Page --- */
    .fs-settings-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .fs-settings-nav a {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* --- Reports Page --- */
    .fs-report-filters {
        flex-direction: column;
        gap: 8px;
    }

    .fs-report-filters select,
    .fs-report-filters input {
        width: 100%;
    }

    .fs-report-grid {
        grid-template-columns: 1fr;
    }

    .fs-report-card {
        padding: 16px;
    }

    /* --- Dropdown Menus --- */
    .fs-dropdown-menu {
        min-width: 200px;
    }

    .fs-dropdown-menu a {
        padding: 10px 16px;
        font-size: 14px;
    }

    /* ==========================================
       MOBILE CARD LAYOUTS - Contacts Table
       ========================================== */
    .fs-contacts-table thead {
        display: none;
    }

    .fs-contacts-table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid var(--fs-gray-200);
        border-radius: var(--fs-border-radius);
        padding: 14px 16px;
        margin-bottom: 10px;
    }

    .fs-contacts-table tbody td {
        display: block;
        padding: 2px 0;
        border: none;
        font-size: 13px;
    }

    .fs-contacts-table tbody td:first-child {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .fs-contacts-table tbody td:empty,
    .fs-contacts-table tbody td:has(span.text-muted) {
        display: none;
    }

    .fs-contacts-table .column-actions {
        display: flex;
        gap: 8px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--fs-gray-100);
    }

    /* ==========================================
       MOBILE CARD LAYOUTS - Client Projects Table
       ========================================== */
    .fs-tab-pane > .fs-table:not(.fs-contacts-table) thead,
    .fs-tab-pane > .fs-table-responsive > .fs-table thead {
        display: none;
    }

    .fs-tab-pane > .fs-table:not(.fs-contacts-table) tbody tr,
    .fs-tab-pane > .fs-table-responsive > .fs-table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid var(--fs-gray-200);
        border-radius: var(--fs-border-radius);
        padding: 14px 16px;
        margin-bottom: 10px;
    }

    .fs-tab-pane > .fs-table:not(.fs-contacts-table) tbody td,
    .fs-tab-pane > .fs-table-responsive > .fs-table tbody td {
        display: block;
        padding: 2px 0;
        border: none;
        font-size: 13px;
    }

    .fs-tab-pane > .fs-table:not(.fs-contacts-table) tbody td:first-child,
    .fs-tab-pane > .fs-table-responsive > .fs-table tbody td:first-child {
        font-size: 15px;
        margin-bottom: 4px;
    }

    .fs-tab-pane > .fs-table .column-actions,
    .fs-tab-pane > .fs-table-responsive > .fs-table .column-actions {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--fs-gray-100);
    }

    /* ==========================================
       MOBILE CARD LAYOUTS - Client Tasks Table
       ========================================== */
    .fs-tab-pane > .fs-table.wp-list-table thead {
        display: none;
    }

    .fs-tab-pane > .fs-table.wp-list-table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid var(--fs-gray-200);
        border-radius: var(--fs-border-radius);
        padding: 14px 16px;
        margin-bottom: 10px;
        position: relative;
    }

    .fs-tab-pane > .fs-table.wp-list-table tbody td {
        display: block;
        padding: 2px 0;
        border: none;
        font-size: 13px;
    }

    /* Checkbox inline with title */
    .fs-tab-pane > .fs-table.wp-list-table .column-status {
        float: left;
        margin-right: 8px;
        width: auto;
    }

    .fs-tab-pane > .fs-table.wp-list-table .column-title {
        font-size: 15px;
        margin-bottom: 6px;
        overflow: hidden;
    }

    /* Hide assignee and context on mobile cards */
    .fs-tab-pane > .fs-table.wp-list-table .column-assignee,
    .fs-tab-pane > .fs-table.wp-list-table .column-context {
        display: none;
    }

    .fs-tab-pane > .fs-table.wp-list-table .column-priority {
        display: inline-block;
    }

    .fs-tab-pane > .fs-table.wp-list-table .column-due {
        display: inline-block;
        margin-left: 8px;
    }

    .fs-tab-pane > .fs-table.wp-list-table .column-actions {
        display: flex;
        gap: 8px;
        clear: both;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--fs-gray-100);
    }

    /* ==========================================
       MOBILE CARD LAYOUTS - Main Tasks List Page
       ========================================== */
    .fs-table[style*="table-layout: auto"] thead {
        display: none;
    }

    .fs-table[style*="table-layout: auto"] tbody tr {
        display: block;
        background: #fff;
        border: 1px solid var(--fs-gray-200);
        border-radius: var(--fs-border-radius);
        padding: 14px 16px;
        margin-bottom: 10px;
        position: relative;
    }

    .fs-table[style*="table-layout: auto"] tbody td {
        display: block;
        padding: 2px 0;
        border: none;
        font-size: 13px;
    }

    /* Checkbox inline with title */
    .fs-table[style*="table-layout: auto"] .column-status {
        float: left;
        margin-right: 8px;
        width: auto;
    }

    .fs-table[style*="table-layout: auto"] .column-title {
        font-size: 15px;
        margin-bottom: 6px;
        overflow: hidden;
    }

    /* Hide columns that don't fit on cards */
    .fs-table[style*="table-layout: auto"] .column-assignee,
    .fs-table[style*="table-layout: auto"] .column-context {
        display: none;
    }

    .fs-table[style*="table-layout: auto"] .column-priority {
        display: inline-block;
    }

    .fs-table[style*="table-layout: auto"] .column-kanban-status {
        display: inline-block;
        margin-left: 8px;
    }

    .fs-table[style*="table-layout: auto"] .column-due {
        display: inline-block;
        margin-left: 8px;
    }

    .fs-table[style*="table-layout: auto"] .column-actions {
        display: flex;
        gap: 8px;
        clear: both;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--fs-gray-100);
    }
}

/* ============================================
   v7.5.2 Mobile Styles
   ============================================ */

/* --- Time Tracking mobile status dots --- */
.fs-status-dot-inline {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 2px;
}
.fs-dot-invoiced {
    background: var(--fs-primary);
}
.fs-dot-billable {
    background: var(--fs-highlight);
}

/* Hidden by default on desktop */
.fs-calendar-mobile {
    display: none;
}

@media (max-width: 782px) {

    /* --- Calendar mobile: hide desktop grid, sidebar, legend, view-toggle, nav --- */
    .fs-calendar-grid,
    .fs-calendar-week-view,
    .fs-calendar-sidebar,
    .fs-calendar-view-toggle,
    .fs-calendar-header {
        display: none !important;
    }
    
    .fs-calendar-mobile {
        display: block !important;
    }
    
    /* Constrain mini calendar inside calendar mobile view */
    .fs-calendar-mobile .fs-sidebar-mini-cal {
        max-width: 340px;
        margin: 0 auto;
        padding: 5px 10px;
    }
    
    .fs-calendar-mobile .fs-sidebar-mini-cal .fs-sidebar-mini-cal-day {
        padding: 4px;
        min-width: 32px;
        min-height: 32px;
    }
    
    /* Prevent long event names from stretching page */
    .fs-calendar-mobile {
        overflow: hidden;
    }
    
    .fs-calendar-mobile .fs-week-glance-events {
        min-width: 0;
        overflow: hidden;
    }
    
    .fs-calendar-mobile .fs-week-glance-day {
        min-width: 0;
        overflow: hidden;
    }
    
    .fs-calendar-mobile .fs-week-glance-event {
        max-width: 100%;
    }
    
    /* Calendar mobile: tighter layout for more event text room */
    .fs-calendar-mobile .fs-week-glance-widget {
        padding: 0;
    }
    
    .fs-calendar-mobile .fs-week-glance-day-header {
        width: 45px;
    }
    
    /* Calendar mobile month navigation footer */
    .fs-cal-mobile-nav {
        display: flex;
        justify-content: space-between;
        padding: 16px;
        gap: 8px;
    }
    
    .fs-cal-mobile-nav .fs-btn {
        flex: 1;
        text-align: center;
    }
    
    /* --- Expenses: hide Export for Tax Preparer on mobile --- */
    .fs-export-dropdown {
        display: none !important;
    }
    
    /* --- Bookings: hide vertical sidebar, hide "Upcoming" sidebar card, space mini cal --- */
    .fs-bookings-sidebar .fs-card.fs-widget:last-child {
        display: none;
    }
    
    .fs-bookings-sidebar {
        margin-bottom: 20px;
        margin-top: 20px;
    }
    
    .fs-bookings-sidebar .fs-card.fs-widget {
        margin-bottom: 16px;
    }
    
    /* --- Bookings & Settings: hide vertical sidebar on mobile (replaced by tab dropdown) --- */
    .fs-settings-sidebar {
        display: none !important;
    }
    
    /* --- Time Tracking: hide bulk actions bar on mobile --- */
    .fs-bulk-actions-bar {
        display: none !important;
    }
}

/* Dashboard: invoice card rows nested inside widget cards (all screen sizes) */
.fs-card .fs-invoice-mobile-list {
    border-radius: 0;
    box-shadow: none;
}

.fs-card .fs-invoice-mobile-row {
    padding: 12px 16px;
}

.fs-card .fs-invoice-mobile-client {
    font-size: 14px;
}

.fs-card .fs-invoice-mobile-amount {
    font-size: 15px;
}

/* --------------------------------------------------------------------------
   MOBILE: Additional tweaks v7.5.7
   -------------------------------------------------------------------------- */

/* Signature preview img max-width on mobile */
@media (max-width: 782px) {
    .fs-signature-preview img {
        max-width: 220px;
    }
    
    /* Individual Project: remove tab content padding */
    .fs-project-detail .fs-tab-content {
        padding: 15px 0;
    }
    
    /* Email Templates: greyed out on mobile */
    .fs-email-template-mobile-notice {
        display: block;
        background: var(--fs-gray-100);
        border: 1px solid var(--fs-gray-300);
        border-radius: var(--fs-border-radius);
        padding: 16px;
        margin-bottom: 16px;
        text-align: center;
        color: var(--fs-gray-600);
        font-size: 14px;
    }
    
    .fs-email-template-mobile-notice .dashicons {
        display: block;
        margin: 0 auto 8px;
        font-size: 24px;
        width: 24px;
        height: 24px;
        color: var(--fs-gray-400);
    }
    
    .fs-email-templates-content {
        opacity: 0.4;
        pointer-events: none;
        user-select: none;
    }
    
    /* Settings tables: stack form-table rows on mobile */
    .fs-settings-content {
        max-width: 100vw;
        box-sizing: border-box;
    }
    
    .fs-settings-content .form-table,
    .fs-settings-content .form-table thead,
    .fs-settings-content .form-table tbody,
    .fs-settings-content .form-table tr,
    .fs-settings-content .form-table th,
    .fs-settings-content .form-table td {
        display: block !important;
        width: 100% !important;
    }
    
    .fs-settings-content .form-table th {
        padding: 10px 0 4px !important;
        font-weight: 600;
    }
    
    .fs-settings-content .form-table td {
        padding: 0 0 12px !important;
    }
    
    .fs-settings-content .form-table select,
    .fs-settings-content .form-table input[type="text"],
    .fs-settings-content .form-table input[type="number"],
    .fs-settings-content .form-table input[type="email"],
    .fs-settings-content .form-table input[type="url"],
    .fs-settings-content .form-table textarea,
    .fs-settings-content .regular-text,
    .fs-settings-content .large-text {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    /* ===== UNIVERSAL RESPONSIVE TABLE WRAPPER ===== */
    /* JS wraps all tables in .fs-table-responsive on mobile */
    .fs-table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .fs-table-responsive > table {
        min-width: 500px;
    }
    
    /* Smaller tables (2-3 columns) don't need scroll - let them fit */
    .fs-table-responsive > .fs-table-borderless,
    .fs-table-responsive > table.form-table {
        min-width: 0;
    }
    
    /* Tax deductions: quick-add presets grid */
    .fs-deduction-presets {
        grid-template-columns: 1fr 1fr !important;
    }
    
    /* Tax deductions: form rows stack */
    .fs-deduction-form .fs-form-row {
        flex-direction: column;
    }
    
    /* Section header: stack title + button */
    .fs-settings-content .fs-section-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }
    
    /* ===== REPORTING PAGE MOBILE ===== */
    
    /* Report page: constrain width */
    .fs-wrap {
        max-width: 100vw;
        box-sizing: border-box;
    }
    
    /* Dashboard grid (used by reporting): single column */
    .fs-dashboard-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Report summary cards: 2 columns on mobile */
    .fs-report-summary {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }
    
    .fs-report-card {
        padding: 16px 12px;
    }
    
    .fs-report-card .value {
        font-size: 20px;
        word-break: break-all;
    }
    
    .fs-report-card .label {
        font-size: 11px;
    }
    
    /* Report sections: reduce padding */
    .fs-report-section {
        padding: 16px;
    }
    
    /* Quarterly summary cards */
    .fs-quarterly-summary {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }
    
    /* Chart containers */
    .fs-chart-container {
        height: 250px;
    }
    
    /* Export sidebar buttons */
    .fs-export-sidebar-group .fs-btn {
        font-size: 12px;
        padding: 8px 12px;
    }
    
    /* Tax disclaimer: smaller on mobile */
    .fs-tax-disclaimer {
        font-size: 12px;
    }
    
    .fs-tax-disclaimer p {
        font-size: 12px;
    }
    
    /* Pie chart legend: wrap */
    .fs-pie-legend {
        flex-wrap: wrap;
    }
    
    /* Year filter */
    .fs-year-filter select {
        max-width: 100%;
    }
    
    .fs-year-filter label {
        margin-top: 15px;
    }
    
    /* Invoice stats: wrap on mobile */
    .fs-invoice-stats {
        flex-wrap: wrap;
        gap: 20px;
    }
    
    /* Task stat cards: compact padding */
    .fs-tasks-stat-card {
        padding: 10px !important;
    }
    
    .fs-tasks-stat-card.combined-tasks {
        padding: 10px !important;
        gap: 12px;
    }
    
    /* Filters form: stack vertically */
    .fs-filters-form {
        flex-direction: column;
        align-items: stretch !important;
        flex-wrap: wrap !important;
    }
    
    .fs-filters-form .fs-filter-select,
    .fs-filters-form select {
        min-width: 0;
        width: 100%;
    }
    
    /* List header: spacing for links/buttons */
    .fs-list-header a,
    .fs-list-header button,
    .fs-list-header .fs-btn {
        margin: 3px;
    }
    
    /* ===== TASK LIST: mobile card rows matching dashboard design ===== */
    .fs-tasks-list-table {
        display: none !important;
    }
    
    .fs-task-mobile-list {
        display: block !important;
    }
    
    .fs-task-mobile-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 0;
        border-bottom: 1px solid var(--fs-gray-100);
    }
    
    .fs-task-mobile-item:last-child {
        border-bottom: none;
    }
    
    .fs-task-mobile-info {
        flex: 1;
        min-width: 0;
    }
    
    .fs-task-mobile-title {
        font-size: 14px;
        font-weight: 500;
        color: var(--fs-gray-800);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .fs-task-mobile-title.completed {
        text-decoration: line-through;
        color: var(--fs-gray-400);
    }
    
    .fs-task-mobile-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 4px;
        font-size: 12px;
        color: var(--fs-gray-500);
        flex-wrap: wrap;
    }
    
    .fs-task-mobile-meta .overdue {
        color: var(--fs-danger);
        font-weight: 500;
    }
    
    .fs-task-mobile-actions {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    /* ===== KANBAN BOARD: mobile full height + horizontal scroll ===== */
    body.fs-kanban-page {
        height: auto;
        overflow: auto;
    }
    
    body.fs-kanban-page #wpcontent {
        height: auto;
        overflow: visible;
    }
    
    body.fs-kanban-page #wpbody {
        overflow: visible;
    }
    
    body.fs-kanban-page #wpbody-content {
        overflow: visible;
    }
    
    .fs-kanban-wrap {
        overflow: visible;
        padding-right: 0;
    }
    
    .fs-kanban-board {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        flex: none;
        min-height: 400px;
        padding-bottom: 30px;
    }
    
    .fs-kanban-column {
        flex: 0 0 280px;
        min-width: 280px;
    }
    
    .fs-kanban-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
    
    .fs-kanban-filters {
        width: 100%;
    }
    
    .fs-kanban-filters .fs-filters-form {
        flex-direction: column;
    }
    
    /* ===== DOCUMENT PREVIEWS: constrain to screen width ===== */
    .fs-invoice-preview,
    .fs-proposal-preview,
    .fs-contract-preview,
    .fs-document-preview,
    .fs-doc-preview {
        max-width: 100% !important;
        padding: 20px !important;
        margin: 15px 0 0 !important;
        box-sizing: border-box;
    }
    
    .fs-doc-preview-header {
        padding: 20px !important;
    }
    
    .fs-doc-preview-body {
        padding: 20px !important;
    }
    
    .fs-preview-header {
        flex-direction: column;
        gap: 15px;
    }
    
    .fs-preview-meta-table td {
        font-size: 13px;
    }
    
    /* Document preview parties: stack */
    .fs-doc-preview-parties {
        flex-direction: column;
        gap: 15px;
    }
    
    .fs-doc-preview-parties-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Invoice preview items table */
    .fs-invoice-preview .fs-table-responsive > table,
    .fs-doc-preview .fs-table-responsive > table {
        min-width: 400px;
    }
}

/* High-contrast overrides for new mobile elements */
.fs-high-contrast .fs-email-template-mobile-notice {
    border-color: #000;
    color: #000;
}

.fs-high-contrast .fs-table-responsive {
    border: 1px solid #000;
}

/* Email template mobile notice - hidden on desktop, shown on mobile */
@media (min-width: 783px) {
    .fs-email-template-mobile-notice {
        display: none;
    }
}

/* Email Notification Toggles */
.fs-notification-toggles td {
    display: flex;
    align-items: center;
    gap: 12px;
}
.fs-notification-toggles td .description {
    color: var(--fs-gray-600);
    font-size: 13px;
}

/* High Contrast: Notification Toggles */
.fs-high-contrast .fs-notification-toggles td .description {
    color: var(--fs-gray-800);
}

/* High Contrast: Clickable milestone indicators */
.fs-high-contrast .fs-milestone-preview-item:not(.completed) .fs-milestone-indicator:hover {
    background: var(--fs-primary-dark, #2BA891);
    outline: 2px solid var(--fs-gray-800);
}

/* High Contrast: Notes editor */
.fs-high-contrast .fs-notes-editor-wrapper .wp-editor-container {
    border-color: var(--fs-gray-800);
}
.fs-high-contrast .fs-notes-hint {
    color: var(--fs-gray-700);
}

/* ===================================================
   Settings: About / Freelance Studio tab
   =================================================== */

/* Sidebar accent for the "about" nav item */
.fs-settings-nav-item--about {
    margin-top: auto;
    border-top: 1px solid var(--fs-gray-200);
    padding-top: 10px;
    color: var(--fs-secondary-dark);
}
.fs-settings-nav-item--about .dashicons {
    color: var(--fs-secondary);
}
.fs-settings-nav-item--about.active,
.fs-settings-nav-item--about:hover {
    background: var(--fs-secondary-light);
    color: var(--fs-secondary-dark);
}

/* Page wrapper */
.fs-about-page {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Hero */
.fs-about-hero {
    background: var(--fs-teal-purple);
    border-radius: var(--fs-border-radius-lg);
    padding: 28px 32px;
    margin-bottom: 20px;
    color: #fff;
}
.fs-about-hero-inner {
    display: flex;
    align-items: center;
    gap: 18px;
}
.fs-about-hero-logo img {
    border-radius: 0;
}
.fs-about-hero-text h2 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    border: none;
    padding: 0;
}
.fs-about-version {
    margin: 0;
    font-size: 13px;
    opacity: 0.85;
    color: #fff;
}

/* Quick-links row */
.fs-about-links-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.fs-about-link-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius-lg);
    text-decoration: none;
    color: var(--fs-gray-800);
    transition: all 0.2s ease;
    box-shadow: var(--fs-shadow);
}
.fs-about-link-card:hover {
    border-color: var(--fs-primary);
    box-shadow: var(--fs-shadow-md);
    transform: translateY(-2px);
    color: var(--fs-gray-900);
    text-decoration: none;
}
.fs-about-link-card .dashicons {
    font-size: 26px;
    width: 26px;
    height: 26px;
    color: var(--fs-gray-400);
    margin-bottom: 6px;
}
.fs-about-link-card:hover .dashicons {
    color: var(--fs-primary);
}
.fs-about-link-card--primary {
    border-color: var(--fs-primary-light);
    background: var(--fs-primary-xtralight);
}
.fs-about-link-card--primary .dashicons {
    color: var(--fs-primary);
}
.fs-about-link-card-label {
    font-weight: 600;
    font-size: 14px;
}
.fs-about-link-card-sub {
    font-size: 12px;
    color: var(--fs-gray-500);
    line-height: 1.4;
}

/* Announcements */
.fs-announcements-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fs-announcement {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: var(--fs-border-radius);
    border-left: 4px solid transparent;
}
.fs-announcement--info {
    background: var(--fs-secondary-light);
    border-color: var(--fs-secondary);
}
.fs-announcement--new {
    background: var(--fs-primary-xtralight);
    border-color: var(--fs-primary);
}
.fs-announcement--tip {
    background: var(--fs-highlight-light);
    border-color: var(--fs-highlight);
}
.fs-announcement--warning {
    background: var(--fs-accent-light);
    border-color: var(--fs-accent);
}
.fs-announcement-icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}
.fs-announcement--info    .fs-announcement-icon { color: var(--fs-secondary); }
.fs-announcement--new     .fs-announcement-icon { color: var(--fs-primary-dark); }
.fs-announcement--tip     .fs-announcement-icon { color: #8a9a00; }
.fs-announcement--warning .fs-announcement-icon { color: #c06000; }
.fs-announcement-title {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
}
.fs-announcement-body p {
    margin: 0;
    font-size: 13px;
    color: var(--fs-gray-700);
    line-height: 1.5;
}

/* Support CTA banner */
.fs-about-support-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--fs-secondary-dark);
    color: #fff;
    border-radius: var(--fs-border-radius-lg);
    padding: 28px 32px;
    margin: 24px 0;
    flex-wrap: wrap;
}
.fs-about-support-cta-content {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    flex: 1;
    min-width: 260px;
}
.fs-about-support-cta-icon {
    font-size: 36px;
    width: 36px;
    height: 36px;
    opacity: 0.8;
    flex-shrink: 0;
    margin-top: 2px;
}
.fs-about-support-cta h3 {
    margin: 0 0 6px;
    font-size: 17px;
    color: #fff;
    font-weight: 700;
}
.fs-about-support-cta p {
    margin: 0;
    font-size: 13px;
    opacity: 0.85;
    line-height: 1.6;
}
.fs-about-support-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex-shrink: 0;
    background: #fff !important;
    color: var(--fs-secondary-dark) !important;
    box-shadow: none !important;
}
.fs-about-support-btn:hover {
    background: var(--fs-gray-100) !important;
    color: var(--fs-secondary-dark) !important;
    transform: translateY(-1px);
}
.fs-about-support-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Feature request form */
.fs-feature-request-form {
    max-width: 680px;
}
.fs-feature-request-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.fs-form-group {
    margin-bottom: 18px;
}
.fs-form-group label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--fs-gray-800);
}
.fs-form-group label .required {
    color: var(--fs-danger);
    margin-left: 2px;
}
.fs-form-group input[type="text"],
.fs-form-group input[type="email"],
.fs-form-group select,
.fs-form-group textarea {
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    padding: 8px 12px;
    font-size: 13px;
    color: var(--fs-gray-900);
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: #fff;
    box-sizing: border-box;
}
.fs-form-group input:focus,
.fs-form-group select:focus,
.fs-form-group textarea:focus {
    outline: none;
    border-color: var(--fs-primary);
    box-shadow: 0 0 0 3px rgba(62,207,178,0.15);
}
.fs-form-group .description {
    margin-top: 5px;
    font-size: 11px;
    color: var(--fs-gray-500);
}

/* Priority radio group */
.fs-priority-radio-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.fs-priority-radio {
    display: flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
}
.fs-priority-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.fs-priority-radio-label {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--fs-gray-300);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #fff;
    color: var(--fs-gray-600);
}
.fs-priority-radio input:checked + .fs-priority-radio-label--low  { background: var(--fs-highlight-light); border-color: var(--fs-highlight); color: #6a7c00; }
.fs-priority-radio input:checked + .fs-priority-radio-label--med  { background: var(--fs-primary-xtralight); border-color: var(--fs-primary); color: var(--fs-primary-dark); }
.fs-priority-radio input:checked + .fs-priority-radio-label--high { background: var(--fs-accent-light); border-color: var(--fs-accent); color: #c05000; }
.fs-priority-radio-label:hover { border-color: var(--fs-gray-400); background: var(--fs-gray-100); }

/* Success / error messages */
.fs-feature-request-success {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 24px;
    background: var(--fs-primary-xtralight);
    border: 1px solid var(--fs-primary-light);
    border-radius: var(--fs-border-radius);
    margin-bottom: 20px;
}
.fs-feature-request-success .dashicons {
    color: var(--fs-primary-dark);
    font-size: 24px;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}
.fs-feature-request-success strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    color: var(--fs-primary-dark);
}
.fs-feature-request-success p {
    margin: 0;
    font-size: 13px;
    color: var(--fs-gray-700);
}
.fs-feature-request-error {
    padding: 10px 14px;
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: var(--fs-border-radius);
    color: var(--fs-danger);
    font-size: 13px;
    margin-bottom: 14px;
}

.fs-feature-request-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.fs-feature-request-note {
    font-size: 11px;
    color: var(--fs-gray-500);
    margin: 0;
    flex: 1;
    min-width: 200px;
}

/* ── High-contrast overrides ── */
.fs-high-contrast .fs-about-link-card {
    border-color: var(--fs-gray-700);
    background: var(--fs-gray-800);
    color: var(--fs-gray-100);
}
.fs-high-contrast .fs-about-link-card--primary {
    border-color: var(--fs-primary);
    background: #0a2a25;
}
.fs-high-contrast .fs-about-link-card-sub { color: var(--fs-gray-400); }
.fs-high-contrast .fs-announcement--new     { background: #0a2a25; }
.fs-high-contrast .fs-announcement--info    { background: #1a1a30; }
.fs-high-contrast .fs-announcement--tip     { background: #1e2100; }
.fs-high-contrast .fs-announcement-body p   { color: var(--fs-gray-300); }
.fs-high-contrast .fs-about-support-cta     { background: #1a1040; }
.fs-high-contrast .fs-form-group input,
.fs-high-contrast .fs-form-group select,
.fs-high-contrast .fs-form-group textarea {
    background: var(--fs-gray-800);
    border-color: var(--fs-gray-600);
    color: var(--fs-gray-100);
}
.fs-high-contrast .fs-feature-request-success { background: #0a2a25; border-color: var(--fs-primary); }
.fs-high-contrast .fs-priority-radio-label    { background: var(--fs-gray-800); border-color: var(--fs-gray-600); color: var(--fs-gray-300); }
.fs-high-contrast .fs-settings-nav-item--about { border-color: var(--fs-gray-700); }

/* === Contract Contact Override === */
.fs-contract-contact-section {
    margin-top: -8px;
    margin-bottom: 4px;
}
.fs-contract-contact-section .description {
    margin-top: 4px;
    font-size: 12px;
    color: var(--fs-gray-500);
}
.fs-contract-contact-fields {
    background: var(--fs-gray-50);
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius);
    padding: 16px;
    margin-top: -4px;
    margin-bottom: 8px;
}
.fs-contract-contact-fields .fs-form-group {
    margin-bottom: 0;
}

/* High-contrast overrides for contract contact */
.fs-high-contrast .fs-contract-contact-fields {
    background: var(--fs-gray-800);
    border-color: var(--fs-gray-600);
}

/* Responsive */
@media (max-width: 860px) {
    .fs-about-links-row { grid-template-columns: 1fr 1fr; }
    .fs-feature-request-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .fs-about-links-row { grid-template-columns: 1fr; }
    .fs-about-hero { padding: 20px; }
    .fs-about-support-cta { flex-direction: column; padding: 20px; }
}

/* ============================================================
   CLIENT DASHBOARD
   ============================================================ */

/* Profile Header */
.fs-client-profile-header,
.fs-wrap .fs-client-profile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    background: #fff;
    border-radius: var(--fs-border-radius-lg);
    padding: 24px 28px;
    box-shadow: var(--fs-shadow);
    margin-bottom: 0;
    flex-wrap: nowrap;
}

/* Tab nav on client page: margin-top instead of margin-bottom */
.fs-client-profile-header + .fs-tab-nav {
    margin-top: 16px;
}

.fs-client-profile-info {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
    flex: 1;
}

.fs-client-profile-logo {
    width: 64px;
    height: 64px;
    border-radius: var(--fs-border-radius-lg);
    object-fit: cover;
    flex-shrink: 0;
}

.fs-client-profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--fs-border-radius-lg);
    background: var(--fs-teal-purple);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fs-client-profile-details {
    min-width: 0;
}

.fs-client-profile-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--fs-gray-900);
    margin: 0 0 6px 0;
    padding: 0;
    line-height: 1.3;
}

.fs-client-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.fs-client-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--fs-gray-600);
}

.fs-client-meta-item .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
    color: var(--fs-gray-400);
}

.fs-client-meta-item a {
    color: var(--fs-gray-600);
    text-decoration: none;
}

.fs-client-meta-item a:hover {
    color: var(--fs-primary);
}

.fs-client-profile-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: flex-start;
}

.fs-client-profile-actions .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin-right: 2px;
    vertical-align: text-bottom;
}

/* Quick Actions Card (next to stats) */
.fs-client-top-row {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    align-items: stretch;
}

.fs-client-top-row .fs-client-stats-row {
    flex: 1;
    margin-bottom: 0;
}

.fs-client-qa-card {
    flex-shrink: 0;
    width: 220px;
    display: flex;
    align-items: stretch;
    padding: 0 !important;
}

.fs-client-qa-card .fs-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
    flex: 1;
}

.fs-client-qa-card .fs-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 10px;
    background: #fff;
    text-decoration: none;
    color: var(--fs-gray-700);
    transition: all 0.2s;
    border-radius: 0;
}

.fs-client-qa-card .fs-quick-action:first-child {
    border-radius: var(--fs-border-radius-lg) 0 0 0;
}

.fs-client-qa-card .fs-quick-action:nth-child(2) {
    border-radius: 0 var(--fs-border-radius-lg) 0 0;
}

.fs-client-qa-card .fs-quick-action:nth-child(3) {
    border-radius: 0 0 0 var(--fs-border-radius-lg);
}

.fs-client-qa-card .fs-quick-action:last-child {
    border-radius: 0 0 var(--fs-border-radius-lg) 0;
}

.fs-client-qa-card .fs-quick-action:hover {
    background: var(--fs-secondary-light);
    color: var(--fs-secondary-dark);
}

.fs-client-qa-card .fs-quick-action .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--fs-gray-400);
}

.fs-client-qa-card .fs-quick-action:hover .dashicons {
    color: var(--fs-secondary-dark);
}

.fs-client-qa-card .fs-quick-action span:last-child {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
}

/* Stats Row */
.fs-client-stats-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.fs-client-stat-card {
    background: #fff;
    border-radius: var(--fs-border-radius-lg);
    padding: 22px 16px;
    box-shadow: var(--fs-shadow);
    text-align: center;
    align-content: center;
    border-top: 3px solid var(--fs-gray-200);
}

.fs-client-stat-card:nth-child(1) {
    border-top-color: var(--fs-primary);
}

.fs-client-stat-card:nth-child(2) {
    border-top-color: var(--fs-accent);
}

.fs-client-stat-card:nth-child(3) {
    border-top-color: var(--fs-secondary);
}

.fs-client-stat-card:nth-child(4) {
    border-top-color: var(--fs-highlight);
}

.fs-client-stat-card:nth-child(5) {
    border-top-color: var(--fs-info);
}

.fs-client-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--fs-gray-900);
    line-height: 1.2;
    margin-bottom: 6px;
}

.fs-client-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--fs-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Card header row (title + link) */
.fs-card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.fs-card-header-row h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--fs-gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fs-card-link {
    font-size: 13px;
    color: var(--fs-primary);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

.fs-card-link:hover {
    color: var(--fs-primary-dark);
}

/* Badge count */
.fs-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--fs-primary-xtralight);
    color: var(--fs-primary-dark);
    font-size: 12px;
    font-weight: 600;
}

/* Compact table for dashboard cards */
.fs-dashboard-card .fs-compact-table {
    box-shadow: none;
    border: none;
    background: transparent;
}

.fs-dashboard-card .fs-compact-table.widefat {
    border: none;
    box-shadow: none;
}

.fs-compact-table thead th {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--fs-gray-500);
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-compact-table tbody td {
    padding: 10px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--fs-gray-100);
}

.fs-compact-table tbody tr:last-child td {
    border-bottom: none;
}

.fs-link-primary {
    color: var(--fs-gray-800);
    text-decoration: none;
    font-weight: 500;
}

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

.text-right {
    text-align: right;
}

/* Simple list for documents */
.fs-simple-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fs-simple-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--fs-gray-100);
    gap: 8px;
}

.fs-simple-list li:last-child {
    border-bottom: none;
}

.fs-simple-list li a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--fs-gray-700);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fs-simple-list li a:hover {
    color: var(--fs-primary);
}

.fs-simple-list li a .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--fs-gray-400);
    flex-shrink: 0;
}

/* Empty card message */
.fs-empty-card-message {
    text-align: center;
    color: var(--fs-gray-400);
    font-size: 13px;
    padding: 20px 0;
    margin: 0;
}

/* Client notes preview */
.fs-client-notes-preview {
    font-size: 13px;
    color: var(--fs-gray-600);
    line-height: 1.6;
    max-height: 200px;
    overflow-y: auto;
}

.fs-client-notes-preview p {
    margin: 0 0 8px 0;
}

.fs-client-notes-preview p:last-child {
    margin-bottom: 0;
}

/* Compact portal link */
.fs-link-copy-compact {
    display: flex;
    gap: 6px;
}

.fs-link-copy-compact .fs-copy-link {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    padding: 6px 10px;
}

/* Responsive */
@media (max-width: 1200px) {
    .fs-client-stats-row {
        grid-template-columns: repeat(3, 1fr);
    }
    .fs-client-top-row {
        flex-direction: column;
    }
    .fs-client-qa-card {
        width: 100%;
    }
    .fs-client-qa-card .fs-quick-actions {
        grid-template-columns: repeat(4, 1fr);
    }
    .fs-client-qa-card .fs-quick-action:first-child {
        border-radius: var(--fs-border-radius-lg) 0 0 var(--fs-border-radius-lg);
    }
    .fs-client-qa-card .fs-quick-action:nth-child(2) {
        border-radius: 0;
    }
    .fs-client-qa-card .fs-quick-action:nth-child(3) {
        border-radius: 0;
    }
    .fs-client-qa-card .fs-quick-action:last-child {
        border-radius: 0 var(--fs-border-radius-lg) var(--fs-border-radius-lg) 0;
    }
}

@media (max-width: 600px) {
    .fs-client-profile-header {
        flex-direction: column;
    }
    .fs-client-profile-actions {
        width: 100%;
    }
    .fs-client-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .fs-client-qa-card .fs-quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .fs-client-profile-info {
        flex-direction: column;
        align-items: flex-start;
    }
    .fs-client-profile-meta {
        flex-direction: column;
        gap: 6px;
    }
    .fs-client-stats-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* High Contrast */
.fs-high-contrast .fs-client-profile-header {
    border: 2px solid var(--fs-gray-800);
}

.fs-high-contrast .fs-client-stat-card {
    border: 2px solid var(--fs-gray-800);
}

.fs-high-contrast .fs-client-qa-card {
    border: 2px solid var(--fs-gray-800);
}

.fs-high-contrast .fs-client-qa-card .fs-quick-action {
    border: 1px solid var(--fs-gray-300);
}

.fs-high-contrast .fs-client-profile-avatar {
    border: 2px solid #fff;
}

.fs-high-contrast .fs-badge-count {
    border: 1px solid var(--fs-primary-dark);
}

.fs-high-contrast .fs-compact-table thead th {
    border-bottom: 2px solid var(--fs-gray-800);
}

.fs-high-contrast .fs-simple-list li {
    border-bottom: 1px solid var(--fs-gray-400);
}

/* ==========================================================================
   Import Data Tool (Settings > Import)
   @since 8.3.0
   ========================================================================== */

/* Dropzone */
.fs-import-dropzone {
    border: 2px dashed var(--fs-gray-300);
    border-radius: var(--fs-border-radius-lg);
    padding: 40px;
    text-align: center;
    transition: all 0.2s ease;
    background: var(--fs-gray-50);
    margin-top: 16px;
}

.fs-import-dropzone-active,
.fs-import-dropzone:hover {
    border-color: var(--fs-primary);
    background: var(--fs-primary-xtralight);
}

.fs-import-dropzone-content .dashicons {
    font-size: 40px;
    width: 40px;
    height: 40px;
    color: var(--fs-gray-400);
    margin-bottom: 12px;
}

.fs-import-dropzone-active .fs-import-dropzone-content .dashicons {
    color: var(--fs-primary);
}

.fs-import-dropzone-content p {
    margin: 8px 0;
    color: var(--fs-gray-600);
    font-size: 14px;
}

.fs-import-dropzone-or {
    color: var(--fs-gray-400) !important;
    font-size: 12px !important;
}

.fs-import-dropzone-selected {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.fs-import-dropzone-selected .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--fs-primary);
}

.fs-import-filename {
    font-weight: 500;
    color: var(--fs-gray-800);
}

/* Mapping table */
.fs-import-mapping-table {
    margin-top: 16px;
}

.fs-import-mapping-table th {
    font-weight: 600;
    color: var(--fs-gray-700);
    background: var(--fs-gray-100);
}

.fs-import-mapping-table td {
    vertical-align: middle;
}

.fs-import-mapping-table code {
    font-size: 12px;
    color: var(--fs-gray-600);
    background: var(--fs-gray-100);
    padding: 2px 6px;
    border-radius: 3px;
}

.fs-import-map-select {
    min-width: 200px;
    padding: 6px 10px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    font-size: 13px;
    color: var(--fs-gray-800);
    background: #fff;
}

.fs-import-map-select:focus {
    border-color: var(--fs-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(31, 187, 166, 0.15);
}

/* Preview stats */
.fs-import-preview-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.fs-import-stat-card {
    background: var(--fs-gray-50);
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius);
    padding: 16px;
    text-align: center;
}

.fs-import-stat-card.fs-import-stat-total {
    background: var(--fs-primary-xtralight);
    border-color: var(--fs-primary-light);
}

.fs-import-stat-number {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--fs-gray-900);
    line-height: 1.2;
}

.fs-import-stat-total .fs-import-stat-number {
    color: var(--fs-primary-dark);
}

.fs-import-stat-label {
    display: block;
    font-size: 12px;
    color: var(--fs-gray-500);
    margin-top: 4px;
}

/* Preview table */
.fs-import-preview-table-wrap {
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius);
}

.fs-import-preview-table-wrap .widefat {
    border: none;
}

/* Progress bar */
.fs-import-progress-wrap {
    margin-top: 20px;
}

.fs-import-progress-bar {
    width: 100%;
    height: 12px;
    background: var(--fs-gray-200);
    border-radius: 6px;
    overflow: hidden;
}

.fs-import-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fs-primary) 0%, var(--fs-primary-light) 100%);
    border-radius: 6px;
    transition: width 0.3s ease;
}

.fs-import-progress-text {
    margin-top: 12px;
    color: var(--fs-gray-600);
    font-size: 14px;
}

/* Results */
.fs-import-results-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.fs-import-result-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border-radius: var(--fs-border-radius-lg);
}

.fs-import-result-success {
    background: var(--fs-primary-xtralight);
    border: 1px solid var(--fs-primary-light);
}

.fs-import-result-success .dashicons {
    color: var(--fs-primary);
    font-size: 28px;
    width: 28px;
    height: 28px;
}

.fs-import-result-success strong {
    color: var(--fs-primary-dark);
}

.fs-import-result-errors {
    background: #FFF5F5;
    border: 1px solid #FED7D7;
}

.fs-import-result-errors .dashicons {
    color: var(--fs-danger);
    font-size: 28px;
    width: 28px;
    height: 28px;
}

.fs-import-result-errors ul {
    margin: 8px 0 0 20px;
    font-size: 13px;
    color: var(--fs-gray-700);
}

/* Supported columns info */
.fs-import-supported-columns {
    background: var(--fs-gray-50);
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius);
    padding: 12px 16px;
}

/* High Contrast Overrides */
.fs-high-contrast .fs-import-dropzone {
    border-color: var(--fs-gray-500);
    background: var(--fs-gray-900);
}

.fs-high-contrast .fs-import-dropzone-active,
.fs-high-contrast .fs-import-dropzone:hover {
    border-color: var(--fs-primary);
    background: #0a2a25;
}

.fs-high-contrast .fs-import-dropzone-content .dashicons {
    color: var(--fs-gray-400);
}

.fs-high-contrast .fs-import-dropzone-content p {
    color: var(--fs-gray-300);
}

.fs-high-contrast .fs-import-stat-card {
    background: var(--fs-gray-800);
    border-color: var(--fs-gray-600);
}

.fs-high-contrast .fs-import-stat-card.fs-import-stat-total {
    background: #0a2a25;
    border-color: var(--fs-primary-dark);
}

.fs-high-contrast .fs-import-stat-number {
    color: var(--fs-gray-100);
}

.fs-high-contrast .fs-import-stat-total .fs-import-stat-number {
    color: var(--fs-primary-light);
}

.fs-high-contrast .fs-import-stat-label {
    color: var(--fs-gray-400);
}

.fs-high-contrast .fs-import-progress-bar {
    background: var(--fs-gray-700);
}

.fs-high-contrast .fs-import-result-success {
    background: #0a2a25;
    border-color: var(--fs-primary-dark);
}

.fs-high-contrast .fs-import-result-errors {
    background: #2a0a0a;
    border-color: var(--fs-danger);
}

.fs-high-contrast .fs-import-map-select {
    background: var(--fs-gray-800);
    border-color: var(--fs-gray-600);
    color: var(--fs-gray-200);
}

.fs-high-contrast .fs-import-mapping-table code {
    background: var(--fs-gray-800);
    color: var(--fs-gray-300);
}

.fs-high-contrast .fs-import-supported-columns {
    background: var(--fs-gray-800);
    border-color: var(--fs-gray-600);
}

.fs-high-contrast .fs-import-preview-table-wrap {
    border-color: var(--fs-gray-600);
}

/* ==========================================================================
   Merge Client Modal
   @since 8.3.0
   ========================================================================== */

.fs-merge-description {
    margin-bottom: 20px;
}

.fs-merge-description p {
    color: var(--fs-gray-600);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

.fs-merge-visual {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 20px;
    background: var(--fs-gray-50);
    border-radius: var(--fs-border-radius-lg);
    border: 1px solid var(--fs-gray-200);
}

.fs-merge-source,
.fs-merge-target {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fs-merge-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fs-gray-500);
    font-weight: 600;
}

.fs-merge-source strong {
    font-size: 14px;
    color: var(--fs-gray-800);
}

.fs-merge-arrow {
    color: var(--fs-primary);
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0;
}

.fs-merge-target select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    font-size: 13px;
    color: var(--fs-gray-800);
    background: #fff;
}

.fs-merge-target select:focus {
    border-color: var(--fs-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(31, 187, 166, 0.15);
}

.fs-merge-summary {
    padding: 12px 16px;
    background: var(--fs-secondary-light);
    border-radius: var(--fs-border-radius);
    margin-bottom: 16px;
}

.fs-merge-summary p {
    margin: 0;
    font-size: 13px;
    color: var(--fs-secondary-dark);
}

.fs-merge-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: #FFF5F5;
    border: 1px solid #FED7D7;
    border-radius: var(--fs-border-radius);
}

.fs-merge-warning .dashicons {
    color: var(--fs-danger);
    flex-shrink: 0;
    margin-top: 1px;
}

.fs-merge-warning span:last-child {
    font-size: 12px;
    color: var(--fs-gray-700);
    line-height: 1.5;
}

/* Responsive: stack merge visual on small screens */
@media (max-width: 600px) {
    .fs-merge-visual {
        flex-direction: column;
    }
    .fs-merge-arrow {
        transform: rotate(90deg);
    }
}

/* High Contrast - Merge Modal */
.fs-high-contrast .fs-merge-visual {
    background: var(--fs-gray-800);
    border-color: var(--fs-gray-600);
}

.fs-high-contrast .fs-merge-source strong {
    color: var(--fs-gray-100);
}

.fs-high-contrast .fs-merge-target select {
    background: var(--fs-gray-800);
    border-color: var(--fs-gray-600);
    color: var(--fs-gray-200);
}

.fs-high-contrast .fs-merge-summary {
    background: #1a1a30;
    border: 1px solid var(--fs-secondary-dark);
}

.fs-high-contrast .fs-merge-summary p {
    color: var(--fs-secondary-light);
}

.fs-high-contrast .fs-merge-warning {
    background: #2a0a0a;
    border-color: var(--fs-danger);
}

.fs-high-contrast .fs-merge-warning span:last-child {
    color: var(--fs-gray-300);
}

.fs-high-contrast .fs-merge-description p {
    color: var(--fs-gray-400);
}

/* Import Type Selector Cards */
.fs-import-type-cards {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.fs-import-type-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background: var(--fs-gray-50);
    border: 2px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.fs-import-type-card:hover {
    border-color: var(--fs-primary-light);
    background: var(--fs-primary-xtralight);
}

.fs-import-type-card.active {
    border-color: var(--fs-primary);
    background: var(--fs-primary-xtralight);
    box-shadow: 0 0 0 3px rgba(31, 187, 166, 0.15);
}

.fs-import-type-card .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
    color: var(--fs-gray-400);
}

.fs-import-type-card.active .dashicons {
    color: var(--fs-primary);
}

.fs-import-type-card strong {
    font-size: 14px;
    color: var(--fs-gray-800);
}

.fs-import-type-card span:last-child {
    font-size: 12px;
    color: var(--fs-gray-500);
}

@media (max-width: 600px) {
    .fs-import-type-cards {
        flex-direction: column;
    }
}

/* High Contrast - Import Type Cards */
.fs-high-contrast .fs-import-type-card {
    background: var(--fs-gray-800);
    border-color: var(--fs-gray-600);
}

.fs-high-contrast .fs-import-type-card:hover {
    border-color: var(--fs-primary);
    background: #0a2a25;
}

.fs-high-contrast .fs-import-type-card.active {
    border-color: var(--fs-primary);
    background: #0a2a25;
}

.fs-high-contrast .fs-import-type-card strong {
    color: var(--fs-gray-100);
}

/* ============================================
   FINANCES SIDEBAR
   ============================================ */
.fs-settings-nav-divider {
    height: 1px;
    background: var(--fs-gray-200);
    margin: 8px 12px;
}

.fs-pro-badge-sm {
    display: inline-block;
    background: var(--fs-accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
    margin-left: 4px;
}

/* ============================================
   BANK TRANSACTIONS COMING SOON
   ============================================ */
.fs-coming-soon-section {
    text-align: center;
    padding: 60px 30px;
    max-width: 500px;
    margin: 40px auto;
}

.fs-coming-soon-section h2 {
    margin-top: 15px;
    color: var(--fs-gray-800);
}

.fs-coming-soon-section .description {
    font-size: 14px;
    color: var(--fs-gray-600);
    line-height: 1.6;
    margin-bottom: 25px;
}

.fs-coming-soon-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    text-align: left;
    margin-bottom: 20px;
}

.fs-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--fs-gray-50);
    border-radius: var(--fs-border-radius);
    font-size: 13px;
    color: var(--fs-gray-700);
}

.fs-feature-item .dashicons {
    color: var(--fs-primary);
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* High contrast overrides */
.fs-high-contrast .fs-settings-nav-divider {
    background: var(--fs-gray-600);
}

.fs-high-contrast .fs-coming-soon-section h2 {
    color: var(--fs-gray-100);
}

.fs-high-contrast .fs-feature-item {
    background: var(--fs-gray-800);
    color: var(--fs-gray-200);
    border: 1px solid var(--fs-gray-600);
}

@media (max-width: 782px) {
    .fs-coming-soon-features {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   TAX PAGE - DEDUCTION FORM FIXES
   ============================================ */
.fs-deduction-form .fs-form-row {
    align-items: flex-end;
}

.fs-deduction-form .fs-form-row > .fs-form-field {
    min-width: 150px;
}

.fs-deduction-form .fs-form-row > .fs-form-field.fs-form-actions {
    flex: 0 0 auto;
    min-width: auto;
    padding-bottom: 2px;
}

.fs-deduction-form .fs-form-row label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--fs-gray-700);
}

.fs-deduction-form .fs-form-row select,
.fs-deduction-form .fs-form-row input[type="text"],
.fs-deduction-form .fs-form-row input[type="number"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--fs-gray-300);
    border-radius: var(--fs-border-radius);
    font-size: 14px;
    line-height: 1.4;
    height: auto;
}

.fs-deduction-form .fs-form-row select:focus,
.fs-deduction-form .fs-form-row input:focus {
    border-color: var(--fs-primary);
    outline: none;
    box-shadow: 0 0 0 1px var(--fs-primary);
}

/* Quarterly tax table - narrower QTR column */
.fs-quarterly-tax-table th:first-child,
.fs-quarterly-tax-table td:first-child {
    width: 60px;
    white-space: nowrap;
}

.fs-quarterly-tax-table th:nth-child(2),
.fs-quarterly-tax-table td:nth-child(2) {
    width: 80px;
}

/* High contrast */
.fs-high-contrast .fs-deduction-form select,
.fs-high-contrast .fs-deduction-form input[type="text"],
.fs-high-contrast .fs-deduction-form input[type="number"] {
    background: var(--fs-gray-800);
    border-color: var(--fs-gray-600);
    color: var(--fs-gray-100);
}

/* ============================================
   BANK TRANSACTIONS
   ============================================ */
.fs-amount-positive {
    color: var(--fs-primary-dark);
    font-weight: 600;
}

.fs-amount-negative {
    color: var(--fs-danger);
    font-weight: 600;
}

.fs-row-muted {
    opacity: 0.5;
}

.fs-row-muted td {
    text-decoration: line-through;
    color: var(--fs-gray-500);
}

.fs-row-muted .fs-status-badge {
    text-decoration: none;
}

.fs-high-contrast .fs-amount-positive {
    color: #4ade80;
}

.fs-high-contrast .fs-amount-negative {
    color: #f87171;
}

/* ============================================
   TRANSACTION REVIEW TABLE
   ============================================ */
.fs-txn-filter-tabs {
    margin-bottom: 16px;
}

.fs-txn-filter-tabs .fs-tab-count {
    background: var(--fs-gray-200);
    color: var(--fs-gray-600);
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 4px;
}

.fs-txn-filter-tabs .fs-tab.active .fs-tab-count {
    background: rgba(255,255,255,0.3);
    color: #fff;
}

.fs-txn-row {
    cursor: pointer;
    transition: background 0.15s;
}

.fs-txn-row:hover {
    background: var(--fs-gray-50);
}

.fs-txn-row-active,
.fs-txn-row-active:hover {
    background: var(--fs-primary-xtralight);
    border-left: 3px solid var(--fs-primary);
}

.fs-row-ignored {
    opacity: 0.5;
}

.fs-category-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--fs-gray-100);
    color: var(--fs-gray-600);
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   TRANSACTION SIDEBAR PANEL
   ============================================ */
.fs-txn-panel-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 99999;
}

.fs-txn-panel-overlay.open {
    display: block;
}

.fs-txn-panel {
    position: fixed;
    top: 32px; /* WP admin bar */
    right: -420px;
    width: 400px;
    height: calc(100vh - 32px);
    background: #fff;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    z-index: 100000;
    transition: right 0.25s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fs-txn-panel.open {
    right: 0;
}

.fs-txn-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--fs-gray-200);
    flex-shrink: 0;
}

.fs-txn-panel-header h3 {
    margin: 0;
    font-size: 16px;
}

.fs-txn-panel-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--fs-gray-500);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.fs-txn-panel-close:hover {
    color: var(--fs-gray-800);
}

.fs-txn-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Panel content */
.fs-txn-panel-details {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fs-gray-200);
}

.fs-txn-panel-amount {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

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

.fs-txn-panel-label {
    color: var(--fs-gray-500);
    font-weight: 500;
}

.fs-txn-panel-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--fs-gray-200);
}

.fs-txn-panel-section h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--fs-gray-700);
}

.fs-txn-panel-suggestion {
    background: var(--fs-highlight-light);
    padding: 10px 14px;
    border-radius: var(--fs-border-radius);
    font-size: 13px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fs-txn-panel-suggestion .dashicons {
    color: var(--fs-accent);
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Match suggestions list */
.fs-txn-match-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fs-txn-match-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--fs-gray-50);
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius);
}

.fs-txn-match-info {
    flex: 1;
    min-width: 0;
}

.fs-txn-match-info strong {
    display: block;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fs-txn-match-info .fs-muted {
    font-size: 12px;
}

/* Linked record display */
.fs-txn-linked-record {
    padding: 12px;
    background: var(--fs-primary-xtralight);
    border-radius: var(--fs-border-radius);
    font-size: 13px;
}

.fs-txn-linked-record .dashicons {
    color: var(--fs-primary);
    margin-right: 4px;
}

/* Panel actions */
.fs-txn-panel-actions {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--fs-gray-200);
    display: flex;
    gap: 8px;
}

/* High contrast overrides */
.fs-high-contrast .fs-txn-panel {
    background: var(--fs-gray-900);
    border-left: 1px solid var(--fs-gray-600);
}

.fs-high-contrast .fs-txn-panel-header {
    border-color: var(--fs-gray-600);
}

.fs-high-contrast .fs-txn-match-item {
    background: var(--fs-gray-800);
    border-color: var(--fs-gray-600);
}

.fs-high-contrast .fs-txn-linked-record {
    background: var(--fs-gray-800);
}

.fs-high-contrast .fs-category-badge {
    background: var(--fs-gray-700);
    color: var(--fs-gray-300);
}

@media (max-width: 782px) {
    .fs-txn-panel {
        width: 100%;
        right: -100%;
    }
}

/* ============================================
   PERSONAL RULES
   ============================================ */
.fs-txn-rules-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fs-txn-rule-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--fs-gray-100);
    border: 1px solid var(--fs-gray-200);
    border-radius: 20px;
    font-size: 13px;
}

.fs-txn-rule-keyword {
    color: var(--fs-gray-800);
    font-weight: 500;
}

.fs-txn-rule-item .fs-btn-link {
    font-size: 12px;
    padding: 0;
    color: var(--fs-gray-400);
    text-decoration: none;
}

.fs-txn-rule-item .fs-btn-link:hover {
    color: var(--fs-danger);
}

.dashicons.spin {
    animation: fs-spin 1s linear infinite;
}

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

.fs-high-contrast .fs-txn-rule-item {
    background: var(--fs-gray-800);
    border-color: var(--fs-gray-600);
}

.fs-high-contrast .fs-txn-rule-keyword {
    color: var(--fs-gray-200);
}

/* High Contrast - Bulk Actions Bar */
.fs-high-contrast .fs-bulk-actions-bar {
    background: var(--fs-gray-800);
    border: 1px solid var(--fs-gray-600);
}

.fs-high-contrast .fs-bulk-count,
.fs-high-contrast .fs-bulk-select-all-label {
    color: var(--fs-gray-200);
}

/* =============================================
   EMAIL DELIVERY WIZARD (v8.6.0)
   ============================================= */

/* Status card when configured */
.fs-email-delivery-status {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-radius: var(--fs-border-radius-lg);
    background: var(--fs-primary-xtralight);
    border: 1px solid var(--fs-primary-light);
}

.fs-email-delivery-status-icon .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    color: var(--fs-primary-dark);
}

.fs-email-delivery-status-info {
    flex: 1;
}

.fs-email-delivery-status-info h3 {
    margin: 0 0 4px;
    font-size: 15px;
    color: var(--fs-gray-900);
}

.fs-email-delivery-status-info p {
    margin: 0;
    font-size: 13px;
    color: var(--fs-gray-600);
}

.fs-email-delivery-last-test {
    display: inline-block;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid var(--fs-gray-300);
}

.fs-email-delivery-status-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Wizard container */
.fs-email-delivery-wizard {
    margin-top: 20px;
}

/* Step indicators */
.fs-wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 32px;
    padding: 0 20px;
}

.fs-wizard-step {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.4;
    transition: opacity 0.3s;
}

.fs-wizard-step.active,
.fs-wizard-step.completed {
    opacity: 1;
}

.fs-wizard-step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--fs-gray-300);
    color: var(--fs-gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
    transition: all 0.3s;
}

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

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

.fs-wizard-step-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--fs-gray-600);
    white-space: nowrap;
}

.fs-wizard-step.active .fs-wizard-step-label {
    color: var(--fs-gray-800);
}

.fs-wizard-step-line {
    width: 40px;
    height: 2px;
    background: var(--fs-gray-300);
    margin: 0 12px;
    flex-shrink: 0;
}

/* Wizard panels */
.fs-wizard-panel {
    display: none;
}

.fs-wizard-panel.active {
    display: block;
}

.fs-wizard-panel h3 {
    font-size: 17px;
    margin: 0 0 8px;
    color: var(--fs-gray-900);
}

.fs-wizard-panel > .description {
    margin-bottom: 24px;
}

/* Provider cards */
.fs-provider-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.fs-provider-card {
    cursor: pointer;
    display: block;
}

.fs-provider-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fs-provider-card-inner {
    border: 2px solid var(--fs-gray-200);
    border-radius: var(--fs-border-radius-lg);
    padding: 20px;
    transition: all 0.2s;
    background: #fff;
    height: 100%;
}

.fs-provider-card:hover .fs-provider-card-inner {
    border-color: var(--fs-gray-400);
    box-shadow: var(--fs-shadow);
}

.fs-provider-card.selected .fs-provider-card-inner,
.fs-provider-card input:checked + .fs-provider-card-inner {
    border-color: var(--fs-primary);
    background: var(--fs-primary-xtralight);
    box-shadow: 0 0 0 1px var(--fs-primary);
}

.fs-provider-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.fs-provider-card-header strong {
    font-size: 15px;
    color: var(--fs-gray-900);
}

.fs-provider-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.fs-provider-logo--brevo {
    background: linear-gradient(135deg, #0B996E, #00B386);
}

.fs-provider-logo--postmark {
    background: linear-gradient(135deg, #FFDE00, #FFC700);
    color: #1A1A2E;
}

.fs-provider-logo--smtp {
    background: var(--fs-secondary);
}

.fs-provider-logo--smtp .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #fff;
}

.fs-provider-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}

.fs-provider-badge--recommended {
    background: var(--fs-primary-xtralight);
    color: var(--fs-primary-dark);
}

.fs-provider-badge--fast {
    background: var(--fs-highlight-light);
    color: #5D6B1F;
}

.fs-provider-card-desc {
    font-size: 13px;
    color: var(--fs-gray-600);
    line-height: 1.5;
    margin: 0 0 16px;
}

.fs-provider-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--fs-gray-200);
}

.fs-provider-card-price {
    font-weight: 600;
    font-size: 14px;
    color: var(--fs-primary-dark);
}

.fs-provider-card-limit {
    font-size: 12px;
    color: var(--fs-gray-500);
}

/* Wizard actions */
.fs-wizard-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--fs-gray-200);
}

/* Setup steps (account creation instructions) */
.fs-setup-steps {
    margin: 20px 0 8px;
}

.fs-setup-step {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--fs-gray-100);
}

.fs-setup-step:last-child {
    border-bottom: none;
}

.fs-setup-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fs-secondary-light);
    color: var(--fs-secondary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.fs-setup-step-number .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--fs-primary-dark);
}

.fs-setup-step-content {
    flex: 1;
}

.fs-setup-step-content strong {
    display: block;
    margin-bottom: 4px;
    color: var(--fs-gray-800);
}

.fs-setup-step-content p {
    font-size: 13px;
    color: var(--fs-gray-600);
    line-height: 1.5;
    margin: 0 0 10px;
}

.fs-setup-step-content .fs-btn {
    margin-top: 4px;
}

/* API key input */
.fs-api-key-input-wrap {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
}

.fs-api-key-input {
    flex: 1;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 0.3px;
}

.fs-api-key-result {
    margin-top: 12px;
}

.fs-key-result-success,
.fs-test-result-success {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--fs-primary-xtralight);
    border: 1px solid var(--fs-primary-light);
    border-radius: var(--fs-border-radius);
    color: var(--fs-primary-dark);
    font-size: 13px;
}

.fs-key-result-success .dashicons,
.fs-test-result-success .dashicons {
    color: var(--fs-primary-dark);
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.fs-key-result-error,
.fs-test-result-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #FFF5F5;
    border: 1px solid #FECACA;
    border-radius: var(--fs-border-radius);
    color: #991B1B;
    font-size: 13px;
}

.fs-key-result-error .dashicons,
.fs-test-result-error .dashicons {
    color: var(--fs-danger);
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Test email section */
.fs-test-email-section {
    margin-top: 24px;
}

.fs-wizard-test-result {
    margin-top: 16px;
}

/* Responsive */
@media (max-width: 782px) {
    .fs-email-delivery-status {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .fs-email-delivery-status-actions {
        width: 100%;
    }

    .fs-email-delivery-status-actions .fs-btn {
        flex: 1;
        text-align: center;
    }

    .fs-wizard-steps {
        flex-wrap: wrap;
        gap: 8px;
    }

    .fs-wizard-step-line {
        display: none;
    }

    .fs-wizard-step-label {
        font-size: 11px;
    }

    .fs-provider-cards {
        grid-template-columns: 1fr;
    }

    .fs-api-key-input-wrap {
        flex-direction: column;
    }

    .fs-api-key-input-wrap .fs-btn {
        width: 100%;
        text-align: center;
    }

    .fs-email-delivery-last-test {
        display: block;
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        margin-top: 4px;
    }
}

/* High Contrast - Email Delivery */
.fs-high-contrast .fs-email-delivery-status {
    background: var(--fs-gray-800);
    border-color: var(--fs-gray-600);
}

.fs-high-contrast .fs-email-delivery-status-icon .dashicons {
    color: var(--fs-primary-light);
}

.fs-high-contrast .fs-email-delivery-status-info h3 {
    color: var(--fs-gray-100);
}

.fs-high-contrast .fs-email-delivery-status-info p {
    color: var(--fs-gray-400);
}

.fs-high-contrast .fs-provider-card-inner {
    background: var(--fs-gray-800);
    border-color: var(--fs-gray-600);
}

.fs-high-contrast .fs-provider-card:hover .fs-provider-card-inner {
    border-color: var(--fs-gray-500);
}

.fs-high-contrast .fs-provider-card.selected .fs-provider-card-inner,
.fs-high-contrast .fs-provider-card input:checked + .fs-provider-card-inner {
    border-color: var(--fs-primary);
    background: rgba(31, 187, 166, 0.1);
}

.fs-high-contrast .fs-provider-card-header strong {
    color: var(--fs-gray-100);
}

.fs-high-contrast .fs-provider-card-desc {
    color: var(--fs-gray-400);
}

.fs-high-contrast .fs-provider-card-meta {
    border-color: var(--fs-gray-600);
}

.fs-high-contrast .fs-wizard-step-label {
    color: var(--fs-gray-400);
}

.fs-high-contrast .fs-wizard-step.active .fs-wizard-step-label {
    color: var(--fs-gray-100);
}

.fs-high-contrast .fs-wizard-panel h3 {
    color: var(--fs-gray-100);
}

.fs-high-contrast .fs-setup-step {
    border-color: var(--fs-gray-700);
}

.fs-high-contrast .fs-setup-step-content strong {
    color: var(--fs-gray-100);
}

.fs-high-contrast .fs-setup-step-content p {
    color: var(--fs-gray-400);
}

.fs-high-contrast .fs-wizard-actions {
    border-color: var(--fs-gray-700);
}

.fs-high-contrast .fs-key-result-success,
.fs-high-contrast .fs-test-result-success {
    background: rgba(31, 187, 166, 0.1);
    border-color: var(--fs-primary-dark);
    color: var(--fs-primary-light);
}

.fs-high-contrast .fs-key-result-error,
.fs-high-contrast .fs-test-result-error {
    background: rgba(232, 90, 90, 0.1);
    border-color: var(--fs-danger);
    color: #FCA5A5;
}
