:root { --sidebar-width: 250px;
--topbar-height: auto;
--transition-speed: 0.3s; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 1.875rem;  --fw-light: 300;
--fw-normal: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700; --lh-tight: 1.25;
--lh-normal: 1.5;
--lh-relaxed: 1.75; --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;
} 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;
} 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;
} .dashboard-wrapper {
display: flex;
min-height: 100vh;
} .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);
}
.sidebar-header {
background: rgba(0, 0, 0, 0.2);
padding: 1rem;
}
.logo-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar-nav .nav-link {
border-radius: 8px;
margin-bottom: 4px;
transition: all 0.3s ease;
border: none;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
padding: 0.75rem 1rem;
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(5px);
color: #fff;
}
.sidebar-nav .nav-link.active {
background: rgba(59, 130, 246, 0.2);
border-left: 3px solid var(--color-primary);
} .main-content {
flex: 1;
margin-left: var(--sidebar-width);
transition: margin-left var(--transition-speed) ease;
min-height: 100vh;
} .top-bar {
position: sticky;
top: 0;
z-index: 999;
height: var(--topbar-height);
background: #fff;
border-bottom: 1px solid #e9ecef;
backdrop-filter: blur(10px);
} .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-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;
}  .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;
overflow: hidden;
} .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;
} .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;
} .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;
} .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;
} .badge {
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
padding: 0.375rem 0.75rem;
border-radius: 6px;
} .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 .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);
} .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 {
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); }
} .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 {
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;
} body.fullscreen .sidebar {
transform: translateX(-100%);
}
body.fullscreen .main-content {
margin-left: 0;
} [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;
} .bg-grey {
background-color: #ededed !important;
}
.sidebar-header img {
width: 100%;
height: auto;
max-height: 47px;
object-fit: contain;
display: block;
} .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-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-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;
}  @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;
} .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;
} [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;
}
} @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-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;
} #jobsTable_list {
overflow: visible !important;
}
#jobsTable_list .table-responsive {
overflow: visible !important;
}
#jobsTable_list .dropdown-menu {
position: fixed !important;
z-index: 1060 !important;
}