:root {
    /* Layout */
    --sidebar-width: 210px;
    --sidebar-rail-width: 78px;  /* collapsed (icons only) sidebar */
    --topbar-height: auto;
    --transition-speed: 0.3s;
    
    /* Font Sizes */
    --fs-xs: 0.75rem;    /* 12px */
    --fs-sm: 0.8125rem;   /* 13px */
    --fs-base: 1rem;     /* 16px */
    --fs-lg: 1.125rem;   /* 18px */
    --fs-xl: 1.25rem;    /* 20px */
    --fs-2xl: 1.5rem;    /* 24px */
    --fs-3xl: 1.875rem;  /* 30px */
    
    /* Font Weights */
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    
    /* Line Heights */
    --lh-tight: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.75;
    
    /* Colors */
    --color-primary: #3B82F6;
    --color-primary-dark: #1D4ED8;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-dark: #1F2937;
    --color-light: #F8FAFC;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    margin-top: 0px !important;
}

/* Hide all body children EXCEPT .dashboard-wrapper, .auth-container, and Select2 elements */
body > *:not(.dashboard-wrapper):not(.auth-container):not(.select2-container) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    z-index: -9999 !important;
    pointer-events: none !important;
}

/* Show only the dashboard wrapper and auth container */
.dashboard-wrapper, 
.auth-container {
    background: var(--wcrb-page-bg, #f4f7fb);
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: 100% !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure body doesn't have problematic styling.
   The background reads the --wcrb-page-bg token (inline palette or the defaults in
   the design-system block below) so the very first paint is already the right
   colour. A literal #fff here flashed white on every load for dark-mode users. */
body {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--wcrb-page-bg, #f4f7fb) !important;
    overflow: auto !important;
    position: static !important;
}

/* Enhanced Expense Details Structure - Compact Version */
.expense-details-enhanced {
    padding: 0.25rem;
}

.expense-details-enhanced .info-card {
    background: white;
    border-radius: 8px;
    padding: 0.75rem 1rem; /* Reduced padding */
    margin: 0.25rem; /* Reduced margin */
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Softer shadow */
    transition: all 0.2s ease;
    height: auto; /* Remove fixed height */
    min-height: 85px; /* Minimum height instead of 100% */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.expense-details-enhanced .info-card:hover {
    transform: translateY(-2px); /* Reduced hover effect */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.expense-details-enhanced .info-label {
    font-size: 0.7rem; /* Slightly smaller */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px; /* Reduced letter spacing */
    color: #6c757d;
    margin-bottom: 0.25rem; /* Reduced margin */
    line-height: 1.2;
}

.expense-details-enhanced .info-value {
    font-size: 0.95rem; /* Slightly smaller */
    font-weight: 500;
    color: #212529;
    line-height: 1.3;
    margin-top: auto; /* Push to bottom */
}

/* Special Cards - Compact */
.expense-details-enhanced .total-card {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    padding: 0.75rem 1rem; /* Consistent with others */
}

.expense-details-enhanced .total-card .info-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.7rem;
}

.expense-details-enhanced .total-card .info-value {
    color: white;
    font-size: 1.1rem; /* Keep total slightly larger but not too big */
    font-weight: 600;
}

.expense-details-enhanced .total-amount {
    font-size: 1.1rem; /* Reduced from 1.5rem */
    font-weight: 600;
}

/* Badges - Compact */
.expense-details-enhanced .category-badge {
    display: inline-block;
    padding: 0.3rem 0.75rem; /* Reduced padding */
    border-radius: 50px;
    color: white;
    font-weight: 500;
    font-size: 0.8rem; /* Smaller font */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    line-height: 1.2;
}

.expense-details-enhanced .status-badge {
    display: inline-block;
    padding: 0.3rem 0.75rem; /* Reduced padding */
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.8rem; /* Smaller font */
    line-height: 1.2;
}

/* Description Card - More Compact */
.expense-details-enhanced .description-card {
    min-height: 70px; /* Even smaller for description */
}

.expense-details-enhanced .description-text {
    line-height: 1.4;
    color: #495057;
    font-size: 0.9rem;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Show max 2 lines */
    -webkit-box-orient: vertical;
}

/* Financial Cards Compact */
.expense-details-enhanced .amount-card,
.expense-details-enhanced .tax-card {
    min-height: 80px;
}

/* Grid Layout Adjustments for Better Spacing */
.expense-details-enhanced .row {
    margin: -0.25rem; /* Negative margin to counteract card margins */
}

.expense-details-enhanced .row > [class*="col-"] {
    padding: 0.25rem; /* Reduced column padding */
}

/* Modal Body Adjustments for Full Height */
#viewExpenseModal .modal-body {
    max-height: 70vh; /* Set max height */
    overflow-y: auto; /* Enable scrolling */
    padding: 0.5rem; /* Reduced padding */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .expense-details-enhanced .info-card {
        padding: 0.5rem 0.75rem;
        min-height: 75px;
        margin: 0.15rem;
    }
    
    .expense-details-enhanced .info-label {
        font-size: 0.65rem;
        margin-bottom: 0.15rem;
    }
    
    .expense-details-enhanced .info-value {
        font-size: 0.85rem;
    }
    
    .expense-details-enhanced .category-badge,
    .expense-details-enhanced .status-badge {
        padding: 0.2rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .expense-details-enhanced .total-card .info-value {
        font-size: 1rem;
    }
    
    .expense-details-enhanced .description-text {
        font-size: 0.85rem;
        -webkit-line-clamp: 3; /* Show more lines on mobile */
    }
}

@media (max-height: 600px) {
    .expense-details-enhanced .info-card {
        min-height: 70px;
        padding: 0.5rem 0.75rem;
    }
    
    .expense-details-enhanced .info-label {
        font-size: 0.6rem;
    }
    
    .expense-details-enhanced .info-value {
        font-size: 0.8rem;
    }
    
    #viewExpenseModal .modal-body {
        max-height: 60vh;
        padding: 0.25rem;
    }
}

/* Even More Compact Version - Option 2 */
.expense-details-enhanced.compact .info-card {
    padding: 0.5rem 0.75rem;
    min-height: 65px;
    margin: 0.15rem;
    border-radius: 6px;
}

.expense-details-enhanced.compact .info-label {
    font-size: 0.65rem;
    margin-bottom: 0.15rem;
}

.expense-details-enhanced.compact .info-value {
    font-size: 0.85rem;
}

.expense-details-enhanced.compact .category-badge,
.expense-details-enhanced.compact .status-badge {
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
}
.img-fluid.thedevicecardthumb {
    max-height:50px;
    max-width:70px;
}
/* Animation Delays Reduced */
#viewExpenseModal .expense-details-enhanced .row > div {
    animation: fadeInUp 0.3s ease forwards;
    opacity: 0;
    transform: translateY(8px);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animations - shorter delays */
#viewExpenseModal .expense-details-enhanced .row > div:nth-child(1) { animation-delay: 0.05s; }
#viewExpenseModal .expense-details-enhanced .row > div:nth-child(2) { animation-delay: 0.1s; }
#viewExpenseModal .expense-details-enhanced .row > div:nth-child(3) { animation-delay: 0.15s; }
#viewExpenseModal .expense-details-enhanced .row > div:nth-child(4) { animation-delay: 0.2s; }
#viewExpenseModal .expense-details-enhanced .row > div:nth-child(5) { animation-delay: 0.25s; }
#viewExpenseModal .expense-details-enhanced .row > div:nth-child(6) { animation-delay: 0.3s; }
#viewExpenseModal .expense-details-enhanced .row > div:nth-child(7) { animation-delay: 0.35s; }
#viewExpenseModal .expense-details-enhanced .row > div:nth-child(8) { animation-delay: 0.4s; }
#viewExpenseModal .expense-details-enhanced .row > div:nth-child(9) { animation-delay: 0.45s; }
#viewExpenseModal .expense-details-enhanced .row > div:nth-child(10) { animation-delay: 0.5s; }
#viewExpenseModal .expense-details-enhanced .row > div:nth-child(11) { animation-delay: 0.55s; }

/* Base Typography */
body {
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: var(--fw-normal);
    color: #374151;
    background-color: #f8f9fa;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

/* Headings */
h1, .h1 {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: #111827;
}

h2, .h2 {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: #111827;
}

h3, .h3 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: #111827;
}

h4, .h4 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: #111827;
}

h5, .h5 {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: #111827;
}

h6, .h6 {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Layout */
.dashboard-wrapper {
    display: flex;
    min-height: 100vh;
}

/* Sidebar Styles */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    transition: transform var(--transition-speed) ease;
    background: var(--bs-dark);
    /* Flex column so .sidebar-nav absorbs the spare height and the footer (which holds
       the rail toggle) sits at the bottom, leaving the logo at the top unobstructed. */
    display: flex;
    flex-direction: column;
}

.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.sidebar-footer {
    flex: 0 0 auto;
}

.sidebar-header,
.sidebar-footer {
    flex: 0 0 auto;
}

.sidebar-header {
    background: rgba(0, 0, 0, 0.2);
    padding: 0.75rem;
}

/*
 * Sidebar: icon-only rail.
 * The header button (#wcrbSidebarToggle, see parts/myaccount_sidebar.php) adds
 * `.wcrb-rail`; js/wcrbscript.js remembers the choice in localStorage. Labels are the
 * `.wcrb-nav-label` spans added in generate_navigation(); the parent chevron goes too.
 * `--sidebar-rail-width` lives in :root so .main-content can read it as well.
 * Scoped to the desktop layout so the mobile off-canvas sidebar is untouched.
 */
@media (min-width: 992px) {
    .sidebar.wcrb-rail {
        width: var(--sidebar-rail-width);
    }

    /* .main-content is the sidebar's sibling inside .dashboard-wrapper. */
    .sidebar.wcrb-rail ~ .main-content {
        margin-left: var(--sidebar-rail-width);
    }

    .sidebar.wcrb-rail .sidebar-header {
        justify-content: center;
    }

    .sidebar.wcrb-rail .sidebar-header img {
        display: none;
    }

    .sidebar.wcrb-rail .sidebar-nav {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .sidebar.wcrb-rail .wcrb-nav-label,
    .sidebar.wcrb-rail .wcrb-chevron {
        display: none;
    }

    .sidebar.wcrb-rail .wcrb-nav-link {
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* The Bootstrap `me-2` gutter would push the lone icon off-centre. */
    .sidebar.wcrb-rail .wcrb-nav-link i {
        margin-right: 0 !important;
    }

    .sidebar.wcrb-rail .collapse ul.nav {
        margin-left: 0 !important;
    }
}

/* The rail toggle only makes sense on the desktop layout. `!important` on the footer is
   needed because the element carries Bootstrap's `d-flex` utility. */
@media (max-width: 991.98px) {
    .wcrb-sidebar-toggle,
    .sidebar-footer {
        display: none !important;
    }
}

.logo-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-nav .nav-link {
    border-radius: 8px;
    margin-bottom: 3px;
    transition: all 0.3s ease;
    border: none;
    font-size: 0.8rem;
    font-weight: var(--fw-medium);
    padding: 0.6rem 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(3px);
    color: #fff;
}

.sidebar-nav .nav-link.active {
    background: rgba(59, 130, 246, 0.2);
    border-left: 3px solid var(--color-primary);
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    transition: margin-left var(--transition-speed) ease;
    min-height: 100vh;
}

/* Top Bar */
.top-bar {
    position: sticky;
    top: 0;
    z-index: 999;
    height: var(--topbar-height);
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    backdrop-filter: blur(10px);
}

/* Cards */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    background: #fff;
}

.card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid #f1f5f9;
    padding: 1.25rem 1.5rem;
}

.card-title {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: #111827;
    margin-bottom: 0.5rem;
}

.card-subtitle {
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal);
    color: #6B7280;
}

/* Stats Cards */
.stats-card {
    border: none;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.stats-card .card-title {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
}

.stats-card h4 {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    margin-bottom: 0;
    color: #fff;
}

.stats-icon {
    opacity: 0.8;
    font-size: 1.5rem;
}

/* dropdown styling for */

/* Tables */
.table {
    font-size: var(--fs-xs);
    margin-bottom: 0;
}

.table th {
    font-weight: var(--fw-semibold);
    color: #374151;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #E5E7EB;
    white-space: nowrap;
    padding: 1rem;
    background: #f8fafc;
}

.table td {
    font-size: var(--fs-xs);
    padding: 1rem;
    border-color: #f1f5f9;
    vertical-align: middle;
    transition: background-color 0.2s ease;
}
.table.largetext td {
    font-size: var(--fs-sm);
}

.table tbody tr:hover td {
    background-color: #f8fafc;
}

.table-responsive {
    border-radius: 8px;
    /* Must actually scroll: `overflow: hidden` clipped anything wider than the
       card (e.g. the Model/devices table) so the right-hand columns vanished
       behind the widget edge instead of being reachable. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Fix table header line breaks */
.table th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.dashboard-wrapper .select2-container--default .select2-selection--single {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    height:auto;
}
.dashboard-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: var(--fs-sm);
    padding:0px;
    line-height: 1.5;
}
.dashboard-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 10px;
}

/* Forms */
.form-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: #374151;
    margin-bottom: 0.5rem;
}

.form-control,
.form-select {
    font-size: var(--fs-sm);
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    transition: all 0.2s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* Buttons */
.btn {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none;
    position: relative;
    overflow: hidden;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, #1e40af 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-sm {
    font-size: var(--fs-xs);
    padding: 0.5rem 1rem;
}

.btn-lg {
    font-size: var(--fs-base);
    padding: 1rem 2rem;
}

/* Navigation */
.nav-link {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: #6B7280;
    transition: all 0.15s ease-in-out;
    border: none;
}

.nav-link:hover,
.nav-link.active {
    color: #111827;
}

/* Badges & Labels */
.badge {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
}

/* Dropdowns */
.dropdown-menu {
    font-size: var(--fs-sm);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 0.5rem;
}

.dropdown-item {
    font-size: var(--fs-sm);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background-color: #f1f5f9;
}

/* Pagination */
.pagination .page-link {
    font-size: var(--fs-sm);
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb;
    color: #6B7280;
    transition: all 0.2s ease;
}

.pagination .page-link:hover {
    background-color: #f1f5f9;
    border-color: #d1d5db;
}

.pagination .page-item.active .page-link {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* Utility Classes */
.text-muted {
    color: #6B7280 !important;
}

/* Flex children that hold truncating text must be allowed to shrink, otherwise
   `text-truncate` can't kick in and long job/customer names push the row wider
   than the card (which then scrolls the whole page on phones). */
.min-w-0 {
    min-width: 0;
}

.text-small {
    font-size: var(--fs-xs);
}

.text-lead {
    font-size: var(--fs-lg);
    font-weight: var(--fw-normal);
    line-height: var(--lh-relaxed);
}

/* Loading States */
.loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Focus States for Accessibility */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: white;
    padding: 8px 12px;
    z-index: 10000;
    text-decoration: none;
    border-radius: 4px;
    font-size: var(--fs-sm);
}

.skip-link:focus {
    top: 6px;
}

/* Fullscreen Mode */
body.fullscreen .sidebar {
    transform: translateX(-100%);
}

body.fullscreen .main-content {
    margin-left: 0;
}

/* Dark Mode Support */
[data-bs-theme="dark"] {
    color-scheme: dark;
    --bs-body-bg: #1a1d23;
    --bs-body-color: #e9ecef;
}

[data-bs-theme="dark"] body {
    color: #e9ecef;
    background-color: #1a1d23;
}

[data-bs-theme="dark"] .card {
    background: #2d3035;
    border-color: #3d4046;
}

[data-bs-theme="dark"] .card-header {
    background: rgba(255, 255, 255, 0.02);
    border-color: #3d4046;
}

[data-bs-theme="dark"] .top-bar {
    background: #2d3035;
    border-color: #3d4046;
}

[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
    color: #f9fafb;
}

[data-bs-theme="dark"] .text-muted {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .table {
    color: #e9ecef;
}

[data-bs-theme="dark"] .table th {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

[data-bs-theme="dark"] .table td {
    border-color: #374151;
    background: #2d3035;
}

[data-bs-theme="dark"] .table tbody tr:hover td {
    background-color: #374151;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background: #374151;
    border-color: var(--color-primary);
    color: #f9fafb;
}

/* Custom Components */
.bg-grey {
    background-color: #ededed !important;
}

.sidebar-header img {
    width: 100%;
    height: auto;
    max-height: 47px;
    object-fit: contain;
    display: block;
}

/* Dashboard Authentication */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 1rem;
}

.auth-card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
}

.auth-logo {
    width: auto;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-logo .shoplogo {
    height:80px;
    width:auto;
}

.auth-tabs .nav-link {
    border: none;
    padding: 1rem 1.5rem;
    color: var(--bs-secondary);
    font-weight: var(--fw-medium);
}

.auth-tabs .nav-link.active {
    background: transparent;
    color: var(--bs-primary);
    border-bottom: 2px solid var(--bs-primary);
}

/* Time Log Management */
.time-log-widget {
    border-radius: 12px;
    margin-bottom: 1.5rem;
}
.widget-header {
    border-bottom: 1px solid var(--bs-border-color);
    padding: 1rem 1.25rem;
    background: rgba(0,0,0,0.02);
}
.widget-body {
    padding: 1.25rem;
}
.time-entry {
    border-left: 4px solid var(--bs-primary);
    padding-left: 1rem;
    margin-bottom: 1rem;
    background: var(--bs-light);
    border-radius: 8px;
    padding: 1rem;
}
.time-entry.active {
    border-left-color: var(--bs-success);
    background: rgba(25, 135, 84, 0.05);
}
.time-entry.paused {
    border-left-color: var(--bs-warning);
    background: rgba(255, 193, 7, 0.05);
}
.timer-display {
    font-family: 'Courier New', monospace;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--bs-primary);
}
.stats-card {
    border-radius: 12px;
    transition: transform 0.2s ease;
}
.stats-card:hover {
    transform: translateY(-2px);
}
.time-chart {
    height: 300px;
}
.log-table th {
    border-top: none;
    font-weight: 600;
    color: var(--bs-secondary);
}
.btn-timer {
    width: 100px;
    font-weight: 600;
}
/* End Time Log */

/* Mobile Responsive */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0;
    }
    
    .stats-card .display-6 {
        font-size: 2rem;
    }

    /* Mobile table improvements */
    .table-responsive table,
    .table-responsive thead,
    .table-responsive tbody,
    .table-responsive th,
    .table-responsive td,
    .table-responsive tr {
        display: block;
    }
    
    .table-responsive thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .table-responsive tr {
        border: 1px solid #e5e7eb;
        margin-bottom: 1rem;
        padding: 1rem;
        border-radius: 8px;
        background: #fff;
    }
    
    .table-responsive td {
        border: none;
        position: relative;
        padding: 0.75rem 0.5rem 0.75rem 50%;
        white-space: normal;
        text-align: left;
        border-bottom: 1px solid #f1f5f9;
    }
    
    .table-responsive td:before {
        content: attr(data-label);
        position: absolute;
        left: 0.5rem;
        width: 45%;
        padding-right: 0.5rem;
        white-space: nowrap;
        font-weight: var(--fw-semibold);
        color: #6b7280;
        font-size: var(--fs-xs);
    }

    .table-responsive td:last-child {
        border-bottom: none;
    }

    /* Dark mode mobile table */
    [data-bs-theme="dark"] .table-responsive tr {
        background: #374151;
        border-color: #4b5563;
    }

    [data-bs-theme="dark"] .table-responsive td {
        border-color: #4b5563;
    }

    [data-bs-theme="dark"] .table-responsive td:before {
        color: #9ca3af;
    }
}

/* Print Styles */
@media print {
    .sidebar,
    .top-bar,
    .btn {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0 !important;
    }
    
    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/**
 Job page styling */
.job-widget {
    border-radius: 12px;
    margin-bottom: 1.5rem;
}
.widget-header {
    border-bottom: 1px solid var(--bs-border-color);
    padding: 1rem 1.25rem;
    background: rgba(0,0,0,0.02);
}
.widget-body {
    padding: 1.25rem;
}
.job-totals {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
}
.status-badge {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}
.timeline {
    position: relative;
    padding-left: 2rem;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--bs-border-color);
}
.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: -2rem;
    top: 0.25rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bs-primary);
    border: 2px solid white;
}
.file-attachment {
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}
.part-item, .service-item {
    border-left: 3px solid var(--bs-primary);
    padding-left: 1rem;
    margin-bottom: 1rem;
}

table.wcrb_payment_table tr td {
  width:50%;
}
.wcrb_payment_table td span {
	float:right;
}
.wcrb_the_payment_note label {
    display:block;
}
.wcrb_the_payment_note textarea {
	margin-bottom:0px;
}
.wcrb_the_payment_note,
.wcrb_the_payment_date,
.wcrb_the_payment_payment {
	background-color: #f7f7f7;
    border:1px solid #ededed;
	padding: 15px;
    margin: 15px 0px;
    border-radius: 5px;
}
.wcrb_the_payment_date input,
.wcrb_the_payment_payment input[type="number"] {
	margin-bottom:0px;
}
#wc_rb_modal_takePayment input {
	height:30px !important;
}
.orange-bg {
	background-color:#fd6742 !important;
	color:#FFF !important;
}
.blue-bg {
	background-color:#063e70 !important;
	color:#FFF !important;
}
.grey-bg {
	background-color:#f7f7f7;
	width:100%;
}
.wcrb_the_payment_info table td {
    padding:0.65rem 1rem;
}
.form-table {
    width:100%;
}
.form-table label {
    display:block;
}
.form-table td {
    padding:0.5rem;
}
.jobAttachments {
	background-color:#FFF;
	border:1px solid #ededed;
	padding:15px;
	margin:15px 0px;
	border-radius:10px;
}
.jobAttachments img {
	width:40px;
	height:auto;
	margin:0px 15px;
}
/* The jobs/estimates table must not clip its row dropdowns (Status, Priority,
   Actions), so its scroll container is left un-clipped. */
#jobsTable_list {
    overflow: visible !important;
}

/* Row menus are placed by Bootstrap/Popper (absolute strategy) inside each
   cell's `.dropdown`, which already flips them up near the viewport edge.
   Do NOT force `position: fixed` here: Popper computes its offsets for absolute
   placement, and the `.card:hover` transform makes the card the containing
   block for fixed children — so the menu was measured from the card and drawn
   at page coordinates, landing off-screen for the lower rows (measured: the
   last rows put the menu ~1200-1500px down a 900px viewport, i.e. invisible).
   The z-index bump just keeps it above the card footer. */
#jobsTable_list .dropdown-menu {
    z-index: 1060 !important;
}

/* Make the whole header look interactive */
.clickable-header {
    cursor: pointer;
    user-select: none; /* Prevents text highlighting when double-clicking to toggle */
    padding: 0.5rem 0; /* Optional: adds some padding to the click area */
    transition: background-color 0.2s ease;
}

/* Subtle hover effect */
.clickable-header:hover {
    opacity: 0.8;
}

/* Icon Rotation Logic */
.collapse-chevron {
    transition: transform 0.3s ease;
    display: inline-block;
}

/* When the target content is hidden, Bootstrap adds 'collapsed' class to the trigger */
.clickable-header.collapsed .collapse-chevron {
    transform: rotate(180deg);
}

/* ===== Customers CRM (master / detail) ===== */
.wcrb-crm {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.wcrb-crm-list {
    flex: 0 0 350px;
    width: 350px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 170px);
    overflow: hidden;
}
.wcrb-crm .card-header.wcrb-crm-search {
    padding: 0.65rem 0.75rem;
}
.wcrb-crm-list-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}
.wcrb-crm-list-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.wcrb-letter-header {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.35rem 0.85rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.03));
}
.wcrb-customer-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.85rem;
    border: 0;
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.08));
    background: transparent;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.wcrb-customer-item:hover,
.wcrb-customer-item:focus {
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.04));
    color: inherit;
}
.wcrb-customer-item.active {
    background: var(--bs-primary-bg-subtle, rgba(13, 110, 253, 0.1));
    box-shadow: inset 3px 0 0 var(--bs-primary, #0d6efd);
}
.wcrb-customer-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bs-secondary-bg, rgba(0, 0, 0, 0.08));
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
}
.wcrb-customer-info {
    min-width: 0;
    flex: 1 1 auto;
}
.wcrb-customer-item-name {
    display: block;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wcrb-customer-item-meta {
    display: block;
    font-size: 0.76rem;
    color: var(--bs-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wcrb-crm-detail {
    flex: 1 1 auto;
    min-width: 0;
    max-height: calc(100vh - 170px);
    overflow-y: auto;
}
.wcrb-crm-detail-body {
    min-height: 320px;
}
.wcrb-crm-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 280px;
    color: var(--bs-secondary-color);
}
.wcrb-crm-back {
    display: none;
}
.wcrb-detail-header h4 {
    word-break: break-word;
}
.wcrb-detail-contact {
    line-height: 1.5;
}

/* Top customers stats tiles (single row, like the jobs status stats) */
.wcrb-crm-stats {
    flex-wrap: nowrap;
    overflow-x: auto;
}
.wcrb-crm-stats > [class*="col"] {
    min-width: 0;
}
.wcrb-crm-stats .wcrb-stat-tile {
    text-align: center;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.wcrb-crm-stats .wcrb-stat-tile .card-body {
    overflow: hidden;
}
.wcrb-crm-stats .wcrb-stat-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    color: #fff;
}

/* Customer notes */
.wcrb-note {
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--bs-warning, #ffc107);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--bs-body-bg);
}
.wcrb-note-body {
    white-space: normal;
}
.wcrb-note-head .badge {
    font-weight: 500;
}
.wcrb-notes-toolbar label {
    white-space: nowrap;
}

/* Customer detail sidebar (insights + contact details) */
.wcrb-crm-detail-row {
    align-items: flex-start;
}
.wcrb-crm-detail-main {
    min-width: 0;
}
.wcrb-crm-detail-side {
    position: sticky;
    top: 1rem;
}
.wcrb-crm-sidebar-card .card-header {
    font-size: 0.9rem;
}
.wcrb-insights .list-group-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}
.wcrb-crm-detail-main .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}
.wcrb-crm-detail-main .nav-tabs .nav-link {
    white-space: nowrap;
}
@media (max-width: 991.98px) {
    .wcrb-crm-detail-side {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .wcrb-crm {
        position: relative;
    }
    .wcrb-crm-list {
        flex-basis: 100%;
        width: 100%;
        max-height: calc(100vh - 130px);
    }
    .wcrb-crm-detail {
        display: none;
        max-height: calc(100vh - 130px);
    }
    .wcrb-crm.wcrb-detail-open .wcrb-crm-list {
        display: none;
    }
    .wcrb-crm.wcrb-detail-open .wcrb-crm-detail {
        display: block;
    }
    .wcrb-crm-back {
        display: inline-flex;
    }
}

/* ============================================================
   Front-end Job Editor (screen=edit-job)
   ============================================================ */
.wcrb-job-editor-form {
    /* clear the two-row floating action bar */
    padding-bottom: 130px;
}
.wcrb-job-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bs-body-bg);
    padding-top: 0.25rem;
}
.wcrb-job-tabs .nav-link {
    white-space: nowrap;
    color: var(--bs-secondary-color);
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    font-weight: 500;
}
.wcrb-job-tabs .nav-link:hover {
    color: var(--bs-primary);
}
.wcrb-job-tabs .nav-link.active {
    color: var(--bs-primary);
    background: transparent;
    border-bottom-color: var(--bs-primary);
}
.wcrb-job-summary {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.06), rgba(13, 110, 253, 0.02));
    border: 1px solid var(--bs-border-color);
}
.wcrb-summary-customer {
    font-size: 0.82rem;
    line-height: 1.45;
}
.wcrb-summary-field-label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color);
    font-weight: 600;
    margin-bottom: 0.15rem;
}
.wcrb-order-note {
    border-left: 4px solid var(--bs-primary, #0d6efd) !important;
}
.wcrb-summary-customer-name {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
}
.wcrb-summary-customer-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.wcrb-summary-customer-link:hover {
    color: var(--bs-primary);
}
.wcrb-summary-customer-link:hover .wcrb-summary-customer-name {
    text-decoration: underline;
}
.wcrb-summary-customer-meta span {
    margin-right: 0.75rem;
}
.wcrb-summary-customer-meta {
    color: var(--bs-secondary-color);
}
.wcrb-summary-customer-meta strong {
    color: var(--bs-body-color);
}
/* Two rows: job actions, then a separator, then Back/Totals/Save. */
.wcrb-job-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.06);
}

