/* Customer Guides - Shared Styles */

.guide-container {
    max-width: 8.5in;
    margin: 0 auto;
    padding: 0;
    background: white;
}

.guide-header {
    color: white;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0 0;
    margin-bottom: 20px;
}

.guide-header h1 {
    font-size: 28px;
    font-weight: 600;
    margin: 0;
    color: white;
}

.guide-header .subtitle {
    font-size: 14px;
    opacity: 0.9;
}

.guide-header .logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.guide-header .logo img {
    height: 50px;
    width: auto;
}

.guide-header .logo span {
    font-family: "Virgo", 'Arial Black', sans-serif;
    font-weight: bold;
    font-size: 20px;
}

.guide-header .logo .red-a {
    color: red;
}

.guide-header .logo .blue-a {
    color: blue;
}

.guide-container h2 {
    padding-bottom: 8px;
    margin: 25px 0 15px 0;
    font-size: 18px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
}

.guide-container h3 {
    color: #555;
    margin: 15px 0 10px 0;
    font-size: 15px;
}

.guide-intro {
    padding: 15px;
    border-left-width: 4px;
    border-left-style: solid;
    margin-bottom: 20px;
    border-radius: 0 8px 8px 0;
}

.guide-intro p {
    font-size: 14px;
    margin: 0;
}

/* URL Box */
.guide-url-box {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px 15px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #555;
}

.guide-url-box i {
    color: #888;
    margin-right: 5px;
}

.guide-url-box .url-label {
    color: #666;
}

.guide-url-box code {
    background: #e8e8e8;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #333;
    margin-left: 5px;
}

/* Workflow Steps */
.workflow {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    flex-wrap: wrap;
    gap: 10px;
}

.workflow-step {
    flex: 0 1 auto;
    min-width: 60px;
    max-width: 120px;
    text-align: center;
    padding: 8px 10px;
    background: #f5f5f5;
    border-radius: 6px;
    position: relative;
}

.workflow-step::after {
    content: "\2192";
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    font-size: 20px;
    color: #666;
    z-index: 1;
}

.workflow-step:last-child::after {
    content: "";
}

.workflow-step .number {
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
}

.workflow-step .label {
    font-size: 11px;
    font-weight: 600;
}

.workflow-step .label a {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.workflow-step .label a:hover {
    text-decoration: underline;
    text-decoration-style: solid;
}

.workflow-step .label a::after {
    content: " \f0c1";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.7em;
    opacity: 0.6;
    vertical-align: super;
}

/* Optional Workflow Step */
.workflow-step-optional {
    border: 2px dashed #999;
    background: transparent;
    opacity: 0.85;
    position: relative;
}


/* Only hide arrow on optional steps that are last child (unless it's a recircle) */
.workflow-step-optional:last-child::after {
    content: "" !important;
}

/* Recircle arrow for revision steps that loop back */
.workflow-step-recircle::after,
.workflow-step-optional.workflow-step-recircle:last-child::after {
    content: "\21BA" !important;
}

.workflow-step-optional .number {
    background: transparent !important;
    color: #888;
    border: 2px dashed #888;
    width: 24px;
    height: 24px;
}

.workflow-step-optional .number i {
    font-size: 12px;
}

.workflow-step-optional .optional-label {
    font-size: 9px;
    color: #888;
    font-style: italic;
    margin-top: 2px;
}

/* Status Tables */
.status-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 13px;
}

.status-table th,
.status-table td {
    padding: 10px 12px;
    text-align: left;
    border: 1px solid #ddd;
}

.status-table th {
    background: #f5f5f5;
    font-weight: 600;
}

/* Comparison Tables */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 13px;
}

.comparison-table th,
.comparison-table td {
    padding: 12px;
    text-align: left;
    border: 1px solid #ddd;
}

