body{ margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; padding: 0;}
.bullet {  list-style-image: url(images/bullet.jpg)}
.title {  font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 15px; font-weight: bold; color: #2F4071; text-decoration: none}
.subtitle {  font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 13px; font-weight: bold; color: #2F4071; text-decoration: none}
.Smallsubtitle {  font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #2F4071; text-decoration: none; white-space: nowrap}
.whitetext {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; color: #FFFFFF; text-decoration: none}
.redtext {  font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 13px; font-weight: normal; color: #FF0000; text-decoration: none}
.whitetext:hover { color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; text-decoration: underline}

/* Only style tables that have both navtext AND nav-menu classes */
table.navtext.nav-menu {
    background-color: #f8f9fa;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 5px 0;
}

table.navtext.nav-menu a {
    padding: 4px 8px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

table.navtext.nav-menu a:hover {
    background-color: #e9ecef;
}

.text {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	color: #333;
	text-decoration: none;
	text-align: none;
	line-height: 1.5; /* Added - much better readability */
    letter-spacing: 0.01em; /* Added - subtle spacing improvement */
}
.smallboldtext {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: 600;
	color: #000000;
	text-decoration: none;
	text-align: none;
}
.navtext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #2F4071; text-decoration: none }

/*a {  font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 13px; font-weight: normal; color: #000000; text-decoration: underline}
a:hover {  font-family: Arial, Verdana, Helvetica, sans-serif; color: #999999;  font-size: 13px; font-weight: normal; text-decoration: none}
*/
a { 
    font-family: Arial, Verdana, Helvetica, sans-serif; 
    font-size: 13px; 
    font-weight: normal; 
    color: #2F4071; 
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover { 
    color: #1e2a4a; 
    text-decoration: underline; 
}
/*a.nav:link { font-family: Arial, Verdana, Helvetica, sans-serif; color: #2F4071; font-size: 13px; font-weight: bold; text-decoration: underline}
a.nav:visited { font-family: Arial, Verdana, Helvetica, sans-serif; color: #2F4071; font-size: 13px; font-weight: bold; text-decoration: underline}
a.nav:hover { font-family: Arial, Verdana, Helvetica, sans-serif; color: #CC0000; font-size: 13px; font-weight: bold; text-decoration: underline}
*/
a.nav:link, a.nav:visited {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    color: #2F4071;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none; /* Remove underline by default */
    transition: all 0.2s ease;
}

a.nav:hover {
    color: #CC0000;
    text-decoration: none; /* Keep it clean */
    transform: translateY(-1px); /* Subtle lift */
}
a.smallnav:link { font-family: Arial, Verdana, Helvetica, sans-serif; color: #2F4071; font-size: 10px; font-weight: bold; text-decoration: none}
a.smallnav:visited { font-family: Arial, Verdana, Helvetica, sans-serif; color: #2F4071; font-size: 10px; font-weight: bold; text-decoration: none}
a.smallnav:hover { font-family: Arial, Verdana, Helvetica, sans-serif; color: #CC0000; font-size: 10px; font-weight: bold; text-decoration: underline}
a.headernav {  font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #2F4071; text-decoration: none}
a.headernav:hover { font-family: Arial, Verdana, Helvetica, sans-serif; color: #CC0000; font-size: 16px; font-weight: bold; text-decoration: none}
a.footernav {  font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #2F4071; text-decoration: none}
a.footernav:hover { font-family: Arial, Verdana, Helvetica, sans-serif; color: #CC0000; font-size: 12px; font-weight: bold; text-decoration: none}
/*TR.DataA {background:#ffffff;color:black}
TR.DataB {background:#E5E5E5;color:black}
 TR.DataB:hover {background:#CCCCCC;color:black} */
 /* Softer alternating rows */
TR.DataA {
    background: #ffffff;
    transition: background-color 0.2s ease;
}

TR.DataB {
    background: #f0f0f0; /* softer gray */
    transition: background-color 0.2s ease;
}
/* Add hover effects to table rows without changing colors */
TR.DataA:hover, TR.DataB:hover {
    background-color: #e8f0fe;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	   transition: background-color 0.2s ease;
}
/*
TR.SmallA {background:#ffffff;color:black; font-size: 10px; font-weight: normal}
TR.SmallB {background:#E5E5E5;color:black; font-size: 10px; font-weight: normal}
*/
TR.SmallA {
    background: #ffffff;
    color: black; 
    font-size: 10px; 
    font-weight: normal;
    transition: background-color 0.2s ease;
}

TR.SmallB {
    background: #f0f0f0; /* Changed from #E5E5E5 to match DataB */
    color: black; 
    font-size: 10px; 
    font-weight: normal;
    transition: background-color 0.2s ease;
}

/* Add hover effects to SmallA and SmallB rows */
TR.SmallA:hover, TR.SmallB:hover {
    background-color: #e8f0fe;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: background-color 0.2s ease;
}
TR.SelecA {background:#ffffff;color:black; font-size: 11px; font-weight: bold}
TR.SelecB {background:#E5E5E5;color:black; font-size: 11px; font-weight: bold}
.select2-selection__rendered {font-family: Arial,  Verdana, Helvetica, sans-serif; font-size: 12px;}
.select2-results__options {font-family: Arial,  Verdana, Helvetica, sans-serif; font-size:12px;}
.hide {position: absolute !important; top: -9999px !important; left: -9999px !important;}
.simple-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.simple-modal-content {
    background-color: white;      /* White background for the modal container */
    margin: 20px auto;
    width: 80%;                   
    max-width: 900px;           
    max-height: 90vh;
    border-radius: 5px;
    position: relative;
    overflow: auto;              
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
	cursor: move; /* This makes it draggable */
}

.simple-modal-close {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 30px;
    cursor: pointer;
    color: #666;                 
    z-index: 1;
}

.simple-modal-close:hover {
    color: #000;
}

.simple-modal iframe {
    width: 100%;
    height: 80vh;                
    border: none;
    margin-top: 40px;
    display: block;
}
/* Modal Dragging Enhancements */
.simple-modal-content.dragging {
    opacity: 0.95;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: move !important;
}

/* Prevent iframe interference during drag */
.simple-modal-content.dragging iframe {
    pointer-events: none;
}

/* Modal Resize Handles */
.simple-modal-resize-handle {
    position: absolute;
    z-index: 10003;
    background: transparent;
}
.simple-modal-resize-handle:hover {
    background: rgba(47, 64, 113, 0.2);
}
/* Corner handles */
.resize-se { bottom: 0; right: 0; width: 16px; height: 16px; cursor: se-resize; }
.resize-sw { bottom: 0; left: 0; width: 16px; height: 16px; cursor: sw-resize; }
.resize-ne { top: 40px; right: 0; width: 16px; height: 16px; cursor: ne-resize; }
.resize-nw { top: 40px; left: 0; width: 16px; height: 16px; cursor: nw-resize; }
/* Edge handles */
.resize-e { top: 60px; right: 0; width: 8px; height: calc(100% - 80px); cursor: e-resize; }
.resize-w { top: 60px; left: 0; width: 8px; height: calc(100% - 80px); cursor: w-resize; }
.resize-s { bottom: 0; left: 20px; width: calc(100% - 40px); height: 8px; cursor: s-resize; }
/* Resizing state - override max-height constraints */
.simple-modal-content.resizing,
.simple-modal-content.resized {
    max-height: none !important;
    max-width: none !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.simple-modal-content.resizing iframe {
    pointer-events: none;
}

/* Modal header for dragging */
.modal-header {
    cursor: move;
    padding: 10px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #ddd;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Improve modal close button */
.simple-modal-close {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 30px;
    cursor: pointer;
    color: #666;
    z-index: 10002; /* Higher than modal content */
    transition: color 0.2s ease;
    line-height: 1;
    width: 30px;
    height: 30px;
    text-align: center;
}
.date-overdue { background-color: #ffcccc; font-weight: bold; }
.task-inline-edit {
    padding: 2px;
    margin: 1px;
    font-size: 11px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    position: relative;
    z-index: 1;
}
/* ===== Filter Forms ===== */
.filter-container {
    background-color: #f8f8f8;
    padding: 10px 12px;
    border-radius: 5px;
    margin-bottom: 5px;
}

.filter-row {
    margin-bottom: 8px;
}

.filter-item {
    display: inline-block;
    margin-right: 15px;
    white-space: nowrap;
}

.filter-item label {
    font-weight: 600;
    color: #333;
    margin-right: 5px;
}

.filter-item input[type="text"],
.filter-item input[type="date"],
.filter-item select {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
}

.filter-item input[type="date"] {
    width: 140px;
}

.filter-item input[type="submit"] {
    padding: 5px 15px;
    background-color: #2F4071; /* Matches your .title color */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.filter-item input[type="submit"]:hover {
    background-color: #1e2a4a;
}

.date-range {
    display: inline-block;
}
/* ===== Modern Updates added 06/25/25 ===== */

/* Modernize form inputs only */
input[type="text"]:focus, 
input[type="date"]:focus, 
select:focus, 
textarea:focus {
    outline: none;
    border-color: #4a5f8f;
    box-shadow: 0 0 0 2px rgba(74, 95, 143, 0.1);
}

/* Add transitions without changing existing styles */
a, input, button, select {
    transition: all 0.2s ease;
}

/*
a {
    color: #2F4071;
    text-decoration: none;
    transition: color 0.2s ease;
}
*/
/* Better Edit/Delete link styling 
a[href*="Edit"], a[href*="Del"] {
    font-size: 12px;
    padding: 2px 6px;
    margin: 0 2px;
    border-radius: 3px;
}

a[href*="Edit"]:hover {
    background-color: #2F4071;
    color: white !important;
    text-decoration: none;
}

a[href*="Del"]:hover {
    background-color: #dc3545;
    color: white !important;
    text-decoration: none;
}*/

/* ===== Progress Bars ===== */
.progress-bar-container {
    width: 150px;
    height: 20px;
    background-color: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    border: 1px solid #ccc;
}

.progress-bar-fill {
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 10px;
}

.progress-success {
    background-color: #28a745;
    background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

.progress-info {
    background-color: #17a2b8;
}

.progress-warning {
    background-color: #ffc107;
}

.progress-danger {
    background-color: #dc3545;
}

.progress-text {
    font-size: 12px;
    color: #333;
    font-weight: 600;
    vertical-align: middle;
}

/* ===== Badges ===== */
.badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 10px;
}

.badge-danger {
    background-color: #dc3545;
}

.badge-warning {
    background-color: #ffc107;
    color: #000;
}

.badge-success {
    background-color: #28a745;
}

.badge-info {
    background-color: #17a2b8;
}

.badge-secondary {
    background-color: #6c757d;
}

/* ===== Quick Filter Buttons ===== */
.quick-filters {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #ddd;
}

.quick-filter-btn {
    display: inline-block;
    padding: 4px 10px;
    margin-right: 8px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
    font-weight: normal;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.quick-filter-btn:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    text-decoration: none;
}

.quick-filter-btn.active {
    background-color: #2F4071;
    color: white;
    border-color: #2F4071;
}

/* ===== Info Messages ===== */
.info-message {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 13px;
}

.info-message a {
    color: #0c5460;
    text-decoration: underline;
    font-weight: 600;
}

.info-message a:hover {
    color: #062c33;
}

/* ============================================
   WRD Modern UI Components
   Scoped to .page-container to prevent conflicts
   Added: December 2024
   ============================================ */

.page-container * {
    box-sizing: border-box;
}

.page-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    color: #333;
    line-height: 1.5;
}

.page-container .page-inner {
    width: 100%;
    min-width: 0;
    max-width: 1500px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* ===== Page Header ===== */
.page-container .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.page-container .page-title {
    font-size: 22px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    padding: 0;
}

/* ===== Secondary Navigation ===== */
.page-container .secondary-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid #dee2e6;
}

.page-container .secondary-nav-label {
    font-weight: 600;
    color: #2F4071;
    font-size: 13px;
}

.page-container .secondary-nav-links {
    display: flex;
    gap: 4px;
}

.page-container .secondary-nav-link {
    padding: 5px 12px;
    border-radius: 4px;
    text-decoration: none;
    color: #6c757d;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.page-container .secondary-nav-link:hover {
    background: #f8f9fa;
    color: #2F4071;
}

.page-container .secondary-nav-link.active {
    background: #2F4071;
    color: white;
}

/* ===== Standalone Secondary Navigation (outside page-container) ===== */
/* Section-level submenus (SelectSubMenu, BBSubMenu) that sit between
   HeaderMenu and page-container. The more specific .page-container rules
   above override these when the nav IS inside page-container. */
.secondary-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    margin: 0;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.secondary-nav-label {
    font-weight: 600;
    color: #2F4071;
    font-size: 13px;
    white-space: nowrap;
}

.secondary-nav-links {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.secondary-nav-link {
    padding: 5px 12px;
    border-radius: 4px;
    text-decoration: none;
    color: #6c757d;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.secondary-nav-link:hover {
    background: #e9ecef;
    color: #2F4071;
}

.secondary-nav-link.active {
    background: #2F4071;
    color: white;
}

/* ===== Toolbar Card (Filters & Actions) ===== */
.page-container .toolbar-card {
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.page-container .toolbar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.page-container .filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-container .filter-label {
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
}

.page-container .filter-select {
    padding: 7px 10px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    color: #495057;
    background: #f8f9fa;
    transition: all 0.2s ease;
    min-width: 130px;
    cursor: pointer;
}

.page-container .filter-select:hover {
    border-color: #adb5bd;
}

.page-container .filter-select:focus {
    outline: none;
    border-color: #2F4071;
    background: white;
    box-shadow: 0 0 0 2px rgba(47, 64, 113, 0.1);
}

.page-container .toolbar-spacer {
    flex: 1;
}

.page-container .toolbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.page-container .clear-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #6c757d;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 4px;
}

.page-container .clear-link:hover {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.05);
}

/* ===== Modern Buttons ===== */
.page-container .btn {
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-family: inherit;
    white-space: nowrap;
}

.page-container .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #0891b2 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.page-container .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
}

.page-container .btn-secondary {
    background: #e9ecef;
    color: #495057;
}

.page-container .btn-secondary:hover {
    background: #dee2e6;
}

.page-container .btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}

.page-container .btn-danger-outline {
    background: transparent;
    color: #dc3545;
    border: 1px solid #dc3545;
    padding: 5px 10px;
}

.page-container .btn-danger-outline:hover {
    background: #dc3545;
    color: white;
}

/* ===== Status Bar ===== */
.page-container .status-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.page-container .status-bar-label {
    font-weight: 600;
    color: #495057;
    font-size: 13px;
}

.page-container .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.page-container .badge-pending {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
}

.page-container .badge-processing {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #17a2b8;
}

.page-container .badge-processing i {
    animation: page-container-spin 2s linear infinite;
}

.page-container .badge-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #dc3545;
}

.page-container .badge-orphaned {
    background: #fff;
    color: #dc3545;
    border: 1px dashed #dc3545;
}

.page-container .badge-success {
    background: #d4edda;
    color: #155724;
}

@keyframes page-container-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== Refresh Notice ===== */
.page-container .refresh-notice {
    background: #d4edda;
    border: 1px solid #28a745;
    border-radius: 6px;
    padding: 8px 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #155724;
    font-weight: 500;
}

.page-container .refresh-notice i {
    animation: page-container-spin 2s linear infinite;
}

/* ===== Results Bar ===== */
.page-container .results-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 2px;
}

.page-container .results-count {
    font-size: 13px;
    color: #6c757d;
}

.page-container .results-count strong {
    color: #2c3e50;
    font-weight: 600;
}

.page-container .results-meta {
    font-size: 12px;
    color: #adb5bd;
}

/* ===== Data Table ===== */
.page-container .table-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 2rem;
}

.page-container .data-table {
    width: 100%;
    border-collapse: collapse;
}

.page-container .data-table thead {
    background: linear-gradient(135deg, #2F4071 0%, #1e2a4a 100%);
}

.page-container .data-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.95);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.page-container .data-table th a {
    color: rgba(255,255,255,0.95);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.page-container .data-table th a:hover {
    color: white;
}

.page-container .data-table th .sort-icon {
    font-size: 9px;
    opacity: 0.7;
}

.page-container .data-table tbody tr {
    border-bottom: 1px solid #e9ecef;
    transition: all 0.15s ease;
}

.page-container .data-table tbody tr:last-child {
    border-bottom: none;
}

.page-container .data-table tbody tr:hover {
    background: #f8fafc;
}

.page-container .data-table td {
    padding: 12px 16px;
    font-size: 14px;
    color: #495057;
    vertical-align: middle;
}

/* Data Dense variant - for tables with many columns */
.page-container .data-table.data-dense th {
    font-size: 11px;
    padding: 6px 8px;
}
.page-container .data-table.data-dense td,
.page-container .data-table.data-dense td a {
    font-size: 11px;
    padding: 5px 8px;
}

/* Cell Variations */
.page-container .cell-title {
    font-weight: 600;
    color: #2F4071;
}

.page-container .cell-title a {
    color: #2F4071;
    text-decoration: none;
}

.page-container .cell-title a:hover {
    color: #1e2a4a;
    text-decoration: underline;
}

.page-container .cell-mono {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 12px;
    color: #666;
}

.page-container .cell-size {
    text-align: right;
    color: #6c757d;
    font-variant-numeric: tabular-nums;
}

.page-container .cell-muted {
    color: #adb5bd;
    font-style: italic;
}

.page-container .cell-danger {
    color: #dc3545;
}

.page-container .cell-actions {
    white-space: nowrap;
    text-align: center;
}

/* Row States */
.page-container .row-syncing {
    background: rgba(23, 162, 184, 0.04);
}

.page-container .row-orphaned {
    background: rgba(220, 53, 69, 0.03);
}

.page-container .row-error {
    background: rgba(220, 53, 69, 0.03);
}

/* ===== Status Pills ===== */
.page-container .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.page-container .status-pill .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.page-container .pill-complete {
    background: rgba(40, 167, 69, 0.12);
    color: #1e7e34;
}

.page-container .pill-pending {
    background: rgba(255, 193, 7, 0.15);
    color: #856404;
}

.page-container .pill-processing {
    background: rgba(23, 162, 184, 0.12);
    color: #0c5460;
}

.page-container .pill-processing .dot {
    animation: page-container-pulse 1.5s ease-in-out infinite;
}

.page-container .pill-error {
    background: rgba(220, 53, 69, 0.12);
    color: #bd2130;
}

.page-container .pill-orphaned {
    background: transparent;
    color: #dc3545;
    border: 1px dashed #dc3545;
    padding: 3px 9px;
}

.page-container .pill-legacy {
    background: #f1f3f4;
    color: #6c757d;
}

@keyframes page-container-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* File Indicators */
.page-container .file-indicator {
    margin-left: 5px;
    font-size: 11px;
}

.page-container .indicator-warning {
    color: #ffc107;
}

.page-container .indicator-syncing {
    color: #17a2b8;
    animation: page-container-spin 2s linear infinite;
}

/* ===== Empty State ===== */
.page-container .empty-state {
    text-align: center;
    padding: 50px 20px;
}

.page-container .empty-state-icon {
    font-size: 40px;
    color: #dee2e6;
    margin-bottom: 12px;
}

.page-container .empty-state-text {
    font-size: 14px;
    color: #6c757d;
}

/* ===== Responsive Breakpoints ===== */
/* ===== Job Summary (jobmgmt/JobSummary.cfm) =====
   New components only - tables, pills, buttons and the nav reuse the classes above. */

/* Two more status pills: List Order / Ordered (blue) and Review (violet) */
.page-container .pill-info,
.js-ctx .pill-info {
    background: rgba(37, 99, 235, 0.10);
    color: #1d4ed8;
}

.page-container .pill-review,
.js-ctx .pill-review {
    background: rgba(111, 66, 193, 0.12);
    color: #5a32a3;
}

/* Context strip: fixed under the navbar, slides in once the job header scrolls away.
   It sits outside .page-container, so it carries its own pill basics. */
.js-ctx {
    --js-nav-h: 99px;
    position: fixed;
    top: var(--js-nav-h);
    left: 0;
    right: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 24px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.js-ctx.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.js-ctx-title {
    font-weight: 650;
    color: #2F4071;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.js-ctx-sub {
    color: #6c757d;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.js-ctx-right {
    margin-left: auto;
}

.js-ctx .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.js-ctx .status-pill .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.js-ctx .pill-pending { background: rgba(255, 193, 7, 0.15); color: #856404; }
.js-ctx .pill-processing { background: rgba(23, 162, 184, 0.12); color: #0c5460; }
.js-ctx .pill-complete { background: rgba(40, 167, 69, 0.12); color: #1e7e34; }
.js-ctx .pill-legacy { background: #f1f3f4; color: #6c757d; }

/* Job header card */
.page-container .js-header {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.page-container .js-header-top {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 18px 10px;
}

.page-container .js-title {
    margin: 0;
    padding: 0;
    font-size: 19px;
    font-weight: 650;
    color: #2F4071;
    line-height: 1.35;
}

/* Job number: navy outline on a light fill - white-on-navy (reverse) type was hard to read */
.page-container .js-jobnum {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 9px;
    border: 1.5px solid #2F4071;
    border-radius: 6px;
    background: #f4f6fb;
    color: #2F4071;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.6px;
    vertical-align: 2px;
}

.page-container .js-type-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 9px;
    border: 1px solid #d5ddf0;
    border-radius: 10px;
    background: #eef2fb;
    color: #2F4071;
    font-size: 11px;
    font-weight: 600;
    vertical-align: 3px;
}

.page-container .js-type-chip.is-rental {
    background: #fdf6ec;
    border-color: #f0dcc0;
    color: #7c5312;
}

.page-container .js-meta {
    margin-top: 2px;
    font-size: 12.5px;
    color: #6c757d;
}

.page-container .js-meta b {
    color: #495057;
    font-weight: 600;
}

.page-container .js-keyfields {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-left: auto;
}

.page-container .js-field,
.page-container .js-cell {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #8a939e;
}

.page-container .js-val,
.page-container .js-v {
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #2c3e50;
    overflow-wrap: anywhere;
}

.page-container .js-v a {
    color: #2F4071;
}

.page-container .js-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 8px;
    padding: 2px 8px 6px;
    border-top: 1px solid #f0f2f5;
}

.page-container .js-cell {
    padding: 8px 10px;
}

.page-container .js-cell.is-wide,
.page-container .js-cell.is-half {
    grid-column: span 2;
}

.page-container .js-cell.is-full {
    grid-column: 1 / -1;
}

.page-container .js-muted {
    color: #adb5bd;
    font-weight: 500;
}

.page-container .js-alert {
    color: #dc3545;
    font-weight: 700;
}

.page-container .js-yes {
    color: #1e7e34;
}

/* Long notes: two lines at rest, newlines kept */
.page-container .js-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: pre-line;
    font-weight: 500;
    line-height: 1.45;
    color: #495057;
}

/* Job notes carry the instructions: six lines before they clamp */
.page-container .js-clamp.is-long {
    -webkit-line-clamp: 6;
}

/* "Show more": room to read, but never the whole page - a very long copy note scrolls inside its own box instead of
   pushing the lists off the screen */
.page-container .js-clamp.is-open {
    display: block;
    -webkit-line-clamp: unset;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 10px;
}

.page-container .js-more {
    padding: 0;
    border: 0;
    background: none;
    color: #2F4071;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.page-container .js-more i {
    margin-left: 3px;
    font-size: 10px;
}

.page-container .js-more:hover {
    text-decoration: underline;
}

.page-container .js-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 9px 18px;
    border-top: 1px solid #eef1f4;
    border-radius: 0 0 12px 12px;
    background: #fbfcfd;
    font-size: 12.5px;
    color: #9aa3ae;
}

.page-container .js-flags-title {
    font-weight: 700;
    color: #2c3e50;
}

.page-container .js-flag.is-on {
    color: #1e7e34;
    font-weight: 600;
}

.page-container .js-flag-qb {
    margin-left: auto;
    color: #495057;
}

/* Nav row: today's links, all visible; the stage-relevant one takes .active */
.page-container .js-nav .secondary-nav-links {
    flex-wrap: wrap;
    row-gap: 4px;
    flex: 1;
}

.page-container .js-nav .secondary-nav-link.is-alert {
    color: #dc3545;
    font-weight: 600;
}

.page-container .js-nav .secondary-nav-link.is-dim {
    color: #adb5bd;
}

.page-container .js-nav .js-nav-end {
    margin-left: auto;
}

/* "Classic view": the way back to the old job page during the transition - a real button, easy to find */
.page-container .js-nav .js-classic-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid #c9d1e4;
    border-radius: 6px;
    background: #fff;
    color: #2F4071;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.page-container .js-nav .js-classic-btn:hover {
    background: #eef2fb;
    border-color: #2F4071;
}

.page-container .js-title a {
    color: inherit;
    font: inherit;
    text-decoration: none;
}

.page-container .js-title a:hover {
    text-decoration: underline;
}

/* The pen after the title: "this is where you edit the job" - the same mark as on the Tasks / Job Services bars */
.page-container .js-title-pen {
    margin-left: 2px;
    color: #c0c6cd;
    font-size: 13px;
    vertical-align: middle;
}

.page-container .js-title a:hover .js-title-pen {
    color: #2563eb;
}

.page-container a.js-alert {
    font: inherit;
    font-weight: 700;
}

/* Links inside the dense lists table: the shared .data-dense rule pads every cell link - not wanted here */
.page-container .js-lists.data-dense td a {
    padding: 0;
}

.page-container .js-lists.data-dense td a.js-chip {
    padding: 1px 8px;
}

.page-container .js-lists th a {
    font-size: inherit;
    font-weight: inherit;
}

/* Row actions: pencil at the start of a row, QB / delete at the end */
.page-container .js-lists .js-act {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

.page-container a.js-del {
    margin-left: 6px;
    color: #b3bac3;
}

.page-container a.js-del:hover {
    color: #dc3545;
}

.page-container .js-lists a.js-qb {
    color: #1e7e34;
    font-size: 11px;
    font-weight: 700;
}

.page-container .js-lists .js-mail {
    color: #8a939e;
    font-size: 11px;
}

/* List Manager / Data manager names open the per-list cost editors */
.page-container .js-lists a.js-chip {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid #e3e8f2;
    border-radius: 5px;
    background: #f4f6fa;
    color: #2F4071;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.page-container .js-lists a.js-chip:hover {
    border-color: #2F4071;
    background: #eef2fb;
}

.page-container .js-lists a.js-chip.is-data {
    border-color: #e6e9ee;
    background: #f6f7f9;
    color: #495057;
}

.page-container .js-lists a.js-chip.is-data:hover {
    border-color: #8a939e;
    background: #eef0f3;
}

/* Save Sort is a POST, styled to sit among the utility links */
.page-container .js-inline-form {
    display: inline;
    margin: 0;
}

.page-container .js-inline-form button {
    padding: 4px 9px;
    line-height: inherit;
    border: 0;
    border-radius: 4px;
    background: none;
    color: #6c757d;
    font: inherit;
    font-family: Arial, Verdana, Helvetica, sans-serif;   /* what every link on the page gets from the site-wide a rule */
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.page-container .js-inline-form button:hover {
    background: #fff;
    color: #2F4071;
}

.page-container .js-strip-link {
    color: #2F4071;
    font-weight: 600;
    text-decoration: none;
}

.page-container .js-strip-link:hover {
    text-decoration: underline;
}

/* Editable cells: click ANYWHERE in the cell to edit its row (the page's click handler looks for the cell's value span;
   a link inside it - Ordered's count, the status mail link - is still the link). A faint outline on the value when
   the cell is hovered says "you can type here"; an empty cell keeps a little width (and shows a dash while the row
   is hovered) so the value has somewhere to be. */
.page-container .js-lists .js-ed {
    border-radius: 3px;
    cursor: text;
}

.page-container .js-lists tr:not(.js-editing) td:has(> .js-ed) {
    cursor: text;
}

.page-container .js-lists tr:not(.js-editing) td:has(> .js-ed):hover > .js-ed,
.page-container .js-lists tr:not(.js-editing) .js-ed:hover {
    background: #f2f6fd;
    box-shadow: 0 0 0 1px #cfdbf5;
}

.page-container .js-lists .js-ed:empty {
    display: inline-block;
    min-width: 34px;
    min-height: 1.2em;
    vertical-align: middle;
}

.page-container .js-lists tr:not(.js-editing):hover .js-ed:empty::before {
    content: "-";
    color: #c0c6cd;
}

/* Row-at-a-time editing: inputs sized to sit inside the dense rows */
.page-container .js-lists tr.js-editing,
.page-container .js-lists tr.js-editing:hover {
    background: #f4f8ff;
}

/* Sized so the row does not move when it goes into edit mode: the width is set per cell by the script (the room the
   text had), the height is fixed and the negative margin keeps it inside the text line. */
.page-container .js-lists .js-input {
    box-sizing: border-box;
    max-width: 100%;
    height: 20px;
    margin: -3px 0;
    padding: 0 4px;
    vertical-align: middle;
    border: 1px solid #b9c4d8;
    border-radius: 4px;
    background: #fff;
    color: #2c3e50;
    font: inherit;
    font-size: 11px;
}

.page-container .js-lists .js-num .js-input {
    text-align: right;
}

.page-container .js-lists select.js-input {
    padding: 0 1px;
}

/* While a row is edited the cells must not wrap or grow */
.page-container .js-lists tr.js-editing td {
    white-space: nowrap;
}

.page-container .js-lists .js-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.page-container .js-lists .js-input.is-saved {
    border-color: #28a745;
}

.page-container .js-lists .js-input.is-error {
    border-color: #dc3545;
    background: #fff5f5;
}

/* Drag handle */
.page-container .js-lists .js-grip {
    margin-right: 7px;
    color: #c0c6cd;
    cursor: grab;
}

.page-container .js-lists .js-grip:hover {
    color: #2F4071;
}

.page-container .js-lists tr.js-dragging td {
    background: #eef2fb;
    opacity: 0.7;
}

/* Small confirmation after an in-page save (lives on <body>, outside .page-container) */
.js-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 950;
    transform: translate(-50%, 20px);
    padding: 9px 18px;
    border-radius: 8px;
    background: #1e2a4a;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.js-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.js-toast.is-warn {
    background: #a94442;
}

/* One-time message after an action (Save Sort) */
.page-container .js-notice {
    margin-bottom: 10px;
    padding: 8px 14px;
    border: 1px solid #c8e6c9;
    border-radius: 8px;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 13px;
}

.page-container .js-notice.is-warn {
    border-color: #f5c6cb;
    background: #fdecea;
    color: #a94442;
}

/* Lists section: a collapsible bar above the table. The bar is a strip; the table card stays its own card below it.
   (Always rendered open - see JobSummary.cfm - so a job never loads looking as if it had no lists.) */
.page-container details.js-section > summary.js-strip {
    margin-bottom: 8px;
    cursor: pointer;
}

.page-container details.js-section:not([open]) > summary.js-strip {
    margin-bottom: 12px;
}

.page-container details.js-section[open] > summary .js-chev {
    transform: rotate(180deg);
}

/* The utility links ride in the bar, right after the summary; nothing to act on while the table is hidden */
.page-container summary.js-strip .js-utils {
    margin-left: 6px;
    padding: 0 0 0 12px;
    border-left: 1px solid #e3e8f2;
}

.page-container details.js-section:not([open]) .js-utils {
    display: none;
}

.page-container summary.js-strip .js-utils a:hover,
.page-container summary.js-strip .js-utils a.is-on,
.page-container summary.js-strip .js-inline-form button:hover {
    background: #f0f2f6;
}

/* Utility links (in the Lists bar) */
.page-container .js-utils {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 0 2px 8px;
}

.page-container .js-utils a {
    padding: 4px 9px;
    border-radius: 4px;
    color: #6c757d;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.page-container .js-utils a:hover,
.page-container .js-utils a.is-on {
    background: #fff;
    color: #2F4071;
}

/* Lists table extras */
.page-container .js-tscroll {
    overflow-x: auto;
}

/* Model ticks (Prospect jobs): a narrow centred column; the header box is "all / none" (mixed = a dash) */
.page-container .js-lists .js-model {
    width: 52px;
    text-align: center;
    white-space: nowrap;
}

.page-container .js-lists th.js-model label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font: inherit;
}

.page-container .js-lists .js-model input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    vertical-align: middle;
    accent-color: #2F4071;
    cursor: pointer;
}

.page-container .js-lists .js-num,
.page-container .js-svc .js-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.page-container .js-lists .js-po {
    max-width: 175px;
}

.page-container .js-star {
    color: #dc3545;
}

.page-container .js-sfilter {
    margin-left: 8px;
    color: #dc3545;
    font-size: 12px;
    font-weight: 600;
}

.page-container .js-split {
    font-size: 11px;
    font-weight: 700;
}

.page-container .js-lists tr.js-cancelled td {
    color: #9aa3ad;
}

.page-container .js-lists tr.js-total td {
    background: #f8f9fa;
    font-weight: 700;
    color: #2c3e50;
}

.page-container .js-lists tr.js-grand td {
    border-top: 2px solid #2F4071;
}

.page-container .js-legend {
    margin-left: 6px;
    font-weight: 500;
    color: #6c757d;
}

.page-container .js-lists td.js-svc-totals {
    text-align: right;
    font-weight: 500;
    color: #6c757d;
}

.page-container .js-lists td.js-svc-totals b {
    margin: 0 14px 0 4px;
    color: #2c3e50;
}

/* Per-list services sub-row. The markup comes from jobmgmt/ListServices.cfm (shared with the
   classic page and the QB batch), so it is restyled here rather than forked. */
.page-container .js-lists tr.js-svc-row,
.page-container .js-lists tr.js-svc-row:hover {
    background: #fafbfd;
}

.page-container .js-lists tr.js-svc-row > td {
    padding: 4px 10px 10px;
}

.page-container .js-lists table.Smallsubtitle {
    border-collapse: collapse;
    min-width: 420px;
    border: 1px solid #e3e8f2;
    border-radius: 6px;
    background: #fff;
}

.page-container .js-lists table.Smallsubtitle tr,
.page-container .js-lists table.Smallsubtitle tr:hover {
    border-bottom: 0;
    background: transparent;
}

.page-container .js-lists table.Smallsubtitle td {
    padding: 3px 12px;
    font-size: 12px;
    color: #495057;
}

.page-container .js-lists table.Smallsubtitle td.subtitle {
    padding-top: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #8a939e;
}

/* Strips: one generic component - icon, label, summary, optional right side and body */
.page-container .js-strip {
    margin-bottom: 12px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    font-size: 13px;
    color: #495057;
}

.page-container .js-strip-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    list-style: none;
}

.page-container summary.js-strip-head {
    cursor: pointer;
}

.page-container summary.js-strip-head::-webkit-details-marker {
    display: none;
}

.page-container .js-strip-icon {
    width: 16px;
    color: #8a939e;
    text-align: center;
}

.page-container .js-strip-label {
    font-weight: 700;
    color: #2c3e50;
}

/* The strip title (icon + label) is the way into its editor - nothing is parked at the far right of a wide screen */
.page-container .js-strip-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: inherit;
    text-decoration: none;
}

.page-container .js-strip-pen {
    margin-left: -4px;
    color: #c0c6cd;
    font-size: 10px;
}

.page-container a.js-strip-title:hover .js-strip-label,
.page-container a.js-strip-title:hover .js-strip-icon,
.page-container a.js-strip-title:hover .js-strip-pen {
    color: #2563eb;
}

.page-container a.js-strip-title:hover .js-strip-label {
    text-decoration: underline;
}

.page-container .js-strip-summary b,
.page-container .js-strip-note b {
    color: #2F4071;
}

.page-container .js-strip-note {
    color: #6c757d;
}

.page-container .js-chev {
    color: #8a939e;
    font-size: 11px;
    transition: transform 0.15s ease;
}

.page-container details.js-strip[open] .js-chev {
    transform: rotate(180deg);
}

.page-container .js-strip-body {
    padding: 0 18px 12px;
    border-top: 1px solid #eef1f4;
}

.page-container .js-svc {
    width: 100%;
    max-width: 640px;
    border-collapse: collapse;
}

.page-container .js-svc th {
    padding: 9px 0;
    border-bottom: 1px solid #eef1f4;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #8a939e;
}

.page-container .js-svc td {
    padding: 6px 0;
    font-size: 13px;
}

.page-container .js-svc tr.js-svc-total td {
    border-top: 1px solid #dde2e8;
    font-weight: 700;
    color: #2c3e50;
}

/* Rental Order (jobmgmt/RentalOrder.cfm): a nav-row entry that has to POST, and the mailer's list-order terms */
.page-container .js-nav-form button.secondary-nav-link {
    border: 0;
    background: none;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}

.page-container .js-nav-form button.secondary-nav-link.active {
    background: #2F4071;
    color: #fff;
}

.page-container .js-inline-form button.js-strip-link {
    color: #2F4071;
    font-size: 13px;
}

.page-container .js-disclaimer {
    padding: 12px 18px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #495057;
}

/* Review panel shown before Email Data (that send can also invoice the client and create the QuickBooks invoices) */
.page-container .js-review {
    margin-bottom: 12px;
    padding: 14px 18px;
    border: 1px solid #f0dcc0;
    border-left: 4px solid #e0a800;
    border-radius: 12px;
    background: #fffdf7;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    font-size: 13px;
    color: #495057;
}

.page-container .js-review[hidden] {
    display: none;
}

.page-container .js-review-head {
    font-size: 14px;
    font-weight: 700;
    color: #7c5312;
}

.page-container .js-review-head i {
    margin-right: 6px;
    color: #e0a800;
}

.page-container .js-review-text {
    margin: 6px 0 8px;
}

.page-container .js-review .js-svc {
    margin-bottom: 4px;
}

.page-container .js-review-sub {
    margin: 8px 0 2px;
    font-size: 12px;
    font-weight: 700;
    color: #2c3e50;
}

/* Job services and list data services side by side; one column on narrow screens */
.page-container .js-review-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 4px 36px;
    max-width: 1200px;
}

.page-container .js-review-grand {
    margin-top: 10px;
    font-size: 13.5px;
    color: #2c3e50;
}

.page-container .js-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* Tasks preview: read-only lines, each one opens the Job Tasks modal */
.page-container .js-tasklist {
    max-width: 900px;
}

.page-container .js-tasklist tbody tr {
    border-bottom: 1px solid #f0f2f5;
    cursor: pointer;
}

.page-container .js-tasklist tbody tr:last-child {
    border-bottom: 0;
}

.page-container .js-tasklist tbody tr:hover {
    background: #f8fafc;
}

.page-container .js-tasklist td,
.page-container .js-tasklist th {
    padding-right: 18px;
}

@media (max-width: 992px) {
    .page-container .js-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-container .js-keyfields {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .js-ctx {
        --js-nav-h: 69px;
        padding: 7px 12px;
    }

    .js-ctx-sub {
        display: none;
    }
}

/* Print = the job page itself (Job Summary / Rental Order "Print" calls window.print()). Landscape, no menus, links,
   buttons or drag handles; the lists table is not clipped; the navy header row and the pills keep their colours. */
/* (the landscape @page rule lives in JobSummary.cfm / RentalOrder.cfm themselves: @page cannot be scoped to a class,
   and in this shared stylesheet it would turn every page of the site landscape) */
@media print {
    .js-ctx,
    .page-container .secondary-nav,
    .page-container .js-utils,
    .page-container .js-classic-btn,
    .page-container .js-del,
    .page-container .js-grip,
    .page-container .js-more,
    .page-container .js-strip-link,
    .page-container .js-review,
    .simple-modal {
        display: none !important;
    }
    body {
        background: #fff !important;
    }
    .page-container {
        padding: 0 !important;
        background: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .page-container .page-inner {
        max-width: none !important;
        padding: 0 !important;
    }
    .page-container .js-header,
    .page-container .js-section,
    .page-container .table-card {
        box-shadow: none !important;
        border: 1px solid #dde2ea;
    }
    .page-container .js-tscroll {
        overflow: visible !important;
    }
    .page-container .js-lists {
        font-size: 10.5px;
    }
    .page-container .js-lists th,
    .page-container .js-lists td {
        padding: 4px 6px !important;
    }
    .page-container .js-lists tr {
        page-break-inside: avoid;
    }
    .page-container a {
        color: inherit !important;
        text-decoration: none !important;
    }
}

@media (max-width: 1200px) {
    .page-container .toolbar-row {
        gap: 10px;
    }
    .page-container .filter-select {
        min-width: 110px;
    }
}

@media (max-width: 992px) {
    .page-container {
        padding: 12px;
    }

    .page-container .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .page-container .toolbar-row {
        flex-wrap: wrap;
    }

    .page-container .toolbar-spacer {
        display: none;
    }

    .page-container .toolbar-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 8px;
    }

    .page-container .hide-tablet {
        display: none;
    }

    /* Secondary nav responsive - tablet */
    .secondary-nav {
        padding: 6px 12px;
        gap: 8px;
    }

    .secondary-nav-link {
        padding: 4px 10px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    /* Secondary nav responsive - mobile */
    .secondary-nav {
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 12px;
        gap: 6px;
    }

    .secondary-nav-links {
        flex-wrap: wrap;
        gap: 4px;
    }

    .secondary-nav-link {
        padding: 6px 10px;
        font-size: 12px;
    }

    .page-container .page-title {
        font-size: 18px;
    }

    .page-container .filter-group {
        flex: 1;
        min-width: 140px;
    }

    .page-container .filter-label {
        display: none;
    }

    .page-container .filter-select {
        width: 100%;
    }

    .page-container .status-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .page-container .table-card {
        overflow-x: auto;
    }

    .page-container .data-table {
        min-width: 800px;
    }

    .page-container .hide-mobile {
        display: none;
    }
}

/* ===== Pagination ===== */
.page-container .pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-container .pagination-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 15px 0;
}

.page-container .pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    color: #2F4071;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
}

.page-container .pagination-btn:hover {
    background: #f8f9fa;
    border-color: #2F4071;
}

.page-container .pagination-btn.disabled {
    color: #adb5bd;
    pointer-events: none;
}

.page-container .pagination-pages {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-container .pagination-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    color: #495057;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.15s ease;
}

.page-container .pagination-page:hover {
    background: #f8f9fa;
    border-color: #2F4071;
}

.page-container .pagination-page.active {
    background: #2F4071;
    border-color: #2F4071;
    color: white;
}

.page-container .pagination-ellipsis {
    color: #6c757d;
    padding: 0 4px;
}

/* ============================================
   Modern Navigation & Footer Styles
   For HeaderMenu.cfm and FooterMenu.cfm
   Updated: Jan 2026
   ============================================ */

/* Navbar container */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #ffffff 0%, #e0e2e6 100%);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border-bottom: 1px solid #2F4071;
    z-index: 1000;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Inner container */
.navbar .container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0.75rem 20px;
    display: flex;
    align-items: center;
}

/* Logo/brand */
.nav-brand a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.nav-logo {
    height: 73px;
    width: auto;
}

/* Navigation menu - pushed right via margin-left: auto */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    margin: 0;
    margin-left: auto;
    padding: 0;
    align-items: center;
}

/* Nav links with animated underline */
.nav-link {
    color: #1e293b;
    font-weight: 600;
    font-size: 16px;
    padding: 0.5rem 0;
    text-decoration: none;
    position: relative;
    transition: color 0.2s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #2F4071;
    transition: width 0.3s ease;
}

.nav-link:hover {
    color: #2F4071;
    text-decoration: none;
}

.nav-link:hover::after {
    width: 100%;
}

/* Active state - navy pill with white text */
.nav-link.active {
    background: #2F4071;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
}

.nav-link.active::after {
    display: none;
}

/* Logout button - matches Apply button color (#2F4071) */
.nav-logout {
    background: #2F4071;
    color: white;
    padding: 8px 18px;
    border-radius: 6px;
    margin-left: 1.5rem;
    font-weight: 500;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(47, 64, 113, 0.25);
    transition: all 0.2s ease;
}

.nav-logout:hover {
    background: #1e2a4a;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(47, 64, 113, 0.35);
    color: white;
    text-decoration: none;
}

.nav-logout::after {
    display: none;
}

/* Hamburger toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.nav-toggle span {
    width: 25px;
    height: 3px;
    background: #1e293b;
    margin: 3px 0;
    transition: all 0.3s ease;
}

/* Body padding for fixed header - only when navbar is present */
/* Flexbox layout for sticky footer */
body:has(.navbar) {
    padding-top: 99px;
    display: flex;
    flex-direction: column;
    /* Use calc to ensure footer is visible on short-content pages */
    min-height: calc(100vh - 80px);
}

/* Prevent submenu tables from stretching in flex layout */
body:has(.navbar) > table {
    align-self: flex-start;
}

/* Footer - sticky footer using margin-top: auto in flex container */
.footer {
    background: #1e293b;
    color: #94a3b8;
    padding: 1.5rem 0;
    margin-top: auto;
    padding-left: 20px;
    padding-right: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Inside .page-container the footer breaks out of the container's side padding to span full width.
   Most pages include the footer after .page-container closes (a direct child of body, nothing to
   break out of), so the negative margins apply only here - on those pages they pushed the footer
   20px past the right edge and caused a horizontal scrollbar. Keep in step with .page-container padding. */
.page-container .footer {
    margin-left: -20px;
    margin-right: -20px;
}

@media (max-width: 992px) {
    .page-container .footer {
        margin-left: -12px;
        margin-right: -12px;
    }
}

.footer .container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.footer p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
}

.footer p + p {
    margin-top: 4px;
}

@media print {
    .navbar { display: none; }
    .footer { display: none; }
    body:has(.navbar) { padding-top: 0; }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 69px;
        flex-direction: column;
        background: #fff;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        padding: 2rem 0;
        margin-left: 0;
    }
    .nav-menu.active { left: 0; }
    .nav-logout { margin-left: 0; margin-top: 1rem; display: inline-block; }
    .nav-toggle { display: flex; }
    body:has(.navbar) {
        padding-top: 69px;
        /* Maintain sticky footer on mobile */
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 80px);
    }
}

/* ===== Pop-up / modal skin (Sep 2026) =====================================================================
   The legacy pop-up pages (Edit Job, Edit List, services editors, upload, Email Data, View Select, QuickBooks
   pop-ups, send confirmations) are table + cfform markup. Rather than rewrite forms that carry validation and
   script hooks, they opt in with <body class="pop-skin"> and this block restyles the markup they already have,
   in the look of Job Summary: white page, system font, small uppercase grey labels, rounded inputs, real buttons.
   Rules are scoped to body.pop-skin, so pages that have not opted in are untouched. */
body.pop-skin {
    margin: 0;
    padding: 14px 16px 36px;
    background: #fff;
}

/* everything below is scoped to the CLASS, not to body: a pop-up page puts it on <body>, a full page (site menu on top)
   puts it on the card that holds the legacy form, so the menu is never restyled */
.pop-skin {
    color: #212529;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;
}

.pop-skin .text,
.pop-skin td,
.pop-skin p,
.pop-skin label {
    font-family: inherit;
    font-size: 13px;
    color: #212529;
    letter-spacing: 0;
}

/* page title */
.pop-skin .title,
.pop-skin .title font,
.pop-skin .title strong {
    font-family: inherit;
    font-size: 18px;
    font-weight: 650;
    color: #2F4071;
    text-align: left;
}

.pop-skin p.title {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef0f4;
    text-align: left;
}

/* .subtitle is used for field labels AND for headings / whole sentences in the legacy pages. Only real label cells get
   the small uppercase grey of the Job Summary header; anything else with the class keeps normal size and may wrap. */
.pop-skin .subtitle,
.pop-skin .Smallsubtitle {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #2F4071;
}

.pop-skin h3.subtitle,
.pop-skin H3.subtitle {
    font-size: 17px;
    font-weight: 650;
    margin: 0 0 12px;
}

.pop-skin td.subtitle,
.pop-skin tr.subtitle td,
.pop-skin td > div.subtitle[align="right"],
.pop-skin td.subtitle div {
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.pop-skin .smallboldtext,
.pop-skin .smalltext {
    font-family: inherit;
    font-size: 11.5px;
    color: #6c757d;
}

.pop-skin .redtext {
    font-family: inherit;
    font-size: inherit;
    color: #dc3545;
}

/* inputs */
.pop-skin input[type=text],
.pop-skin input[type=email],
.pop-skin input[type=number],
.pop-skin input[type=date],
.pop-skin input[type=password],
.pop-skin input:not([type]),
.pop-skin select,
.pop-skin textarea {
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: #fff;
    color: #212529;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.3;
}

.pop-skin select[multiple] {
    padding: 3px;
}

.pop-skin textarea {
    padding: 7px 9px;
}

.pop-skin input:not(.select2-search__field):focus,
.pop-skin select:focus,
.pop-skin textarea:focus {
    outline: none;
    border-color: #2F4071;
    box-shadow: 0 0 0 3px rgba(47, 64, 113, 0.14);
}

.pop-skin input[type=file] {
    font-family: inherit;
    font-size: 13px;
}

.pop-skin input[type=checkbox],
.pop-skin input[type=radio] {
    accent-color: #2F4071;
    vertical-align: -2px;
}

/* buttons: submit = primary, plain buttons = secondary */
.pop-skin input[type=submit],
.pop-skin button[type=submit],
.pop-skin input[type=button],
.pop-skin button {
    padding: 8px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.pop-skin input[type=submit],
.pop-skin button[type=submit] {
    background: linear-gradient(135deg, #2563eb 0%, #0891b2 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.pop-skin input[type=submit]:hover,
.pop-skin button[type=submit]:hover {
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
}

.pop-skin input[type=button],
.pop-skin button:not([type=submit]) {
    background: #fff;
    border-color: #c9d1e4;
    color: #2F4071;
}

.pop-skin input[type=button]:hover,
.pop-skin button:not([type=submit]):hover {
    background: #eef2fb;
}

.pop-skin td[align="right"] > input[type=button] {
    padding: 4px 10px;
    font-size: 11.5px;
}

/* NOTE: do not put .btn links inside a .pop-skin wrapper expecting the skin's link colour - .page-container .btn wins, by design */
.pop-skin hr {
    border: 0;
    border-top: 1px solid #eef0f4;
    margin: 12px 0;
}

.pop-skin a {
    color: #2563eb;
    text-decoration: none;
}

.pop-skin a:hover {
    text-decoration: underline;
}

/* zebra rows used by the list / services editors and result tables */
.pop-skin tr.DataA {
    background: #fff;
}

.pop-skin tr.DataB {
    background: #f6f8fb;
}

/* the legacy grey panels (bgcolor="E5E5E5" on body / table / cells) become plain white */
.pop-skin [bgcolor="E5E5E5"],
.pop-skin [bgcolor="#E5E5E5"],
.pop-skin [bgcolor="e5e5e5"],
.pop-skin [bgcolor="#e5e5e5"] {
    background: transparent !important;
}

/* Compact variant for the tallest form (Edit Job: ~30 rows). Same skin, tighter rows, so the whole form and its
   Update button fit a normal window without scrolling (1070px -> ~820px). Opt in: <body class="pop-skin pop-compact"> */
body.pop-skin.pop-compact {
    padding: 10px 16px 14px;
}

.pop-skin.pop-compact table.text {
    border-spacing: 2px 0;
}

.pop-skin.pop-compact table.text td {
    padding-top: 1px;
    padding-bottom: 1px;
}

.pop-skin.pop-compact input[type=text],
.pop-skin.pop-compact input[type=date],
.pop-skin.pop-compact input:not([type]),
.pop-skin.pop-compact select {
    padding: 3px 7px;
    font-size: 12.5px;
}

.pop-skin.pop-compact textarea {
    padding: 4px 7px;
}

.pop-skin.pop-compact hr {
    margin: 5px 0;
}

.pop-skin.pop-compact p.title {
    margin: 0 0 6px;
    padding-bottom: 6px;
}

/* ===== "Email sent" confirmation pages + the full-page Email Data form (Sep 2026) ===== */
.page-container .sent-card {
    max-width: 860px;
    margin: 18px auto 24px;
    padding: 20px 24px 22px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.page-container .sent-title {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 650;
    color: #2F4071;
}

.page-container .sent-title i {
    color: #28a745;
    margin-right: 6px;
}

.page-container .sent-sub {
    margin: 0 0 14px;
    font-size: 13.5px;
    color: #495057;
}

.page-container .sent-list {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 6px;
}

.page-container .sent-list td {
    padding: 7px 10px;
    font-size: 13px;
    color: #212529;
    border-bottom: 1px solid #eef0f4;
}

.page-container .sent-list td:last-child {
    color: #6c757d;
}

.page-container .sent-note {
    margin: 12px 0 0;
    font-size: 13px;
    color: #6c757d;
}

.page-container .sent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}