.wcrb-job-action-bar .wcrb-job-action-bar-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
}
.wcrb-action-totals {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.wcrb-action-total {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 0.82rem;
    white-space: nowrap;
}
.wcrb-action-total-label {
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    font-size: 0.68rem;
}
.wcrb-action-total strong {
    font-size: 0.95rem;
}
.wcrb-action-total.wcrb-pill {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    padding: 0.3rem 0.85rem;
    border-radius: 0.5rem;
    line-height: 1.15;
}
.wcrb-pill-total {
    background: rgba(13, 110, 253, 0.12);
    color: var(--bs-primary);
}
.wcrb-pill-balance {
    background: rgba(220, 53, 69, 0.12);
    color: var(--bs-danger);
}
.wcrb-pill .wcrb-action-total-label {
    font-size: 0.62rem;
}
.wcrb-pill strong {
    font-size: 1rem;
}
.wcrb-devices-table td,
.wcrb-devices-table th {
    vertical-align: middle;
}
.wcrb-devices-table .form-control,
.wcrb-devices-table .form-select {
    min-width: 140px;
}
/* ===== Device evaluation (Pre/Post) — mirrors the wp-admin styling ===== */
.wcrb-devices-table .evaluation-row > td {
    background-color: #fafafa;
    padding: 20px;
    border-top: 1px solid #e2e4e7;
    border-bottom: 2px solid #e2e4e7;
}
.device-evaluation-wrapper {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.eval-section {
    flex: 1;
    min-width: 260px;
    background: #fff;
    border-radius: 6px;
    padding: 12px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.eval-section h4 {
    margin: 0 0 12px 0;
    font-size: 1rem;
    border-left: 3px solid;
    padding-left: 8px;
}
.eval-section.pre-repair h4 {
    border-left-color: #f0ad4e;
}
.eval-section.post-repair h4 {
    border-left-color: #5cb85c;
}
.eval-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.eval-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.eval-item label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}
.eval-item select,
.eval-status-select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.device-eval-actions {
    border-top: 1px dashed var(--bs-border-color);
    padding-top: 0.85rem;
}

/* ===== Payments tab ===== */
.wcrb-payments-table td.small {
    max-width: 260px;
    word-break: break-word;
}
.wcrb-payments-table .wcrb-payment-validity {
    text-decoration: none;
    cursor: pointer;
}
.wcrb-payment-messages:empty {
    display: none;
}
.wcrb-payment-messages .alert {
    margin-bottom: 0.75rem;
}
.wcrb-payment-messages .wcrb_job_qrcode_wrap img {
    max-width: 190px;
    height: auto;
}
.wcrb-job-note {
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.02));
}
.wcrb-job-editor .widget-header {
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.wcrb-job-editor .widget-body {
    padding: 1.1rem;
}
.wcrb-job-editor .card.job-widget {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    overflow: hidden;
}
/* An open Actions dropdown must escape the card. The card keeps overflow:hidden
   so its table corners stay rounded, and only releases it while a menu is open.
   The class is added by WCRB_APPOINTMENT_ACTIONS on show.bs.dropdown. */
.wcrb-job-editor .card.job-widget:has(.dropdown-menu.show),
.wcrb-job-editor .card.job-widget.wcrb-appt-menu-open {
    overflow: visible;
}
@media (max-width: 767.98px) {
    .wcrb-job-action-bar .wcrb-job-action-bar-main {
        padding: 0.6rem 0.9rem;
    }

    .wcrb-job-editor .wcrb-job-actions-bar {
        padding: 0.5rem 0.9rem;
    }

    .wcrb-job-editor-form {
        padding-bottom: 165px;
    }
}
.wcrb-items-table .form-control-sm,
.wcrb-items-table .form-select-sm {
    min-width: 70px;
}

/* Item row delete button (the plain "X" link) */
.wcrb-job-editor .wcrb-items-table .delme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--bs-danger-bg-subtle, #fff0f1);
    color: var(--bs-danger, #dc3545);
    border: 1px solid var(--bs-danger-border-subtle, #ffd6da);
    text-decoration: none;
    font-size: 0;
    line-height: 1;
    vertical-align: middle;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.wcrb-job-editor .wcrb-items-table .delme::before {
    content: '×';
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
}

.wcrb-job-editor .wcrb-items-table .delme:hover,
.wcrb-job-editor .wcrb-items-table .delme:focus {
    background: var(--bs-danger, #dc3545);
    color: #fff;
    border-color: var(--bs-danger, #dc3545);
    text-decoration: none;
}
.wcrb-totals-list li {
    font-size: 0.9rem;
    padding: 0.2rem 0;
}
.wcrb-items-totals {
    position: sticky;
    top: 3.5rem;
}

/* Job Actions — keep addon/admin buttons visible on the front end
   (addon markup often carries WP-admin classes + inline white text). */
/* Addon buttons (e.g. Next Service date tags) sit in the same row as the .btn
   buttons, so they must share their exact sizing — otherwise they look a
   different height/width. The containers also need align-items:center (the
   d-inline-flex helper defaults to stretch, which made the button taller). */
.wcrb-job-actions-bar .wcrb-job-action-addons,
.wcrb-job-actions-bar .wcrb-job-action-qb {
    align-items: center;
    align-self: center;
}

.wcrb-job-actions-bar .wcrb-job-action-addons a,
.wcrb-job-actions-bar .wcrb-job-action-addons button,
.wcrb-job-actions-bar .wcrb-job-action-qb a,
.wcrb-job-actions-bar .wcrb-job-action-qb button {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--bs-primary);
    border-radius: 8px;
    background-color: var(--bs-primary);
    color: #fff !important;
    font-size: var(--fs-xs, 0.8rem);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    /* The add-on prints inline style="color:#FFF;width:100%;margin-bottom:15px"
       (it is written for the wp-admin box), so these need !important to keep the
       button in line with the bar: no bottom margin, natural width. */
    margin: 0 !important;
    width: auto !important;
}
.wcrb-job-actions-bar .wcrb-job-action-addons a:hover,
.wcrb-job-actions-bar .wcrb-job-action-addons button:hover,
.wcrb-job-actions-bar .wcrb-job-action-qb a:hover,
.wcrb-job-actions-bar .wcrb-job-action-qb button:hover {
    filter: brightness(0.92);
}

/* ===== Repair Flow board ===== */
.wcrb-repair-flow .wcrb-flow-board {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
}

.wcrb-repair-flow .wcrb-flow-filters {
    row-gap: .5rem;
}

.wcrb-repair-flow .wcrb-flow-filter {
    flex: 0 1 auto;
    min-width: 150px;
}

.wcrb-repair-flow .wcrb-flow-filter .form-select,
.wcrb-repair-flow .wcrb-flow-filter .form-control {
    min-width: 150px;
}

.wcrb-repair-flow .wcrb-flow-filter-search { flex: 1 1 260px; }

.wcrb-repair-flow .wcrb-flow-filter-device { flex: 1 1 220px; }

.wcrb-repair-flow .wcrb-flow-filter-device .select2-container { width: 100% !important; }

.wcrb-repair-flow .wcrb-flow-filter-actions { flex: 0 0 auto; }

.wcrb-repair-flow .wcrb-flow-column {
    flex: 1 1 0;
    min-width: 260px;
    background: #f6f7f9;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    max-height: 72vh;
}

.wcrb-repair-flow .wcrb-flow-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.wcrb-repair-flow .wcrb-flow-column-title {
    text-transform: none;
}

.wcrb-repair-flow .wcrb-flow-column-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    min-height: 80px;
}

.wcrb-repair-flow .wcrb-flow-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: grab;
}

.wcrb-repair-flow .wcrb-flow-card.is-dragging {
    opacity: .5;
}

.wcrb-repair-flow .wcrb-flow-card.is-saving {
    opacity: .7;
    pointer-events: none;
}

.wcrb-repair-flow .wcrb-flow-card.is-hidden {
    display: none;
}

.wcrb-repair-flow .wcrb-flow-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.wcrb-repair-flow .wcrb-flow-card-id {
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.wcrb-repair-flow .wcrb-flow-order-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9ca3af;
}

.wcrb-repair-flow .wcrb-flow-order {
    font-size: 1rem;
    font-weight: 700;
    color: #0d6efd;
}

.wcrb-repair-flow .wcrb-flow-card-case {
    font-size: .78rem;
    color: #9ca3af;
    margin-bottom: 4px;
}

.wcrb-repair-flow .wcrb-flow-priority {
    font-size: .68rem;
    font-weight: 600;
}

.wcrb-repair-flow .wcrb-flow-card-customer,
.wcrb-repair-flow .wcrb-flow-card-device,
.wcrb-repair-flow .wcrb-flow-card-meta {
    font-size: .85rem;
    color: #4b5563;
    line-height: 1.35;
}

.wcrb-repair-flow .wcrb-flow-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.wcrb-repair-flow .wcrb-flow-card-status {
    font-size: .75rem;
}

.wcrb-repair-flow .wcrb-flow-empty {
    color: #9ca3af;
    font-size: .85rem;
    text-align: center;
    padding: 14px 0;
}

.wcrb-repair-flow .wcrb-flow-column.wcrb-flow-dragover,
.wcrb-repair-flow .wcrb-flow-lane.wcrb-flow-dragover {
    outline: 2px dashed #0d6efd;
    outline-offset: -2px;
    background: #eef4ff;
}

/* Cancelled lane */
.wcrb-repair-flow .wcrb-flow-lane {
    margin-top: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.wcrb-repair-flow .wcrb-flow-lane-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    background: #fbfbfc;
    border: 0;
    padding: 12px 16px;
    font-weight: 600;
    text-align: left;
}

.wcrb-repair-flow .wcrb-flow-lane-body {
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

/* Locked (free) preview */
.wcrb-repair-flow .wcrb-flow-locked-wrap {
    min-height: 320px;
}

.wcrb-repair-flow .wcrb-flow-locked-blur {
    filter: blur(3px);
    opacity: .5;
    pointer-events: none;
    user-select: none;
}

.wcrb-repair-flow .wcrb-flow-locked-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .35);
}

.wcrb-repair-flow .wcrb-flow-locked-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .15);
    padding: 28px 34px;
    text-align: center;
    max-width: 440px;
}

.wcrb-repair-flow .wcrb-skeleton-line {
    display: block;
    height: 10px;
    border-radius: 6px;
    background: #e5e7eb;
    margin-bottom: 8px;
}

.wcrb-repair-flow .w-75 { width: 75%; }
.wcrb-repair-flow .w-50 { width: 50%; }

/* Toast */
.wcrb-flow-toast {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 1080;
    padding: 10px 16px;
    border-radius: 8px;
    color: #fff;
    background: #198754;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease;
    font-size: .9rem;
}

.wcrb-flow-toast.is-error { background: #dc3545; }
.wcrb-flow-toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 991px) {
    .wcrb-repair-flow .wcrb-flow-board { flex-direction: column; }
    .wcrb-repair-flow .wcrb-flow-column { width: 100%; max-height: none; }
}

/* ===== Job Editor: Overview cards ===== */
/* (was padding-top:.25rem, which made every Overview card — Job Details
   included — look like it had no top padding at all) */
.wcrb-job-editor .wcrb-overview-card .widget-body {
    padding-top: 1rem;
}

/* (the Overview payments card no longer shows its own Job Total / Received /
   Balance mini-summary — those figures live in the Totals widget, and the card
   now renders the payments table, so .wcrb-overview-totals / .wcrb-ov-line /
   .wcrb-ov-grand are gone) */

.wcrb-job-editor .wcrb-overview-subtitle {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Items & Services editor host: one editor node moved between the Overview and
   the Items tab. On the Overview the totals are shown in the right rail, so the
   editor's own totals column is hidden and the sections take the full width. */
.wcrb-job-editor .wcrb-items-editor-host[data-host="overview"] {
    margin-bottom: 1rem;
}

.wcrb-job-editor .wcrb-devices-editor-host[data-host="overview"] {
    margin-bottom: 1rem;
}

.wcrb-job-editor .wcrb-items-editor-host[data-host="overview"] .wcrb-items-editor > .row > .col-xl-3 {
    display: none;
}

.wcrb-job-editor .wcrb-items-editor-host[data-host="overview"] .wcrb-items-editor > .row > .col-xl-9 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Totals card in the Overview right rail (same widget as the Items editor) */
.wcrb-job-editor .wcrb-overview-totals-card {
    position: static;
    top: auto;
}

/* Attachments card in the Overview right rail: compact + scrollable */
.wcrb-job-editor .wcrb-extra-items-card--rail .widget-header {
    padding: .7rem .85rem;
}

.wcrb-job-editor .wcrb-extra-items-card--rail .widget-header h5 {
    font-size: .92rem;
}

.wcrb-job-editor .wcrb-extra-items-card--rail .wcrb-dropzone {
    padding: .55rem;
}

.wcrb-job-editor .wcrb-extra-items-card--rail .wcrb-dropzone-area {
    padding: .75rem .5rem;
    font-size: .75rem;
}

.wcrb-job-editor .wcrb-extra-items-card--rail .wcrb-dropzone-area i {
    font-size: 1.35rem;
}

.wcrb-job-editor .wcrb-extra-items-card--rail .table-responsive {
    max-height: 260px;
    overflow: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
}

.wcrb-job-editor .wcrb-extra-items-card--rail .wcrb-items-table {
    font-size: .72rem;
    margin-bottom: 0;
}

.wcrb-job-editor .wcrb-extra-items-card--rail .wcrb-items-table th,
.wcrb-job-editor .wcrb-extra-items-card--rail .wcrb-items-table td {
    padding: .35rem .45rem;
    white-space: nowrap;
}

.wcrb-job-editor .wcrb-extra-items-card--rail .wcrb-items-table td:nth-child(3),
.wcrb-job-editor .wcrb-extra-items-card--rail .wcrb-items-table td:nth-child(4) {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================================
   Dashboard typography
   ---------------------------------------------------------------------
   Mirrors how the dashboard reference handles type: one base type on the
   wrapper, and form controls/buttons that INHERIT it instead of falling
   back to the browser's 1rem (which made them render larger than the
   13px body text). The dashboard's own scale (--fs-*) is unchanged.
   ===================================================================== */
.dashboard-wrapper {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.45;
}

.dashboard-wrapper button,
.dashboard-wrapper input,
.dashboard-wrapper select,
.dashboard-wrapper textarea {
    font: inherit;
}

/* Bootstrap defaults these to 1rem — align them with the dashboard body type. */
.dashboard-wrapper .btn,
.dashboard-wrapper .form-control,
.dashboard-wrapper .form-select,
.dashboard-wrapper .form-check-label,
.dashboard-wrapper .input-group-text,
.dashboard-wrapper .dropdown-item,
.dashboard-wrapper .nav-link,
.dashboard-wrapper .page-link {
    font-size: var(--fs-sm);
}

.dashboard-wrapper .btn-sm,
.dashboard-wrapper .form-control-sm,
.dashboard-wrapper .form-select-sm,
.dashboard-wrapper .input-group-sm > .form-control,
.dashboard-wrapper .input-group-sm > .form-select,
.dashboard-wrapper .input-group-sm > .input-group-text,
.dashboard-wrapper .input-group-sm > .btn {
    font-size: var(--fs-xs);
}

/* Tables */
.dashboard-wrapper .table {
    font-size: var(--fs-sm);
}

/* ===== Attachments dropzone ===== */
.wcrb-job-editor .wcrb-dropzone {
    border: 1px dashed #c9d6ea;
    border-radius: 12px;
    padding: .7rem;
    background: #f8fbff;
}

.wcrb-job-editor .wcrb-dropzone-toolbar {
    margin-bottom: .5rem;
}

.wcrb-job-editor .wcrb-dropzone-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: 1.1rem;
    border-radius: 10px;
    border: 1px dashed #c9d6ea;
    background: #fff;
    color: #64738c;
    font-size: .85rem;
    text-align: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.wcrb-job-editor .wcrb-dropzone-area:hover,
.wcrb-job-editor .wcrb-dropzone-area:focus {
    background: #f2f7ff;
    border-color: #9fc0ff;
    outline: none;
}

.wcrb-job-editor .wcrb-dropzone-area.is-dragover {
    background: #eaf3ff;
    border-color: #2878f8;
    color: #1d5fd0;
}

.wcrb-job-editor .wcrb-dropzone-area i {
    font-size: 1.7rem;
    color: #2878f8;
}

.wcrb-job-editor .wcrb-dropzone-msg {
    min-height: 1.1em;
    margin-top: .35rem;
}

/* Free installs: the attachments dropzone stays visible but is inert. */
.wcrb-job-editor .wcrb-dropzone--locked {
    opacity: .75;
    background: #f4f6f9;
    border-color: #dbe3ee;
}

.wcrb-job-editor .wcrb-dropzone--locked .wcrb-dropzone-area,
.wcrb-job-editor .wcrb-dropzone--locked .wcrb-dropzone-label {
    pointer-events: none;
    cursor: not-allowed;
}

.wcrb-job-editor .wcrb-dropzone--locked .wcrb-dropzone-area {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
}

.wcrb-job-editor .wcrb-dropzone--locked .wcrb-dropzone-area i {
    color: #b6c2d4;
}

.wcrb-job-editor .wcrb-pro-notice {
    font-size: .8rem;
    padding: 8px 12px;
    margin: 10px 0 0;
}

/* Print documents (work order / ticket / label): the free-version Pro note is part of
   the document on purpose — it is carried onto the printed copy as well. */
.wcrb-print-pro-notice {
    margin: 10px 0;
}

.wcrb-print-pro-notice .wcrb-pro-required-notice {
    margin: 0;
    font-size: 12px;
    padding: 8px 12px;
}

/* ===== Job History timeline ===== */
.wcrb-job-editor .wcrb-history-items > li.note {
    position: relative;
    border: 1px solid #edf1f6;
    border-radius: 10px;
    padding: .7rem .85rem .7rem 2.3rem;
    margin-bottom: .55rem;
    background: #fff;
}

.wcrb-job-editor .wcrb-history-items > li.note:before {
    content: '';
    position: absolute;
    left: .9rem;
    top: 1.05rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2878f8;
    box-shadow: 0 0 0 3px #e8f1ff;
}

.wcrb-job-editor .wcrb-history-items > li.note_private:before {
    background: #f0a30a;
    box-shadow: 0 0 0 3px #fff5df;
}

.wcrb-job-editor .wcrb-history-items > li.note .note_content p {
    margin: 0;
    font-size: .88rem;
    color: #26354f;
}

.wcrb-job-editor .wcrb-history-items > li.note .meta {
    margin: .35rem 0 0;
    font-size: .75rem;
    color: #8b98aa;
}

.wcrb-job-editor .wcrb-history-items > li.note .typelabel {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    border-radius: 6px;
    background: #eef4ff;
    color: #1d5fd0;
    font-size: .68rem;
    text-transform: capitalize;
}

@media (max-width: 1199px) {
    .wcrb-job-editor .wcrb-overview .wcrb-overview-card {
        margin-bottom: 1rem;
    }
}

/* =====================================================================
   Job Editor — unified visual pass (theme-aware, uses Bootstrap vars)
   ===================================================================== */

/* Segmented tab bar */
.wcrb-job-editor .wcrb-job-tabs {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.85rem;
    padding: 5px;
    gap: 3px;
    box-shadow: 0 4px 16px rgba(16, 42, 84, .05);
    margin-bottom: 1.1rem;
}

.wcrb-job-editor .wcrb-job-tabs .nav-link {
    border: 0;
    border-radius: 0.6rem;
    color: var(--bs-secondary-color);
    font-weight: 600;
    padding: .5rem .85rem;
    transition: background .15s ease, color .15s ease;
}

.wcrb-job-editor .wcrb-job-tabs .nav-link:hover {
    background: var(--bs-body-bg);
    color: var(--bs-emphasis-color);
}

.wcrb-job-editor .wcrb-job-tabs .nav-link.active {
    background: var(--bs-primary);
    color: #fff;
    box-shadow: 0 3px 10px rgba(13, 110, 253, .32);
}

/* Cards */
.wcrb-job-editor .card.job-widget {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.9rem;
    overflow: hidden;
    background: var(--bs-body-bg);
    box-shadow: 0 4px 16px rgba(16, 42, 84, .05);
}

/* See the note further up: release the clipping only while a dropdown is open. */
.wcrb-job-editor .card.job-widget:has(.dropdown-menu.show),
.wcrb-job-editor .card.job-widget.wcrb-appt-menu-open {
    overflow: visible;
}

.wcrb-job-editor .widget-header {
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.wcrb-job-editor .widget-header h5 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.2px;
}

.wcrb-job-editor {
    /* Content padding for widget bodies, in one place so the "flush table"
       rule below can cancel it exactly. */
    --wcrb-widget-pad-y: 1rem;
    --wcrb-widget-pad-x: 1.05rem;
}

.wcrb-job-editor .widget-body {
    padding: var(--wcrb-widget-pad-y) var(--wcrb-widget-pad-x);
}

/* Table widgets: pull the table flush to the widget edges so the table head
   touches the top instead of sitting inside the content padding.
   Covers both shapes we use:
     - a table wrapper directly in the body (devices, Items & Services sections);
     - a list host whose direct child is a table (Payments / Expenses / Appointments).
   `:has()` only ever *adds* the flush treatment, so browsers without support just
   keep the previous padding instead of breaking. Empty states are plain divs, not
   `.table-responsive`, so they stay padded and keep their dashed placeholder box. */
.wcrb-job-editor .widget-body > .table-responsive:first-child,
.wcrb-job-editor .widget-body > :first-child:has(> .table-responsive) {
    margin: calc(-1 * var(--wcrb-widget-pad-y)) calc(-1 * var(--wcrb-widget-pad-x)) 0;
}

/* Payments: an (empty) flash-message holder sits before the list, so cancel the
   padding on the list itself — only while that holder is empty. */
.wcrb-job-editor .widget-body > .wcrb-payment-messages:empty + :has(> .table-responsive) {
    margin: calc(-1 * var(--wcrb-widget-pad-y)) calc(-1 * var(--wcrb-widget-pad-x)) 0;
}

/* Visible notes/hints that follow a flush table keep their breathing room.
   (Hidden <template> rows and empty AJAX message holders must not add space.) */
.wcrb-job-editor .widget-body > .table-responsive:first-child ~ p {
    margin-top: var(--wcrb-widget-pad-y);
}

/* Tables */
.wcrb-job-editor .job-widget table.table {
    font-size: .85rem;
    margin-bottom: 0;
}

.wcrb-job-editor .job-widget table.table > thead th {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--bs-border-color);
    white-space: nowrap;
}

.wcrb-job-editor .job-widget table.table td {
    border-color: var(--bs-border-color);
    vertical-align: middle;
}

/* Empty states */
.wcrb-job-editor .job-widget .text-muted.text-center.py-3,
.wcrb-job-editor .job-widget .text-muted.text-center.py-4,
.wcrb-job-editor .job-widget .text-muted.text-center.py-5 {
    border: 1px dashed var(--bs-border-color);
    border-radius: 0.7rem;
    background: var(--bs-tertiary-bg);
}

/* Summary header polish */
.wcrb-job-editor .wcrb-job-summary {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.9rem;
    box-shadow: 0 4px 16px rgba(16, 42, 84, .05);
}

/* History "add log" panel + timeline spacing */
.wcrb-job-editor .wcrb-history-items {
    margin-bottom: 0;
}

/* Make the Overview right rail align nicely on wide screens */
@media (min-width: 1200px) {
    .wcrb-job-editor .wcrb-overview {
        align-items: flex-start;
    }
}

/* Front-end dashboard visual refresh. Keep this CSS-only to avoid adding runtime cost. */
.dashboard-wrapper {
    --wcrb-dashboard-bg: var(--wcrb-page-bg);
    --wcrb-dashboard-border: var(--wcrb-border);
    --wcrb-dashboard-ink: var(--wcrb-ink);
    color: var(--wcrb-dashboard-ink);
    background: var(--wcrb-dashboard-bg);
}

/* The page title is a global h4 with !important ink; let the palette decide. */
.dashboard-wrapper .top-bar h4,
.dashboard-wrapper .top-bar h4.wcrb-page-title {
    color: var(--wcrb-ink) !important;
}

.dashboard-wrapper .main-content {
    background: var(--wcrb-dashboard-bg);
}

.dashboard-wrapper .top-bar {
    border-color: var(--wcrb-dashboard-border) !important;
    box-shadow: 0 1px 3px rgba(23, 35, 56, .04) !important;
}

.dashboard-wrapper .top-bar h4 {
    /* Colour comes from the design-system tokens (--wcrb-ink); hard-coding the
       light-mode ink here kept the page title dark-on-dark. */
    font-weight: 650;
    letter-spacing: -.02em;
}

.dashboard-wrapper .sidebar {
    box-shadow: 2px 0 14px rgba(23, 35, 56, .08);
}

.dashboard-wrapper .sidebar-nav .nav-link {
    transition: background-color .16s ease, color .16s ease;
}

.dashboard-wrapper .sidebar-nav .nav-link:hover,
.dashboard-wrapper .sidebar-nav .nav-link.active {
    transform: none;
}

.dashboard-wrapper .sidebar-nav .nav-link.active {
    border-left: 3px solid #60a5fa;
    background: rgba(59, 130, 246, .2);
}

.dashboard-wrapper .wcrb-job-editor .wcrb-job-tabs {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, .35) transparent;
}

.dashboard-wrapper .wcrb-job-editor .wcrb-job-tabs::-webkit-scrollbar {
    height: 4px;
}

.dashboard-wrapper .wcrb-job-editor .wcrb-job-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.dashboard-wrapper .wcrb-job-editor .wcrb-job-tabs::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .35);
    border-radius: 4px;
}

.dashboard-wrapper .wcrb-job-action-bar {
    left: var(--sidebar-width);
}

