: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 {
    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 */
body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !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;
}

.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;
}
@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);
}

.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: #f4f7fb;
    --wcrb-dashboard-border: #e4eaf2;
    --wcrb-dashboard-ink: #172338;
    color: var(--wcrb-dashboard-ink);
    background: var(--wcrb-dashboard-bg);
}

.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 {
    color: var(--wcrb-dashboard-ink) !important;
    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. */