.comparison-table th {
    background: #f5f5f5;
    font-weight: 600;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

/* Linked badges in tables */
.status-table a .badge {
    transition: transform 0.15s, box-shadow 0.15s;
}

.status-table a .badge:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.status-table a .badge::after {
    content: " \f0c1";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.8em;
    opacity: 0.7;
}

/* Universal status badges */
.badge-open { background: #e3f2fd; color: #1565c0; }
.badge-progress { background: #fff3e0; color: #e65100; }
.badge-hold { background: #fff9c4; color: #f57f17; }
.badge-completed { background: #e8f5e9; color: #2e7d32; }
.badge-invoiced { background: #f3e5f5; color: #6a1b9a; }
.badge-creating { background: #e3f2fd; color: #1565c0; }
.badge-sent { background: #fff3e0; color: #e65100; }
.badge-awaiting { background: #fff9c4; color: #f57f17; }
.badge-approved { background: #e8f5e9; color: #2e7d32; }
.badge-denied { background: #ffebee; color: #c62828; }
.badge-converted { background: #f3e5f5; color: #6a1b9a; }
.badge-paid { background: #e8f5e9; color: #2e7d32; }
.badge-unpaid { background: #ffebee; color: #c62828; }
.badge-partial { background: #fff3e0; color: #e65100; }
.badge-subscribed { background: #e8f5e9; color: #2e7d32; }
.badge-unsubscribed { background: #f5f5f5; color: #616161; }

/* Info & Action Boxes */
.info-box {
    background: #e3f2fd;
    border: 1px solid #64b5f6;
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
}

.info-box h4 {
    color: #1565c0;
    margin-bottom: 10px;
    font-size: 14px;
}

.info-box ul {
    margin-left: 20px;
    font-size: 13px;
}

.info-box li {
    margin: 5px 0;
}

.action-box {
    background: #e8f5e9;
    border: 1px solid #81c784;
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
}

.action-box h4 {
    color: #2e7d32;
    margin-bottom: 10px;
    font-size: 14px;
}

.action-box ul {
    margin-left: 20px;
    font-size: 13px;
}

.action-box li {
    margin: 5px 0;
}

.highlight-box {
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
    border-width: 2px;
    border-style: solid;
}

.highlight-box h4 {
    margin-bottom: 8px;
    font-size: 14px;
}

.highlight-box p {
    font-size: 13px;
    margin: 0;
}

/* Two Column Layout */
.two-col {
    display: flex;
    gap: 20px;
}

.two-col > div {
    flex: 1;
}

@media (max-width: 768px) {
    .two-col {
        flex-direction: column;
    }
}

/* ID Examples */
.id-example {
    font-family: monospace;
    background: #f5f5f5;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

.id-example-box {
    background: #f5f5f5;
    padding: 15px;
    border-radius: 8px;
    font-size: 13px;
}

.id-example-box ul {
    margin: 10px 0 0 20px;
}

.id-example-box li {
    margin: 5px 0;
}

/* Scenario Boxes */
.scenario-box {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
}

.scenario-box h4 {
    color: #333;
    margin-bottom: 10px;
    font-size: 14px;
}

.scenario-box p {
    font-size: 13px;
    margin-bottom: 8px;
}

/* FAQ Section */
.faq-section {
    font-size: 13px;
}

.faq-section p {
    margin-top: 10px;
}

.faq-section p:first-child {
    margin-top: 0;
}

/* Footer */
.guide-footer {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
    font-size: 11px;
    color: #666;
    text-align: center;
    margin-bottom: 80px;
}

/* Auto-Processing Box */
.auto-process-box {
    background: #f8f4f8;
    padding: 15px;
    border-radius: 8px;
    font-size: 13px;
}

.auto-process-keywords {
    background: #fff;
    padding: 10px;
    border-radius: 4px;
    font-family: monospace;
    margin: 10px 0;
}

.auto-process-keywords p {
    margin: 5px 0;
}

.auto-process-example {
    background: #fff;
    padding: 10px;
    border-radius: 4px;
    font-family: monospace;
    border-left: 3px solid #2e7d32;
}

/* Total Cost Box */
.total-cost-box {
    background: #f5f5f5;
    padding: 15px;
    border-radius: 8px;
    font-size: 13px;
}

.total-cost-box p {
    margin: 5px 0;
}

.total-cost-box hr {
    margin: 10px 0;
    border: none;
    border-top: 1px dashed #ccc;
}

/* ==============================
   THEME: Documentation Index (MST Red)
   ============================== */
.guide-documentation .guide-header {
    background: linear-gradient(135deg, #d31b23 0%, #a51419 100%);
}

.guide-documentation h2 {
    color: #d31b23;
    border-bottom-color: #d31b23;
}

.guide-documentation .guide-intro {
    background: #fce4ec;
    border-left-color: #d31b23;
}

.guide-documentation .workflow-step::after {
    color: #d31b23;
}

.guide-documentation .workflow-step .number {
    background: #d31b23;
}

.guide-documentation .highlight-box {
    background: #fce4ec;
    border-color: #d31b23;
}

.guide-documentation .highlight-box h4 {
    color: #d31b23;
}

/* ==============================
   THEME: Jobs (Blue)
   ============================== */
.guide-jobs .guide-header {
    background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
}

.guide-jobs h2 {
    color: #1565c0;
    border-bottom-color: #1565c0;
}

.guide-jobs .guide-intro {
    background: #e3f2fd;
    border-left-color: #1565c0;
}

.guide-jobs .workflow-step::after {
    color: #1565c0;
}

.guide-jobs .workflow-step .number {
    background: #1565c0;
}

.guide-jobs .highlight-box {
    background: #e3f2fd;
    border-color: #1565c0;
}

.guide-jobs .highlight-box h4 {
    color: #1565c0;
}

/* ==============================
   THEME: Estimates (Purple)
   ============================== */
.guide-estimates .guide-header {
    background: linear-gradient(135deg, #8e4585 0%, #6a1b6a 100%);
}

.guide-estimates h2 {
    color: #8e4585;
    border-bottom-color: #8e4585;
}

.guide-estimates .guide-intro {
    background: #f8f4f8;
    border-left-color: #8e4585;
}

.guide-estimates .workflow-step::after {
    color: #8e4585;
}

.guide-estimates .workflow-step .number {
    background: #8e4585;
}

.guide-estimates .highlight-box {
    background: #f8f4f8;
    border-color: #8e4585;
}

.guide-estimates .highlight-box h4 {
    color: #8e4585;
}

.guide-estimates .auto-process-box {
    background: #f8f4f8;
}

/* ==============================
   THEME: Revisions (Orange)
   ============================== */
.guide-revisions .guide-header {
    background: linear-gradient(135deg, #FD9B00 0%, #e65100 100%);
}

.guide-revisions h2 {
    color: #e65100;
    border-bottom-color: #FD9B00;
}

.guide-revisions .guide-intro {
    background: #fff3e0;
    border-left-color: #FD9B00;
}

.guide-revisions .workflow-step::after {
    color: #FD9B00;
}

.guide-revisions .workflow-step .number {
    background: #FD9B00;
}

.guide-revisions .highlight-box {
    background: #fff3e0;
    border-color: #FD9B00;
}

.guide-revisions .highlight-box h4 {
    color: #e65100;
}

.guide-revisions .comparison-table .header-estimate {
    background: #fff3e0;
    color: #e65100;
}

.guide-revisions .comparison-table .header-revision {
    background: #ffe0b2;
    color: #bf360c;
}

/* ==============================
   THEME: Invoices (Olive Green)
   ============================== */
.guide-invoices .guide-header {
    background: linear-gradient(135deg, #6b8e23 0%, #556b2f 100%);
}

.guide-invoices h2 {
    color: #6b8e23;
    border-bottom-color: #6b8e23;
}

.guide-invoices .guide-intro {
    background: #f1f8e9;
    border-left-color: #6b8e23;
}

.guide-invoices .workflow-step::after {
    color: #6b8e23;
}

.guide-invoices .workflow-step .number {
    background: #6b8e23;
}

.guide-invoices .highlight-box {
    background: #f1f8e9;
    border-color: #6b8e23;
}

.guide-invoices .highlight-box h4 {
    color: #6b8e23;
}

/* ==============================
   THEME: Receipts (Green)
   ============================== */
.guide-receipts .guide-header {
    background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
}

.guide-receipts h2 {
    color: #2e7d32;
    border-bottom-color: #2e7d32;
}

.guide-receipts .guide-intro {
    background: #e8f5e9;
    border-left-color: #2e7d32;
}

.guide-receipts .workflow-step::after {
    color: #2e7d32;
}

.guide-receipts .workflow-step .number {
    background: #2e7d32;
}

.guide-receipts .highlight-box {
    background: #e8f5e9;
    border-color: #2e7d32;
}

.guide-receipts .highlight-box h4 {
    color: #2e7d32;
}

/* ==============================
   THEME: Text Notifications (Teal)
   ============================== */
.guide-texts .guide-header {
    background: linear-gradient(135deg, #00897b 0%, #00695c 100%);
}

.guide-texts h2 {
    color: #00897b;
    border-bottom-color: #00897b;
}

.guide-texts .guide-intro {
    background: #e0f2f1;
    border-left-color: #00897b;
}

.guide-texts .workflow-step::after {
    color: #00897b;
}

.guide-texts .workflow-step .number {
    background: #00897b;
}

.guide-texts .highlight-box {
    background: #e0f2f1;
    border-color: #00897b;
}

.guide-texts .highlight-box h4 {
    color: #00897b;
}

/* ==============================
   THEME: API Integrations (Indigo)
   ============================== */
.guide-api .guide-header {
    background: linear-gradient(135deg, #3f51b5 0%, #303f9f 100%);
}

.guide-api h2 {
    color: #3f51b5;
    border-bottom-color: #3f51b5;
}

.guide-api .guide-intro {
    background: #e8eaf6;
    border-left-color: #3f51b5;
}

.guide-api .workflow-step::after {
    color: #3f51b5;
}

.guide-api .workflow-step .number {
    background: #3f51b5;
}

.guide-api .highlight-box {
    background: #e8eaf6;
    border-color: #3f51b5;
}

.guide-api .highlight-box h4 {
    color: #3f51b5;
}

.badge-api {
    background: #e8eaf6;
    color: #3f51b5;
}

/* Print Styles */
@media print {
    /* Reset page margins */
    @page {
        margin: 0.25in;
        size: letter;
    }

    /* Hide non-essential elements */
    nav, .navbar, .sidebar, .breadcrumb, header, footer,
    .btn, button, .alert-info, .no-print {
        display: none !important;
    }

    /* Full width container */
    body {
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
    }

    .container, .container-fluid, .row, .col, .col-12,
    .col-md-10, .col-lg-8, .col-xl-8 {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .guide-container {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .guide-header {
        margin: 0 !important;
        border-radius: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Preserve background colors */
    .workflow-step, .info-box, .action-box, .highlight-box,
    .id-example-box, .scenario-box, .auto-process-box,
    .guide-intro, .badge, .status-table th,
    .lineitem-swatch, .lineitem-swatch-description,
    .lineitem-swatch-parts, .lineitem-swatch-labor,
    .lineitem-swatch-subtotal, .lineitem-swatch-fees,
    .lineitem-swatch-total, .lineitem-legend-table,
    .lineitem-legend-table td, .lineitem-legend-table th {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .workflow-step {
        break-inside: avoid;
    }

    .two-col {
        break-inside: avoid;
    }

    .status-table, .comparison-table {
        break-inside: avoid;
    }

    .highlight-box, .info-box, .action-box {
        break-inside: avoid;
    }
}

/* ==============================
   THEME: Legal Pages (Slate Gray)
   ============================== */
.guide-legal .guide-header {
    background: linear-gradient(135deg, #546e7a 0%, #37474f 100%);
}

.guide-legal h2 {
    color: #546e7a;
    border-bottom-color: #546e7a;
}

.guide-legal .guide-intro {
    background: #eceff1;
    border-left-color: #546e7a;
}

.guide-legal .highlight-box {
    background: #eceff1;
    border-color: #546e7a;
}

.guide-legal .highlight-box h4 {
    color: #546e7a;
}

/* ==============================
   DARK MODE SUPPORT
   ============================== */
[data-bs-theme="dark"] .guide-container {
    background: #2d2d2d;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .guide-intro {
    background-color: rgba(123, 44, 191, 0.15);
    border-left-color: #ba55d3;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .guide-url-box {
    background: #3a3a3a;
    border-color: #555;
    color: #ccc;
}

[data-bs-theme="dark"] .guide-url-box i,
[data-bs-theme="dark"] .guide-url-box .url-label {
    color: #999;
}

[data-bs-theme="dark"] .guide-url-box code {
    background: #4a4a4a;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .guide-container h2 {
    color: #ba55d3;
    border-bottom-color: #ba55d3;
}

[data-bs-theme="dark"] .guide-container h3 {
    color: #d8a8e8;
}

[data-bs-theme="dark"] .workflow-step {
    background: #363636;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .workflow-step-optional {
    border-color: #666;
    background: transparent;
}

[data-bs-theme="dark"] .workflow-step-optional .number {
    color: #888;
    border-color: #666;
}

[data-bs-theme="dark"] .workflow-step-optional .optional-label {
    color: #888;
}

[data-bs-theme="dark"] .status-table th,
[data-bs-theme="dark"] .comparison-table th {
    background: #363636;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .status-table td,
[data-bs-theme="dark"] .comparison-table td,
[data-bs-theme="dark"] .status-table th,
[data-bs-theme="dark"] .comparison-table th {
    border-color: #555555;
}

[data-bs-theme="dark"] .info-box {
    background: rgba(33, 150, 243, 0.15);
    border-color: #2196f3;
    color: #90caf9;
}

[data-bs-theme="dark"] .info-box h4 {
    color: #90caf9;
}

[data-bs-theme="dark"] .action-box {
    background: rgba(76, 175, 80, 0.15);
    border-color: #4caf50;
    color: #a5d6a7;
}

[data-bs-theme="dark"] .action-box h4 {
    color: #a5d6a7;
}

[data-bs-theme="dark"] .highlight-box {
    background: rgba(123, 44, 191, 0.15);
    border-color: #ba55d3;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .highlight-box h4 {
    color: #ba55d3;
}

[data-bs-theme="dark"] .id-example,
[data-bs-theme="dark"] .id-example-box {
    background: #363636;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .scenario-box {
    background: #363636;
    border-color: #555555;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .scenario-box h4 {
    color: #e0e0e0;
}

[data-bs-theme="dark"] .guide-footer {
    border-top-color: #555555;
    color: #b0b0b0;
}

/* Dark mode: Jobs theme (Blue) */
[data-bs-theme="dark"] .guide-jobs .guide-intro {
    background-color: rgba(33, 150, 243, 0.15);
    border-left-color: #42a5f5;
}

[data-bs-theme="dark"] .guide-jobs h2 {
    color: #42a5f5;
    border-bottom-color: #42a5f5;
}

[data-bs-theme="dark"] .guide-jobs h3 {
    color: #64b5f6;
}

[data-bs-theme="dark"] .guide-jobs .highlight-box {
    background: rgba(33, 150, 243, 0.15);
    border-color: #42a5f5;
}

[data-bs-theme="dark"] .guide-jobs .highlight-box h4 {
    color: #42a5f5;
}

/* Dark mode: Revisions theme (Orange) */
[data-bs-theme="dark"] .guide-revisions .guide-intro {
    background-color: rgba(253, 155, 0, 0.15);
    border-left-color: #FD9B00;
}

[data-bs-theme="dark"] .guide-revisions h2 {
    color: #FD9B00;
    border-bottom-color: #FD9B00;
}

[data-bs-theme="dark"] .guide-revisions .highlight-box {
    background: rgba(253, 155, 0, 0.15);
    border-color: #FD9B00;
}

[data-bs-theme="dark"] .guide-revisions .highlight-box h4 {
    color: #FD9B00;
}

[data-bs-theme="dark"] .guide-revisions .auto-process-box {
    background: rgba(253, 155, 0, 0.15);
}

/* Dark mode: API Integrations theme (Indigo) */
[data-bs-theme="dark"] .guide-api .guide-intro {
    background-color: rgba(63, 81, 181, 0.2);
    border-left-color: #7986cb;
}

[data-bs-theme="dark"] .guide-api h2 {
    color: #7986cb;
    border-bottom-color: #7986cb;
}

[data-bs-theme="dark"] .guide-api .highlight-box {
    background: rgba(63, 81, 181, 0.2);
    border-color: #7986cb;
}

[data-bs-theme="dark"] .guide-api .highlight-box h4 {
    color: #7986cb;
}

[data-bs-theme="dark"] .guide-api .workflow-step .number {
    background: #5c6bc0;
}

[data-bs-theme="dark"] .badge-api {
    background: rgba(63, 81, 181, 0.3);
    color: #9fa8da;
}

[data-bs-theme="dark"] .auto-process-box {
    background: rgba(123, 44, 191, 0.15);
    color: #e0e0e0;
}

[data-bs-theme="dark"] .auto-process-keywords,
[data-bs-theme="dark"] .auto-process-example {
    background: #363636;
    color: #e0e0e0;
    border-left-color: #4caf50;
}

[data-bs-theme="dark"] .total-cost-box {
    background: #363636;
    color: #e0e0e0;
}

/* Line Item Color Swatches */
.lineitem-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    height: 28px;
    border-radius: 4px;
    vertical-align: middle;
    border: 1px solid #000;
    font-size: 11px;
    font-weight: 600;
    padding: 0 6px;
}

.lineitem-swatch-description {
    background: #ffffff;
    color: #333;
}

.lineitem-swatch-parts {
    background: #ffc08c;
    color: #000;
}

.lineitem-swatch-labor {
    background: #87a3e3;
    color: #000;
}

.lineitem-swatch-subtotal {
    background: #f2f2f2;
    color: #333;
}

.lineitem-swatch-fees {
    background: #ffff38;
    color: #000;
}

.lineitem-swatch-total {
    background: #82ee82;
    color: #000;
}

/* Dark mode line item swatches - match MAIN_COLORS from settings.py */
[data-bs-theme="dark"] .lineitem-swatch {
    border-color: #000;  /* Keep black border in dark mode */
}

[data-bs-theme="dark"] .lineitem-swatch-description {
    background: #505050;  /* description_main_dark */
    color: #ffffff;
}

[data-bs-theme="dark"] .lineitem-swatch-parts {
    background: #ffa726;  /* parts_main_dark - orange (swapped from old labor color) */
    color: #000;
}

[data-bs-theme="dark"] .lineitem-swatch-labor {
    background: #42a5f5;  /* labor_main_dark - blue (swapped from old parts color) */
    color: #000;
}

[data-bs-theme="dark"] .lineitem-swatch-subtotal {
    background: #ab47bc;  /* subtotal_main_dark - purple */
    color: #ffffff;
}

[data-bs-theme="dark"] .lineitem-swatch-fees {
    background: #d4d45a;  /* tax_main_dark - darker yellow for contrast */
    color: #000;  /* Black text for better readability */
}

[data-bs-theme="dark"] .lineitem-swatch-total {
    background: #90f090;  /* total_main_dark - green */
    color: #000;  /* Black text */
}

/* ==============================
   PRINT STYLES - Line Item Swatches
   Force background colors to print
   ============================== */
@media print {
    .lineitem-swatch {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .lineitem-swatch-description {
        background-color: #ffffff !important;
        color: #333 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .lineitem-swatch-parts {
        background-color: #ffc08c !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .lineitem-swatch-labor {
        background-color: #87a3e3 !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .lineitem-swatch-subtotal {
        background-color: #f2f2f2 !important;
        color: #333 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .lineitem-swatch-fees {
        background-color: #ffff38 !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .lineitem-swatch-total {
        background-color: #82ee82 !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Status badges for print */
    .badge-open {
        background-color: #e3f2fd !important;
        color: #1565c0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .badge-progress {
        background-color: #fff3e0 !important;
        color: #e65100 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .badge-hold {
        background-color: #fff9c4 !important;
        color: #f57f17 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .badge-completed {
        background-color: #e8f5e9 !important;
        color: #2e7d32 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .badge-invoiced {
        background-color: #f3e5f5 !important;
        color: #6a1b9a !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}