.dashboard-wrapper .dashboard-content {
    padding: 1.5rem clamp(1rem, 2vw, 2rem) !important;
}

.dashboard-wrapper .card,
.dashboard-wrapper .wcrb-job-editor .card.job-widget {
    border: 1px solid var(--wcrb-dashboard-border);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(23, 35, 56, .045);
    transition: box-shadow .16s ease, border-color .16s ease;
}

.dashboard-wrapper .card:hover,
.dashboard-wrapper .wcrb-job-editor .card.job-widget:hover {
    transform: none;
    box-shadow: 0 4px 14px rgba(23, 35, 56, .075);
}

.dashboard-wrapper .card-header {
    border-bottom-color: var(--wcrb-dashboard-border);
    padding: 1rem 1.25rem;
}

.dashboard-wrapper .card-title {
    color: var(--wcrb-dashboard-ink);
    letter-spacing: -.01em;
}

.dashboard-wrapper .stats-card {
    border: 0;
    box-shadow: 0 2px 8px rgba(23, 35, 56, .08);
}

.dashboard-wrapper .dashboard-content > .row:first-child > .col > a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.dashboard-wrapper .stats-card:hover {
    box-shadow: 0 5px 14px rgba(23, 35, 56, .12);
}

.dashboard-wrapper .form-control,
.dashboard-wrapper .form-select,
.dashboard-wrapper .input-group-text {
    border-color: #d8e0eb;
}

.dashboard-wrapper .form-control:focus,
.dashboard-wrapper .form-select:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .12);
}

.dashboard-wrapper .btn {
    font-weight: 550;
}

.dashboard-wrapper .wcrb-jobs-filter-form > .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    margin: 0;
    /* The grid zeroes the Bootstrap gutter (margin/padding below), which left the
       job filters cramped. `gap: 1rem` restores exactly the g-3 spacing the
       estimates filter bar gets. */
    gap: 1rem;
}

.dashboard-wrapper .wcrb-jobs-filter-form > .row > .col,
.dashboard-wrapper .wcrb-jobs-filter-form > .row > [class*="col-"] {
    width: auto;
    max-width: none;
    padding: 0;
}

/* Keep the whole filter bar on ONE row on desktop: instead of auto-fit wrapping
   onto a second line, the fields share the width (column auto-flow) so the
   refresh/filter buttons stay beside them. The actions keep their natural size;
   the row scrolls horizontally as a safety net on very narrow desktops, and
   below 992px the original wrapping layout is kept. */
@media (min-width: 992px) {
    .dashboard-wrapper .wcrb-jobs-filter-form > .row {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: .75rem;
        align-items: center;
        overflow-x: auto;
        padding-bottom: .15rem;
    }

    .dashboard-wrapper .wcrb-jobs-filter-form > .row > .col:last-child {
        min-width: max-content;
    }
}

.dashboard-wrapper #jobsTable_list table thead th {
    padding-top: .85rem;
    padding-bottom: .85rem;
    color: #536278;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-wrapper #jobsTable_list table tbody td {
    vertical-align: middle;
}

.dashboard-wrapper :focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .dashboard-wrapper .wcrb-job-action-bar {
        left: 0;
    }

    .dashboard-wrapper .dashboard-content {
        padding: 1rem .75rem !important;
    }

    .dashboard-wrapper .top-bar .container-fluid {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .dashboard-wrapper .card-header {
        padding: .85rem 1rem;
    }
}

body.fullscreen .dashboard-wrapper .wcrb-job-action-bar {
    left: 0;
}

@media (max-width: 575.98px) {
    .dashboard-wrapper .wcrb-jobs-filter-form > .row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ===== Overview rail: Notes widget ===== */
.wcrb-job-editor .wcrb-overview-notes .widget-header {
    padding: .7rem .85rem;
}

.wcrb-job-editor .wcrb-overview-notes .widget-header h5 {
    font-size: .92rem;
}

/* Keep the rail card compact: the note list scrolls instead of stretching it. */
.wcrb-job-editor .wcrb-overview-notes .wcrb-note-input {
    font-size: .82rem;
}

.wcrb-job-editor .wcrb-overview-notes .wcrb-job-notes-list {
    max-height: 240px;
    overflow-y: auto;
}

.wcrb-job-editor .wcrb-overview-notes .wcrb-job-note {
    padding: .5rem .6rem;
    font-size: .78rem;
}

/* ==========================================================================
   Job Editor — design pass (buttons, progress, items fields, modals)
   ========================================================================== */

/*
 * The theme sets `.btn { border: none; }`, which turns every `btn-outline-*`
 * into what looks like bare text (no background AND no border). Give the
 * outline variants their border back so nothing looks unstyled.
 */
.dashboard-wrapper .btn-outline-primary,
.dashboard-wrapper .btn-outline-secondary,
.dashboard-wrapper .btn-outline-success,
.dashboard-wrapper .btn-outline-danger,
.dashboard-wrapper .btn-outline-info,
.dashboard-wrapper .btn-outline-warning,
.dashboard-wrapper .btn-outline-dark {
    border: 1px solid currentColor;
}

/* ---- Job Actions: row 1 of the floating action bar ---- */
.wcrb-job-editor .wcrb-job-actions-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    overflow-x: auto;
    scrollbar-width: thin;
}

.wcrb-job-editor .wcrb-job-actions-bar .btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: .45rem .85rem;
    border-radius: 8px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: none;
}

.wcrb-job-editor .wcrb-job-actions-bar .btn:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(16, 42, 84, .14);
}

/* ---- Small "jump to tab" buttons (Manage →, History, All Notes) ---- */
.wcrb-job-editor .wcrb-tab-jump {
    padding: .3rem .6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: var(--bs-tertiary-bg, #f8f9fa);
    font-weight: 600;
}

/* ---- Progress stepper: above the summary card, centred, NOT a widget ---- */
.wcrb-job-editor .wcrb-job-progress {
    max-width: 900px;
    margin: 0 auto .9rem;
    text-align: center;
}

.wcrb-job-editor .wcrb-job-progress .wcrb-progress-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .3rem 1.1rem;
    margin-bottom: .45rem;
}

.wcrb-job-editor .wcrb-job-progress .wcrb-progress-step {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    color: var(--bs-secondary-color, #9ca3af);
}

.wcrb-job-editor .wcrb-job-progress .wcrb-progress-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #e5e7eb;
    color: #fff;
    font-size: .55rem;
}

.wcrb-job-editor .wcrb-job-progress .wcrb-progress-step.is-done {
    color: #198754;
}

.wcrb-job-editor .wcrb-job-progress .wcrb-progress-step.is-done .wcrb-progress-dot {
    background: #198754;
}

.wcrb-job-editor .wcrb-job-progress .wcrb-progress-step.is-current {
    color: var(--color-primary);
    font-weight: 600;
}

.wcrb-job-editor .wcrb-job-progress .wcrb-progress-step.is-current .wcrb-progress-dot {
    background: var(--color-primary);
}

.wcrb-job-editor .wcrb-job-progress .wcrb-progress-status {
    color: var(--bs-secondary-color, #6b7280);
    font-weight: 400;
}

.wcrb-job-editor .wcrb-job-progress .wcrb-progress-track {
    height: 5px;
    max-width: 620px;
    margin: 0 auto;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.wcrb-job-editor .wcrb-job-progress .wcrb-progress-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    transition: width .3s ease;
}

.wcrb-job-editor .wcrb-job-progress .wcrb-job-progress-cancelled {
    color: #dc3545;
    font-weight: 600;
    font-size: .85rem;
}

/* ---- Items table: consistent, compact inline controls ---- */
/* The Qty / Price inputs only carry wc_validate_number + wc_special_input (no
   form-control), so they rendered as default browser inputs next to the
   form-control tax selects. Style them together. */
/* Item + device tables: ONE compact style for every control (Qty, Price, Name,
   Code, device dropdown, Tax, and the Model table's Serial/Login/Note fields).
   Broad selectors on purpose — each item type names its cells differently
   (wc_qty vs wc_service_qty vs wc_extra_qty, wc_extra_name, ...) and the
   Name/Code text inputs carry no form-control class at all.
   The Model table is scoped to `tr.wcrb-device-row` so the Pre/Post evaluation
   grid below each device keeps its own (wp-admin-mirroring) styling. */
.wcrb-job-editor .wcrb-items-table input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.wcrb-job-editor .wcrb-items-table select,
.wcrb-job-editor .wcrb-items-table .form-control,
.wcrb-job-editor .wcrb-items-table .form-select,
.wcrb-job-editor .wcrb-items-table .select2-container--default .select2-selection--single,
.wcrb-job-editor .wcrb-devices-table tr.wcrb-device-row input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.wcrb-job-editor .wcrb-devices-table tr.wcrb-device-row select,
.wcrb-job-editor .wcrb-devices-table tr.wcrb-device-row .form-control,
.wcrb-job-editor .wcrb-devices-table tr.wcrb-device-row .form-select,
.wcrb-job-editor .wcrb-devices-table tr.wcrb-device-row .select2-container--default .select2-selection--single {
    padding: .35rem .5rem;
    font-size: var(--fs-xs, .8rem);
    line-height: 1.4;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    box-shadow: none;
}

.wcrb-job-editor .wcrb-items-table input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
.wcrb-job-editor .wcrb-items-table select:focus,
.wcrb-job-editor .wcrb-items-table .form-control:focus,
.wcrb-job-editor .wcrb-items-table .form-select:focus,
.wcrb-job-editor .wcrb-devices-table tr.wcrb-device-row input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
.wcrb-job-editor .wcrb-devices-table tr.wcrb-device-row select:focus,
.wcrb-job-editor .wcrb-devices-table tr.wcrb-device-row .form-control:focus,
.wcrb-job-editor .wcrb-devices-table tr.wcrb-device-row .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .1);
    outline: none;
}

/* Text/number inputs fill their item cell. The Model table keeps its own
   140px min-width (set further up) so its columns don't reflow. */
.wcrb-job-editor .wcrb-items-table td > input {
    width: 100%;
    min-width: 72px;
}

/* Select2 (device pickers) rendered text/arrow must match the native controls. */
.wcrb-job-editor .wcrb-items-table .select2-container--default .select2-selection--single,
.wcrb-job-editor .wcrb-devices-table tr.wcrb-device-row .select2-container--default .select2-selection--single {
    min-height: 31px;
}

.wcrb-job-editor .wcrb-items-table .select2-container--default .select2-selection__rendered,
.wcrb-job-editor .wcrb-devices-table tr.wcrb-device-row .select2-container--default .select2-selection__rendered {
    padding: 0;
    font-size: var(--fs-xs, .8rem);
    line-height: 1.4;
}

.wcrb-job-editor .wcrb-items-table .select2-container--default .select2-selection__arrow,
.wcrb-job-editor .wcrb-devices-table tr.wcrb-device-row .select2-container--default .select2-selection__arrow {
    height: 100%;
    right: 8px;
}

/*
 * The "add an item" dropdowns live in each item card's HEADER (outside the
 * table), so the table rules above never reached them and they kept the tall
 * default control style. Match them to the rest of the fields.
 */
.wcrb-job-editor .wcrb-items-section .widget-header .form-control,
.wcrb-job-editor .wcrb-items-section .widget-header .form-select,
.wcrb-job-editor .wcrb-items-section .widget-header .select2-container--default .select2-selection--single {
    padding: .35rem .5rem;
    font-size: var(--fs-xs, .8rem);
    line-height: 1.4;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    box-shadow: none;
}

.wcrb-job-editor .wcrb-items-section .widget-header .select2-container--default .select2-selection--single {
    min-height: 31px;
}

.wcrb-job-editor .wcrb-items-section .widget-header .select2-container--default .select2-selection__rendered {
    font-size: var(--fs-xs, .8rem);
    line-height: 1.4;
    padding: 0;
}

.wcrb-job-editor .wcrb-items-section .widget-header .select2-container--default .select2-selection__arrow {
    height: 100%;
    right: 8px;
}

/* Item row delete button: breathing room before the item name */
.wcrb-job-editor .wcrb-items-table .delme {
    margin-right: .5rem;
}

/* ---- Modals: every field the same height, incl. the datalist "+" groups ---- */
.wcrb-job-editor .modal .form-control,
.wcrb-job-editor .modal .form-select,
.wcrb-job-editor .modal .input-group-text {
    padding: .5rem .75rem;
    font-size: var(--fs-sm);
    border-color: var(--bs-border-color);
    border-radius: 8px;
}

.wcrb-job-editor .modal textarea.form-control {
    padding: .5rem .75rem;
}

.wcrb-job-editor .modal .input-group > .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.wcrb-job-editor .modal .input-group .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .75rem;
    border: 1px solid var(--bs-border-color);
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-body-color);
}

.wcrb-job-editor .modal .input-group .btn:hover {
    background: var(--bs-secondary-bg, #e9ecef);
}

/* ===== Invoice: "Print by <Device>" (wb_rb_invoice_type = by_device) ===== */
.wcrb_print_by_device {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 0 10px;
    padding: 6px 10px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #f8f9fa;
    vertical-align: middle;
}

.wcrb_print_by_device label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #495057;
}

.wcrb_print_by_device select {
    min-width: 190px;
    padding: 4px 8px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
}

.wcrb_print_by_device .btn {
    margin: 0 !important;
}

@media print {
    .wcrb_print_by_device {
        display: none !important;
    }
}

/* ===== Reports screen: menu cards ===== */
.wcrb-report-card .card {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.wcrb-report-card:hover .card,
.wcrb-report-card:focus-visible .card {
    transform: translateY(-2px);
    border-color: var(--bs-primary-border-subtle, #86b7fe);
    box-shadow: 0 6px 18px rgba(16, 42, 84, .10);
}

.wcrb-report-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .7rem;
    background: var(--bs-primary-bg-subtle, #cfe2ff);
    color: var(--bs-primary, #0d6efd);
    font-size: 1.15rem;
    line-height: 1;
}

.wcrb-report-card .card .widget-body {
    align-items: flex-start;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* ===== Reports: criteria forms + output from the built-in generators =====
   Those generators are written for Foundation (grid-container / grid-x / cell /
   fieldset / button / wc_table), which the dashboard does not load, so they used to
   render as raw HTML. These scoped rules map that handful of classes onto the
   dashboard's Bootstrap look. Scoped to .wcrb-legacy-form / .wcrb-legacy-report on
   purpose, so .invoice-box everywhere else (invoices, receipts) is untouched. */
.wcrb-legacy-form .invoice-box,
.wcrb-legacy-form form {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    padding: 1.1rem 1.25rem 1.2rem;
    box-shadow: 0 4px 16px rgba(16, 42, 84, .04);
}

.wcrb-legacy-form h2,
.wcrb-legacy-form .select-head {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.2px;
    margin: 0 0 .9rem;
}

.wcrb-legacy-form .grid-container {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.wcrb-legacy-form .grid-x {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -.5rem;
}

.wcrb-legacy-form .cell,
.wcrb-legacy-form .grid-x > .cell {
    flex: 1 1 240px;
    max-width: 100%;
    padding: 0 .5rem .85rem;
}

.wcrb-legacy-form .medium-6 { flex-basis: 300px; }

.wcrb-legacy-form fieldset,
.wcrb-legacy-form .fieldset {
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    padding: .85rem 1rem .55rem;
    margin: 0 0 1rem;
}

.wcrb-legacy-form legend {
    float: none;
    width: auto;
    padding: 0 .4rem;
    margin: 0;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
}

.wcrb-legacy-form .cell > label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .3rem;
}

.wcrb-legacy-form fieldset label {
    display: inline;
    font-size: .9rem;
    font-weight: 400;
    margin: 0 .9rem 0 0;
}

.wcrb-legacy-form input[type="date"],
.wcrb-legacy-form input[type="text"],
.wcrb-legacy-form input[type="number"],
.wcrb-legacy-form select,
.wcrb-legacy-form textarea {
    width: 100%;
    max-width: 100%;
    padding: .45rem .65rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .45rem;
    background: #fff;
    font-size: .9rem;
    line-height: 1.4;
}

.wcrb-legacy-form input[type="checkbox"] {
    margin: 0 .35rem 0 0;
    vertical-align: middle;
}

.wcrb-legacy-form .button,
.wcrb-legacy-form input[type="submit"],
.wcrb-legacy-form button {
    display: inline-block;
    width: auto;
    padding: .5rem 1.1rem;
    border: 0;
    border-radius: .45rem;
    background: var(--bs-primary);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
}

.wcrb-legacy-form .button:hover,
.wcrb-legacy-form input[type="submit"]:hover,
.wcrb-legacy-form button:hover {
    filter: brightness(.95);
}

/* The generated report view (tables, totals, header, A4 sheet) is styled by
   css/report-view.css, which mirrors the backend report CSS. */

/* ==========================================================================
   DESIGN SYSTEM PASS
   --------------------------------------------------------------------------
   One colour system for the whole portal.

   - Light and dark are both token sets (--wcrb-*); components never hard-code a
     colour and `[data-bs-theme="dark"]` only swaps the token values. A new
     surface therefore works in both themes automatically.
   - The brand tokens come from admin settings (Primary / Secondary), injected
     as --wcrb-brand / --wcrb-brand-accent in parts/myaccount_head.php.
   - Breakpoints: phones (<=575), small tablets (<=767), off-canvas (<=991).
   ========================================================================== */

/* ---------- Tokens ---------- */
/* Defaults only: the inline palette (class-wcrb_styling) overrides these on :root,
   so this block must not match `[data-bs-theme="dark"]` or it would clobber the
   dark values that come from the settings. */
:root {
    --wcrb-brand: #063e70;
    --wcrb-brand-accent: #fd6742;
    --wcrb-brand-soft: rgba(6, 62, 112, .10);

    --wcrb-page-bg: #f4f7fb;
    --wcrb-surface: #ffffff;
    --wcrb-surface-2: #f8fafc;      /* table head, hover rows, inset panels */
    --wcrb-surface-3: #eef2f7;      /* fills, skeletons, track backgrounds */
    --wcrb-border: #e4eaf2;
    --wcrb-border-strong: #d4dce7;

    --wcrb-ink: #172338;
    --wcrb-ink-soft: #475569;
    --wcrb-ink-muted: #6b7a90;

    --wcrb-shadow-sm: 0 1px 2px rgba(23, 35, 56, .05);
    --wcrb-shadow-md: 0 2px 8px rgba(23, 35, 56, .06);
    --wcrb-shadow-lg: 0 10px 28px rgba(23, 35, 56, .12);

    --wcrb-sidebar-bg: #172338;
    --wcrb-sidebar-ink: rgba(255, 255, 255, .78);
    --wcrb-sidebar-ink-strong: #ffffff;
    --wcrb-sidebar-hover: rgba(255, 255, 255, .08);
    --wcrb-sidebar-active: rgba(255, 255, 255, .14);

    --wcrb-topbar-bg: #ffffff;
}

[data-bs-theme="dark"] {
    --wcrb-brand-soft: rgba(255, 255, 255, .08);

    --wcrb-page-bg: #16181d;
    --wcrb-surface: #212429;
    --wcrb-surface-2: #262a30;
    --wcrb-surface-3: #2f343b;
    --wcrb-border: #343a42;
    --wcrb-border-strong: #414954;

    --wcrb-ink: #e8eaed;
    --wcrb-ink-soft: #c3c8d0;
    --wcrb-ink-muted: #98a1ae;

    --wcrb-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --wcrb-shadow-md: 0 2px 8px rgba(0, 0, 0, .40);
    --wcrb-shadow-lg: 0 10px 28px rgba(0, 0, 0, .55);

    --wcrb-sidebar-bg: #101216;
    --wcrb-sidebar-ink: rgba(255, 255, 255, .72);
    --wcrb-sidebar-ink-strong: #ffffff;
    --wcrb-sidebar-hover: rgba(255, 255, 255, .07);
    --wcrb-sidebar-active: rgba(255, 255, 255, .12);

    --wcrb-topbar-bg: #212429;
}

/* Bridge the brand onto Bootstrap's variables: every .btn-primary, .text-primary,
   .bg-primary, focus ring and link then follows the shop colour instead of the
   framework blue. These are var() aliases, so they need no per-theme copy. */
:root {
    --bs-primary: var(--wcrb-brand);
    --bs-link-color: var(--wcrb-brand);
    --bs-link-hover-color: var(--wcrb-brand);
    --bs-primary-bg-subtle: var(--wcrb-brand-soft);
    --bs-primary-border-subtle: var(--wcrb-brand-soft);
    --bs-focus-ring-color: var(--wcrb-brand-soft);
}

/* ---------- Page shell ---------- */
body,
.dashboard-wrapper,
.dashboard-wrapper .main-content {
    background-color: var(--wcrb-page-bg);
    color: var(--wcrb-ink);
}

.dashboard-wrapper .top-bar {
    background: var(--wcrb-topbar-bg) !important;
    border-color: var(--wcrb-border) !important;
    box-shadow: var(--wcrb-shadow-sm) !important;
}

.dashboard-wrapper .top-bar h4,
.dashboard-wrapper .card-title,
.dashboard-wrapper h1,
.dashboard-wrapper h2,
.dashboard-wrapper h3,
.dashboard-wrapper h4,
.dashboard-wrapper h5 {
    color: var(--wcrb-ink);
}

.dashboard-wrapper h6 {
    color: var(--wcrb-ink-muted);
}

.dashboard-wrapper .text-muted {
    color: var(--wcrb-ink-muted) !important;
}

.dashboard-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
    color: var(--wcrb-brand);
}

.dashboard-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
    color: var(--wcrb-brand);
    text-decoration: underline;
}

/* ---------- Cards & surfaces ---------- */
.dashboard-wrapper .card,
.dashboard-wrapper .card.job-widget,
.dashboard-wrapper .modal-content,
.dashboard-wrapper .dropdown-menu,
.dashboard-wrapper .list-group-item,
.dashboard-wrapper .accordion-item {
    background-color: var(--wcrb-surface);
    color: var(--wcrb-ink);
    border: 1px solid var(--wcrb-border);
    border-radius: 12px;
    box-shadow: var(--wcrb-shadow-md);
}

.dashboard-wrapper .card-header,
.dashboard-wrapper .card-footer {
    background-color: transparent;
    border-color: var(--wcrb-border);
    color: var(--wcrb-ink);
}

.dashboard-wrapper .dropdown-item {
    color: var(--wcrb-ink);
}

.dashboard-wrapper .dropdown-item:hover,
.dashboard-wrapper .dropdown-item:focus {
    background-color: var(--wcrb-surface-2);
    color: var(--wcrb-ink);
}

.dashboard-wrapper .dropdown-divider {
    border-color: var(--wcrb-border);
}

.dashboard-wrapper .dropdown-header {
    color: var(--wcrb-ink-muted) !important;
}

.dashboard-wrapper .modal-header,
.dashboard-wrapper .modal-footer {
    border-color: var(--wcrb-border);
}

.dashboard-wrapper .border,
.dashboard-wrapper .border-top,
.dashboard-wrapper .border-bottom,
.dashboard-wrapper .border-start,
.dashboard-wrapper .border-end {
    border-color: var(--wcrb-border) !important;
}

.dashboard-wrapper hr {
    border-color: var(--wcrb-border);
    opacity: 1;
}

/* Lists inside p-0 cards used hard-coded light greys that stayed visible in dark. */
.dashboard-wrapper .latest-item,
.dashboard-wrapper .priority-job-item,
.dashboard-wrapper .appointment-item,
.dashboard-wrapper .activity-item {
    border-color: var(--wcrb-border) !important;
}

.dashboard-wrapper .activity-item {
    border-radius: 10px;
    background: var(--wcrb-surface);
}

.dashboard-wrapper .bg-light {
    background-color: var(--wcrb-surface-2) !important;
    color: var(--wcrb-ink) !important;
}

.dashboard-wrapper .bg-white {
    background-color: var(--wcrb-surface) !important;
}

.dashboard-wrapper .table-light,
.dashboard-wrapper .table > thead.table-light th {
    background-color: var(--wcrb-surface-2) !important;
    color: var(--wcrb-ink) !important;
}

/* ---------- Top bar ---------- */
.wcrb-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding: .5rem 0;
    min-width: 0;
}

.wcrb-topbar-heading {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    flex: 0 1 auto;
}

.wcrb-page-title {
    font-size: var(--fs-xl);
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.25;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The actions are the thing that must stay usable; the title gives up space to
   them (it truncates) instead of being squeezed by them. */
.wcrb-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.wcrb-topbar-actions .btn {
    white-space: nowrap;
}

/* Icon-only buttons (fullscreen, palette) keep a square hit area. */
.dashboard-wrapper .wcrb-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    flex: 0 0 auto;
}

.dashboard-wrapper .wcrb-user-toggle {
    padding-top: .2rem;
    padding-bottom: .2rem;
    padding-left: .3rem;
    padding-right: .75rem;
    max-width: 220px;
}

.dashboard-wrapper .wcrb-user-toggle .user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Palette dropdown: three labelled options in one row. */
.dashboard-wrapper .wcrb-theme-menu {
    min-width: 15rem;
    padding: .4rem;
}

.wcrb-theme-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem;
}

.wcrb-theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .5rem .35rem;
    border: 1px solid var(--wcrb-border);
    border-radius: 8px;
    background: var(--wcrb-surface);
    color: var(--wcrb-ink-soft);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.wcrb-theme-option i {
    font-size: 1rem;
}

.wcrb-theme-option:hover,
.wcrb-theme-option:focus-visible {
    background: var(--wcrb-surface-2);
    border-color: var(--wcrb-border-strong);
    color: var(--wcrb-ink);
}

.wcrb-theme-option.active {
    background: var(--wcrb-brand);
    border-color: var(--wcrb-brand);
    color: #fff;
}

/* ---------- Sidebar ---------- */
.dashboard-wrapper .sidebar,
.sidebar {
    background: var(--wcrb-sidebar-bg);
    color: var(--wcrb-sidebar-ink-strong);
    box-shadow: 2px 0 14px rgba(0, 0, 0, .12);
}

.sidebar-header {
    position: relative;
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .08) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
}

/* Brand logos are usually drawn for light backgrounds; a light plate keeps them
   legible in both themes (the old `.bg-grey` plate turned into a white block in
   dark mode). */
.sidebar-header img,
.sidebar-header .custom-logo-link img {
    max-height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    padding: 3px 6px;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.sidebar-header .site-title a {
    color: #fff;
}

.wcrb-sidebar-close {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    line-height: 1;
}

.wcrb-sidebar-close:hover,
.wcrb-sidebar-close:focus-visible {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.dashboard-wrapper .sidebar-nav .nav-link,
.sidebar-nav .nav-link {
    color: var(--wcrb-sidebar-ink);
    border-radius: 8px;
}

.dashboard-wrapper .sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:focus-visible {
    color: var(--wcrb-sidebar-ink-strong);
    background: var(--wcrb-sidebar-hover);
}

.dashboard-wrapper .sidebar-nav .nav-link.active,
.sidebar-nav .nav-link.active,
.sidebar-nav .wcrb-nav-link.is-active {
    color: var(--wcrb-sidebar-ink-strong);
    background: var(--wcrb-sidebar-active);
    border-left: 3px solid var(--wcrb-brand-accent);
    font-weight: 600;
}

.sidebar-nav .collapse ul.nav .nav-link {
    font-size: .78rem;
}

/* The menu markup carries Bootstrap's .text-white-50 / .active .text-white utilities
   (with !important), so a custom Sidebar Text colour had no effect. Let the token win. */
.sidebar .sidebar-nav .nav-link,
.sidebar .sidebar-nav .nav-link.text-white-50,
.sidebar .sidebar-nav .nav-link.active,
.sidebar .sidebar-nav .nav-link.active.text-white {
    color: var(--wcrb-sidebar-ink) !important;
}

.sidebar .sidebar-nav .nav-link.active,
.sidebar .sidebar-nav .nav-link.active.text-white {
    color: var(--wcrb-sidebar-ink-strong) !important;
}

/* Chart period switch (Weekly / Monthly / Yearly): the selected state used
   Bootstrap's grey with dark ink, which read as "disabled" on a dark card. */
.dashboard-wrapper .card-header .btn-group .btn.active,
.dashboard-wrapper .card-header .btn-group .btn:active {
    background: var(--wcrb-brand) !important;
    border-color: var(--wcrb-brand) !important;
    color: var(--wcrb-on-brand, #fff) !important;
    font-weight: 600;
}

.dashboard-wrapper .card-header .btn-group .btn:not(.active) {
    color: var(--wcrb-ink-soft);
}

/* ---------- Buttons ---------- */
.dashboard-wrapper .btn-primary {
    background: var(--wcrb-brand);
    border-color: var(--wcrb-brand);
    color: #fff;
}

.dashboard-wrapper .btn-primary:hover,
.dashboard-wrapper .btn-primary:focus-visible,
.dashboard-wrapper .btn-primary:active,
.dashboard-wrapper .btn-primary.active {
    background: var(--wcrb-brand) !important;
    border-color: var(--wcrb-brand) !important;
    color: #fff !important;
    filter: brightness(.92);
}

.dashboard-wrapper .btn-outline-primary {
    color: var(--wcrb-brand);
    border-color: var(--wcrb-brand);
    background: transparent;
}

.dashboard-wrapper .btn-outline-primary:hover,
.dashboard-wrapper .btn-outline-primary:focus-visible,
.dashboard-wrapper .btn-outline-primary.active {
    background: var(--wcrb-brand) !important;
    border-color: var(--wcrb-brand) !important;
    color: #fff !important;
}

.dashboard-wrapper .btn-outline-secondary {
    color: var(--wcrb-ink-soft);
    border-color: var(--wcrb-border-strong);
}

.dashboard-wrapper .btn-outline-secondary:hover,
.dashboard-wrapper .btn-outline-secondary:focus-visible {
    background: var(--wcrb-surface-2) !important;
    border-color: var(--wcrb-border-strong) !important;
    color: var(--wcrb-ink) !important;
}

.dashboard-wrapper .btn-outline-primary.active,
.dashboard-wrapper .btn-outline-secondary.active {
    font-weight: 600;
}

.dashboard-wrapper .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-right: 0;
}

/* ---------- Forms ---------- */
.dashboard-wrapper .form-control,
.dashboard-wrapper .form-select,
.dashboard-wrapper .input-group-text {
    background-color: var(--wcrb-surface);
    border-color: var(--wcrb-border-strong);
    color: var(--wcrb-ink);
}

.dashboard-wrapper .input-group-text {
    background-color: var(--wcrb-surface-2);
    color: var(--wcrb-ink-muted);
}

.dashboard-wrapper .form-control::placeholder,
.dashboard-wrapper textarea::placeholder {
    color: var(--wcrb-ink-muted);
    opacity: 1;
}

.dashboard-wrapper .form-control:focus,
.dashboard-wrapper .form-select:focus {
    background-color: var(--wcrb-surface);
    border-color: var(--wcrb-brand);
    color: var(--wcrb-ink);
    box-shadow: 0 0 0 .2rem var(--wcrb-brand-soft);
}

.dashboard-wrapper .form-label,
.dashboard-wrapper .form-check-label {
    color: var(--wcrb-ink-soft);
}

/* Select2 renders outside the control flow; give it the same tokens. */
.dashboard-wrapper .select2-container--default .select2-selection--single,
.dashboard-wrapper .select2-container--default .select2-selection--multiple {
    background-color: var(--wcrb-surface);
    border-color: var(--wcrb-border-strong);
    color: var(--wcrb-ink);
}

.dashboard-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered,
.dashboard-wrapper .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--wcrb-ink);
}

.dashboard-wrapper .select2-dropdown {
    background-color: var(--wcrb-surface);
    border-color: var(--wcrb-border-strong);
    color: var(--wcrb-ink);
}

.dashboard-wrapper .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--wcrb-brand);
    color: #fff;
}

/* ---------- Tables ---------- */
.dashboard-wrapper .table {
    --bs-table-color: var(--wcrb-ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--wcrb-border);
    --bs-table-hover-bg: var(--wcrb-surface-2);
    color: var(--wcrb-ink);
}

.dashboard-wrapper .table th,
.dashboard-wrapper #jobsTable_list table thead th {
    background: var(--wcrb-surface-2);
    color: var(--wcrb-ink-muted);
    border-color: var(--wcrb-border);
}

.dashboard-wrapper .table td {
    border-color: var(--wcrb-border);
}

.dashboard-wrapper .table tbody tr:hover td {
    background-color: var(--wcrb-surface-2);
}

/* ---------- Badges & alerts ---------- */
.dashboard-wrapper .badge {
    font-size: .7rem;
    font-weight: 600;
    padding: .35em .6em;
    border-radius: 6px;
}

.wcrb-badge-xs {
    font-size: .68rem !important;
    padding: .2em .45em !important;
}

.wcrb-badge-xxs {
    font-size: .62rem !important;
    padding: .15em .4em !important;
}

.wcrb-badge-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
    min-width: 64px;
}

.dashboard-wrapper .alert {
    border-radius: 10px;
}

/* ---------- Dashboard widgets ---------- */
.wcrb-item-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--wcrb-ink);
}

.wcrb-item-title a {
    color: var(--wcrb-ink);
}

.wcrb-item-title a:hover {
    color: var(--wcrb-brand);
    text-decoration: none;
}

.wcrb-meta-text {
    font-size: .8rem;
    color: var(--wcrb-ink-muted);
}

.wcrb-meta-text.text-muted {
    color: var(--wcrb-ink-muted) !important;
}

.wcrb-scroll-area {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--wcrb-border-strong) transparent;
}

.wcrb-scroll-area::-webkit-scrollbar {
    width: 8px;
}

.wcrb-scroll-area::-webkit-scrollbar-thumb {
    background: var(--wcrb-border-strong);
    border-radius: 8px;
}

.wcrb-scroll-sm { max-height: 250px; }
.wcrb-scroll-md { max-height: 300px; }
.wcrb-scroll-lg { max-height: 550px; }

.wcrb-chart-box {
    position: relative;
    height: 250px;
}

.wcrb-empty-state {
    color: var(--wcrb-ink-muted);
}

.appointment-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--wcrb-ink);
    overflow-wrap: anywhere;
}

.appointment-meta small {
    font-size: .75rem;
}

.appointment-map {
    height: 150px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--wcrb-border);
}

.appointment-map iframe {
    display: block;
    width: 100%;
    height: 100%;
}

/* Stats cards keep their deliberately coloured fills in both themes. */
.dashboard-wrapper .stats-card {
    color: #fff;
}

.dashboard-wrapper .stats-card:hover {
    box-shadow: var(--wcrb-shadow-lg);
}

/* Dark mode: a very dark brand colour would make outline buttons and content
   links unreadable on dark cards, so those inherit the normal ink there. */
[data-bs-theme="dark"] .dashboard-wrapper .btn-outline-primary {
    color: var(--wcrb-ink);
    border-color: var(--wcrb-border-strong);
}

[data-bs-theme="dark"] .dashboard-wrapper .btn-outline-primary:hover,
[data-bs-theme="dark"] .dashboard-wrapper .btn-outline-primary:focus-visible {
    color: #fff !important;
}

[data-bs-theme="dark"] .dashboard-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link),
[data-bs-theme="dark"] .dashboard-wrapper .wcrb-item-title a {
    color: var(--wcrb-ink);
}

[data-bs-theme="dark"] .dashboard-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
    color: #ffffff;
}

/* Bootstrap paints the dropdown caret with --bs-btn-color; on dark surfaces it
   disappeared, so invert the outline buttons' caret. */
[data-bs-theme="dark"] .dashboard-wrapper .btn-outline-secondary.dropdown-toggle::after,
[data-bs-theme="dark"] .dashboard-wrapper .btn-outline-primary.dropdown-toggle::after {
    filter: invert(1) brightness(1.6);
}

/* ---------- Dark-mode cleanups ---------- */
[data-bs-theme="dark"] .dashboard-wrapper .top-bar {
    /* Bootstrap's .bg-white utility would otherwise win over .top-bar. */
    background: var(--wcrb-topbar-bg) !important;
}

[data-bs-theme="dark"] .dashboard-wrapper .wcrb-user-toggle,
[data-bs-theme="dark"] .dashboard-wrapper .wcrb-icon-btn {
    color: var(--wcrb-ink) !important;
    border-color: var(--wcrb-border-strong) !important;
    background: transparent !important;
}

[data-bs-theme="dark"] .dashboard-wrapper .wcrb-user-toggle:hover,
[data-bs-theme="dark"] .dashboard-wrapper .wcrb-icon-btn:hover {
    background: var(--wcrb-surface-2) !important;
}

[data-bs-theme="dark"] .dashboard-wrapper .table-responsive tr,
[data-bs-theme="dark"] .dashboard-wrapper .latest-item,
[data-bs-theme="dark"] .dashboard-wrapper .priority-job-item,
[data-bs-theme="dark"] .dashboard-wrapper .appointment-item {
    background: var(--wcrb-surface);
}

[data-bs-theme="dark"] .dashboard-wrapper .bg-grey,
[data-bs-theme="dark"] .dashboard-wrapper .grey-bg {
    background-color: var(--wcrb-surface-2) !important;
    color: var(--wcrb-ink);
}

[data-bs-theme="dark"] .dashboard-wrapper .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-bs-theme="dark"] .dashboard-wrapper .form-select {
    background-color: var(--wcrb-surface);
    color: var(--wcrb-ink);
}

/* ---------- Off-canvas sidebar (< 992px) ---------- */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
        width: min(var(--sidebar-width), 82vw);
        z-index: 1050;
    }

    .sidebar.is-open,
    .sidebar.show {
        transform: translateX(0);
        box-shadow: 0 0 40px rgba(0, 0, 0, .35);
    }

    .main-content {
        margin-left: 0;
    }

    .wcrb-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(9, 13, 20, .55);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s ease;
    }

    .wcrb-sidebar-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
    }

    body.wcrb-sidebar-open {
        overflow: hidden;
    }
}

@media (min-width: 992px) {
    .wcrb-sidebar-backdrop {
        display: none;
    }
}

/* ---------- Status strips (Jobs / Appointments / Estimates) ----------
   These are `row g-3` of auto-width `col` children: on a desktop they fit, but with
   the sidebar taking room (or on a tablet) `col` squeezes them to ~90px and labels
   break mid-word, and with 11 statuses the last tile stretches across the row.
   One explicit grid keeps the tiles even at every width. */
.wcrb-screen-jobs .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card),
.wcrb-screen-estimates .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card),
.wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem;
    margin-left: 0;
    margin-right: 0;
}

.dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) > .col {
    width: auto;
    max-width: none;
    padding: 0;
    min-width: 0;
}

.dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) .stats-card {
    height: 100%;
}

.dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) .stats-card .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .9rem .6rem;
    min-height: 76px;
}

.dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) .stats-card .card-title {
    margin-bottom: 0;
    font-size: .68rem;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
}

.dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) .stats-card h4 {
    font-size: 1.15rem;
    line-height: 1.1;
}

@media (max-width: 767.98px) {
    .wcrb-screen-jobs .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card),
.wcrb-screen-estimates .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card),
.wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
        gap: .5rem;
    }

    .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) .stats-card .card-body {
        padding: .7rem .4rem;
        min-height: 68px;
    }
}

/* ---------- Wide data tables (Jobs / Appointments / Expenses) ----------
   These tables have 9+ columns. Their `.table-responsive` wrapper does scroll, but
   two other rules undo that on desktop: the generic `.table th` sizing and the
   "card must keep its rounded corners" clipping. The practical effect on a tablet
   was a page that scrolled sideways as a whole (docW 1312 on an 820px viewport).

   Keep the table itself `width: auto` with a sane minimum so the wrapper scrolls
   *inside* the card, and never let the table push the page wider than the screen. */
/* `overflow-x: visible` (set elsewhere for the row dropdowns) silently disables the
   scroll container, so the wrapper is pinned back to `auto`; the only element
   that is allowed to be wider than the card is the table inside it. */
:is(.wcrb-screen-jobs, .wcrb-screen-estimates, .wcrb-screen-appointments, .wcrb-screen-expenses, .wcrb-screen-payments) .dashboard-wrapper .table-responsive {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

:is(.wcrb-screen-jobs, .wcrb-screen-estimates, .wcrb-screen-appointments, .wcrb-screen-expenses, .wcrb-screen-payments) .dashboard-wrapper .table-responsive > .table {
    width: 100%;
    min-width: 980px;
}

/* The wrapper has to be able to shrink for the table to overflow it. A flex/grid
   parent otherwise sizes it to the table's intrinsic width and the whole page
   scrolls sideways instead. */
.dashboard-wrapper .table-responsive {
    min-width: 0;
}

/* Phones keep the stacked (label/value) layout the mobile rules already provide, so
   the wide-table minimum must not apply there. */
@media (max-width: 767.98px) {
    :is(.wcrb-screen-jobs, .wcrb-screen-estimates, .wcrb-screen-appointments, .wcrb-screen-expenses, .wcrb-screen-payments) .dashboard-wrapper .table-responsive > .table {
        min-width: 0;
    }
}

/* ---------- Final overflow guards ----------
   Two structural causes remained for a page that scrolls sideways on desktop and
   tablets:

   1. The tables inside a `.table-responsive` are wider than their card. They must be
      clipped by that wrapper (which has `overflow-x: auto`), but the bootstrap card
      body / dashboard main column needed an explicit `min-width: 0` to shrink.
   2. `.table th` carries `max-width: 200px` together with `white-space: nowrap`; a
      long "Case # / Tech" header then forces the header row wider than its cells and
      the table overflows its own column. `max-width: none` lets the header follow
      the cells again. */
.dashboard-wrapper .main-content,
.dashboard-wrapper .main-content .dashboard-content,
.dashboard-wrapper .dashboard-content .row,
.dashboard-wrapper .dashboard-content .card,
.dashboard-wrapper .dashboard-content .card-body {
    min-width: 0;
}

.dashboard-wrapper .table th {
    max-width: none;
}

/* The status tiles are links wrapping the card; keep them inside their tile. */
.dashboard-wrapper .dashboard-content > .row > .col > a {
    display: block;
    min-width: 0;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* The table itself is wider than its card (see the wide-table rules above) and must
   be clipped by the .table-responsive wrapper instead of widening the page. The two
   screens whose cards do not wrap their table in that element get the same clip on
   the card body, so nothing can escape the card. */
:is(.wcrb-screen-jobs, .wcrb-screen-estimates, .wcrb-screen-appointments, .wcrb-screen-expenses, .wcrb-screen-payments) .dashboard-wrapper .card-body {
    overflow: hidden;
}
/* The horizontal scroll containers need a visible affordance, otherwise a clipped
   column looks like missing data. A thin track/thumb in the theme colours does it
   without a custom scrollbar widget. */
:is(.wcrb-screen-jobs, .wcrb-screen-estimates, .wcrb-screen-appointments, .wcrb-screen-expenses, .wcrb-screen-payments) .dashboard-wrapper .table-responsive {
    scrollbar-width: thin;
    scrollbar-color: var(--wcrb-border-strong) transparent;
}

:is(.wcrb-screen-jobs, .wcrb-screen-estimates, .wcrb-screen-appointments, .wcrb-screen-expenses, .wcrb-screen-payments) .dashboard-wrapper .table-responsive::-webkit-scrollbar {
    height: 10px;
}

:is(.wcrb-screen-jobs, .wcrb-screen-estimates, .wcrb-screen-appointments, .wcrb-screen-expenses, .wcrb-screen-payments) .dashboard-wrapper .table-responsive::-webkit-scrollbar-thumb {
    background: var(--wcrb-border-strong);
    border-radius: 8px;
}

:is(.wcrb-screen-jobs, .wcrb-screen-estimates, .wcrb-screen-appointments, .wcrb-screen-expenses, .wcrb-screen-payments) .dashboard-wrapper .table-responsive::-webkit-scrollbar-track {
    background: transparent;
}
/* ---------- Reports: menu cards ----------
   `.d-flex` on the widget body is one of the few things that survives the card
   wrapper, so the icon column and the text column are flex items. Without
   `min-width: 0` the text span refuses to shrink and a long description widens the
   card past the column (and the page). The "Open" link also lost its colour in dark
   mode (`.text-primary` resolves to the very dark brand), so it uses the accent. */
.wcrb-report-card-body {
    display: block;
    height: 100%;
    padding: .9rem 1rem;
}

.wcrb-report-card-body .widget-body {
    padding: 0;
    height: 100%;
}

.wcrb-report-card-link {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-weight: 600;
    color: var(--wcrb-brand);
}

[data-bs-theme="dark"] .wcrb-report-card-link {
    color: var(--wcrb-brand-accent);
}

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

.wcrb-report-card .wcrb-report-icon {
    flex: 0 0 auto;
    /* The generic card-surface rule is `.card` + `.text-body`/icon; keep the icon
       plate transparent so its glyph stays visible on the dark card. */
    background: var(--wcrb-brand-soft);
    color: var(--wcrb-brand);
}

[data-bs-theme="dark"] .wcrb-report-card .wcrb-report-icon {
    background: rgba(255, 255, 255, .10);
    color: #ffffff;
}

/* The text column must be allowed to shrink; without it a long description
   widens the card past its grid column. */
.wcrb-report-card-body .flex-grow-1 {
    min-width: 0;
}
/* ---------- Calendar (FullCalendar) on small screens ----------
   Month view is a 7-column grid; below ~700px each day cell is ~50px wide, so the
   toolbar (prev/next/date/view switcher) and the event chips overflow. FullCalendar
   stacks its toolbar on its own when it can, but the wrapped container also needed a
   scroll boundary so the grid never widens the page. */
.calendar-container {
    background: var(--wcrb-surface);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[data-bs-theme="dark"] .calendar-container {
    /* `.bg-white` utility on the wrapper would otherwise stay pure white. */
    background: var(--wcrb-surface) !important;
}

.dashboard-wrapper .calendar-container .fc {
    min-width: 0;
}

.dashboard-wrapper .calendar-container .fc-toolbar {
    flex-wrap: wrap;
    gap: .5rem;
}

.dashboard-wrapper .calendar-container .fc-toolbar-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wcrb-ink);
}

.dashboard-wrapper .calendar-container .fc .fc-button {
    font-size: .78rem;
    padding: .35rem .6rem;
}

.dashboard-wrapper .calendar-container .calendar-filters {
    background: var(--wcrb-surface-2) !important;
    color: var(--wcrb-ink);
}

@media (max-width: 767.98px) {
    .dashboard-wrapper .calendar-container {
        padding: .85rem !important;
    }

    .dashboard-wrapper .calendar-container .fc-toolbar.fc-header-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-wrapper .calendar-container .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: .35rem;
    }

    .dashboard-wrapper .calendar-container .fc-toolbar-title {
        font-size: .95rem;
        text-align: center;
    }

    /* Day cells keep a usable tap target; the grid scrolls horizontally instead of
       compressing the labels into unreadable slivers. */
    .dashboard-wrapper .calendar-container .fc {
        min-width: 640px;
    }

    .dashboard-wrapper .calendar-container .fc .fc-daygrid-day-number,
    .dashboard-wrapper .calendar-container .fc .fc-col-header-cell-cushion {
        font-size: .72rem;
    }
}
/* ---------- Stats tiles: consistent padding ----------
   The reminder-logs / reviews / dashboard tiles all use `.stats-card > .card-body`
   with `p-3`, but the grid rules that size the strip also zero the column padding and
   the compact tile min-height, which left the icon and the label touching. This gives
   every tile the same interior rhythm at any width. */
.dashboard-wrapper .stats-card .card-body {
    padding: 1rem .85rem !important;
    gap: .35rem;
}

.dashboard-wrapper .stats-card .card-title {
    margin-bottom: 0 !important;
}

.dashboard-wrapper .stats-card .card-body > .mb-2,
.dashboard-wrapper .stats-card .card-body > .mb-1 {
    margin-bottom: .35rem !important;
}

/* Badges/pills across every list: Bootstrap's default 0.35em is too tight next to
   12px text, so the label touched the rounded edge (reminder-logs, expenses,
   reviews, job lists). One shared, roomier padding. */
.dashboard-wrapper .badge,
.dashboard-wrapper .badge.rounded-pill,
.dashboard-wrapper .badge.text-bg-secondary,
.dashboard-wrapper .badge.text-bg-success,
.dashboard-wrapper .badge.text-bg-warning {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    padding: .42em .78em !important;
    line-height: 1.15;
    letter-spacing: .01em;
}

.dashboard-wrapper .badge.rounded-pill {
    padding-left: .85em !important;
    padding-right: .85em !important;
}

/* ==========================================================================
   DARK MODE + LAYOUT FIX PASS (second sweep)
   --------------------------------------------------------------------------
   Everything below targets surfaces that were still hard-coded light after the
   first dark-mode pass: the Repair Flow board, Select2 (rendered outside the
   widget), TinyMCE, the device evaluation grid, the attachments dropzone, the
   job-history timeline, payment/duplicate-job modals and the report builder.
   Values always come from the --wcrb-* tokens, so a custom palette follows too.
   ========================================================================== */

/* ---------- Select2 (customer / technician / device pickers) ----------
   Select2 is injected at <body> level, so a `.dashboard-wrapper` scoped rule never
   matched it. These are unscoped on purpose and only apply while the dashboard page
   is open, because style.css is only loaded there. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--wcrb-surface);
    border: 1px solid var(--wcrb-border-strong);
    border-radius: 8px;
    color: var(--wcrb-ink);
    min-height: 38px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--wcrb-ink);
    line-height: 1.5;
    padding-left: .1rem;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--wcrb-ink-muted);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--wcrb-ink-muted) transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--wcrb-ink-muted) transparent;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--wcrb-ink);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--wcrb-surface-2);
    border: 1px solid var(--wcrb-border-strong);
    border-radius: 6px;
    color: var(--wcrb-ink);
    padding: .1rem .45rem .1rem .2rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--wcrb-ink-muted);
    border-right-color: var(--wcrb-border);
    margin-right: .35rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background: transparent;
    color: var(--wcrb-ink);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--wcrb-brand);
    box-shadow: 0 0 0 .2rem var(--wcrb-brand-soft);
}

.select2-dropdown {
    background-color: var(--wcrb-surface);
    border: 1px solid var(--wcrb-border-strong);
    border-radius: 8px;
    color: var(--wcrb-ink);
    box-shadow: var(--wcrb-shadow-lg);
    overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--wcrb-surface-2);
    border: 1px solid var(--wcrb-border-strong);
    border-radius: 6px;
    color: var(--wcrb-ink);
}

.select2-container--default .select2-results__option {
    color: var(--wcrb-ink);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--wcrb-surface-2);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--wcrb-brand);
    color: var(--wcrb-on-brand, #fff);
}

.select2-container--default .select2-results__group,
.select2-results__message {
    color: var(--wcrb-ink-muted);
}

/* Select2's dropdown search box ships a white input (`.select2-search__field`), and
   the plugin stylesheet loads after ours, so it needs an explicit background/colour
   rather than relying on inheritance. */
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container .select2-search--inline .select2-search__field,
.select2-dropdown .select2-search__field {
    background-color: var(--wcrb-surface-2) !important;
    border: 1px solid var(--wcrb-border-strong) !important;
    border-radius: 6px;
    color: var(--wcrb-ink) !important;
    outline: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--wcrb-brand) !important;
    box-shadow: 0 0 0 .15rem var(--wcrb-brand-soft);
}

.select2-container--default.select2-container--open .select2-dropdown {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border-strong);
}

/* The dropdown can open upward (above the filter bar); the search row sits on the
   surface, so give it the same separator. */
.select2-container--default .select2-search--dropdown {
    padding: 6px;
    background: var(--wcrb-surface);
}

/* Dark mode polish for the multi-select chips and date fields. */
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--wcrb-surface-3);
    border-color: var(--wcrb-border-strong);
    color: var(--wcrb-ink);
}

/* Native date inputs (and some pickers) size to their own content and were clipped
   inside narrow grid cells. Let them shrink and keep a sane minimum. */
.dashboard-wrapper input[type="date"],
.dashboard-wrapper input[type="datetime-local"],
.dashboard-wrapper input[type="time"],
.dashboard-wrapper .wcrb-flow-filter input {
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

html[dir="rtl"] .dashboard-wrapper input[type="date"],
html[dir="rtl"] .dashboard-wrapper input[type="datetime-local"],
html[dir="rtl"] .dashboard-wrapper input[type="time"] {
    direction: rtl;
    text-align: right;
}

/* Select2 in RTL: the arrow and the chips follow the text direction. */
html[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    left: 10px;
    right: auto;
}

html[dir="rtl"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: 0;
    border-left: 1px solid var(--wcrb-border);
    margin-right: 0;
    margin-left: .35rem;
}

/* ---------- Repair Flow board ---------- */
.wcrb-repair-flow .wcrb-flow-column {
    background: var(--wcrb-surface-2);
    border-color: var(--wcrb-border);
}

.wcrb-repair-flow .wcrb-flow-column-head {
    border-bottom-color: var(--wcrb-border);
    color: var(--wcrb-ink);
}

.wcrb-repair-flow .wcrb-flow-column-title {
    color: var(--wcrb-ink);
}

.wcrb-repair-flow .wcrb-flow-card {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border);
    box-shadow: var(--wcrb-shadow-sm);
    color: var(--wcrb-ink);
}

.wcrb-repair-flow .wcrb-flow-card:hover {
    border-color: var(--wcrb-border-strong);
    box-shadow: var(--wcrb-shadow-md);
}

.wcrb-repair-flow .wcrb-flow-order {
    color: var(--wcrb-brand);
}

.wcrb-repair-flow .wcrb-flow-order-label,
.wcrb-repair-flow .wcrb-flow-card-case,
.wcrb-repair-flow .wcrb-flow-empty {
    color: var(--wcrb-ink-muted);
}

.wcrb-repair-flow .wcrb-flow-card-customer,
.wcrb-repair-flow .wcrb-flow-card-device,
.wcrb-repair-flow .wcrb-flow-card-meta {
    color: var(--wcrb-ink-soft);
}

.wcrb-repair-flow .wcrb-flow-lane {
    border-color: var(--wcrb-border);
    background: var(--wcrb-surface);
}

.wcrb-repair-flow .wcrb-flow-lane-toggle {
    background: var(--wcrb-surface-2);
    color: var(--wcrb-ink);
}

.wcrb-repair-flow .wcrb-flow-card-id {
    color: inherit;
}

.wcrb-repair-flow .wcrb-flow-column.wcrb-flow-dragover,
.wcrb-repair-flow .wcrb-flow-lane.wcrb-flow-dragover {
    outline-color: var(--wcrb-brand);
    background: var(--wcrb-brand-soft);
}

.wcrb-repair-flow .wcrb-flow-locked-card {
    background: var(--wcrb-surface);
    color: var(--wcrb-ink);
}

.wcrb-repair-flow .wcrb-flow-locked-overlay {
    background: color-mix(in srgb, var(--wcrb-page-bg) 55%, transparent);
}

.wcrb-repair-flow .wcrb-skeleton-line {
    background: var(--wcrb-surface-3);
}

/* ---------- TinyMCE (job Details tab) ----------
   TinyMCE builds its own document and chrome, which never inherited the dashboard
   palette: white editor body, white toolbar, blue-ish border. */
.dashboard-wrapper .mce-tinymce {
    border: 1px solid var(--wcrb-border-strong) !important;
    border-radius: 8px;
    overflow: hidden;
}

.dashboard-wrapper .mce-tinymce .mce-toolbar-grp,
.dashboard-wrapper .mce-tinymce .mce-edit-area,
.dashboard-wrapper .mce-tinymce .mce-stack-layout-item,
.dashboard-wrapper .mce-panel {
    background: var(--wcrb-surface) !important;
    border-color: var(--wcrb-border) !important;
    color: var(--wcrb-ink);
}

.dashboard-wrapper .mce-tinymce .mce-btn button {
    background: transparent !important;
    color: var(--wcrb-ink-soft) !important;
}

.dashboard-wrapper .mce-tinymce .mce-btn:hover button,
.dashboard-wrapper .mce-tinymce .mce-btn.mce-active button,
.dashboard-wrapper .mce-tinymce .mce-btn:focus button {
    background: var(--wcrb-surface-2) !important;
    color: var(--wcrb-ink) !important;
}

.dashboard-wrapper .mce-tinymce .mce-btn.mce-active {
    border-color: var(--wcrb-border-strong) !important;
}

.dashboard-wrapper .mce-tinymce iframe {
    background: var(--wcrb-surface) !important;
}

/* Quicktags (Code view) share the same chrome. */
.dashboard-wrapper .quicktags-toolbar {
    background: var(--wcrb-surface-2) !important;
    border-bottom: 1px solid var(--wcrb-border) !important;
}

.dashboard-wrapper .quicktags-toolbar input.ed_button {
    background: var(--wcrb-surface) !important;
    border: 1px solid var(--wcrb-border-strong) !important;
    border-radius: 5px;
    color: var(--wcrb-ink) !important;
}

/* ---------- Technician picker (multi-select) ----------
   The selected chips were left with Select2's white default; also the plain
   `.form-control-plaintext` read-only holder. */
.dashboard-wrapper .wcrb-technician-select + .select2-container .select2-selection--multiple,
.dashboard-wrapper .wcrb-technician-holder .select2-selection--multiple {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border-strong);
}

.dashboard-wrapper .form-control-plaintext {
    color: var(--wcrb-ink);
}

/* ---------- Device evaluation (Pre/Post) ---------- */
.wcrb-devices-table .evaluation-row > td,
.device-evaluation-wrapper,
.eval-section {
    background-color: var(--wcrb-surface-2) !important;
    border-color: var(--wcrb-border) !important;
    color: var(--wcrb-ink);
}

.eval-section {
    background: var(--wcrb-surface) !important;
    box-shadow: var(--wcrb-shadow-sm);
}

.eval-section h4,
.eval-item label {
    color: var(--wcrb-ink) !important;
}

.eval-item select,
.eval-status-select {
    background-color: var(--wcrb-surface);
    border: 1px solid var(--wcrb-border-strong);
    color: var(--wcrb-ink);
}

/* ---------- Attachments dropzone ---------- */
.wcrb-job-editor .wcrb-dropzone {
    background: var(--wcrb-surface-2);
    border-color: var(--wcrb-border-strong);
}

.wcrb-job-editor .wcrb-dropzone-area {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border-strong);
    color: var(--wcrb-ink-muted);
}

.wcrb-job-editor .wcrb-dropzone-area:hover,
.wcrb-job-editor .wcrb-dropzone-area:focus {
    background: var(--wcrb-surface-3);
    border-color: var(--wcrb-brand);
}

.wcrb-job-editor .wcrb-dropzone-area.is-dragover {
    background: var(--wcrb-brand-soft);
    border-color: var(--wcrb-brand);
    color: var(--wcrb-ink);
}

.wcrb-job-editor .wcrb-dropzone-area i {
    color: var(--wcrb-brand);
}

.wcrb-job-editor .wcrb-dropzone--locked,
.wcrb-job-editor .wcrb-dropzone--locked .wcrb-dropzone-area {
    background: var(--wcrb-surface-2);
    border-color: var(--wcrb-border);
    color: var(--wcrb-ink-muted);
}

/* ---------- Job history timeline ---------- */
.wcrb-job-editor .wcrb-history-items > li.note {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border);
    color: var(--wcrb-ink);
}

.wcrb-job-editor .wcrb-history-items > li.note .note_content p {
    color: var(--wcrb-ink);
}

.wcrb-job-editor .wcrb-history-items > li.note .meta {
    color: var(--wcrb-ink-muted);
}

.wcrb-job-editor .wcrb-history-items > li.note .typelabel {
    background: var(--wcrb-brand-soft);
    color: var(--wcrb-brand);
}

.wcrb-job-editor .wcrb-history-items > li.note:before {
    background: var(--wcrb-brand);
    box-shadow: 0 0 0 3px var(--wcrb-brand-soft);
}

.wcrb-job-editor .wcrb-history-items > li.note_private:before {
    background: var(--wcrb-brand-accent);
    box-shadow: 0 0 0 3px var(--wcrb-brand-soft);
}

/* ---------- Modals: payment + duplicate job ---------- *
 * Bootstrap already themes `.modal-content`, but these two dialogs are built with
 * nested containers that kept hard-coded light fills (payment boxes, the duplicate
 * job list). */
.dashboard-wrapper .wcrb_the_payment_note,
.dashboard-wrapper .wcrb_the_payment_date,
.dashboard-wrapper .wcrb_the_payment_payment,
.dashboard-wrapper .jobAttachments,
.dashboard-wrapper .grey-bg {
    background-color: var(--wcrb-surface-2) !important;
    border: 1px solid var(--wcrb-border) !important;
    color: var(--wcrb-ink);
}

.dashboard-wrapper #wcrbduplicatejobfront table,
.dashboard-wrapper #wcrbduplicatejobfront .accelerator,
.dashboard-wrapper .wcrb-duplicate-job ul {
    background: transparent;
    color: var(--wcrb-ink);
}

.dashboard-wrapper .modal .form-check-label {
    color: var(--wcrb-ink);
}

.dashboard-wrapper .modal .list-group-item,
.dashboard-wrapper .modal .table td,
.dashboard-wrapper .modal .table th {
    background-color: transparent;
    color: var(--wcrb-ink);
    border-color: var(--wcrb-border);
}

/* Brand utilities the plugin markup uses (payment summaries, badges). They were
   hard-coded hex with !important, so they ignored both the palette and dark mode. */
.dashboard-wrapper .orange-bg,
.dashboard-wrapper .blue-bg,
.orange-bg,
.blue-bg {
    color: #fff !important;
}

.dashboard-wrapper .orange-bg,
.orange-bg {
    background-color: var(--wcrb-brand-accent) !important;
}

.dashboard-wrapper .blue-bg,
.blue-bg {
    background-color: var(--wcrb-brand) !important;
}

/* ---------- Report builder form ---------- */
.wcrb-legacy-form .invoice-box,
.wcrb-legacy-form form {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border);
    color: var(--wcrb-ink);
}

.wcrb-legacy-form h2,
.wcrb-legacy-form .select-head,
.wcrb-legacy-form legend,
.wcrb-legacy-form .cell > label,
.wcrb-legacy-form fieldset label {
    color: var(--wcrb-ink);
}

.wcrb-legacy-form input[type="date"],
.wcrb-legacy-form input[type="text"],
.wcrb-legacy-form input[type="number"],
.wcrb-legacy-form select,
.wcrb-legacy-form textarea {
    background: var(--wcrb-surface) !important;
    border-color: var(--wcrb-border-strong);
    color: var(--wcrb-ink);
}

.wcrb-legacy-form fieldset,
.wcrb-legacy-form .fieldset {
    border-color: var(--wcrb-border);
}

/* ---------- Generated report sheet ---------- */
.wcrb-report-view .invoice-box,
.wcrb-report-view .report-container,
[data-bs-theme="dark"] .wcrb-report-view .invoice-box,
[data-bs-theme="dark"] .wcrb-report-view .report-container {
    background: var(--wcrb-surface);
    color: var(--wcrb-ink);
    border-color: var(--wcrb-border);
}

.wcrb-report-view .wc-rb-report-title h2,
.wcrb-report-view .wc-rb-report-title h1,
.wcrb-report-view .report-container .company_info .address-side h2,
.wcrb-report-view .report-container .company_info .address-side p {
    color: var(--wcrb-ink);
}

.wcrb-report-view .invoice-box table tr.heading td,
.wcrb-report-view .invoice-box table tr.heading th,
.wcrb-report-view .wc_table th {
    background: var(--wcrb-surface-2) !important;
    color: var(--wcrb-ink) !important;
    border-color: var(--wcrb-border) !important;
}

.wcrb-report-view .wc_table td,
.wcrb-report-view .invoice-box table tr.item-row td,
.wcrb-report-view .invoice-box table td {
    color: var(--wcrb-ink);
    border-color: var(--wcrb-border) !important;
}

.wcrb-report-view .invoice_totals table {
    border-color: var(--wcrb-border);
}

.wcrb-report-view .grey-bg {
    background-color: var(--wcrb-surface-2) !important;
}

.wcrb-report-view .button,
.wcrb-report-view .button.button-primary {
    background: var(--wcrb-brand);
    color: var(--wcrb-on-brand, #fff);
}

/* Generated report sheets: every heading inherits the admin sheet's #333, which is
   invisible on the dark sheet. Force the ink token on the whole container; table
   cells and totals were already handled above. */
.wcrb-report-view,
.wcrb-report-view .invoice-box,
.wcrb-report-view .report-container {
    color: var(--wcrb-ink);
}

.wcrb-report-view h1,
.wcrb-report-view h2,
.wcrb-report-view h3,
.wcrb-report-view h4,
.wcrb-report-view h5,
.wcrb-report-view h6,
.wcrb-report-view strong,
.wcrb-report-view b,
.wcrb-report-view td,
.wcrb-report-view th,
.wcrb-report-view span,
.wcrb-report-view p,
.wcrb-report-view li {
    color: var(--wcrb-ink);
}

/* Print buttons inside the sheet follow the brand. */
.wcrb-report-view .button,
.wcrb-report-view input.button,
.wcrb-report-view button {
    background: var(--wcrb-brand) !important;
    border-color: var(--wcrb-brand) !important;
    color: var(--wcrb-on-brand, #fff) !important;
}

/* report-view.css is enqueued after this sheet and hard-codes #333 for the sheet's
   section titles, so this must match its specificity *and* come later. */
.wcrb-report-view .wc-rb-report-title h2,
.wcrb-report-view .wc-rb-report-title h1,
.wcrb-report-view .invoice-box h2,
.wcrb-report-view .invoice-box h3,
.wcrb-report-view .invoice-box h4,
.wcrb-report-view .report-container h2,
.wcrb-report-view .report-container h3,
.wcrb-report-view .report-container h4,
[data-bs-theme="dark"] .wcrb-report-view .wc-rb-report-title h2,
[data-bs-theme="dark"] .wcrb-report-view .wc-rb-report-title h1 {
    color: var(--wcrb-ink) !important;
}

/* ---------- Reports menu: "Open" link ---------- */ */ *
 * `.text-primary` resolves to the brand, which on the dark card was too close to the
 * card colour. Use the accent with an underline affordance instead. */
.wcrb-report-card .wcrb-report-card-link {
    color: var(--wcrb-brand);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.wcrb-report-card:hover .wcrb-report-card-link {
    border-bottom-color: currentColor;
}

[data-bs-theme="dark"] .wcrb-report-card .wcrb-report-card-link {
    color: var(--wcrb-brand-accent);
}

/* ---------- Recent activity: original casing, readable text ---------- */
.dashboard-wrapper .activity-content .activity-title {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.dashboard-wrapper .activity-content .activity-detail,
.dashboard-wrapper .activity-content .activity-detail p {
    text-transform: none;
    letter-spacing: 0;
    color: var(--wcrb-ink);
    font-size: var(--fs-sm);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.dashboard-wrapper .activity-content .text-muted,
.dashboard-wrapper .activity-content small {
    text-transform: none;
    letter-spacing: 0;
    color: var(--wcrb-ink-muted) !important;
}

/* ---------- Appointment stats: tiles fill the row ---------- *
 * The appointments strip is four tiles in a `row g-3` with `col` children; they
 * collapsed to the left because `col` sizes to content once the table widens the
 * page. Sharing the row evenly keeps the strip full width. */
.wcrb-screen-appointments .dashboard-wrapper .stats-tiles,
.wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) {
    width: 100%;
}

.wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) > .col {
    flex: 1 1 0;
    min-width: 0;
}

/* Four tiles across on wide screens: an explicit track instead of auto-fill, which
   left phantom empty columns and pushed the tiles to the left edge. */
.wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
    .wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Right-to-left support ---------- *
 * The layout is mostly flex/utility based, so Bootstrap's RTL build is not required;
 * what needs flipping is the handful of explicit sides below. `html[dir="rtl"]` is set
 * server-side from is_rtl(), and JS may switch it at runtime. */
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
}

html[dir="rtl"] .main-content {
    margin-left: 0;
    margin-right: var(--sidebar-width);
}

html[dir="rtl"] .sidebar.wcrb-rail ~ .main-content {
    margin-right: var(--sidebar-rail-width);
}

@media (max-width: 991.98px) {
    html[dir="rtl"] .sidebar {
        transform: translateX(100%);
    }

    html[dir="rtl"] .sidebar.is-open,
    html[dir="rtl"] .sidebar.show {
        transform: translateX(0);
    }

    html[dir="rtl"] .main-content {
        margin-right: 0;
    }
}

html[dir="rtl"] .sidebar-nav .nav-link.active,
html[dir="rtl"] .dashboard-wrapper .sidebar-nav .nav-link.active {
    border-left: 0;
    border-right: 3px solid var(--wcrb-brand-accent);
}

html[dir="rtl"] .dashboard-wrapper .wcrb-page-title,
html[dir="rtl"] .dashboard-wrapper .card-title,
html[dir="rtl"] .dashboard-wrapper .activity-content,
html[dir="rtl"] .dashboard-wrapper .table th,
html[dir="rtl"] .dashboard-wrapper .table td {
    text-align: right;
}

html[dir="rtl"] .dashboard-wrapper .table th.text-end,
html[dir="rtl"] .dashboard-wrapper .table td.text-end {
    text-align: left !important;
}

/* Logical-side utilities used across the templates. */
html[dir="rtl"] .dashboard-wrapper .me-1,
html[dir="rtl"] .dashboard-wrapper .me-2,
html[dir="rtl"] .dashboard-wrapper .me-3 {
    margin-right: 0 !important;
}

html[dir="rtl"] .dashboard-wrapper .me-1 { margin-left: .25rem !important; }
html[dir="rtl"] .dashboard-wrapper .me-2 { margin-left: .5rem !important; }
html[dir="rtl"] .dashboard-wrapper .me-3 { margin-left: 1rem !important; }

html[dir="rtl"] .dashboard-wrapper .ms-1 { margin-right: .25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .dashboard-wrapper .ms-2 { margin-right: .5rem !important; margin-left: 0 !important; }

html[dir="rtl"] .dashboard-wrapper .ps-4 { padding-left: 1rem !important; padding-right: 1.5rem !important; }
html[dir="rtl"] .dashboard-wrapper .pe-4 { padding-right: 1rem !important; padding-left: 1.5rem !important; }

html[dir="rtl"] .dashboard-wrapper .dropdown-menu-end {
    right: auto;
    left: 0;
}

html[dir="rtl"] .wcrb-job-editor .wcrb-history-items > li.note {
    padding-left: .85rem;
    padding-right: 2.3rem;
}

html[dir="rtl"] .wcrb-job-editor .wcrb-history-items > li.note:before {
    left: auto;
    right: .9rem;
}

html[dir="rtl"] .wcrb-repair-flow .wcrb-flow-board,
html[dir="rtl"] .dashboard-wrapper .wcrb-job-tabs {
    direction: rtl;
}

/* Arabic/Persian/Hebrew read best with a slightly larger line-height. */
html[dir="rtl"] body {
    line-height: 1.65;
}

/* ==========================================================================
   Input groups: the addon must stay inline with its field
   --------------------------------------------------------------------------
   Bootstrap's `.input-group` is `display: flex; flex-wrap: wrap`, and the dashboard
   gives `.form-control` a 150px min-width (set for the Repair Flow filter selects).
   Inside a narrow filter column the field therefore could not shrink next to its
   addon and wrapped underneath it — the search icon ended up on a line of its own.
   A group is a single control row, so it must never wrap, and the field inside it
   must be allowed to shrink.
   ========================================================================== */
.dashboard-wrapper .input-group {
    flex-wrap: nowrap;
    align-items: stretch;
}

.dashboard-wrapper .input-group > .form-control,
.dashboard-wrapper .input-group > .form-select,
.dashboard-wrapper .input-group > .form-control-sm,
.dashboard-wrapper .input-group > .form-select-sm,
.wcrb-repair-flow .wcrb-flow-filter .input-group .form-control {
    min-width: 0;
    flex: 1 1 auto;
}

.dashboard-wrapper .input-group > .input-group-text {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* The Repair Flow search column already has a sensible flex-basis; the generic
   150px floor on its inner field is what forced the wrap. */
.wcrb-repair-flow .wcrb-flow-filter-search .form-control {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .wcrb-topbar .wcrb-fullscreen-btn {
        display: none !important;
    }
}

/* ---------- Responsive pass ---------- *//* ---------- Responsive pass ---------- */@media (max-width: 991.98px) {
    .wcrb-topbar .wcrb-fullscreen-btn {
        display: none !important;
    }
}

/* ---------- Responsive pass ---------- *//* ---------- Responsive pass ---------- *//* ==========================================================================
   Input groups: the addon must stay inline with its field
   --------------------------------------------------------------------------
   Bootstrap's `.input-group` is `display: flex; flex-wrap: wrap`, and the dashboard
   gives `.form-control` a 150px min-width (set for the Repair Flow filter selects).
   Inside a narrow filter column the field therefore could not shrink next to its
   addon and wrapped underneath it — the search icon ended up on a line of its own.
   A group is a single control row, so it must never wrap, and the field inside it
   must be allowed to shrink.
   ========================================================================== */
.dashboard-wrapper .input-group {
    flex-wrap: nowrap;
    align-items: stretch;
}

.dashboard-wrapper .input-group > .form-control,
.dashboard-wrapper .input-group > .form-select,
.dashboard-wrapper .input-group > .form-control-sm,
.dashboard-wrapper .input-group > .form-select-sm,
.wcrb-repair-flow .wcrb-flow-filter .input-group .form-control {
    min-width: 0;
    flex: 1 1 auto;
}

.dashboard-wrapper .input-group > .input-group-text {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* The Repair Flow search column already has a sensible flex-basis; the generic
   150px floor on its inner field is what forced the wrap. */
.wcrb-repair-flow .wcrb-flow-filter-search .form-control {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .wcrb-topbar .wcrb-fullscreen-btn {
        display: none !important;
    }
}

/* ---------- Responsive pass ---------- *//* ---------- Responsive pass ---------- */@media (max-width: 991.98px) {
    .wcrb-topbar .wcrb-fullscreen-btn {
        display: none !important;
    }
}

/* ---------- Responsive pass ---------- *//* ---------- Responsive pass ---------- *//* ==========================================================================
   DARK MODE + LAYOUT FIX PASS (second sweep)
   --------------------------------------------------------------------------
   Everything below targets surfaces that were still hard-coded light after the
   first dark-mode pass: the Repair Flow board, Select2 (rendered outside the
   widget), TinyMCE, the device evaluation grid, the attachments dropzone, the
   job-history timeline, payment/duplicate-job modals and the report builder.
   Values always come from the --wcrb-* tokens, so a custom palette follows too.
   ========================================================================== */

/* ---------- Select2 (customer / technician / device pickers) ----------
   Select2 is injected at <body> level, so a `.dashboard-wrapper` scoped rule never
   matched it. These are unscoped on purpose and only apply while the dashboard page
   is open, because style.css is only loaded there. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--wcrb-surface);
    border: 1px solid var(--wcrb-border-strong);
    border-radius: 8px;
    color: var(--wcrb-ink);
    min-height: 38px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--wcrb-ink);
    line-height: 1.5;
    padding-left: .1rem;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--wcrb-ink-muted);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--wcrb-ink-muted) transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--wcrb-ink-muted) transparent;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--wcrb-ink);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--wcrb-surface-2);
    border: 1px solid var(--wcrb-border-strong);
    border-radius: 6px;
    color: var(--wcrb-ink);
    padding: .1rem .45rem .1rem .2rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--wcrb-ink-muted);
    border-right-color: var(--wcrb-border);
    margin-right: .35rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background: transparent;
    color: var(--wcrb-ink);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--wcrb-brand);
    box-shadow: 0 0 0 .2rem var(--wcrb-brand-soft);
}

.select2-dropdown {
    background-color: var(--wcrb-surface);
    border: 1px solid var(--wcrb-border-strong);
    border-radius: 8px;
    color: var(--wcrb-ink);
    box-shadow: var(--wcrb-shadow-lg);
    overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--wcrb-surface-2);
    border: 1px solid var(--wcrb-border-strong);
    border-radius: 6px;
    color: var(--wcrb-ink);
}

.select2-container--default .select2-results__option {
    color: var(--wcrb-ink);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--wcrb-surface-2);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--wcrb-brand);
    color: var(--wcrb-on-brand, #fff);
}

.select2-container--default .select2-results__group,
.select2-results__message {
    color: var(--wcrb-ink-muted);
}

/* Select2's dropdown search box ships a white input (`.select2-search__field`), and
   the plugin stylesheet loads after ours, so it needs an explicit background/colour
   rather than relying on inheritance. */
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container .select2-search--inline .select2-search__field,
.select2-dropdown .select2-search__field {
    background-color: var(--wcrb-surface-2) !important;
    border: 1px solid var(--wcrb-border-strong) !important;
    border-radius: 6px;
    color: var(--wcrb-ink) !important;
    outline: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--wcrb-brand) !important;
    box-shadow: 0 0 0 .15rem var(--wcrb-brand-soft);
}

.select2-container--default.select2-container--open .select2-dropdown {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border-strong);
}

/* The dropdown can open upward (above the filter bar); the search row sits on the
   surface, so give it the same separator. */
.select2-container--default .select2-search--dropdown {
    padding: 6px;
    background: var(--wcrb-surface);
}

/* Dark mode polish for the multi-select chips and date fields. */
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--wcrb-surface-3);
    border-color: var(--wcrb-border-strong);
    color: var(--wcrb-ink);
}

/* Native date inputs (and some pickers) size to their own content and were clipped
   inside narrow grid cells. Let them shrink and keep a sane minimum. */
.dashboard-wrapper input[type="date"],
.dashboard-wrapper input[type="datetime-local"],
.dashboard-wrapper input[type="time"],
.dashboard-wrapper .wcrb-flow-filter input {
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

html[dir="rtl"] .dashboard-wrapper input[type="date"],
html[dir="rtl"] .dashboard-wrapper input[type="datetime-local"],
html[dir="rtl"] .dashboard-wrapper input[type="time"] {
    direction: rtl;
    text-align: right;
}

/* Select2 in RTL: the arrow and the chips follow the text direction. */
html[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    left: 10px;
    right: auto;
}

html[dir="rtl"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: 0;
    border-left: 1px solid var(--wcrb-border);
    margin-right: 0;
    margin-left: .35rem;
}

/* ---------- Repair Flow board ---------- */
.wcrb-repair-flow .wcrb-flow-column {
    background: var(--wcrb-surface-2);
    border-color: var(--wcrb-border);
}

.wcrb-repair-flow .wcrb-flow-column-head {
    border-bottom-color: var(--wcrb-border);
    color: var(--wcrb-ink);
}

.wcrb-repair-flow .wcrb-flow-column-title {
    color: var(--wcrb-ink);
}

.wcrb-repair-flow .wcrb-flow-card {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border);
    box-shadow: var(--wcrb-shadow-sm);
    color: var(--wcrb-ink);
}

.wcrb-repair-flow .wcrb-flow-card:hover {
    border-color: var(--wcrb-border-strong);
    box-shadow: var(--wcrb-shadow-md);
}

.wcrb-repair-flow .wcrb-flow-order {
    color: var(--wcrb-brand);
}

.wcrb-repair-flow .wcrb-flow-order-label,
.wcrb-repair-flow .wcrb-flow-card-case,
.wcrb-repair-flow .wcrb-flow-empty {
    color: var(--wcrb-ink-muted);
}

.wcrb-repair-flow .wcrb-flow-card-customer,
.wcrb-repair-flow .wcrb-flow-card-device,
.wcrb-repair-flow .wcrb-flow-card-meta {
    color: var(--wcrb-ink-soft);
}

.wcrb-repair-flow .wcrb-flow-lane {
    border-color: var(--wcrb-border);
    background: var(--wcrb-surface);
}

.wcrb-repair-flow .wcrb-flow-lane-toggle {
    background: var(--wcrb-surface-2);
    color: var(--wcrb-ink);
}

.wcrb-repair-flow .wcrb-flow-card-id {
    color: inherit;
}

.wcrb-repair-flow .wcrb-flow-column.wcrb-flow-dragover,
.wcrb-repair-flow .wcrb-flow-lane.wcrb-flow-dragover {
    outline-color: var(--wcrb-brand);
    background: var(--wcrb-brand-soft);
}

.wcrb-repair-flow .wcrb-flow-locked-card {
    background: var(--wcrb-surface);
    color: var(--wcrb-ink);
}

.wcrb-repair-flow .wcrb-flow-locked-overlay {
    background: color-mix(in srgb, var(--wcrb-page-bg) 55%, transparent);
}

.wcrb-repair-flow .wcrb-skeleton-line {
    background: var(--wcrb-surface-3);
}

/* ---------- TinyMCE (job Details tab) ----------
   TinyMCE builds its own document and chrome, which never inherited the dashboard
   palette: white editor body, white toolbar, blue-ish border. */
.dashboard-wrapper .mce-tinymce {
    border: 1px solid var(--wcrb-border-strong) !important;
    border-radius: 8px;
    overflow: hidden;
}

.dashboard-wrapper .mce-tinymce .mce-toolbar-grp,
.dashboard-wrapper .mce-tinymce .mce-edit-area,
.dashboard-wrapper .mce-tinymce .mce-stack-layout-item,
.dashboard-wrapper .mce-panel {
    background: var(--wcrb-surface) !important;
    border-color: var(--wcrb-border) !important;
    color: var(--wcrb-ink);
}

.dashboard-wrapper .mce-tinymce .mce-btn button {
    background: transparent !important;
    color: var(--wcrb-ink-soft) !important;
}

.dashboard-wrapper .mce-tinymce .mce-btn:hover button,
.dashboard-wrapper .mce-tinymce .mce-btn.mce-active button,
.dashboard-wrapper .mce-tinymce .mce-btn:focus button {
    background: var(--wcrb-surface-2) !important;
    color: var(--wcrb-ink) !important;
}

.dashboard-wrapper .mce-tinymce .mce-btn.mce-active {
    border-color: var(--wcrb-border-strong) !important;
}

.dashboard-wrapper .mce-tinymce iframe {
    background: var(--wcrb-surface) !important;
}

/* Quicktags (Code view) share the same chrome. */
.dashboard-wrapper .quicktags-toolbar {
    background: var(--wcrb-surface-2) !important;
    border-bottom: 1px solid var(--wcrb-border) !important;
}

.dashboard-wrapper .quicktags-toolbar input.ed_button {
    background: var(--wcrb-surface) !important;
    border: 1px solid var(--wcrb-border-strong) !important;
    border-radius: 5px;
    color: var(--wcrb-ink) !important;
}

/* ---------- Technician picker (multi-select) ----------
   The selected chips were left with Select2's white default; also the plain
   `.form-control-plaintext` read-only holder. */
.dashboard-wrapper .wcrb-technician-select + .select2-container .select2-selection--multiple,
.dashboard-wrapper .wcrb-technician-holder .select2-selection--multiple {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border-strong);
}

.dashboard-wrapper .form-control-plaintext {
    color: var(--wcrb-ink);
}

/* ---------- Device evaluation (Pre/Post) ---------- */
.wcrb-devices-table .evaluation-row > td,
.device-evaluation-wrapper,
.eval-section {
    background-color: var(--wcrb-surface-2) !important;
    border-color: var(--wcrb-border) !important;
    color: var(--wcrb-ink);
}

.eval-section {
    background: var(--wcrb-surface) !important;
    box-shadow: var(--wcrb-shadow-sm);
}

.eval-section h4,
.eval-item label {
    color: var(--wcrb-ink) !important;
}

.eval-item select,
.eval-status-select {
    background-color: var(--wcrb-surface);
    border: 1px solid var(--wcrb-border-strong);
    color: var(--wcrb-ink);
}

/* ---------- Attachments dropzone ---------- */
.wcrb-job-editor .wcrb-dropzone {
    background: var(--wcrb-surface-2);
    border-color: var(--wcrb-border-strong);
}

.wcrb-job-editor .wcrb-dropzone-area {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border-strong);
    color: var(--wcrb-ink-muted);
}

.wcrb-job-editor .wcrb-dropzone-area:hover,
.wcrb-job-editor .wcrb-dropzone-area:focus {
    background: var(--wcrb-surface-3);
    border-color: var(--wcrb-brand);
}

.wcrb-job-editor .wcrb-dropzone-area.is-dragover {
    background: var(--wcrb-brand-soft);
    border-color: var(--wcrb-brand);
    color: var(--wcrb-ink);
}

.wcrb-job-editor .wcrb-dropzone-area i {
    color: var(--wcrb-brand);
}

.wcrb-job-editor .wcrb-dropzone--locked,
.wcrb-job-editor .wcrb-dropzone--locked .wcrb-dropzone-area {
    background: var(--wcrb-surface-2);
    border-color: var(--wcrb-border);
    color: var(--wcrb-ink-muted);
}

/* ---------- Job history timeline ---------- */
.wcrb-job-editor .wcrb-history-items > li.note {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border);
    color: var(--wcrb-ink);
}

.wcrb-job-editor .wcrb-history-items > li.note .note_content p {
    color: var(--wcrb-ink);
}

.wcrb-job-editor .wcrb-history-items > li.note .meta {
    color: var(--wcrb-ink-muted);
}

.wcrb-job-editor .wcrb-history-items > li.note .typelabel {
    background: var(--wcrb-brand-soft);
    color: var(--wcrb-brand);
}

.wcrb-job-editor .wcrb-history-items > li.note:before {
    background: var(--wcrb-brand);
    box-shadow: 0 0 0 3px var(--wcrb-brand-soft);
}

.wcrb-job-editor .wcrb-history-items > li.note_private:before {
    background: var(--wcrb-brand-accent);
    box-shadow: 0 0 0 3px var(--wcrb-brand-soft);
}

/* ---------- Modals: payment + duplicate job ---------- *
 * Bootstrap already themes `.modal-content`, but these two dialogs are built with
 * nested containers that kept hard-coded light fills (payment boxes, the duplicate
 * job list). */
.dashboard-wrapper .wcrb_the_payment_note,
.dashboard-wrapper .wcrb_the_payment_date,
.dashboard-wrapper .wcrb_the_payment_payment,
.dashboard-wrapper .jobAttachments,
.dashboard-wrapper .grey-bg {
    background-color: var(--wcrb-surface-2) !important;
    border: 1px solid var(--wcrb-border) !important;
    color: var(--wcrb-ink);
}

.dashboard-wrapper #wcrbduplicatejobfront table,
.dashboard-wrapper #wcrbduplicatejobfront .accelerator,
.dashboard-wrapper .wcrb-duplicate-job ul {
    background: transparent;
    color: var(--wcrb-ink);
}

.dashboard-wrapper .modal .form-check-label {
    color: var(--wcrb-ink);
}

.dashboard-wrapper .modal .list-group-item,
.dashboard-wrapper .modal .table td,
.dashboard-wrapper .modal .table th {
    background-color: transparent;
    color: var(--wcrb-ink);
    border-color: var(--wcrb-border);
}

/* Brand utilities the plugin markup uses (payment summaries, badges). They were
   hard-coded hex with !important, so they ignored both the palette and dark mode. */
.dashboard-wrapper .orange-bg,
.dashboard-wrapper .blue-bg,
.orange-bg,
.blue-bg {
    color: #fff !important;
}

.dashboard-wrapper .orange-bg,
.orange-bg {
    background-color: var(--wcrb-brand-accent) !important;
}

.dashboard-wrapper .blue-bg,
.blue-bg {
    background-color: var(--wcrb-brand) !important;
}

/* ---------- Report builder form ---------- */
.wcrb-legacy-form .invoice-box,
.wcrb-legacy-form form {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border);
    color: var(--wcrb-ink);
}

.wcrb-legacy-form h2,
.wcrb-legacy-form .select-head,
.wcrb-legacy-form legend,
.wcrb-legacy-form .cell > label,
.wcrb-legacy-form fieldset label {
    color: var(--wcrb-ink);
}

.wcrb-legacy-form input[type="date"],
.wcrb-legacy-form input[type="text"],
.wcrb-legacy-form input[type="number"],
.wcrb-legacy-form select,
.wcrb-legacy-form textarea {
    background: var(--wcrb-surface) !important;
    border-color: var(--wcrb-border-strong);
    color: var(--wcrb-ink);
}

.wcrb-legacy-form fieldset,
.wcrb-legacy-form .fieldset {
    border-color: var(--wcrb-border);
}

/* ---------- Generated report sheet ---------- */
.wcrb-report-view .invoice-box,
.wcrb-report-view .report-container,
[data-bs-theme="dark"] .wcrb-report-view .invoice-box,
[data-bs-theme="dark"] .wcrb-report-view .report-container {
    background: var(--wcrb-surface);
    color: var(--wcrb-ink);
    border-color: var(--wcrb-border);
}

.wcrb-report-view .wc-rb-report-title h2,
.wcrb-report-view .wc-rb-report-title h1,
.wcrb-report-view .report-container .company_info .address-side h2,
.wcrb-report-view .report-container .company_info .address-side p {
    color: var(--wcrb-ink);
}

.wcrb-report-view .invoice-box table tr.heading td,
.wcrb-report-view .invoice-box table tr.heading th,
.wcrb-report-view .wc_table th {
    background: var(--wcrb-surface-2) !important;
    color: var(--wcrb-ink) !important;
    border-color: var(--wcrb-border) !important;
}

.wcrb-report-view .wc_table td,
.wcrb-report-view .invoice-box table tr.item-row td,
.wcrb-report-view .invoice-box table td {
    color: var(--wcrb-ink);
    border-color: var(--wcrb-border) !important;
}

.wcrb-report-view .invoice_totals table {
    border-color: var(--wcrb-border);
}

.wcrb-report-view .grey-bg {
    background-color: var(--wcrb-surface-2) !important;
}

.wcrb-report-view .button,
.wcrb-report-view .button.button-primary {
    background: var(--wcrb-brand);
    color: var(--wcrb-on-brand, #fff);
}

/* Generated report sheets: every heading inherits the admin sheet's #333, which is
   invisible on the dark sheet. Force the ink token on the whole container; table
   cells and totals were already handled above. */
.wcrb-report-view,
.wcrb-report-view .invoice-box,
.wcrb-report-view .report-container {
    color: var(--wcrb-ink);
}

.wcrb-report-view h1,
.wcrb-report-view h2,
.wcrb-report-view h3,
.wcrb-report-view h4,
.wcrb-report-view h5,
.wcrb-report-view h6,
.wcrb-report-view strong,
.wcrb-report-view b,
.wcrb-report-view td,
.wcrb-report-view th,
.wcrb-report-view span,
.wcrb-report-view p,
.wcrb-report-view li {
    color: var(--wcrb-ink);
}

/* Print buttons inside the sheet follow the brand. */
.wcrb-report-view .button,
.wcrb-report-view input.button,
.wcrb-report-view button {
    background: var(--wcrb-brand) !important;
    border-color: var(--wcrb-brand) !important;
    color: var(--wcrb-on-brand, #fff) !important;
}

/* report-view.css is enqueued after this sheet and hard-codes #333 for the sheet's
   section titles, so this must match its specificity *and* come later. */
.wcrb-report-view .wc-rb-report-title h2,
.wcrb-report-view .wc-rb-report-title h1,
.wcrb-report-view .invoice-box h2,
.wcrb-report-view .invoice-box h3,
.wcrb-report-view .invoice-box h4,
.wcrb-report-view .report-container h2,
.wcrb-report-view .report-container h3,
.wcrb-report-view .report-container h4,
[data-bs-theme="dark"] .wcrb-report-view .wc-rb-report-title h2,
[data-bs-theme="dark"] .wcrb-report-view .wc-rb-report-title h1 {
    color: var(--wcrb-ink) !important;
}

/* ---------- Reports menu: "Open" link ---------- */ */ *
 * `.text-primary` resolves to the brand, which on the dark card was too close to the
 * card colour. Use the accent with an underline affordance instead. */
.wcrb-report-card .wcrb-report-card-link {
    color: var(--wcrb-brand);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.wcrb-report-card:hover .wcrb-report-card-link {
    border-bottom-color: currentColor;
}

[data-bs-theme="dark"] .wcrb-report-card .wcrb-report-card-link {
    color: var(--wcrb-brand-accent);
}

/* ---------- Recent activity: original casing, readable text ---------- */
.dashboard-wrapper .activity-content .activity-title {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.dashboard-wrapper .activity-content .activity-detail,
.dashboard-wrapper .activity-content .activity-detail p {
    text-transform: none;
    letter-spacing: 0;
    color: var(--wcrb-ink);
    font-size: var(--fs-sm);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.dashboard-wrapper .activity-content .text-muted,
.dashboard-wrapper .activity-content small {
    text-transform: none;
    letter-spacing: 0;
    color: var(--wcrb-ink-muted) !important;
}

/* ---------- Appointment stats: tiles fill the row ---------- *
 * The appointments strip is four tiles in a `row g-3` with `col` children; they
 * collapsed to the left because `col` sizes to content once the table widens the
 * page. Sharing the row evenly keeps the strip full width. */
.wcrb-screen-appointments .dashboard-wrapper .stats-tiles,
.wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) {
    width: 100%;
}

.wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) > .col {
    flex: 1 1 0;
    min-width: 0;
}

/* Four tiles across on wide screens: an explicit track instead of auto-fill, which
   left phantom empty columns and pushed the tiles to the left edge. */
.wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
    .wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Right-to-left support ---------- *
 * The layout is mostly flex/utility based, so Bootstrap's RTL build is not required;
 * what needs flipping is the handful of explicit sides below. `html[dir="rtl"]` is set
 * server-side from is_rtl(), and JS may switch it at runtime. */
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
}

html[dir="rtl"] .main-content {
    margin-left: 0;
    margin-right: var(--sidebar-width);
}

html[dir="rtl"] .sidebar.wcrb-rail ~ .main-content {
    margin-right: var(--sidebar-rail-width);
}

@media (max-width: 991.98px) {
    html[dir="rtl"] .sidebar {
        transform: translateX(100%);
    }

    html[dir="rtl"] .sidebar.is-open,
    html[dir="rtl"] .sidebar.show {
        transform: translateX(0);
    }

    html[dir="rtl"] .main-content {
        margin-right: 0;
    }
}

html[dir="rtl"] .sidebar-nav .nav-link.active,
html[dir="rtl"] .dashboard-wrapper .sidebar-nav .nav-link.active {
    border-left: 0;
    border-right: 3px solid var(--wcrb-brand-accent);
}

html[dir="rtl"] .dashboard-wrapper .wcrb-page-title,
html[dir="rtl"] .dashboard-wrapper .card-title,
html[dir="rtl"] .dashboard-wrapper .activity-content,
html[dir="rtl"] .dashboard-wrapper .table th,
html[dir="rtl"] .dashboard-wrapper .table td {
    text-align: right;
}

html[dir="rtl"] .dashboard-wrapper .table th.text-end,
html[dir="rtl"] .dashboard-wrapper .table td.text-end {
    text-align: left !important;
}

/* Logical-side utilities used across the templates. */
html[dir="rtl"] .dashboard-wrapper .me-1,
html[dir="rtl"] .dashboard-wrapper .me-2,
html[dir="rtl"] .dashboard-wrapper .me-3 {
    margin-right: 0 !important;
}

html[dir="rtl"] .dashboard-wrapper .me-1 { margin-left: .25rem !important; }
html[dir="rtl"] .dashboard-wrapper .me-2 { margin-left: .5rem !important; }
html[dir="rtl"] .dashboard-wrapper .me-3 { margin-left: 1rem !important; }

html[dir="rtl"] .dashboard-wrapper .ms-1 { margin-right: .25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .dashboard-wrapper .ms-2 { margin-right: .5rem !important; margin-left: 0 !important; }

html[dir="rtl"] .dashboard-wrapper .ps-4 { padding-left: 1rem !important; padding-right: 1.5rem !important; }
html[dir="rtl"] .dashboard-wrapper .pe-4 { padding-right: 1rem !important; padding-left: 1.5rem !important; }

html[dir="rtl"] .dashboard-wrapper .dropdown-menu-end {
    right: auto;
    left: 0;
}

html[dir="rtl"] .wcrb-job-editor .wcrb-history-items > li.note {
    padding-left: .85rem;
    padding-right: 2.3rem;
}

html[dir="rtl"] .wcrb-job-editor .wcrb-history-items > li.note:before {
    left: auto;
    right: .9rem;
}

html[dir="rtl"] .wcrb-repair-flow .wcrb-flow-board,
html[dir="rtl"] .dashboard-wrapper .wcrb-job-tabs {
    direction: rtl;
}

/* Arabic/Persian/Hebrew read best with a slightly larger line-height. */
html[dir="rtl"] body {
    line-height: 1.65;
}

/* ==========================================================================
   Input groups: the addon must stay inline with its field
   --------------------------------------------------------------------------
   Bootstrap's `.input-group` is `display: flex; flex-wrap: wrap`, and the dashboard
   gives `.form-control` a 150px min-width (set for the Repair Flow filter selects).
   Inside a narrow filter column the field therefore could not shrink next to its
   addon and wrapped underneath it — the search icon ended up on a line of its own.
   A group is a single control row, so it must never wrap, and the field inside it
   must be allowed to shrink.
   ========================================================================== */
.dashboard-wrapper .input-group {
    flex-wrap: nowrap;
    align-items: stretch;
}

.dashboard-wrapper .input-group > .form-control,
.dashboard-wrapper .input-group > .form-select,
.dashboard-wrapper .input-group > .form-control-sm,
.dashboard-wrapper .input-group > .form-select-sm,
.wcrb-repair-flow .wcrb-flow-filter .input-group .form-control {
    min-width: 0;
    flex: 1 1 auto;
}

.dashboard-wrapper .input-group > .input-group-text {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* The Repair Flow search column already has a sensible flex-basis; the generic
   150px floor on its inner field is what forced the wrap. */
.wcrb-repair-flow .wcrb-flow-filter-search .form-control {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .wcrb-topbar .wcrb-fullscreen-btn {
        display: none !important;
    }
}

/* ---------- Responsive pass ---------- *//* ---------- Responsive pass ---------- */@media (max-width: 991.98px) {
    .wcrb-topbar .wcrb-fullscreen-btn {
        display: none !important;
    }
}

/* ---------- Responsive pass ---------- *//* ---------- Responsive pass ---------- *//* ==========================================================================
   Input groups: the addon must stay inline with its field
   --------------------------------------------------------------------------
   Bootstrap's `.input-group` is `display: flex; flex-wrap: wrap`, and the dashboard
   gives `.form-control` a 150px min-width (set for the Repair Flow filter selects).
   Inside a narrow filter column the field therefore could not shrink next to its
   addon and wrapped underneath it — the search icon ended up on a line of its own.
   A group is a single control row, so it must never wrap, and the field inside it
   must be allowed to shrink.
   ========================================================================== */
.dashboard-wrapper .input-group {
    flex-wrap: nowrap;
    align-items: stretch;
}

.dashboard-wrapper .input-group > .form-control,
.dashboard-wrapper .input-group > .form-select,
.dashboard-wrapper .input-group > .form-control-sm,
.dashboard-wrapper .input-group > .form-select-sm,
.wcrb-repair-flow .wcrb-flow-filter .input-group .form-control {
    min-width: 0;
    flex: 1 1 auto;
}

.dashboard-wrapper .input-group > .input-group-text {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* The Repair Flow search column already has a sensible flex-basis; the generic
   150px floor on its inner field is what forced the wrap. */
.wcrb-repair-flow .wcrb-flow-filter-search .form-control {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .wcrb-topbar .wcrb-fullscreen-btn {
        display: none !important;
    }
}

/* ---------- Responsive pass ---------- *//* ---------- Responsive pass ---------- */@media (max-width: 991.98px) {
    .wcrb-topbar .wcrb-fullscreen-btn {
        display: none !important;
    }
}

/* ---------- Responsive pass ---------- *//* ---------- Responsive pass ---------- *//* The table itself is wider than its card (see the wide-table rules above) and must
   be clipped by the .table-responsive wrapper instead of widening the page. The two
   screens whose cards do not wrap their table in that element get the same clip on
   the card body, so nothing can escape the card. */
:is(.wcrb-screen-jobs, .wcrb-screen-estimates, .wcrb-screen-appointments, .wcrb-screen-expenses, .wcrb-screen-payments) .dashboard-wrapper .card-body {
    overflow: hidden;
}
/* The horizontal scroll containers need a visible affordance, otherwise a clipped
   column looks like missing data. A thin track/thumb in the theme colours does it
   without a custom scrollbar widget. */
:is(.wcrb-screen-jobs, .wcrb-screen-estimates, .wcrb-screen-appointments, .wcrb-screen-expenses, .wcrb-screen-payments) .dashboard-wrapper .table-responsive {
    scrollbar-width: thin;
    scrollbar-color: var(--wcrb-border-strong) transparent;
}

:is(.wcrb-screen-jobs, .wcrb-screen-estimates, .wcrb-screen-appointments, .wcrb-screen-expenses, .wcrb-screen-payments) .dashboard-wrapper .table-responsive::-webkit-scrollbar {
    height: 10px;
}

:is(.wcrb-screen-jobs, .wcrb-screen-estimates, .wcrb-screen-appointments, .wcrb-screen-expenses, .wcrb-screen-payments) .dashboard-wrapper .table-responsive::-webkit-scrollbar-thumb {
    background: var(--wcrb-border-strong);
    border-radius: 8px;
}

:is(.wcrb-screen-jobs, .wcrb-screen-estimates, .wcrb-screen-appointments, .wcrb-screen-expenses, .wcrb-screen-payments) .dashboard-wrapper .table-responsive::-webkit-scrollbar-track {
    background: transparent;
}
/* ---------- Reports: menu cards ----------
   `.d-flex` on the widget body is one of the few things that survives the card
   wrapper, so the icon column and the text column are flex items. Without
   `min-width: 0` the text span refuses to shrink and a long description widens the
   card past the column (and the page). The "Open" link also lost its colour in dark
   mode (`.text-primary` resolves to the very dark brand), so it uses the accent. */
.wcrb-report-card-body {
    display: block;
    height: 100%;
    padding: .9rem 1rem;
}

.wcrb-report-card-body .widget-body {
    padding: 0;
    height: 100%;
}

.wcrb-report-card-link {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-weight: 600;
    color: var(--wcrb-brand);
}

[data-bs-theme="dark"] .wcrb-report-card-link {
    color: var(--wcrb-brand-accent);
}

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

.wcrb-report-card .wcrb-report-icon {
    flex: 0 0 auto;
    /* The generic card-surface rule is `.card` + `.text-body`/icon; keep the icon
       plate transparent so its glyph stays visible on the dark card. */
    background: var(--wcrb-brand-soft);
    color: var(--wcrb-brand);
}

[data-bs-theme="dark"] .wcrb-report-card .wcrb-report-icon {
    background: rgba(255, 255, 255, .10);
    color: #ffffff;
}

/* The text column must be allowed to shrink; without it a long description
   widens the card past its grid column. */
.wcrb-report-card-body .flex-grow-1 {
    min-width: 0;
}
/* ---------- Calendar (FullCalendar) on small screens ----------
   Month view is a 7-column grid; below ~700px each day cell is ~50px wide, so the
   toolbar (prev/next/date/view switcher) and the event chips overflow. FullCalendar
   stacks its toolbar on its own when it can, but the wrapped container also needed a
   scroll boundary so the grid never widens the page. */
.calendar-container {
    background: var(--wcrb-surface);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[data-bs-theme="dark"] .calendar-container {
    /* `.bg-white` utility on the wrapper would otherwise stay pure white. */
    background: var(--wcrb-surface) !important;
}

.dashboard-wrapper .calendar-container .fc {
    min-width: 0;
}

.dashboard-wrapper .calendar-container .fc-toolbar {
    flex-wrap: wrap;
    gap: .5rem;
}

.dashboard-wrapper .calendar-container .fc-toolbar-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wcrb-ink);
}

.dashboard-wrapper .calendar-container .fc .fc-button {
    font-size: .78rem;
    padding: .35rem .6rem;
}

.dashboard-wrapper .calendar-container .calendar-filters {
    background: var(--wcrb-surface-2) !important;
    color: var(--wcrb-ink);
}

@media (max-width: 767.98px) {
    .dashboard-wrapper .calendar-container {
        padding: .85rem !important;
    }

    .dashboard-wrapper .calendar-container .fc-toolbar.fc-header-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-wrapper .calendar-container .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: .35rem;
    }

    .dashboard-wrapper .calendar-container .fc-toolbar-title {
        font-size: .95rem;
        text-align: center;
    }

    /* Day cells keep a usable tap target; the grid scrolls horizontally instead of
       compressing the labels into unreadable slivers. */
    .dashboard-wrapper .calendar-container .fc {
        min-width: 640px;
    }

    .dashboard-wrapper .calendar-container .fc .fc-daygrid-day-number,
    .dashboard-wrapper .calendar-container .fc .fc-col-header-cell-cushion {
        font-size: .72rem;
    }
}
/* ---------- Stats tiles: consistent padding ----------
   The reminder-logs / reviews / dashboard tiles all use `.stats-card > .card-body`
   with `p-3`, but the grid rules that size the strip also zero the column padding and
   the compact tile min-height, which left the icon and the label touching. This gives
   every tile the same interior rhythm at any width. */
.dashboard-wrapper .stats-card .card-body {
    padding: 1rem .85rem !important;
    gap: .35rem;
}

.dashboard-wrapper .stats-card .card-title {
    margin-bottom: 0 !important;
}

.dashboard-wrapper .stats-card .card-body > .mb-2,
.dashboard-wrapper .stats-card .card-body > .mb-1 {
    margin-bottom: .35rem !important;
}

/* Badges/pills across every list: Bootstrap's default 0.35em is too tight next to
   12px text, so the label touched the rounded edge (reminder-logs, expenses,
   reviews, job lists). One shared, roomier padding. */
.dashboard-wrapper .badge,
.dashboard-wrapper .badge.rounded-pill,
.dashboard-wrapper .badge.text-bg-secondary,
.dashboard-wrapper .badge.text-bg-success,
.dashboard-wrapper .badge.text-bg-warning {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    padding: .42em .78em !important;
    line-height: 1.15;
    letter-spacing: .01em;
}

.dashboard-wrapper .badge.rounded-pill {
    padding-left: .85em !important;
    padding-right: .85em !important;
}

/* ==========================================================================
   DARK MODE + LAYOUT FIX PASS (second sweep)
   --------------------------------------------------------------------------
   Everything below targets surfaces that were still hard-coded light after the
   first dark-mode pass: the Repair Flow board, Select2 (rendered outside the
   widget), TinyMCE, the device evaluation grid, the attachments dropzone, the
   job-history timeline, payment/duplicate-job modals and the report builder.
   Values always come from the --wcrb-* tokens, so a custom palette follows too.
   ========================================================================== */

/* ---------- Select2 (customer / technician / device pickers) ----------
   Select2 is injected at <body> level, so a `.dashboard-wrapper` scoped rule never
   matched it. These are unscoped on purpose and only apply while the dashboard page
   is open, because style.css is only loaded there. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--wcrb-surface);
    border: 1px solid var(--wcrb-border-strong);
    border-radius: 8px;
    color: var(--wcrb-ink);
    min-height: 38px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--wcrb-ink);
    line-height: 1.5;
    padding-left: .1rem;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--wcrb-ink-muted);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--wcrb-ink-muted) transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--wcrb-ink-muted) transparent;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--wcrb-ink);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--wcrb-surface-2);
    border: 1px solid var(--wcrb-border-strong);
    border-radius: 6px;
    color: var(--wcrb-ink);
    padding: .1rem .45rem .1rem .2rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--wcrb-ink-muted);
    border-right-color: var(--wcrb-border);
    margin-right: .35rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background: transparent;
    color: var(--wcrb-ink);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--wcrb-brand);
    box-shadow: 0 0 0 .2rem var(--wcrb-brand-soft);
}

.select2-dropdown {
    background-color: var(--wcrb-surface);
    border: 1px solid var(--wcrb-border-strong);
    border-radius: 8px;
    color: var(--wcrb-ink);
    box-shadow: var(--wcrb-shadow-lg);
    overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--wcrb-surface-2);
    border: 1px solid var(--wcrb-border-strong);
    border-radius: 6px;
    color: var(--wcrb-ink);
}

.select2-container--default .select2-results__option {
    color: var(--wcrb-ink);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--wcrb-surface-2);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--wcrb-brand);
    color: var(--wcrb-on-brand, #fff);
}

.select2-container--default .select2-results__group,
.select2-results__message {
    color: var(--wcrb-ink-muted);
}

/* Select2's dropdown search box ships a white input (`.select2-search__field`), and
   the plugin stylesheet loads after ours, so it needs an explicit background/colour
   rather than relying on inheritance. */
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container .select2-search--inline .select2-search__field,
.select2-dropdown .select2-search__field {
    background-color: var(--wcrb-surface-2) !important;
    border: 1px solid var(--wcrb-border-strong) !important;
    border-radius: 6px;
    color: var(--wcrb-ink) !important;
    outline: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--wcrb-brand) !important;
    box-shadow: 0 0 0 .15rem var(--wcrb-brand-soft);
}

.select2-container--default.select2-container--open .select2-dropdown {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border-strong);
}

/* The dropdown can open upward (above the filter bar); the search row sits on the
   surface, so give it the same separator. */
.select2-container--default .select2-search--dropdown {
    padding: 6px;
    background: var(--wcrb-surface);
}

/* Dark mode polish for the multi-select chips and date fields. */
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--wcrb-surface-3);
    border-color: var(--wcrb-border-strong);
    color: var(--wcrb-ink);
}

/* Native date inputs (and some pickers) size to their own content and were clipped
   inside narrow grid cells. Let them shrink and keep a sane minimum. */
.dashboard-wrapper input[type="date"],
.dashboard-wrapper input[type="datetime-local"],
.dashboard-wrapper input[type="time"],
.dashboard-wrapper .wcrb-flow-filter input {
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

html[dir="rtl"] .dashboard-wrapper input[type="date"],
html[dir="rtl"] .dashboard-wrapper input[type="datetime-local"],
html[dir="rtl"] .dashboard-wrapper input[type="time"] {
    direction: rtl;
    text-align: right;
}

/* Select2 in RTL: the arrow and the chips follow the text direction. */
html[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    left: 10px;
    right: auto;
}

html[dir="rtl"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: 0;
    border-left: 1px solid var(--wcrb-border);
    margin-right: 0;
    margin-left: .35rem;
}

/* ---------- Repair Flow board ---------- */
.wcrb-repair-flow .wcrb-flow-column {
    background: var(--wcrb-surface-2);
    border-color: var(--wcrb-border);
}

.wcrb-repair-flow .wcrb-flow-column-head {
    border-bottom-color: var(--wcrb-border);
    color: var(--wcrb-ink);
}

.wcrb-repair-flow .wcrb-flow-column-title {
    color: var(--wcrb-ink);
}

.wcrb-repair-flow .wcrb-flow-card {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border);
    box-shadow: var(--wcrb-shadow-sm);
    color: var(--wcrb-ink);
}

.wcrb-repair-flow .wcrb-flow-card:hover {
    border-color: var(--wcrb-border-strong);
    box-shadow: var(--wcrb-shadow-md);
}

.wcrb-repair-flow .wcrb-flow-order {
    color: var(--wcrb-brand);
}

.wcrb-repair-flow .wcrb-flow-order-label,
.wcrb-repair-flow .wcrb-flow-card-case,
.wcrb-repair-flow .wcrb-flow-empty {
    color: var(--wcrb-ink-muted);
}

.wcrb-repair-flow .wcrb-flow-card-customer,
.wcrb-repair-flow .wcrb-flow-card-device,
.wcrb-repair-flow .wcrb-flow-card-meta {
    color: var(--wcrb-ink-soft);
}

.wcrb-repair-flow .wcrb-flow-lane {
    border-color: var(--wcrb-border);
    background: var(--wcrb-surface);
}

.wcrb-repair-flow .wcrb-flow-lane-toggle {
    background: var(--wcrb-surface-2);
    color: var(--wcrb-ink);
}

.wcrb-repair-flow .wcrb-flow-card-id {
    color: inherit;
}

.wcrb-repair-flow .wcrb-flow-column.wcrb-flow-dragover,
.wcrb-repair-flow .wcrb-flow-lane.wcrb-flow-dragover {
    outline-color: var(--wcrb-brand);
    background: var(--wcrb-brand-soft);
}

.wcrb-repair-flow .wcrb-flow-locked-card {
    background: var(--wcrb-surface);
    color: var(--wcrb-ink);
}

.wcrb-repair-flow .wcrb-flow-locked-overlay {
    background: color-mix(in srgb, var(--wcrb-page-bg) 55%, transparent);
}

.wcrb-repair-flow .wcrb-skeleton-line {
    background: var(--wcrb-surface-3);
}

/* ---------- TinyMCE (job Details tab) ----------
   TinyMCE builds its own document and chrome, which never inherited the dashboard
   palette: white editor body, white toolbar, blue-ish border. */
.dashboard-wrapper .mce-tinymce {
    border: 1px solid var(--wcrb-border-strong) !important;
    border-radius: 8px;
    overflow: hidden;
}

.dashboard-wrapper .mce-tinymce .mce-toolbar-grp,
.dashboard-wrapper .mce-tinymce .mce-edit-area,
.dashboard-wrapper .mce-tinymce .mce-stack-layout-item,
.dashboard-wrapper .mce-panel {
    background: var(--wcrb-surface) !important;
    border-color: var(--wcrb-border) !important;
    color: var(--wcrb-ink);
}

.dashboard-wrapper .mce-tinymce .mce-btn button {
    background: transparent !important;
    color: var(--wcrb-ink-soft) !important;
}

.dashboard-wrapper .mce-tinymce .mce-btn:hover button,
.dashboard-wrapper .mce-tinymce .mce-btn.mce-active button,
.dashboard-wrapper .mce-tinymce .mce-btn:focus button {
    background: var(--wcrb-surface-2) !important;
    color: var(--wcrb-ink) !important;
}

.dashboard-wrapper .mce-tinymce .mce-btn.mce-active {
    border-color: var(--wcrb-border-strong) !important;
}

.dashboard-wrapper .mce-tinymce iframe {
    background: var(--wcrb-surface) !important;
}

/* Quicktags (Code view) share the same chrome. */
.dashboard-wrapper .quicktags-toolbar {
    background: var(--wcrb-surface-2) !important;
    border-bottom: 1px solid var(--wcrb-border) !important;
}

.dashboard-wrapper .quicktags-toolbar input.ed_button {
    background: var(--wcrb-surface) !important;
    border: 1px solid var(--wcrb-border-strong) !important;
    border-radius: 5px;
    color: var(--wcrb-ink) !important;
}

/* ---------- Technician picker (multi-select) ----------
   The selected chips were left with Select2's white default; also the plain
   `.form-control-plaintext` read-only holder. */
.dashboard-wrapper .wcrb-technician-select + .select2-container .select2-selection--multiple,
.dashboard-wrapper .wcrb-technician-holder .select2-selection--multiple {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border-strong);
}

.dashboard-wrapper .form-control-plaintext {
    color: var(--wcrb-ink);
}

/* ---------- Device evaluation (Pre/Post) ---------- */
.wcrb-devices-table .evaluation-row > td,
.device-evaluation-wrapper,
.eval-section {
    background-color: var(--wcrb-surface-2) !important;
    border-color: var(--wcrb-border) !important;
    color: var(--wcrb-ink);
}

.eval-section {
    background: var(--wcrb-surface) !important;
    box-shadow: var(--wcrb-shadow-sm);
}

.eval-section h4,
.eval-item label {
    color: var(--wcrb-ink) !important;
}

.eval-item select,
.eval-status-select {
    background-color: var(--wcrb-surface);
    border: 1px solid var(--wcrb-border-strong);
    color: var(--wcrb-ink);
}

/* ---------- Attachments dropzone ---------- */
.wcrb-job-editor .wcrb-dropzone {
    background: var(--wcrb-surface-2);
    border-color: var(--wcrb-border-strong);
}

.wcrb-job-editor .wcrb-dropzone-area {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border-strong);
    color: var(--wcrb-ink-muted);
}

.wcrb-job-editor .wcrb-dropzone-area:hover,
.wcrb-job-editor .wcrb-dropzone-area:focus {
    background: var(--wcrb-surface-3);
    border-color: var(--wcrb-brand);
}

.wcrb-job-editor .wcrb-dropzone-area.is-dragover {
    background: var(--wcrb-brand-soft);
    border-color: var(--wcrb-brand);
    color: var(--wcrb-ink);
}

.wcrb-job-editor .wcrb-dropzone-area i {
    color: var(--wcrb-brand);
}

.wcrb-job-editor .wcrb-dropzone--locked,
.wcrb-job-editor .wcrb-dropzone--locked .wcrb-dropzone-area {
    background: var(--wcrb-surface-2);
    border-color: var(--wcrb-border);
    color: var(--wcrb-ink-muted);
}

/* ---------- Job history timeline ---------- */
.wcrb-job-editor .wcrb-history-items > li.note {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border);
    color: var(--wcrb-ink);
}

.wcrb-job-editor .wcrb-history-items > li.note .note_content p {
    color: var(--wcrb-ink);
}

.wcrb-job-editor .wcrb-history-items > li.note .meta {
    color: var(--wcrb-ink-muted);
}

.wcrb-job-editor .wcrb-history-items > li.note .typelabel {
    background: var(--wcrb-brand-soft);
    color: var(--wcrb-brand);
}

.wcrb-job-editor .wcrb-history-items > li.note:before {
    background: var(--wcrb-brand);
    box-shadow: 0 0 0 3px var(--wcrb-brand-soft);
}

.wcrb-job-editor .wcrb-history-items > li.note_private:before {
    background: var(--wcrb-brand-accent);
    box-shadow: 0 0 0 3px var(--wcrb-brand-soft);
}

/* ---------- Modals: payment + duplicate job ---------- *
 * Bootstrap already themes `.modal-content`, but these two dialogs are built with
 * nested containers that kept hard-coded light fills (payment boxes, the duplicate
 * job list). */
.dashboard-wrapper .wcrb_the_payment_note,
.dashboard-wrapper .wcrb_the_payment_date,
.dashboard-wrapper .wcrb_the_payment_payment,
.dashboard-wrapper .jobAttachments,
.dashboard-wrapper .grey-bg {
    background-color: var(--wcrb-surface-2) !important;
    border: 1px solid var(--wcrb-border) !important;
    color: var(--wcrb-ink);
}

.dashboard-wrapper #wcrbduplicatejobfront table,
.dashboard-wrapper #wcrbduplicatejobfront .accelerator,
.dashboard-wrapper .wcrb-duplicate-job ul {
    background: transparent;
    color: var(--wcrb-ink);
}

.dashboard-wrapper .modal .form-check-label {
    color: var(--wcrb-ink);
}

.dashboard-wrapper .modal .list-group-item,
.dashboard-wrapper .modal .table td,
.dashboard-wrapper .modal .table th {
    background-color: transparent;
    color: var(--wcrb-ink);
    border-color: var(--wcrb-border);
}

/* Brand utilities the plugin markup uses (payment summaries, badges). They were
   hard-coded hex with !important, so they ignored both the palette and dark mode. */
.dashboard-wrapper .orange-bg,
.dashboard-wrapper .blue-bg,
.orange-bg,
.blue-bg {
    color: #fff !important;
}

.dashboard-wrapper .orange-bg,
.orange-bg {
    background-color: var(--wcrb-brand-accent) !important;
}

.dashboard-wrapper .blue-bg,
.blue-bg {
    background-color: var(--wcrb-brand) !important;
}

/* ---------- Report builder form ---------- */
.wcrb-legacy-form .invoice-box,
.wcrb-legacy-form form {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border);
    color: var(--wcrb-ink);
}

.wcrb-legacy-form h2,
.wcrb-legacy-form .select-head,
.wcrb-legacy-form legend,
.wcrb-legacy-form .cell > label,
.wcrb-legacy-form fieldset label {
    color: var(--wcrb-ink);
}

.wcrb-legacy-form input[type="date"],
.wcrb-legacy-form input[type="text"],
.wcrb-legacy-form input[type="number"],
.wcrb-legacy-form select,
.wcrb-legacy-form textarea {
    background: var(--wcrb-surface) !important;
    border-color: var(--wcrb-border-strong);
    color: var(--wcrb-ink);
}

.wcrb-legacy-form fieldset,
.wcrb-legacy-form .fieldset {
    border-color: var(--wcrb-border);
}

/* ---------- Generated report sheet ---------- */
.wcrb-report-view .invoice-box,
.wcrb-report-view .report-container,
[data-bs-theme="dark"] .wcrb-report-view .invoice-box,
[data-bs-theme="dark"] .wcrb-report-view .report-container {
    background: var(--wcrb-surface);
    color: var(--wcrb-ink);
    border-color: var(--wcrb-border);
}

.wcrb-report-view .wc-rb-report-title h2,
.wcrb-report-view .wc-rb-report-title h1,
.wcrb-report-view .report-container .company_info .address-side h2,
.wcrb-report-view .report-container .company_info .address-side p {
    color: var(--wcrb-ink);
}

.wcrb-report-view .invoice-box table tr.heading td,
.wcrb-report-view .invoice-box table tr.heading th,
.wcrb-report-view .wc_table th {
    background: var(--wcrb-surface-2) !important;
    color: var(--wcrb-ink) !important;
    border-color: var(--wcrb-border) !important;
}

.wcrb-report-view .wc_table td,
.wcrb-report-view .invoice-box table tr.item-row td,
.wcrb-report-view .invoice-box table td {
    color: var(--wcrb-ink);
    border-color: var(--wcrb-border) !important;
}

.wcrb-report-view .invoice_totals table {
    border-color: var(--wcrb-border);
}

.wcrb-report-view .grey-bg {
    background-color: var(--wcrb-surface-2) !important;
}

.wcrb-report-view .button,
.wcrb-report-view .button.button-primary {
    background: var(--wcrb-brand);
    color: var(--wcrb-on-brand, #fff);
}

/* Generated report sheets: every heading inherits the admin sheet's #333, which is
   invisible on the dark sheet. Force the ink token on the whole container; table
   cells and totals were already handled above. */
.wcrb-report-view,
.wcrb-report-view .invoice-box,
.wcrb-report-view .report-container {
    color: var(--wcrb-ink);
}

.wcrb-report-view h1,
.wcrb-report-view h2,
.wcrb-report-view h3,
.wcrb-report-view h4,
.wcrb-report-view h5,
.wcrb-report-view h6,
.wcrb-report-view strong,
.wcrb-report-view b,
.wcrb-report-view td,
.wcrb-report-view th,
.wcrb-report-view span,
.wcrb-report-view p,
.wcrb-report-view li {
    color: var(--wcrb-ink);
}

/* Print buttons inside the sheet follow the brand. */
.wcrb-report-view .button,
.wcrb-report-view input.button,
.wcrb-report-view button {
    background: var(--wcrb-brand) !important;
    border-color: var(--wcrb-brand) !important;
    color: var(--wcrb-on-brand, #fff) !important;
}

/* report-view.css is enqueued after this sheet and hard-codes #333 for the sheet's
   section titles, so this must match its specificity *and* come later. */
.wcrb-report-view .wc-rb-report-title h2,
.wcrb-report-view .wc-rb-report-title h1,
.wcrb-report-view .invoice-box h2,
.wcrb-report-view .invoice-box h3,
.wcrb-report-view .invoice-box h4,
.wcrb-report-view .report-container h2,
.wcrb-report-view .report-container h3,
.wcrb-report-view .report-container h4,
[data-bs-theme="dark"] .wcrb-report-view .wc-rb-report-title h2,
[data-bs-theme="dark"] .wcrb-report-view .wc-rb-report-title h1 {
    color: var(--wcrb-ink) !important;
}

/* ---------- Reports menu: "Open" link ---------- */ */ *
 * `.text-primary` resolves to the brand, which on the dark card was too close to the
 * card colour. Use the accent with an underline affordance instead. */
.wcrb-report-card .wcrb-report-card-link {
    color: var(--wcrb-brand);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.wcrb-report-card:hover .wcrb-report-card-link {
    border-bottom-color: currentColor;
}

[data-bs-theme="dark"] .wcrb-report-card .wcrb-report-card-link {
    color: var(--wcrb-brand-accent);
}

/* ---------- Recent activity: original casing, readable text ---------- */
.dashboard-wrapper .activity-content .activity-title {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.dashboard-wrapper .activity-content .activity-detail,
.dashboard-wrapper .activity-content .activity-detail p {
    text-transform: none;
    letter-spacing: 0;
    color: var(--wcrb-ink);
    font-size: var(--fs-sm);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.dashboard-wrapper .activity-content .text-muted,
.dashboard-wrapper .activity-content small {
    text-transform: none;
    letter-spacing: 0;
    color: var(--wcrb-ink-muted) !important;
}

/* ---------- Appointment stats: tiles fill the row ---------- *
 * The appointments strip is four tiles in a `row g-3` with `col` children; they
 * collapsed to the left because `col` sizes to content once the table widens the
 * page. Sharing the row evenly keeps the strip full width. */
.wcrb-screen-appointments .dashboard-wrapper .stats-tiles,
.wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) {
    width: 100%;
}

.wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) > .col {
    flex: 1 1 0;
    min-width: 0;
}

/* Four tiles across on wide screens: an explicit track instead of auto-fill, which
   left phantom empty columns and pushed the tiles to the left edge. */
.wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
    .wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Right-to-left support ---------- *
 * The layout is mostly flex/utility based, so Bootstrap's RTL build is not required;
 * what needs flipping is the handful of explicit sides below. `html[dir="rtl"]` is set
 * server-side from is_rtl(), and JS may switch it at runtime. */
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
}

html[dir="rtl"] .main-content {
    margin-left: 0;
    margin-right: var(--sidebar-width);
}

html[dir="rtl"] .sidebar.wcrb-rail ~ .main-content {
    margin-right: var(--sidebar-rail-width);
}

@media (max-width: 991.98px) {
    html[dir="rtl"] .sidebar {
        transform: translateX(100%);
    }

    html[dir="rtl"] .sidebar.is-open,
    html[dir="rtl"] .sidebar.show {
        transform: translateX(0);
    }

    html[dir="rtl"] .main-content {
        margin-right: 0;
    }
}

html[dir="rtl"] .sidebar-nav .nav-link.active,
html[dir="rtl"] .dashboard-wrapper .sidebar-nav .nav-link.active {
    border-left: 0;
    border-right: 3px solid var(--wcrb-brand-accent);
}

html[dir="rtl"] .dashboard-wrapper .wcrb-page-title,
html[dir="rtl"] .dashboard-wrapper .card-title,
html[dir="rtl"] .dashboard-wrapper .activity-content,
html[dir="rtl"] .dashboard-wrapper .table th,
html[dir="rtl"] .dashboard-wrapper .table td {
    text-align: right;
}

html[dir="rtl"] .dashboard-wrapper .table th.text-end,
html[dir="rtl"] .dashboard-wrapper .table td.text-end {
    text-align: left !important;
}

/* Logical-side utilities used across the templates. */
html[dir="rtl"] .dashboard-wrapper .me-1,
html[dir="rtl"] .dashboard-wrapper .me-2,
html[dir="rtl"] .dashboard-wrapper .me-3 {
    margin-right: 0 !important;
}

html[dir="rtl"] .dashboard-wrapper .me-1 { margin-left: .25rem !important; }
html[dir="rtl"] .dashboard-wrapper .me-2 { margin-left: .5rem !important; }
html[dir="rtl"] .dashboard-wrapper .me-3 { margin-left: 1rem !important; }

html[dir="rtl"] .dashboard-wrapper .ms-1 { margin-right: .25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .dashboard-wrapper .ms-2 { margin-right: .5rem !important; margin-left: 0 !important; }

html[dir="rtl"] .dashboard-wrapper .ps-4 { padding-left: 1rem !important; padding-right: 1.5rem !important; }
html[dir="rtl"] .dashboard-wrapper .pe-4 { padding-right: 1rem !important; padding-left: 1.5rem !important; }

html[dir="rtl"] .dashboard-wrapper .dropdown-menu-end {
    right: auto;
    left: 0;
}

html[dir="rtl"] .wcrb-job-editor .wcrb-history-items > li.note {
    padding-left: .85rem;
    padding-right: 2.3rem;
}

html[dir="rtl"] .wcrb-job-editor .wcrb-history-items > li.note:before {
    left: auto;
    right: .9rem;
}

html[dir="rtl"] .wcrb-repair-flow .wcrb-flow-board,
html[dir="rtl"] .dashboard-wrapper .wcrb-job-tabs {
    direction: rtl;
}

/* Arabic/Persian/Hebrew read best with a slightly larger line-height. */
html[dir="rtl"] body {
    line-height: 1.65;
}

/* ==========================================================================
   Input groups: the addon must stay inline with its field
   --------------------------------------------------------------------------
   Bootstrap's `.input-group` is `display: flex; flex-wrap: wrap`, and the dashboard
   gives `.form-control` a 150px min-width (set for the Repair Flow filter selects).
   Inside a narrow filter column the field therefore could not shrink next to its
   addon and wrapped underneath it — the search icon ended up on a line of its own.
   A group is a single control row, so it must never wrap, and the field inside it
   must be allowed to shrink.
   ========================================================================== */
.dashboard-wrapper .input-group {
    flex-wrap: nowrap;
    align-items: stretch;
}

.dashboard-wrapper .input-group > .form-control,
.dashboard-wrapper .input-group > .form-select,
.dashboard-wrapper .input-group > .form-control-sm,
.dashboard-wrapper .input-group > .form-select-sm,
.wcrb-repair-flow .wcrb-flow-filter .input-group .form-control {
    min-width: 0;
    flex: 1 1 auto;
}

.dashboard-wrapper .input-group > .input-group-text {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* The Repair Flow search column already has a sensible flex-basis; the generic
   150px floor on its inner field is what forced the wrap. */
.wcrb-repair-flow .wcrb-flow-filter-search .form-control {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .wcrb-topbar .wcrb-fullscreen-btn {
        display: none !important;
    }
}

/* ---------- Responsive pass ---------- *//* ---------- Responsive pass ---------- */@media (max-width: 991.98px) {
    .wcrb-topbar .wcrb-fullscreen-btn {
        display: none !important;
    }
}

/* ---------- Responsive pass ---------- *//* ---------- Responsive pass ---------- *//* ==========================================================================
   Input groups: the addon must stay inline with its field
   --------------------------------------------------------------------------
   Bootstrap's `.input-group` is `display: flex; flex-wrap: wrap`, and the dashboard
   gives `.form-control` a 150px min-width (set for the Repair Flow filter selects).
   Inside a narrow filter column the field therefore could not shrink next to its
   addon and wrapped underneath it — the search icon ended up on a line of its own.
   A group is a single control row, so it must never wrap, and the field inside it
   must be allowed to shrink.
   ========================================================================== */
.dashboard-wrapper .input-group {
    flex-wrap: nowrap;
    align-items: stretch;
}

.dashboard-wrapper .input-group > .form-control,
.dashboard-wrapper .input-group > .form-select,
.dashboard-wrapper .input-group > .form-control-sm,
.dashboard-wrapper .input-group > .form-select-sm,
.wcrb-repair-flow .wcrb-flow-filter .input-group .form-control {
    min-width: 0;
    flex: 1 1 auto;
}

.dashboard-wrapper .input-group > .input-group-text {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* The Repair Flow search column already has a sensible flex-basis; the generic
   150px floor on its inner field is what forced the wrap. */
.wcrb-repair-flow .wcrb-flow-filter-search .form-control {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .wcrb-topbar .wcrb-fullscreen-btn {
        display: none !important;
    }
}

/* ---------- Responsive pass ---------- *//* ---------- Responsive pass ---------- */@media (max-width: 991.98px) {
    .wcrb-topbar .wcrb-fullscreen-btn {
        display: none !important;
    }
}

/* ---------- Responsive pass ---------- *//* ---------- Responsive pass ---------- *//* ==========================================================================
   DARK MODE + LAYOUT FIX PASS (second sweep)
   --------------------------------------------------------------------------
   Everything below targets surfaces that were still hard-coded light after the
   first dark-mode pass: the Repair Flow board, Select2 (rendered outside the
   widget), TinyMCE, the device evaluation grid, the attachments dropzone, the
   job-history timeline, payment/duplicate-job modals and the report builder.
   Values always come from the --wcrb-* tokens, so a custom palette follows too.
   ========================================================================== */

/* ---------- Select2 (customer / technician / device pickers) ----------
   Select2 is injected at <body> level, so a `.dashboard-wrapper` scoped rule never
   matched it. These are unscoped on purpose and only apply while the dashboard page
   is open, because style.css is only loaded there. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--wcrb-surface);
    border: 1px solid var(--wcrb-border-strong);
    border-radius: 8px;
    color: var(--wcrb-ink);
    min-height: 38px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--wcrb-ink);
    line-height: 1.5;
    padding-left: .1rem;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--wcrb-ink-muted);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--wcrb-ink-muted) transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--wcrb-ink-muted) transparent;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--wcrb-ink);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--wcrb-surface-2);
    border: 1px solid var(--wcrb-border-strong);
    border-radius: 6px;
    color: var(--wcrb-ink);
    padding: .1rem .45rem .1rem .2rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--wcrb-ink-muted);
    border-right-color: var(--wcrb-border);
    margin-right: .35rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background: transparent;
    color: var(--wcrb-ink);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--wcrb-brand);
    box-shadow: 0 0 0 .2rem var(--wcrb-brand-soft);
}

.select2-dropdown {
    background-color: var(--wcrb-surface);
    border: 1px solid var(--wcrb-border-strong);
    border-radius: 8px;
    color: var(--wcrb-ink);
    box-shadow: var(--wcrb-shadow-lg);
    overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--wcrb-surface-2);
    border: 1px solid var(--wcrb-border-strong);
    border-radius: 6px;
    color: var(--wcrb-ink);
}

.select2-container--default .select2-results__option {
    color: var(--wcrb-ink);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--wcrb-surface-2);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--wcrb-brand);
    color: var(--wcrb-on-brand, #fff);
}

.select2-container--default .select2-results__group,
.select2-results__message {
    color: var(--wcrb-ink-muted);
}

/* Select2's dropdown search box ships a white input (`.select2-search__field`), and
   the plugin stylesheet loads after ours, so it needs an explicit background/colour
   rather than relying on inheritance. */
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container .select2-search--inline .select2-search__field,
.select2-dropdown .select2-search__field {
    background-color: var(--wcrb-surface-2) !important;
    border: 1px solid var(--wcrb-border-strong) !important;
    border-radius: 6px;
    color: var(--wcrb-ink) !important;
    outline: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--wcrb-brand) !important;
    box-shadow: 0 0 0 .15rem var(--wcrb-brand-soft);
}

.select2-container--default.select2-container--open .select2-dropdown {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border-strong);
}

/* The dropdown can open upward (above the filter bar); the search row sits on the
   surface, so give it the same separator. */
.select2-container--default .select2-search--dropdown {
    padding: 6px;
    background: var(--wcrb-surface);
}

/* Dark mode polish for the multi-select chips and date fields. */
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--wcrb-surface-3);
    border-color: var(--wcrb-border-strong);
    color: var(--wcrb-ink);
}

/* Native date inputs (and some pickers) size to their own content and were clipped
   inside narrow grid cells. Let them shrink and keep a sane minimum. */
.dashboard-wrapper input[type="date"],
.dashboard-wrapper input[type="datetime-local"],
.dashboard-wrapper input[type="time"],
.dashboard-wrapper .wcrb-flow-filter input {
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

html[dir="rtl"] .dashboard-wrapper input[type="date"],
html[dir="rtl"] .dashboard-wrapper input[type="datetime-local"],
html[dir="rtl"] .dashboard-wrapper input[type="time"] {
    direction: rtl;
    text-align: right;
}

/* Select2 in RTL: the arrow and the chips follow the text direction. */
html[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    left: 10px;
    right: auto;
}

html[dir="rtl"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: 0;
    border-left: 1px solid var(--wcrb-border);
    margin-right: 0;
    margin-left: .35rem;
}

/* ---------- Repair Flow board ---------- */
.wcrb-repair-flow .wcrb-flow-column {
    background: var(--wcrb-surface-2);
    border-color: var(--wcrb-border);
}

.wcrb-repair-flow .wcrb-flow-column-head {
    border-bottom-color: var(--wcrb-border);
    color: var(--wcrb-ink);
}

.wcrb-repair-flow .wcrb-flow-column-title {
    color: var(--wcrb-ink);
}

.wcrb-repair-flow .wcrb-flow-card {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border);
    box-shadow: var(--wcrb-shadow-sm);
    color: var(--wcrb-ink);
}

.wcrb-repair-flow .wcrb-flow-card:hover {
    border-color: var(--wcrb-border-strong);
    box-shadow: var(--wcrb-shadow-md);
}

.wcrb-repair-flow .wcrb-flow-order {
    color: var(--wcrb-brand);
}

.wcrb-repair-flow .wcrb-flow-order-label,
.wcrb-repair-flow .wcrb-flow-card-case,
.wcrb-repair-flow .wcrb-flow-empty {
    color: var(--wcrb-ink-muted);
}

.wcrb-repair-flow .wcrb-flow-card-customer,
.wcrb-repair-flow .wcrb-flow-card-device,
.wcrb-repair-flow .wcrb-flow-card-meta {
    color: var(--wcrb-ink-soft);
}

.wcrb-repair-flow .wcrb-flow-lane {
    border-color: var(--wcrb-border);
    background: var(--wcrb-surface);
}

.wcrb-repair-flow .wcrb-flow-lane-toggle {
    background: var(--wcrb-surface-2);
    color: var(--wcrb-ink);
}

.wcrb-repair-flow .wcrb-flow-card-id {
    color: inherit;
}

.wcrb-repair-flow .wcrb-flow-column.wcrb-flow-dragover,
.wcrb-repair-flow .wcrb-flow-lane.wcrb-flow-dragover {
    outline-color: var(--wcrb-brand);
    background: var(--wcrb-brand-soft);
}

.wcrb-repair-flow .wcrb-flow-locked-card {
    background: var(--wcrb-surface);
    color: var(--wcrb-ink);
}

.wcrb-repair-flow .wcrb-flow-locked-overlay {
    background: color-mix(in srgb, var(--wcrb-page-bg) 55%, transparent);
}

.wcrb-repair-flow .wcrb-skeleton-line {
    background: var(--wcrb-surface-3);
}

/* ---------- TinyMCE (job Details tab) ----------
   TinyMCE builds its own document and chrome, which never inherited the dashboard
   palette: white editor body, white toolbar, blue-ish border. */
.dashboard-wrapper .mce-tinymce {
    border: 1px solid var(--wcrb-border-strong) !important;
    border-radius: 8px;
    overflow: hidden;
}

.dashboard-wrapper .mce-tinymce .mce-toolbar-grp,
.dashboard-wrapper .mce-tinymce .mce-edit-area,
.dashboard-wrapper .mce-tinymce .mce-stack-layout-item,
.dashboard-wrapper .mce-panel {
    background: var(--wcrb-surface) !important;
    border-color: var(--wcrb-border) !important;
    color: var(--wcrb-ink);
}

.dashboard-wrapper .mce-tinymce .mce-btn button {
    background: transparent !important;
    color: var(--wcrb-ink-soft) !important;
}

.dashboard-wrapper .mce-tinymce .mce-btn:hover button,
.dashboard-wrapper .mce-tinymce .mce-btn.mce-active button,
.dashboard-wrapper .mce-tinymce .mce-btn:focus button {
    background: var(--wcrb-surface-2) !important;
    color: var(--wcrb-ink) !important;
}

.dashboard-wrapper .mce-tinymce .mce-btn.mce-active {
    border-color: var(--wcrb-border-strong) !important;
}

.dashboard-wrapper .mce-tinymce iframe {
    background: var(--wcrb-surface) !important;
}

/* Quicktags (Code view) share the same chrome. */
.dashboard-wrapper .quicktags-toolbar {
    background: var(--wcrb-surface-2) !important;
    border-bottom: 1px solid var(--wcrb-border) !important;
}

.dashboard-wrapper .quicktags-toolbar input.ed_button {
    background: var(--wcrb-surface) !important;
    border: 1px solid var(--wcrb-border-strong) !important;
    border-radius: 5px;
    color: var(--wcrb-ink) !important;
}

/* ---------- Technician picker (multi-select) ----------
   The selected chips were left with Select2's white default; also the plain
   `.form-control-plaintext` read-only holder. */
.dashboard-wrapper .wcrb-technician-select + .select2-container .select2-selection--multiple,
.dashboard-wrapper .wcrb-technician-holder .select2-selection--multiple {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border-strong);
}

.dashboard-wrapper .form-control-plaintext {
    color: var(--wcrb-ink);
}

/* ---------- Device evaluation (Pre/Post) ---------- */
.wcrb-devices-table .evaluation-row > td,
.device-evaluation-wrapper,
.eval-section {
    background-color: var(--wcrb-surface-2) !important;
    border-color: var(--wcrb-border) !important;
    color: var(--wcrb-ink);
}

.eval-section {
    background: var(--wcrb-surface) !important;
    box-shadow: var(--wcrb-shadow-sm);
}

.eval-section h4,
.eval-item label {
    color: var(--wcrb-ink) !important;
}

.eval-item select,
.eval-status-select {
    background-color: var(--wcrb-surface);
    border: 1px solid var(--wcrb-border-strong);
    color: var(--wcrb-ink);
}

/* ---------- Attachments dropzone ---------- */
.wcrb-job-editor .wcrb-dropzone {
    background: var(--wcrb-surface-2);
    border-color: var(--wcrb-border-strong);
}

.wcrb-job-editor .wcrb-dropzone-area {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border-strong);
    color: var(--wcrb-ink-muted);
}

.wcrb-job-editor .wcrb-dropzone-area:hover,
.wcrb-job-editor .wcrb-dropzone-area:focus {
    background: var(--wcrb-surface-3);
    border-color: var(--wcrb-brand);
}

.wcrb-job-editor .wcrb-dropzone-area.is-dragover {
    background: var(--wcrb-brand-soft);
    border-color: var(--wcrb-brand);
    color: var(--wcrb-ink);
}

.wcrb-job-editor .wcrb-dropzone-area i {
    color: var(--wcrb-brand);
}

.wcrb-job-editor .wcrb-dropzone--locked,
.wcrb-job-editor .wcrb-dropzone--locked .wcrb-dropzone-area {
    background: var(--wcrb-surface-2);
    border-color: var(--wcrb-border);
    color: var(--wcrb-ink-muted);
}

/* ---------- Job history timeline ---------- */
.wcrb-job-editor .wcrb-history-items > li.note {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border);
    color: var(--wcrb-ink);
}

.wcrb-job-editor .wcrb-history-items > li.note .note_content p {
    color: var(--wcrb-ink);
}

.wcrb-job-editor .wcrb-history-items > li.note .meta {
    color: var(--wcrb-ink-muted);
}

.wcrb-job-editor .wcrb-history-items > li.note .typelabel {
    background: var(--wcrb-brand-soft);
    color: var(--wcrb-brand);
}

.wcrb-job-editor .wcrb-history-items > li.note:before {
    background: var(--wcrb-brand);
    box-shadow: 0 0 0 3px var(--wcrb-brand-soft);
}

.wcrb-job-editor .wcrb-history-items > li.note_private:before {
    background: var(--wcrb-brand-accent);
    box-shadow: 0 0 0 3px var(--wcrb-brand-soft);
}

/* ---------- Modals: payment + duplicate job ---------- *
 * Bootstrap already themes `.modal-content`, but these two dialogs are built with
 * nested containers that kept hard-coded light fills (payment boxes, the duplicate
 * job list). */
.dashboard-wrapper .wcrb_the_payment_note,
.dashboard-wrapper .wcrb_the_payment_date,
.dashboard-wrapper .wcrb_the_payment_payment,
.dashboard-wrapper .jobAttachments,
.dashboard-wrapper .grey-bg {
    background-color: var(--wcrb-surface-2) !important;
    border: 1px solid var(--wcrb-border) !important;
    color: var(--wcrb-ink);
}

.dashboard-wrapper #wcrbduplicatejobfront table,
.dashboard-wrapper #wcrbduplicatejobfront .accelerator,
.dashboard-wrapper .wcrb-duplicate-job ul {
    background: transparent;
    color: var(--wcrb-ink);
}

.dashboard-wrapper .modal .form-check-label {
    color: var(--wcrb-ink);
}

.dashboard-wrapper .modal .list-group-item,
.dashboard-wrapper .modal .table td,
.dashboard-wrapper .modal .table th {
    background-color: transparent;
    color: var(--wcrb-ink);
    border-color: var(--wcrb-border);
}

/* Brand utilities the plugin markup uses (payment summaries, badges). They were
   hard-coded hex with !important, so they ignored both the palette and dark mode. */
.dashboard-wrapper .orange-bg,
.dashboard-wrapper .blue-bg,
.orange-bg,
.blue-bg {
    color: #fff !important;
}

.dashboard-wrapper .orange-bg,
.orange-bg {
    background-color: var(--wcrb-brand-accent) !important;
}

.dashboard-wrapper .blue-bg,
.blue-bg {
    background-color: var(--wcrb-brand) !important;
}

/* ---------- Report builder form ---------- */
.wcrb-legacy-form .invoice-box,
.wcrb-legacy-form form {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border);
    color: var(--wcrb-ink);
}

.wcrb-legacy-form h2,
.wcrb-legacy-form .select-head,
.wcrb-legacy-form legend,
.wcrb-legacy-form .cell > label,
.wcrb-legacy-form fieldset label {
    color: var(--wcrb-ink);
}

.wcrb-legacy-form input[type="date"],
.wcrb-legacy-form input[type="text"],
.wcrb-legacy-form input[type="number"],
.wcrb-legacy-form select,
.wcrb-legacy-form textarea {
    background: var(--wcrb-surface) !important;
    border-color: var(--wcrb-border-strong);
    color: var(--wcrb-ink);
}

.wcrb-legacy-form fieldset,
.wcrb-legacy-form .fieldset {
    border-color: var(--wcrb-border);
}

/* ---------- Generated report sheet ---------- */
.wcrb-report-view .invoice-box,
.wcrb-report-view .report-container,
[data-bs-theme="dark"] .wcrb-report-view .invoice-box,
[data-bs-theme="dark"] .wcrb-report-view .report-container {
    background: var(--wcrb-surface);
    color: var(--wcrb-ink);
    border-color: var(--wcrb-border);
}

.wcrb-report-view .wc-rb-report-title h2,
.wcrb-report-view .wc-rb-report-title h1,
.wcrb-report-view .report-container .company_info .address-side h2,
.wcrb-report-view .report-container .company_info .address-side p {
    color: var(--wcrb-ink);
}

.wcrb-report-view .invoice-box table tr.heading td,
.wcrb-report-view .invoice-box table tr.heading th,
.wcrb-report-view .wc_table th {
    background: var(--wcrb-surface-2) !important;
    color: var(--wcrb-ink) !important;
    border-color: var(--wcrb-border) !important;
}

.wcrb-report-view .wc_table td,
.wcrb-report-view .invoice-box table tr.item-row td,
.wcrb-report-view .invoice-box table td {
    color: var(--wcrb-ink);
    border-color: var(--wcrb-border) !important;
}

.wcrb-report-view .invoice_totals table {
    border-color: var(--wcrb-border);
}

.wcrb-report-view .grey-bg {
    background-color: var(--wcrb-surface-2) !important;
}

.wcrb-report-view .button,
.wcrb-report-view .button.button-primary {
    background: var(--wcrb-brand);
    color: var(--wcrb-on-brand, #fff);
}

/* Generated report sheets: every heading inherits the admin sheet's #333, which is
   invisible on the dark sheet. Force the ink token on the whole container; table
   cells and totals were already handled above. */
.wcrb-report-view,
.wcrb-report-view .invoice-box,
.wcrb-report-view .report-container {
    color: var(--wcrb-ink);
}

.wcrb-report-view h1,
.wcrb-report-view h2,
.wcrb-report-view h3,
.wcrb-report-view h4,
.wcrb-report-view h5,
.wcrb-report-view h6,
.wcrb-report-view strong,
.wcrb-report-view b,
.wcrb-report-view td,
.wcrb-report-view th,
.wcrb-report-view span,
.wcrb-report-view p,
.wcrb-report-view li {
    color: var(--wcrb-ink);
}

/* Print buttons inside the sheet follow the brand. */
.wcrb-report-view .button,
.wcrb-report-view input.button,
.wcrb-report-view button {
    background: var(--wcrb-brand) !important;
    border-color: var(--wcrb-brand) !important;
    color: var(--wcrb-on-brand, #fff) !important;
}

/* report-view.css is enqueued after this sheet and hard-codes #333 for the sheet's
   section titles, so this must match its specificity *and* come later. */
.wcrb-report-view .wc-rb-report-title h2,
.wcrb-report-view .wc-rb-report-title h1,
.wcrb-report-view .invoice-box h2,
.wcrb-report-view .invoice-box h3,
.wcrb-report-view .invoice-box h4,
.wcrb-report-view .report-container h2,
.wcrb-report-view .report-container h3,
.wcrb-report-view .report-container h4,
[data-bs-theme="dark"] .wcrb-report-view .wc-rb-report-title h2,
[data-bs-theme="dark"] .wcrb-report-view .wc-rb-report-title h1 {
    color: var(--wcrb-ink) !important;
}

/* ---------- Reports menu: "Open" link ---------- */ */ *
 * `.text-primary` resolves to the brand, which on the dark card was too close to the
 * card colour. Use the accent with an underline affordance instead. */
.wcrb-report-card .wcrb-report-card-link {
    color: var(--wcrb-brand);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.wcrb-report-card:hover .wcrb-report-card-link {
    border-bottom-color: currentColor;
}

[data-bs-theme="dark"] .wcrb-report-card .wcrb-report-card-link {
    color: var(--wcrb-brand-accent);
}

/* ---------- Recent activity: original casing, readable text ---------- */
.dashboard-wrapper .activity-content .activity-title {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.dashboard-wrapper .activity-content .activity-detail,
.dashboard-wrapper .activity-content .activity-detail p {
    text-transform: none;
    letter-spacing: 0;
    color: var(--wcrb-ink);
    font-size: var(--fs-sm);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.dashboard-wrapper .activity-content .text-muted,
.dashboard-wrapper .activity-content small {
    text-transform: none;
    letter-spacing: 0;
    color: var(--wcrb-ink-muted) !important;
}

/* ---------- Appointment stats: tiles fill the row ---------- *
 * The appointments strip is four tiles in a `row g-3` with `col` children; they
 * collapsed to the left because `col` sizes to content once the table widens the
 * page. Sharing the row evenly keeps the strip full width. */
.wcrb-screen-appointments .dashboard-wrapper .stats-tiles,
.wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) {
    width: 100%;
}

.wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) > .col {
    flex: 1 1 0;
    min-width: 0;
}

/* Four tiles across on wide screens: an explicit track instead of auto-fill, which
   left phantom empty columns and pushed the tiles to the left edge. */
.wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
    .wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .wcrb-screen-appointments .dashboard-wrapper .dashboard-content > .row.g-3:has(> .col > .stats-card) {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Right-to-left support ---------- *
 * The layout is mostly flex/utility based, so Bootstrap's RTL build is not required;
 * what needs flipping is the handful of explicit sides below. `html[dir="rtl"]` is set
 * server-side from is_rtl(), and JS may switch it at runtime. */
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
}

html[dir="rtl"] .main-content {
    margin-left: 0;
    margin-right: var(--sidebar-width);
}

html[dir="rtl"] .sidebar.wcrb-rail ~ .main-content {
    margin-right: var(--sidebar-rail-width);
}

@media (max-width: 991.98px) {
    html[dir="rtl"] .sidebar {
        transform: translateX(100%);
    }

    html[dir="rtl"] .sidebar.is-open,
    html[dir="rtl"] .sidebar.show {
        transform: translateX(0);
    }

    html[dir="rtl"] .main-content {
        margin-right: 0;
    }
}

html[dir="rtl"] .sidebar-nav .nav-link.active,
html[dir="rtl"] .dashboard-wrapper .sidebar-nav .nav-link.active {
    border-left: 0;
    border-right: 3px solid var(--wcrb-brand-accent);
}

html[dir="rtl"] .dashboard-wrapper .wcrb-page-title,
html[dir="rtl"] .dashboard-wrapper .card-title,
html[dir="rtl"] .dashboard-wrapper .activity-content,
html[dir="rtl"] .dashboard-wrapper .table th,
html[dir="rtl"] .dashboard-wrapper .table td {
    text-align: right;
}

html[dir="rtl"] .dashboard-wrapper .table th.text-end,
html[dir="rtl"] .dashboard-wrapper .table td.text-end {
    text-align: left !important;
}

/* Logical-side utilities used across the templates. */
html[dir="rtl"] .dashboard-wrapper .me-1,
html[dir="rtl"] .dashboard-wrapper .me-2,
html[dir="rtl"] .dashboard-wrapper .me-3 {
    margin-right: 0 !important;
}

html[dir="rtl"] .dashboard-wrapper .me-1 { margin-left: .25rem !important; }
html[dir="rtl"] .dashboard-wrapper .me-2 { margin-left: .5rem !important; }
html[dir="rtl"] .dashboard-wrapper .me-3 { margin-left: 1rem !important; }

html[dir="rtl"] .dashboard-wrapper .ms-1 { margin-right: .25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .dashboard-wrapper .ms-2 { margin-right: .5rem !important; margin-left: 0 !important; }

html[dir="rtl"] .dashboard-wrapper .ps-4 { padding-left: 1rem !important; padding-right: 1.5rem !important; }
html[dir="rtl"] .dashboard-wrapper .pe-4 { padding-right: 1rem !important; padding-left: 1.5rem !important; }

html[dir="rtl"] .dashboard-wrapper .dropdown-menu-end {
    right: auto;
    left: 0;
}

html[dir="rtl"] .wcrb-job-editor .wcrb-history-items > li.note {
    padding-left: .85rem;
    padding-right: 2.3rem;
}

html[dir="rtl"] .wcrb-job-editor .wcrb-history-items > li.note:before {
    left: auto;
    right: .9rem;
}

html[dir="rtl"] .wcrb-repair-flow .wcrb-flow-board,
html[dir="rtl"] .dashboard-wrapper .wcrb-job-tabs {
    direction: rtl;
}

/* Arabic/Persian/Hebrew read best with a slightly larger line-height. */
html[dir="rtl"] body {
    line-height: 1.65;
}

/* ==========================================================================
   Input groups: the addon must stay inline with its field
   --------------------------------------------------------------------------
   Bootstrap's `.input-group` is `display: flex; flex-wrap: wrap`, and the dashboard
   gives `.form-control` a 150px min-width (set for the Repair Flow filter selects).
   Inside a narrow filter column the field therefore could not shrink next to its
   addon and wrapped underneath it — the search icon ended up on a line of its own.
   A group is a single control row, so it must never wrap, and the field inside it
   must be allowed to shrink.
   ========================================================================== */
.dashboard-wrapper .input-group {
    flex-wrap: nowrap;
    align-items: stretch;
}

.dashboard-wrapper .input-group > .form-control,
.dashboard-wrapper .input-group > .form-select,
.dashboard-wrapper .input-group > .form-control-sm,
.dashboard-wrapper .input-group > .form-select-sm,
.wcrb-repair-flow .wcrb-flow-filter .input-group .form-control {
    min-width: 0;
    flex: 1 1 auto;
}

.dashboard-wrapper .input-group > .input-group-text {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* The Repair Flow search column already has a sensible flex-basis; the generic
   150px floor on its inner field is what forced the wrap. */
.wcrb-repair-flow .wcrb-flow-filter-search .form-control {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .wcrb-topbar .wcrb-fullscreen-btn {
        display: none !important;
    }
}

/* ---------- Responsive pass ---------- *//* ---------- Responsive pass ---------- */@media (max-width: 991.98px) {
    .wcrb-topbar .wcrb-fullscreen-btn {
        display: none !important;
    }
}

/* ---------- Responsive pass ---------- *//* ---------- Responsive pass ---------- *//* ==========================================================================
   Input groups: the addon must stay inline with its field
   --------------------------------------------------------------------------
   Bootstrap's `.input-group` is `display: flex; flex-wrap: wrap`, and the dashboard
   gives `.form-control` a 150px min-width (set for the Repair Flow filter selects).
   Inside a narrow filter column the field therefore could not shrink next to its
   addon and wrapped underneath it — the search icon ended up on a line of its own.
   A group is a single control row, so it must never wrap, and the field inside it
   must be allowed to shrink.
   ========================================================================== */
.dashboard-wrapper .input-group {
    flex-wrap: nowrap;
    align-items: stretch;
}

.dashboard-wrapper .input-group > .form-control,
.dashboard-wrapper .input-group > .form-select,
.dashboard-wrapper .input-group > .form-control-sm,
.dashboard-wrapper .input-group > .form-select-sm,
.wcrb-repair-flow .wcrb-flow-filter .input-group .form-control {
    min-width: 0;
    flex: 1 1 auto;
}

.dashboard-wrapper .input-group > .input-group-text {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* The Repair Flow search column already has a sensible flex-basis; the generic
   150px floor on its inner field is what forced the wrap. */
.wcrb-repair-flow .wcrb-flow-filter-search .form-control {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .wcrb-topbar .wcrb-fullscreen-btn {
        display: none !important;
    }
}

/* ---------- Responsive pass ---------- *//* ---------- Responsive pass ---------- */@media (max-width: 991.98px) {
    .wcrb-topbar .wcrb-fullscreen-btn {
        display: none !important;
    }
}

/* ---------- Responsive pass ---------- *//* ---------- Responsive pass ---------- */
@media (max-width: 1199.98px) {
    .wcrb-topbar-secondary {
        /* Two creation buttons + the palette is too much for a portrait tablet. */
        display: none;
    }
}

@media (max-width: 767.98px) {
    .dashboard-wrapper .dashboard-content {
        padding: 1rem .85rem !important;
    }

    .wcrb-topbar {
        gap: .5rem;
        flex-wrap: nowrap;
    }

    .wcrb-page-title {
        font-size: var(--fs-base);
    }

    /* Phones: the title becomes secondary to the actions. Keep it (it is the page
       heading for assistive tech) but let a long title truncate to a short width so
       the New Job button and the account menu are never cut off. */
    .wcrb-topbar-heading {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 5.5rem;
    }

    .wcrb-topbar-actions {
        flex: 0 0 auto;
        overflow-x: visible;
    }

    /* Inline creation buttons are secondary on a phone: New Job stays reachable,
       New Estimate is available from the menu instead of being cut off. */
    .wcrb-topbar-secondary {
        display: none !important;
    }

    .wcrb-user-toggle .user-name {
        display: none;
    }

    .wcrb-user-toggle {
        padding-right: .55rem;
    }

    .wcrb-chart-box {
        height: 210px;
    }

    .appointment-map {
        height: 130px;
    }

    .dashboard-wrapper .card-header {
        padding: .85rem .95rem;
    }

    .dashboard-wrapper .latest-item,
    .dashboard-wrapper .priority-job-item {
        padding: .75rem .85rem !important;
    }

    /* The status strip on Jobs/Estimates used `col` auto-sizing, which squeezed a
       six-status row into unreadable slivers; two per row reads far better. */
    .dashboard-content > .row.g-3 > .col {
        flex: 1 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575.98px) {
    .wcrb-theme-menu {
        min-width: 12rem;
    }

    .dashboard-content > .row.g-3 > .col {
        flex: 1 0 100%;
        max-width: 100%;
    }

    .wcrb-scroll-sm,
    .wcrb-scroll-md,
    .wcrb-scroll-lg {
        max-height: none;
    }
}

/* ---------- Legacy generator markup (Reports) ---------- */
/* The report generators are written for Foundation, which the dashboard does not
   load: `small-12 medium-6 cell` became a plain div per column, so criteria
   fields stacked one per line and the sheet overflowed on phones. */
.wcrb-legacy-form .grid-x {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.wcrb-legacy-form .cell,
.wcrb-legacy-form .grid-x > .cell {
    flex: 1 1 240px;
    max-width: 100%;
}

.wcrb-legacy-form .small-12,
.wcrb-legacy-form .large-12 {
    flex-basis: 100%;
}

.wcrb-legacy-form fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    align-items: center;
}

@media (max-width: 767.98px) {
    .wcrb-legacy-form .cell,
    .wcrb-legacy-form .grid-x > .cell {
        flex-basis: 100%;
    }
}

/* ---------- Reports screen: sheet that fits the viewport ---------- */
.wcrb-report-view {
    background: var(--wcrb-surface);
    border-color: var(--wcrb-border);
    max-width: 100%;
}

@media (max-width: 991.98px) {
    .wcrb-report-view {
        padding: .75rem .5rem;
    }

    /* The sheet is a fixed 800px A4 preview; on tablets/phones it has to shrink
       and scroll rather than spill out of the card. */
    .wcrb-report-view .invoice-box,
    .wcrb-report-view .report-container {
        max-width: 100%;
        padding: 1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .wcrb-report-view .report-container .company_info {
        flex-wrap: wrap;
        gap: .75rem;
        text-align: left;
    }

    .wcrb-report-view .invoice_totals table {
        float: none;
        margin-left: auto;
    }
}

/* ---------- Sign-in card ---------- */
.auth-container {
    background: linear-gradient(135deg, var(--wcrb-brand) 0%, #0b1f38 100%);
}

.auth-card {
    background: var(--wcrb-surface);
    color: var(--wcrb-ink);
    border: 1px solid var(--wcrb-border);
}

.auth-tabs .nav-link {
    color: var(--wcrb-ink-muted);
}

.auth-tabs .nav-link.active {
    color: var(--wcrb-brand);
    border-bottom-color: var(--wcrb-brand);
}

/* ---------- Print: no chrome ---------- */
@media print {
    .wcrb-topbar,
    .wcrb-sidebar-backdrop {
        display: none !important;
    }
}