/* Import shared styles from CAS.Blazor.Core */
/* CAS Shared Styling - Used by CAS.Client and CAS.Admin */
/* Tint-derived border color (darker shade of the theme tint) */
.border-cas-tint-dark {
    border-color: color-mix(in srgb, var(--cas-tint), black 40%);
}
/* CSS Variables for consistent theming */
:root {
    --border-color: 229 231 235; /* gray-200 RGB values */

    /* Syntax highlighting palette - uses --cas-tint as accent for keys */
    --syntax-key: rgb(var(--cas-tint, 37 99 235));      /* tint - property names */
    --syntax-string: #16a34a;      /* green-600 - string values */
    --syntax-number: #d97706;      /* amber-600 - number values */
    --syntax-literal: #7c3aed;     /* violet-600 - true, false, null */
    --syntax-punctuation: #64748b; /* slate-500 - { } [ ] : , */
    --syntax-comment: #94a3b8;     /* slate-400 - comments */
    --syntax-link: rgb(var(--cas-tint, 37 99 235));
    --syntax-quote: #64748b;       /* slate-500 - blockquotes */
    --syntax-text: #1e293b;        /* slate-800 - base text */
}
.dark {
    --border-color: 55 65 81; /* gray-700 RGB values */

    --syntax-key: rgb(var(--cas-tint-dark, 96 165 250));    /* tint - property names */
    --syntax-string: #4ade80;      /* green-400 - string values */
    --syntax-number: #fbbf24;      /* amber-400 - number values */
    --syntax-literal: #a78bfa;     /* violet-400 - true, false, null */
    --syntax-punctuation: #94a3b8; /* slate-400 - { } [ ] : , */
    --syntax-comment: #64748b;     /* slate-500 */
    --syntax-link: rgb(var(--cas-tint-dark, 96 165 250));
    --syntax-quote: #94a3b8;       /* slate-400 */
    --syntax-text: #e5e7eb;        /* gray-200 */
}
/* Form controls */
.form-control {
    display: block;
    width: 100%;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.form-control::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.form-control::placeholder {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.form-control:focus {
    --tw-border-opacity: 1;
    border-color: rgb(var(--cas-tint) / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(var(--cas-tint) / 0.2);
}
.form-control:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.form-control:is(.dark *)::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.form-control:is(.dark *)::placeholder {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
/* Fixed height for single-line inputs and selects (not textareas) */
input.form-control,
select.form-control,
.form-control-select {
    height: 38px;
}
/* Invalid state styling */
.invalid.form-control {
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.invalid.form-control:focus {
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
    --tw-ring-color: rgb(239 68 68 / 0.2);
}
.invalid.form-control:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
    background-color: rgb(127 29 29 / 0.2);
}
/* Disabled/Readonly state styling */
.form-control:disabled,
.form-control[readonly] {
    cursor: not-allowed;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
    opacity: 0.75;
}
.form-control:disabled:is(.dark *),
.form-control[readonly]:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.form-control:disabled:focus,
.form-control[readonly]:focus {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.form-control:disabled:focus:is(.dark *),
.form-control[readonly]:focus:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
/* Compact form controls for inline/tree editing */
.form-control-compact {
    display: block;
    height: 26px;
    width: 100%;
    border-radius: 0.25rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.job-row .form-control-compact {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.form-control-compact::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.form-control-compact::placeholder {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.form-control-compact:focus {
    --tw-border-opacity: 1;
    border-color: rgb(var(--cas-tint) / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(var(--cas-tint) / 0.2);
}
.form-control-compact:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.form-control-compact:is(.dark *)::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.form-control-compact:is(.dark *)::placeholder {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
input.form-control-compact,
select.form-control-compact {
    height: 26px;
}
.form-control-compact:disabled {
    cursor: not-allowed;
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
    opacity: 0.75;
}
.form-control-compact:disabled:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
/* Inline dropdown trigger - inherits font from parent context */
.dropdown-inline-trigger {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: 0.125rem;
    white-space: nowrap;
    font: inherit;
    line-height: inherit;
}
.dropdown-inline-trigger.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
/* Hidden sizer: stacked item labels set the trigger's min-width */
.dropdown-sizer {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 0;
    visibility: hidden;
}
/* Remove focus outline from non-interactive elements (headings, divs, table rows, etc.) */
*:focus:not(input):not(select):not(textarea):not(button):not(a):not([role="button"]):not(summary) {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
/* Universal scrollbar styling for all elements */
* {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}
*::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
    border: 1px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
    background-clip: content-box;
}
*::-webkit-scrollbar-corner {
    background: transparent;
}
/* Dark mode universal scrollbar */
.dark * {
    scrollbar-color: #4b5563 transparent;
}
.dark *::-webkit-scrollbar-thumb {
    background: #4b5563;
    background-clip: content-box;
}
.dark *::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
    background-clip: content-box;
}
/* Panel System */
.panel {
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.panel:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.panel {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.panel:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-width: 1px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.panel-header:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.panel-header {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.panel-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.panel-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.panel-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.panel-header-actions {
    display: flex;
    align-items: center;
}
.panel-header-actions > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.panel-header-lg {
    border-bottom-width: 1px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.panel-header-lg:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.panel-header-lg {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.panel-header-lg:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.panel-body {
    padding: 1rem;
}
.panel-body-lg {
    padding: 1.5rem;
}
/* Fix for table border conflicts within panels */
.panel .table > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
}
/* Table System */
.table-container {
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.table-container:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.table-container {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.table-container:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.table-container .table > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
}
.table {
    width: 100%;
    line-height: 1.5rem;
}
/* Table header - gray background */
.table-header {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.table-header:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
/* Sticky header shadow - uses CSS variable, shadow stays attached to sticky element */
.sticky-header-shadow {
    --tw-shadow: 0 1px 0 0 rgb(var(--border-color));
    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
/* Header cell styling - used for th elements */
.table-header-cell {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    text-align: left;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.table-header-cell:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.job-row .table-header-cell {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
/* Bordered table container - standalone use with outer border */
.table-bordered {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.table-bordered:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
/* Cell borders - vertical lines between columns */
.table-cell-borders .table-header-cell,
.table-cell-borders .table-cell {
    border-right-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.table-cell-borders .table-header-cell:is(.dark *),
.table-cell-borders .table-cell:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.table-cell-borders .table-header-cell:last-child,
.table-cell-borders .table-cell:last-child {
    border-right-width: 0px;
}
.table-body {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.table-body:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.table-row {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.table-row:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.table-row {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.table-row:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.table-row:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.table-row-focused {
    background-color: rgb(var(--cas-tint) / 0.15);
    box-shadow: inset 3px 0 0 0 var(--cas-tint);
}
.table-row-selected {
    background-color: rgb(var(--cas-tint) / 0.1);
}
/* Keyboard shortcuts modal */
.kbd {
    display: inline-flex;
    height: 1.5rem;
    min-width: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    border-width: 1px;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
}
.job-row .kbd {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.kbd {
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.kbd:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.kbd {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.kbd:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.kbd {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.kbd:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.dt-file-dropdown [role="option"].kbd {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.dt-file-dropdown [role="option"].kbd:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.shortcut-section-title {
    margin-bottom: 0.75rem;
    border-bottom-width: 1px;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.shortcut-section-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.shortcut-section-title {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.shortcut-section-title:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.job-row .shortcut-section-title {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.shortcut-list > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
.shortcut-row dt {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.shortcut-row dt:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dt-file-dropdown [role="option"].shortcut-row dt {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.dt-file-dropdown [role="option"].shortcut-row dt:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.job-row .shortcut-row dt {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.shortcut-row dd {
    margin-left: 0.5rem;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.25rem;
}
.table-body-flush > :last-child {
    border-bottom-width: 0px;
}
/* Restore last-row border inside DefinitionTable (section headers follow field tables) */
.dt-panel .table-body-flush > :last-child {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.dt-panel .table-body-flush > :last-child:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
/* Table view (`dt-flat`, HideHierarchy): nothing follows the single field table, so the
   restored border would float in the air whenever the table ends above the panel bottom —
   the resize-handle divider is the separator there. */
.dt-panel.dt-flat .table-body-flush > :last-child {
    border-bottom-width: 0px;
}
.table-cell {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.table-cell:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
/* Compact table variants */
.table-compact .table-header-cell {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
.table-compact .table-cell {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.table-compact thead .form-control,
.table-compact thead select.form-control {
    height: 2rem;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 400;
    line-height: 1.25;
}
.job-row .table-compact thead .form-control,.job-row 
.table-compact thead select.form-control {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
/* Table cell content layouts */
.table-cell-icon-text {
    display: flex;
    min-width: 0px;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
}
.table-cell-logo {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 1lh;
    width: 2.5rem;
}
.table-cell-logo img {
    position: relative;
    max-height: 100%;
    max-width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}
/* Table cell padding overrides - work with both normal and compact tables */
.table-cell.table-cell-p-0 {
    padding: 0px;
}
.table-cell.table-cell-pl-0 {
    padding-left: 0px;
}
.table-cell.table-cell-pl-1 {
    padding-left: 0.25rem;
}
/* Table cell horizontal padding override */
.table-cell.table-cell-px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
/* Table header padding overrides */
.table-header-cell.table-cell-pl-0 {
    padding-left: 0px;
}
.table-header-cell.table-cell-pl-1 {
    padding-left: 0.25rem;
}
.table-header-cell.table-cell-px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
/* Loading States */
@keyframes pulse {
    50% {
        opacity: .5;
    }
}
.table-loading-row {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.table-loading-row:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.loading-skeleton {
    height: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.loading-skeleton:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.loading-skeleton-sm {
    height: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.loading-skeleton-sm:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.loading-skeleton-lg {
    height: 1.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.loading-skeleton-lg:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.loading-spinner {
    height: 1.25rem;
    width: 1.25rem;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.loading-spinner {
    animation: spin 1s linear infinite;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.loading-spinner svg {
    --tw-text-opacity: 1;
    color: rgb(var(--cas-tint) / var(--tw-text-opacity, 1));
}
/* Modal System */
.modal-overlay {
    position: fixed;
    inset: 0px;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
    --tw-bg-opacity: 0.75;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.modal-overlay:is(.dark *) {
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
    --tw-bg-opacity: 0.75;
}
.modal-container {
    position: fixed;
    inset: 0px;
    z-index: 50;
    overflow-y: auto;
}
.modal-content {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.modal-content:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.modal-header {
    border-bottom-width: 1px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.modal-header:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.modal-header {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.modal-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
@media (min-width: 640px) {
    .modal-header {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
.modal-body {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
@media (min-width: 640px) {
    .modal-body {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
.modal-footer {
    border-top-width: 1px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.modal-footer:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.modal-footer {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.modal-footer:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
@media (min-width: 640px) {
    .modal-footer {
        display: flex;
        flex-direction: row-reverse;
        gap: 0.75rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
/* Button System */
.btn {
    display: inline-flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.job-row .btn {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-offset-width: 2px;
}
.btn-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--cas-tint) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    display: inline-flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.job-row .btn-primary {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.btn-primary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-offset-width: 2px;
}
.btn-primary:hover {
    --tw-bg-opacity: 0.9;
}
.btn-primary:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--cas-tint) / var(--tw-ring-opacity, 1));
}
.btn-secondary {
    border-width: 1px;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    display: inline-flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.job-row .btn-secondary {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.btn-secondary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-offset-width: 2px;
}
.btn-secondary {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.btn-secondary:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.btn-secondary {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.btn-secondary:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.btn-secondary {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.btn-secondary:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.dt-file-dropdown [role="option"].btn-secondary {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.dt-file-dropdown [role="option"].btn-secondary:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.btn-secondary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.btn-secondary:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--cas-tint) / var(--tw-ring-opacity, 1));
}
.btn-secondary:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.btn-danger {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    display: inline-flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.job-row .btn-danger {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.btn-danger:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-offset-width: 2px;
}
.btn-danger:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.btn-danger:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}
.btn-warning {
    --tw-bg-opacity: 1;
    background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    display: inline-flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.job-row .btn-warning {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.btn-warning:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-offset-width: 2px;
}
.btn-warning:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}
.btn-warning:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity, 1));
}
/* Icon Buttons - Round buttons with icons */
.icon-btn {
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.icon-btn-sm {
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.icon-btn-xs {
    display: flex;
    height: 1.25rem;
    width: 1.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
/* Solid icon buttons - using semantic colors */
.icon-btn-primary {
    background-color: rgb(var(--cas-tint) / 0.7);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.icon-btn-primary:hover {
    background-color: rgb(var(--cas-tint) / 0.8);
}
.icon-btn-success {
    background-color: rgb(22 163 74 / 0.7);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.icon-btn-success:hover {
    background-color: rgb(22 163 74 / 0.8);
}
.icon-btn-success:disabled {
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.icon-btn-success:is(.dark *) {
    background-color: rgb(34 197 94 / 0.7);
}
.icon-btn-success:hover:is(.dark *) {
    background-color: rgb(34 197 94 / 0.8);
}
.icon-btn-warning {
    background-color: rgb(217 119 6 / 0.7);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.icon-btn-warning:hover {
    background-color: rgb(217 119 6 / 0.8);
}
.icon-btn-warning:is(.dark *) {
    background-color: rgb(245 158 11 / 0.7);
}
.icon-btn-warning:hover:is(.dark *) {
    background-color: rgb(245 158 11 / 0.8);
}
.icon-btn-danger {
    background-color: rgb(220 38 38 / 0.7);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.icon-btn-danger:hover {
    background-color: rgb(220 38 38 / 0.8);
}
.icon-btn-danger:is(.dark *) {
    background-color: rgb(239 68 68 / 0.7);
}
.icon-btn-danger:hover:is(.dark *) {
    background-color: rgb(239 68 68 / 0.8);
}
/* Ghost icon buttons (transparent background) */
.icon-btn-ghost {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.icon-btn-ghost:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.icon-btn-ghost:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.icon-btn-ghost:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.icon-btn-ghost-primary {
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-text-opacity: 1;
    color: rgb(var(--cas-tint) / var(--tw-text-opacity, 1));
}
.icon-btn-ghost-primary:hover {
    background-color: rgb(var(--cas-tint) / 0.1);
}
.icon-btn-ghost-success {
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.icon-btn-ghost-success:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.icon-btn-ghost-success:hover {
    background-color: rgb(22 163 74 / 0.1);
}
.icon-btn-ghost-success:hover:is(.dark *) {
    background-color: rgb(34 197 94 / 0.1);
}
.icon-btn-ghost-warning {
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.icon-btn-ghost-warning:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.icon-btn-ghost-warning:hover {
    background-color: rgb(217 119 6 / 0.1);
}
.icon-btn-ghost-warning:hover:is(.dark *) {
    background-color: rgb(245 158 11 / 0.1);
}
.icon-btn-ghost-danger {
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.icon-btn-ghost-danger:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.icon-btn-ghost-danger:hover {
    background-color: rgb(220 38 38 / 0.1);
}
.icon-btn-ghost-danger:hover:is(.dark *) {
    background-color: rgb(239 68 68 / 0.1);
}
/* Logo delete button - small circular delete overlay on images */
.logo-delete-btn {
    display: flex;
    height: 1.25rem;
    width: 1.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.job-row .logo-delete-btn {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.logo-delete-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.group:hover .logo-delete-btn {
    opacity: 1;
}
/* Small variants */
.icon-btn-sm-primary {
    background-color: rgb(var(--cas-tint) / 0.7);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.icon-btn-sm-primary:hover {
    background-color: rgb(var(--cas-tint) / 0.8);
}
.icon-btn-sm-success {
    background-color: rgb(22 163 74 / 0.7);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.icon-btn-sm-success:hover {
    background-color: rgb(22 163 74 / 0.8);
}
.icon-btn-sm-success:is(.dark *) {
    background-color: rgb(34 197 94 / 0.7);
}
.icon-btn-sm-success:hover:is(.dark *) {
    background-color: rgb(34 197 94 / 0.8);
}
/* Small ghost variants */
.icon-btn-sm-ghost {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.icon-btn-sm-ghost:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.icon-btn-sm-ghost:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.icon-btn-sm-ghost:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.icon-btn-sm-ghost-success {
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.icon-btn-sm-ghost-success:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.icon-btn-sm-ghost-success:hover {
    background-color: rgb(22 163 74 / 0.1);
}
.icon-btn-sm-ghost-success:hover:is(.dark *) {
    background-color: rgb(34 197 94 / 0.1);
}
.icon-btn-sm-ghost-warning {
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.icon-btn-sm-ghost-warning:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.icon-btn-sm-ghost-warning:hover {
    background-color: rgb(217 119 6 / 0.1);
}
.icon-btn-sm-ghost-warning:hover:is(.dark *) {
    background-color: rgb(245 158 11 / 0.1);
}
.icon-btn-sm-ghost-danger {
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.icon-btn-sm-ghost-danger:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.icon-btn-sm-ghost-danger:hover {
    background-color: rgb(220 38 38 / 0.1);
}
.icon-btn-sm-ghost-danger:hover:is(.dark *) {
    background-color: rgb(239 68 68 / 0.1);
}
/* Extra small variants */
.icon-btn-xs-success {
    background-color: rgb(22 163 74 / 0.7);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    display: flex;
    height: 1.25rem;
    width: 1.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.icon-btn-xs-success:hover {
    background-color: rgb(22 163 74 / 0.8);
}
.icon-btn-xs-success:is(.dark *) {
    background-color: rgb(34 197 94 / 0.7);
}
.icon-btn-xs-success:hover:is(.dark *) {
    background-color: rgb(34 197 94 / 0.8);
}
.icon-btn-xs-danger {
    background-color: rgb(220 38 38 / 0.7);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    display: flex;
    height: 1.25rem;
    width: 1.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.icon-btn-xs-danger:hover {
    background-color: rgb(220 38 38 / 0.8);
}
.icon-btn-xs-danger:is(.dark *) {
    background-color: rgb(239 68 68 / 0.7);
}
.icon-btn-xs-danger:hover:is(.dark *) {
    background-color: rgb(239 68 68 / 0.8);
}
/* Avatar/initials circle */
.avatar {
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(var(--cas-tint) / 0.7);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.job-row .avatar {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
/* ===========================================
   SEMANTIC COLOR SYSTEM
   Use these classes everywhere for consistent colors
   =========================================== */
/* Text colors - for icons, text */
.color-primary {
    --tw-text-opacity: 1;
    color: rgb(var(--cas-tint) / var(--tw-text-opacity, 1));
}
.color-success {
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.color-success:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.color-warning {
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.color-warning:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.color-error {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.color-error:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.color-info {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.color-info:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.color-purple {
    --tw-text-opacity: 1;
    color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.color-purple:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
/* Semantic borders */
.border-error {
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-error:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
/* Solid backgrounds - for buttons, indicators, progress bars */
.bg-primary {
    background-color: rgb(var(--cas-tint) / 0.7);
}
.bg-success {
    background-color: rgb(22 163 74 / 0.7);
}
.bg-success:is(.dark *) {
    background-color: rgb(34 197 94 / 0.7);
}
.bg-warning {
    background-color: rgb(217 119 6 / 0.7);
}
.bg-warning:is(.dark *) {
    background-color: rgb(245 158 11 / 0.7);
}
.bg-error {
    background-color: rgb(220 38 38 / 0.7);
}
.bg-error:is(.dark *) {
    background-color: rgb(239 68 68 / 0.7);
}
.bg-info {
    background-color: rgb(37 99 235 / 0.7);
}
.bg-info:is(.dark *) {
    background-color: rgb(59 130 246 / 0.7);
}
/* Light backgrounds - for subtle backgrounds, badges */
.bg-primary-light {
    background-color: rgb(var(--cas-tint) / 0.2);
}
.bg-primary-light:is(.dark *) {
    background-color: rgb(var(--cas-tint) / 0.3);
}
.bg-success-light {
    background-color: rgb(22 163 74 / 0.2);
}
.bg-success-light:is(.dark *) {
    background-color: rgb(34 197 94 / 0.3);
}
.bg-warning-light {
    background-color: rgb(254 240 138 / 0.3);
}
.bg-warning-light:is(.dark *) {
    background-color: rgb(234 179 8 / 0.1);
}
.bg-error-light {
    background-color: rgb(220 38 38 / 0.2);
}
.bg-error-light:is(.dark *) {
    background-color: rgb(239 68 68 / 0.3);
}
.bg-info-light {
    background-color: rgb(37 99 235 / 0.2);
}
.bg-info-light:is(.dark *) {
    background-color: rgb(59 130 246 / 0.3);
}
/* Status indicator dot */
.status-dot {
    height: 0.75rem;
    width: 0.75rem;
    border-radius: 9999px;
}
.status-dot-success {
    background-color: rgb(22 163 74 / 0.7);
}
.status-dot-success:is(.dark *) {
    background-color: rgb(34 197 94 / 0.7);
}
.status-dot-success {
    height: 0.75rem;
    width: 0.75rem;
    border-radius: 9999px;
}
.status-dot-warning {
    background-color: rgb(217 119 6 / 0.7);
}
.status-dot-warning:is(.dark *) {
    background-color: rgb(245 158 11 / 0.7);
}
.status-dot-warning {
    height: 0.75rem;
    width: 0.75rem;
    border-radius: 9999px;
}
.status-dot-danger {
    background-color: rgb(220 38 38 / 0.7);
}
.status-dot-danger:is(.dark *) {
    background-color: rgb(239 68 68 / 0.7);
}
.status-dot-danger {
    height: 0.75rem;
    width: 0.75rem;
    border-radius: 9999px;
}
/* Alert styles - consistent background, border, and text colors */
.alert-success {
    --tw-border-opacity: 1;
    border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.alert-success:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(22 101 52 / var(--tw-border-opacity, 1));
    background-color: rgb(20 83 45 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.alert-warning {
    --tw-border-opacity: 1;
    border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.alert-warning:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
    background-color: rgb(120 53 15 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.alert-error {
    --tw-border-opacity: 1;
    border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.alert-error:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
    background-color: rgb(127 29 29 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.alert-info {
    border-color: rgb(var(--cas-tint) / 0.2);
    background-color: rgb(var(--cas-tint) / 0.1);
    --tw-text-opacity: 1;
    color: rgb(var(--cas-tint) / var(--tw-text-opacity, 1));
}
.alert-info:is(.dark *) {
    border-color: rgb(var(--cas-tint) / 0.3);
    background-color: rgb(var(--cas-tint) / 0.2);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Badge styles - for pills and tags */
.badge-success {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.badge-success:is(.dark *) {
    background-color: rgb(34 197 94 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.badge-warning {
    --tw-bg-opacity: 1;
    background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.badge-warning:is(.dark *) {
    background-color: rgb(245 158 11 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.badge-error {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.badge-error:is(.dark *) {
    background-color: rgb(239 68 68 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.badge-primary {
    background-color: rgb(var(--cas-tint) / 0.15);
    --tw-text-opacity: 1;
    color: rgb(var(--cas-tint) / var(--tw-text-opacity, 1));
}
.badge-primary:is(.dark *) {
    background-color: rgb(var(--cas-tint) / 0.2);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Toast styles */
.toast-success {
    --tw-border-opacity: 1;
    border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.toast-success:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(21 128 61 / var(--tw-border-opacity, 1));
    background-color: rgb(20 83 45 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}
.toast-warning {
    --tw-border-opacity: 1;
    border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.toast-warning:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(180 83 9 / var(--tw-border-opacity, 1));
    background-color: rgb(120 53 15 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.toast-error {
    --tw-border-opacity: 1;
    border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.toast-error:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
    background-color: rgb(127 29 29 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.toast-info {
    border-color: rgb(var(--cas-tint) / 0.2);
    background-color: rgb(var(--cas-tint) / 0.1);
    --tw-text-opacity: 1;
    color: rgb(var(--cas-tint) / var(--tw-text-opacity, 1));
}
.toast-info:is(.dark *) {
    border-color: rgb(var(--cas-tint) / 0.3);
    background-color: rgb(var(--cas-tint) / 0.2);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Button solid backgrounds - for primary action buttons */
.btn-bg-success {
    background-color: rgb(22 163 74 / 0.7);
}
.btn-bg-success:hover {
    background-color: rgb(22 163 74 / 0.8);
}
.btn-bg-success:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}
.btn-bg-warning {
    background-color: rgb(217 119 6 / 0.7);
}
.btn-bg-warning:hover {
    background-color: rgb(217 119 6 / 0.8);
}
.btn-bg-warning:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity, 1));
}
.btn-bg-error {
    background-color: rgb(220 38 38 / 0.7);
}
.btn-bg-error:hover {
    background-color: rgb(220 38 38 / 0.8);
}
.btn-bg-error:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}
.btn-bg-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--cas-tint) / var(--tw-bg-opacity, 1));
}
.btn-bg-primary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--cas-tint-dark) / var(--tw-bg-opacity, 1));
}
.btn-bg-primary:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--cas-tint) / var(--tw-ring-opacity, 1));
}
/* Icon background - subtle background for icon containers */
.icon-bg-success {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.icon-bg-success:is(.dark *) {
    background-color: rgb(20 83 45 / 0.2);
}
.icon-bg-warning {
    --tw-bg-opacity: 1;
    background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.icon-bg-warning:is(.dark *) {
    background-color: rgb(120 53 15 / 0.2);
}
.icon-bg-error {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.icon-bg-error:is(.dark *) {
    background-color: rgb(127 29 29 / 0.2);
}
.icon-bg-primary {
    background-color: rgb(var(--cas-tint) / 0.1);
}
.icon-bg-primary:is(.dark *) {
    background-color: rgb(var(--cas-tint) / 0.2);
}
/* Chip Input - inline tag editor with chips + input in one container */
.chip-input {
    display: flex;
    min-height: 38px;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
.chip-input:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    background-color: rgb(55 65 81 / 0.5);
}
.chip-input:focus-within {
    --tw-border-opacity: 1;
    border-color: rgb(var(--cas-tint) / var(--tw-border-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--cas-tint) / var(--tw-ring-opacity, 1));
}
.chip-input-field {
    min-width: 100px;
    flex: 1 1 0%;
    border-style: none;
    background-color: transparent;
    padding: 0px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.job-row .chip-input-field {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.chip-input-field:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.chip-input-field::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.chip-input-field::placeholder {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.chip-input-field:is(.dark *)::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.chip-input-field:is(.dark *)::placeholder {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.job-row .chip {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.chip-blue {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.chip-blue:is(.dark *) {
    background-color: rgb(30 58 138 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.chip-purple {
    --tw-bg-opacity: 1;
    background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}
.chip-purple:is(.dark *) {
    background-color: rgb(88 28 135 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.chip-green {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.chip-green:is(.dark *) {
    background-color: rgb(20 83 45 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.chip-orange {
    --tw-bg-opacity: 1;
    background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}
.chip-orange:is(.dark *) {
    background-color: rgb(124 45 18 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}
.chip-remove {
    opacity: 0.6;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.chip-remove:hover {
    opacity: 1;
}
/* Empty State */
.empty-state {
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: center;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.empty-state:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
/* Log Parameter Highlighting - colored parameters in structured log messages */
.log-param {
    --tw-text-opacity: 1;
    color: rgb(2 132 199 / var(--tw-text-opacity, 1));
}
.log-param:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}
/* Log Flash Animation - subtle highlight for new logs */
@keyframes log-flash {
    0% {
        background-color: rgb(254 240 138 / 0.5); /* yellow-200 with transparency */
    }
    100% {
        background-color: transparent;
    }
}
.log-flash-animation {
    animation: log-flash 1.2s ease-out forwards;
    will-change: auto; /* Don't retain will-change after animation */
}
/* Dark mode flash animation */
.dark .log-flash-animation {
    animation: log-flash-dark 1.2s ease-out forwards;
}
@keyframes log-flash-dark {
    0% {
        background-color: rgb(133 77 14 / 0.4); /* yellow-800 with transparency */
    }
    100% {
        background-color: transparent;
    }
}
/* SVG Icon Color Matching */
.svg-icon {
    /* Match text-gray-600 (#4B5563 = rgb(75, 85, 99)) */
    filter: brightness(0) saturate(100%) invert(31%) sepia(7%) saturate(684%) hue-rotate(185deg) brightness(96%) contrast(91%);
    flex-shrink: 0;
}
.dark .svg-icon {
    /* Match text-gray-300 (#D1D5DB = rgb(209, 213, 219)) */
    filter: brightness(0) saturate(100%) invert(87%) sepia(4%) saturate(349%) hue-rotate(185deg) brightness(95%) contrast(88%);
}
/* ===========================================
   DESIGN SYSTEM - Text Colors
   Semantic text color classes for consistent light/dark mode
   =========================================== */
.text-heading {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-heading:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-body {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-body:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.text-secondary {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-secondary:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-tertiary {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-tertiary:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-muted {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-muted:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-placeholder {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-placeholder:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-disabled {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-disabled:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
/* ===========================================
   DESIGN SYSTEM - Surface / Background Colors
   =========================================== */
.bg-surface {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-surface:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-surface-secondary {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-surface-secondary:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-surface-header {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-surface-header:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.bg-surface-hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-surface-hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.bg-surface-muted {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-surface-muted:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-surface-inset {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-surface-inset:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
/* ===========================================
   DESIGN SYSTEM - Borders
   =========================================== */
.border-default {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-default:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.border-input {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-input:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.divide-default > :not([hidden]) ~ :not([hidden]) {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.divide-default > :not([hidden]) ~ :not([hidden]):is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.divider {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.divider:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.divider-t {
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.divider-t:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
/* ===========================================
   DESIGN SYSTEM - Hover States
   =========================================== */
.hover-default {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.hover-default:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover-default:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.hover-subtle {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.hover-subtle:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover-subtle:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
/* ===========================================
   DESIGN SYSTEM - Form Classes
   =========================================== */
.form-label {
    margin-bottom: 0.25rem;
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.form-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dt-file-dropdown [role="option"].form-label {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.dt-file-dropdown [role="option"].form-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.job-row .form-label {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.form-help {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.form-help:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.job-row .form-help {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.form-error {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.job-row .form-error {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.form-error:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.form-control-select {
    cursor: pointer;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    display: block;
    width: 100%;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.form-control-select::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.form-control-select::placeholder {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.form-control-select:focus {
    --tw-border-opacity: 1;
    border-color: rgb(var(--cas-tint) / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(var(--cas-tint) / 0.2);
}
.form-control-select:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.form-control-select:is(.dark *)::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.form-control-select:is(.dark *)::placeholder {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
input.form-control-select,
select.form-control-select {
    height: 38px;
}
.invalid.form-control-select {
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.invalid.form-control-select:focus {
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
    --tw-ring-color: rgb(239 68 68 / 0.2);
}
.invalid.form-control-select:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
    background-color: rgb(127 29 29 / 0.2);
}
.form-control-select:disabled,.form-control-select[readonly] {
    cursor: not-allowed;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
    opacity: 0.75;
}
.form-control-select:disabled:is(.dark *),.form-control-select[readonly]:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.form-control-select:disabled,.form-control-select[readonly] {
    cursor: not-allowed;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
    opacity: 0.75;
}
.form-control-select:disabled:is(.dark *),.form-control-select[readonly]:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.form-control-select:disabled:focus,.form-control-select[readonly]:focus {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.form-control-select:disabled:focus:is(.dark *),.form-control-select[readonly]:focus:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.form-control-select:disabled:focus,.form-control-select[readonly]:focus {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.form-control-select:disabled:focus:is(.dark *),.form-control-select[readonly]:focus:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.table-compact thead .form-control-select,
.table-compact thead select.form-control-select {
    height: 2rem;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 400;
    line-height: 1.25;
}
.job-row .table-compact thead .form-control-select,.job-row 
.table-compact thead select.form-control-select {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.table-compact thead .form-control-select,
.table-compact thead select.form-control-select {
    height: 2rem;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 400;
    line-height: 1.25;
}
.job-row .table-compact thead .form-control-select,.job-row 
.table-compact thead select.form-control-select {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.form-control-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.25rem;
}
:is(.dark .form-control-select) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.form-control-textarea {
    resize: vertical;
    display: block;
    width: 100%;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.form-control-textarea::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.form-control-textarea::placeholder {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.form-control-textarea:focus {
    --tw-border-opacity: 1;
    border-color: rgb(var(--cas-tint) / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(var(--cas-tint) / 0.2);
}
.form-control-textarea:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.form-control-textarea:is(.dark *)::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.form-control-textarea:is(.dark *)::placeholder {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
input.form-control-textarea,
select.form-control-textarea {
    height: 38px;
}
.invalid.form-control-textarea {
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.invalid.form-control-textarea:focus {
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
    --tw-ring-color: rgb(239 68 68 / 0.2);
}
.invalid.form-control-textarea:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
    background-color: rgb(127 29 29 / 0.2);
}
.form-control-textarea:disabled,.form-control-textarea[readonly] {
    cursor: not-allowed;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
    opacity: 0.75;
}
.form-control-textarea:disabled:is(.dark *),.form-control-textarea[readonly]:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.form-control-textarea:disabled,.form-control-textarea[readonly] {
    cursor: not-allowed;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
    opacity: 0.75;
}
.form-control-textarea:disabled:is(.dark *),.form-control-textarea[readonly]:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.form-control-textarea:disabled:focus,.form-control-textarea[readonly]:focus {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.form-control-textarea:disabled:focus:is(.dark *),.form-control-textarea[readonly]:focus:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.form-control-textarea:disabled:focus,.form-control-textarea[readonly]:focus {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.form-control-textarea:disabled:focus:is(.dark *),.form-control-textarea[readonly]:focus:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.table-compact thead .form-control-textarea,
.table-compact thead select.form-control-textarea {
    height: 2rem;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 400;
    line-height: 1.25;
}
.job-row .table-compact thead .form-control-textarea,.job-row 
.table-compact thead select.form-control-textarea {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.table-compact thead .form-control-textarea,
.table-compact thead select.form-control-textarea {
    height: 2rem;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 400;
    line-height: 1.25;
}
.job-row .table-compact thead .form-control-textarea,.job-row 
.table-compact thead select.form-control-textarea {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
/* ===========================================
   DESIGN SYSTEM - Typography
   =========================================== */
.section-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.section-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.section-title-sm {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.section-title-sm:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.stat-title {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.stat-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.job-row .stat-title {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.stat-value {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.stat-value:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Status filter pills */
.status-pill {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    border-width: 1px;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.status-pill:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.status-pill {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.status-pill:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.status-pill {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.status-pill:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.job-row .status-pill {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.status-pill i {
    font-size: 0.75rem;
    line-height: 1rem;
}
.job-row .status-pill i {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.status-pill:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.status-pill:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.status-pill-active {
    border-color: rgb(var(--cas-tint) / 0.3);
    background-color: rgb(var(--cas-tint) / 0.1);
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.status-pill-active:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Status pill popover */
.status-pill-popover {
    position: absolute;
    z-index: 50;
    display: none;
    font-size: 0.75rem;
    line-height: 1rem;
}
.job-row .status-pill-popover {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.status-pill-popover {
    top: 100%;
    left: 0;
    padding-top: 4px;
    pointer-events: none;
}
.status-pill:hover .status-pill-popover {
    display: block;
}
.status-pill-popover-inner {
    border-radius: 0.5rem;
    border-width: 1px;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.status-pill-popover-inner:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.status-pill-popover-inner {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.status-pill-popover-inner:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.status-pill-popover-inner {
    min-width: 140px;
    pointer-events: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
}
.status-pill-popover-row {
    align-items: center;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    text-align: left;
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
}
.status-pill-popover-row-clickable {
    margin-left: -0.375rem;
    margin-right: -0.375rem;
    cursor: pointer;
    border-radius: 0.125rem;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    background: transparent;
    border: none;
}
.status-pill-popover-row-clickable:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.status-pill-popover-row-clickable:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.status-pill-popover-row-clickable.status-pill-popover-row-active {
    background-color: rgba(var(--color-cas-tint-rgb, 59 130 246) / 0.1);
}
.status-pill-popover-label {
    white-space: nowrap;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.status-pill-popover-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.status-pill-popover-value {
    white-space: nowrap;
    text-align: right;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight: 500;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.status-pill-popover-value:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.status-pill-popover-value {
    min-width: 1.75rem;
}
/* ===========================================
   DESIGN SYSTEM - Containers
   =========================================== */
.card {
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.card:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.card {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.card-padded {
    padding: 1rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.card-padded:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.card-padded {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.card-padded:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.card-section {
    border-radius: 0.375rem;
    border-width: 1px;
    padding: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.card-section:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.card-section {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.card-section:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
/* ===========================================
   DESIGN SYSTEM - Page Layout
   =========================================== */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-width: 1px;
    padding: 0.5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.page-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.page-title {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.page-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* ===========================================
   DESIGN SYSTEM - Menu / Dropdown
   =========================================== */
.dropdown-menu {
    z-index: 50;
    overflow: hidden;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.dropdown-menu:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dropdown-menu {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.dropdown-menu:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.dropdown-item {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.dropdown-item:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dropdown-item {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.dropdown-item:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.dropdown-item:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.dt-file-dropdown [role="option"].dropdown-item {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.dt-file-dropdown [role="option"].dropdown-item:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.job-row .dropdown-item {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.dropdown-item-danger {
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.dropdown-item-danger:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dropdown-item-danger {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.dropdown-item-danger:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.dropdown-item-danger:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.dt-file-dropdown [role="option"].dropdown-item-danger {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.dt-file-dropdown [role="option"].dropdown-item-danger:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.job-row .dropdown-item-danger {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.dropdown-item-danger:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.dropdown-header {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.dropdown-header:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.context-menu {
    position: absolute;
    right: 0px;
    top: 100%;
    z-index: 50;
    margin-top: 0.5rem;
    width: 14rem;
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));
    --tw-ring-opacity: 0.05;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.context-menu:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity, 1));
}
/* ===========================================
   DESIGN SYSTEM - Badges (additions)
   =========================================== */
.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
}
.job-row .badge {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.badge-default {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.badge-default:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.badge-info {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.badge-info:is(.dark *) {
    background-color: rgb(59 130 246 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
/* ===========================================
   DESIGN SYSTEM - Buttons (additions)
   =========================================== */
.btn-success {
    background-color: rgb(22 163 74 / 0.7);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    display: inline-flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.job-row .btn-success {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.btn-success:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-offset-width: 2px;
}
.btn-success:hover {
    background-color: rgb(22 163 74 / 0.8);
}
.btn-success:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}
.btn-ghost {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    display: inline-flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.job-row .btn-ghost {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.btn-ghost:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-offset-width: 2px;
}
.btn-ghost {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.btn-ghost:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dt-file-dropdown [role="option"].btn-ghost {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.dt-file-dropdown [role="option"].btn-ghost:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.btn-ghost:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.btn-ghost:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity, 1));
}
.btn-ghost:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.btn-link {
    --tw-text-opacity: 1;
    color: rgb(var(--cas-tint) / var(--tw-text-opacity, 1));
    text-decoration-line: underline;
    text-underline-offset: 4px;
    display: inline-flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.job-row .btn-link {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.btn-link:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-offset-width: 2px;
}
.btn-link:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--cas-tint-dark) / var(--tw-text-opacity, 1));
}
.btn-link:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--cas-tint) / var(--tw-ring-opacity, 1));
}
.btn-sm {
    height: 30px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.job-row .btn-sm {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.btn-lg {
    height: 46px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
}
/* Easter egg: button runs away on mouseenter */
.btn-runaway-away {
    position: fixed !important;
    z-index: 9999;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
    transition: left 0.3s cubic-bezier(0.2, 0, 0, 1), top 0.3s cubic-bezier(0.2, 0, 0, 1);
}
/* ===========================================
   DESIGN SYSTEM - Table Cell Editing
   =========================================== */
.table-cell-input {
    width: 100%;
    border-width: 0px;
    background-color: transparent;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.job-row .table-cell-input {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.table-cell-input::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.table-cell-input::placeholder {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.table-cell-input:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.table-cell-input:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.table-cell-input:is(.dark *)::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.table-cell-input:is(.dark *)::placeholder {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.table-cell-input:focus:is(.dark *) {
    background-color: rgb(30 58 138 / 0.2);
}
.table-cell-select {
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border-width: 0px;
    background-color: transparent;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.job-row .table-cell-select {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.table-cell-select:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.table-cell-select:focus:is(.dark *) {
    background-color: rgb(30 58 138 / 0.2);
}
/* ===========================================
   DESIGN SYSTEM - Overlay / Backdrop
   =========================================== */
.backdrop {
    position: fixed;
    inset: 0px;
    z-index: 40;
}
.overlay {
    position: fixed;
    inset: 0px;
    background-color: rgb(107 114 128 / 0.75);
}
.overlay:is(.dark *) {
    background-color: rgb(0 0 0 / 0.75);
}
/* ===========================================
   DESIGN SYSTEM - Slide-in Panel
   =========================================== */
/* Resizable document detail panel layout — DefinitionTable + PDF on top, NormalizedSamples
   below. Two CSS variables drive sizes; JS handles drag and persistence to localStorage. */
.cas-resizable-panel {
    --panel-h: 40%;
    --panel-v: 60%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.cas-panel-top {
    display: flex;
    flex-basis: var(--panel-v);
    flex-shrink: 0;
    min-height: 0;
}
.cas-panel-left {
    flex-basis: var(--panel-h);
    flex-shrink: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.cas-panel-right {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
}
.cas-panel-bottom {
    flex: 1 1 0;
    min-height: 0;
}
.cas-resize-handle {
    flex-shrink: 0;
    background: transparent;
    transition: background-color 100ms ease;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    position: relative;
}
.cas-resize-handle-h {
    width: 5px;
    cursor: col-resize;
    margin: 0 -2px;
    z-index: 1;
}
.cas-resize-handle-v {
    height: 5px;
    cursor: row-resize;
    margin: -2px 0;
    z-index: 1;
}
/* The -2px margins above enlarge the grab area, which means a border on the handle
   itself would paint 2px INSIDE the neighbouring panel (z-index 1), over its content —
   e.g. across the bottom edge of the definition table's last row. Draw the divider
   line with a pseudo-element at the true panel boundary instead. */
.cas-resize-handle-h::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2px;
    width: 1px;
    background-color: rgb(var(--border-color));
}
.cas-resize-handle-v::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 2px;
    height: 1px;
    background-color: rgb(var(--border-color));
}
.cas-resize-handle:hover,
body.cas-resizing .cas-resize-handle {
    background-color: rgb(var(--cas-tint) / 0.4);
}
.slide-panel-backdrop {
    position: fixed;
    inset: 0px;
    z-index: 40;
    background-color: rgb(0 0 0 / 0.5);
}
.slide-panel-backdrop:is(.dark *) {
    background-color: rgb(0 0 0 / 0.7);
}
.slide-panel-backdrop {
    animation: fade-in 200ms ease-out;
}
.slide-panel-backdrop-closing {
    animation: fade-out 200ms ease-in forwards;
}
.slide-panel {
    position: fixed;
    top: 0px;
    right: 0px;
    z-index: 50;
    display: flex;
    height: 100%;
    flex-direction: column;
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.slide-panel:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.slide-panel {
    animation: slide-in-right 250ms cubic-bezier(0.2, 0, 0, 1);
}
.slide-panel-closing {
    animation: slide-out-right 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes slide-in-right {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
@keyframes slide-out-right {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
/* ===========================================
   DESIGN SYSTEM - Navigation
   =========================================== */
.nav-item {
    display: flex;
    align-items: center;
    border-radius: 0.375rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.nav-item:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.nav-item {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.nav-item:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.nav-item:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.dt-file-dropdown [role="option"].nav-item {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.dt-file-dropdown [role="option"].nav-item:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.nav-item-active {
    background-color: rgb(var(--cas-tint) / 0.1);
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(var(--cas-tint) / var(--tw-text-opacity, 1));
}
.sidebar-item-active {
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.sidebar-item-active:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.sidebar-item-active {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.sidebar-item-active:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
/* ===========================================
   DESIGN SYSTEM - Logo
   =========================================== */
.logo {
    font-family: 'Smush', sans-serif;
}
.logo-collapsed {
    font-family: 'Smush', sans-serif;
    font-size: 3.5rem;
    line-height: 2.5rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(var(--cas-tint) / var(--tw-text-opacity, 1));
}
/* Required field asterisk */
.text-required {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
/* Input icon positioning */
.input-icon-left {
    pointer-events: none;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    display: flex;
    align-items: center;
    padding-left: 0.75rem;
}
.input-icon-right {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    display: flex;
    align-items: center;
    padding-right: 0.75rem;
}
/* Link styling */
.link {
    --tw-text-opacity: 1;
    color: rgb(var(--cas-tint) / var(--tw-text-opacity, 1));
}
.link:hover {
    text-decoration-line: underline;
}
/* Progress bar track */
.progress-track {
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.progress-track:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
/* Job pipeline — bar and CSS-only hover popover.
   The popover is triggered by the td.job-pipeline-cell hover (set via cellClass). */
.job-pipeline-cell:hover {
    anchor-name: --pipeline-cell;
}
.job-pipeline-bar {
    display: flex;
    width: 100%;
    gap: 1px;
    overflow: hidden;
    border-radius: 9999px;
    height: 6px;
}
.job-pipeline-bar .pipeline-pulse {
    animation: pipeline-pulse 1.5s ease-in-out infinite;
}
@keyframes pipeline-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.job-pipeline-popover {
    position: fixed;
    z-index: 50;
    font-size: 0.75rem;
    line-height: 1rem;
}
.job-row .job-pipeline-popover {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.job-pipeline-popover {
    min-width: 280px;
    display: none;
    pointer-events: none;
    position-anchor: --pipeline-cell;
    left: anchor(right);
    top: anchor(top);
    position-try-fallbacks: flip-block;
}
.job-pipeline-popover-inner {
    border-radius: 0.375rem;
    border-width: 1px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.job-pipeline-popover-inner:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.job-pipeline-popover-inner {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.job-pipeline-popover-inner:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.job-pipeline-cell:hover .job-pipeline-popover {
    display: block;
    pointer-events: auto;
}
/* Generic CSS-only hover tooltip — used by <FieldLabel> for renamed certificate fields */
.field-tooltip-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.field-tooltip {
    position: absolute;
    z-index: 50;
    display: none;
    font-size: 0.75rem;
    line-height: 1rem;
}
.job-row .field-tooltip {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.field-tooltip {
    bottom: 100%;
    left: 0;
    padding-bottom: 4px;
    pointer-events: none;
}
.field-tooltip-trigger:hover > .field-tooltip {
    display: block;
}
.field-tooltip-inner {
    display: block;
    white-space: nowrap;
    border-radius: 0.5rem;
    border-width: 1px;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.field-tooltip-inner:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.field-tooltip-inner {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.field-tooltip-inner:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.field-tooltip-inner {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.field-tooltip-inner:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.field-tooltip-inner {
    max-width: 320px;
    white-space: normal;
}
/* Normalization factor popover — CSS-only hover tooltip for chemical factor info */
.dt-has-normalization-popover:hover {
    anchor-name: --normpop;
}
.dt-normalization-popover {
    z-index: 50;
    display: none;
    font-size: 0.75rem;
    line-height: 1rem;
}
.job-row .dt-normalization-popover {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.dt-normalization-popover {
    position: fixed;
    position-anchor: --normpop;
    bottom: calc(anchor(top) + 4px);
    left: anchor(left);
    pointer-events: none;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
}
.dt-has-normalization-popover:hover > .dt-normalization-popover {
    display: block;
}
.dt-normalization-popover-inner {
    border-radius: 0.5rem;
    border-width: 1px;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.dt-normalization-popover-inner:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dt-normalization-popover-inner {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.dt-normalization-popover-inner:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.dt-normalization-popover-inner {
    min-width: 160px;
}
.dt-normalization-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}
.dt-normalization-label {
    white-space: nowrap;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.dt-normalization-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.dt-normalization-value {
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.dt-normalization-value:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dt-normalization-result {
    margin-top: 0.125rem;
    border-top-width: 1px;
    padding-top: 0.25rem;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.dt-normalization-result:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
/* Definition table keyboard focus */
.dt-keyboard-focus {
    background-color: rgb(var(--cas-tint) / 0.15) !important;
}
/* Table inline input */
.table-inline-input {
    height: 36px;
    width: 100%;
    background-color: transparent;
    padding-left: 1rem;
    padding-right: 1rem;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.table-inline-input:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.table-inline-input:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.table-inline-input:focus:is(.dark *) {
    background-color: rgb(55 65 81 / 0.5);
}
/* Table validation error input */
.table-inline-input-error {
    height: 36px;
    width: 100%;
    border-top-width: 1px;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.table-inline-input-error:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.table-inline-input-error:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.table-inline-input-error:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
    background-color: rgb(127 29 29 / 0.2);
}
/* Checkbox styling (for forms and tables) */
.form-checkbox {
    height: 1rem;
    width: 1rem;
    border-radius: 0.25rem;
    --tw-text-opacity: 1;
    color: rgb(var(--cas-tint) / var(--tw-text-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.form-checkbox:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.form-checkbox {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.form-checkbox:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.form-checkbox:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--cas-tint) / var(--tw-ring-opacity, 1));
}
/* SortableJS drag and drop styling */
.sortable-ghost {
    opacity: 0.4;
    background-color: rgb(var(--cas-tint-rgb, 59 130 246) / 0.1);
}
.sortable-chosen {
    background-color: rgb(var(--cas-tint-rgb, 59 130 246) / 0.05);
}
.sortable-drag {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    opacity: 1;
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dark .sortable-drag {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
/* netstack.js - .NET stack trace formatting */
.st-frame {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}
.st-type {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.st-method {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.st-param-type {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.st-param-name {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.st-file {
    --tw-text-opacity: 1;
    color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.st-line {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
/* ===========================================
   DESIGN SYSTEM - Compact UI Components
   For dense/tool-like interfaces (sidebars, panels, toolbars)
   =========================================== */
/* Sidebar tree item — factory/location/certificate navigation */
.sidebar-item {
    display: flex;
    width: 100%;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    align-items: center;
    gap: 0.375rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.job-row .sidebar-item {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.sidebar-item-child {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.sidebar-item-child:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.sidebar-item-child {
    display: flex;
    width: 100%;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    align-items: center;
    gap: 0.375rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.job-row .sidebar-item-child {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.sidebar-item-child {
    padding-left: 34px;
}
.sidebar-item-grandchild {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.sidebar-item-grandchild:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.sidebar-item-grandchild {
    display: flex;
    width: 100%;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    align-items: center;
    gap: 0.375rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.job-row .sidebar-item-grandchild {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.sidebar-item-grandchild {
    padding-left: 56px;
}
/* Collapsible section header — details/summary */
.collapsible-header {
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.collapsible-header:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.collapsible-header {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.collapsible-header:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.collapsible-header {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.collapsible-header:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.collapsible-header:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.job-row .collapsible-header {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.collapsible-body {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.collapsible-body:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.collapsible-body {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.collapsible-body:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.job-row .collapsible-body {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
/* Toolbar — horizontal bar with actions */
.toolbar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.toolbar:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.job-row .toolbar {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.toolbar-divider {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.toolbar-divider:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.toolbar-divider {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.toolbar-divider:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.job-row .toolbar-divider {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.toolbar-divider-t {
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.toolbar-divider-t:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.toolbar-divider-t {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.toolbar-divider-t:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.job-row .toolbar-divider-t {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
/* Tab button — underlined tab in a toolbar */
.tab-btn {
    height: 100%;
    border-bottom-width: 2px;
    border-color: transparent;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.tab-btn:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.job-row .tab-btn {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.tab-btn:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.tab-btn:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.tab-btn-active {
    height: 100%;
    border-bottom-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--cas-tint) / var(--tw-border-opacity, 1));
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.tab-btn-active:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.job-row .tab-btn-active {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
/* Pill toggle button — small rounded toggle in a group */
.pill-btn {
    border-radius: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.pill-btn:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.job-row .pill-btn {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.pill-btn:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.pill-btn:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.pill-btn-active {
    border-radius: 0.25rem;
    background-color: rgb(var(--cas-tint) / 0.7);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.job-row .pill-btn-active {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
/* Run history chip — clickable extraction run in horizontal list */
.run-chip {
    display: flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.25rem;
    border-width: 1px;
    border-color: transparent;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 11px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.run-chip:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.run-chip:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.run-chip:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.run-chip:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.run-chip:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.run-chip-active {
    display: flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.25rem;
    border-width: 1px;
    border-color: rgb(var(--cas-tint) / 0.4);
    background-color: rgb(var(--cas-tint) / 0.1);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 11px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.run-chip-active:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Inline action link */
.action-link {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(var(--cas-tint) / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.job-row .action-link {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.action-link:hover {
    opacity: 0.8;
}
/* Upload button — outlined tint button for file upload */
.btn-upload {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.25rem;
    border-width: 1px;
    border-color: rgb(var(--cas-tint) / 0.3);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(var(--cas-tint) / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.job-row .btn-upload {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.btn-upload:hover {
    background-color: rgb(var(--cas-tint) / 0.1);
}
/* Stats bar — monospace info bar */
.stats-bar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.stats-bar:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.stats-bar {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.stats-bar:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.stats-bar {
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.stats-bar:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.job-row .stats-bar {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
/* Compact select — small inline select for toolbars */
.select-compact {
    border-radius: 0.25rem;
    border-width: 1px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.select-compact:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.select-compact {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.select-compact:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.select-compact {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.select-compact:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.job-row .select-compact {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
/* Inline form label — small label above input in compact contexts */
.label-compact {
    margin-bottom: 0.25rem;
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.label-compact:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.job-row .label-compact {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
/* ===========================================
   DEFINITION TABLE (.dt-*)
   Styles for DefinitionTable and DtSection components.
   --dt-cell-py / --dt-header-py / --dt-px on .dt-panel are the single
   source of truth for all internal spacing.
   =========================================== */
/* ── Panel wrapper ────────────────────────────────────────────────── */
.dt-panel {
    --dt-cell-py: 4px;
    --dt-header-py: 8px;
    --dt-px: 12px;
    border-right-width: 1px;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.dt-panel:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dt-panel {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.dt-panel:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.job-row .dt-panel {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.dt-panel .table {
    table-layout: fixed;
}
.dt-panel .table-row:hover {
    --tw-bg-opacity: 0;
}
/* All td cells inside the panel use cell padding */
.dt-panel .table-cell {
    padding: var(--dt-cell-py) var(--dt-px);
}
/* ── Empty state ──────────────────────────────────────────────────── */
.dt-no-data {
    display: flex;
    flex: 1 1 0%;
    align-items: center;
    justify-content: center;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.dt-no-data:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
/* ── Sticky header wrapper ────────────────────────────────────────── */
.dt-sticky-header {
    position: sticky;
    top: 0px;
    z-index: 10;
}
/* ── Toolbar (summary bar) ────────────────────────────────────────── */
.dt-toolbar {
    display: flex;
    min-width: 0px;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.dt-toolbar:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.dt-summary-correct {
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.dt-summary-correct:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.dt-summary-btn {
    cursor: pointer;
    font-weight: 500;
}
.dt-summary-btn:hover {
    text-decoration-line: underline;
}
/* ── Column header row (Property / Saved / Now) ──────────────────── */
.dt-column-header {
    display: flex;
    border-bottom-width: 1px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.dt-column-header:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.dt-column-header {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.dt-column-header:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dt-column-header {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.dt-column-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.dt-column-header {
    font-size: 0.625rem;
}
.dt-column-header > div {
    padding: var(--dt-cell-py) var(--dt-px);
}
.dt-column-header > div + div {
    border-left-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.dt-column-header > div + div:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
/* ── Run selector dropdown ────────────────────────────────────────── */
.dt-run-select {
    margin-top: -0.125rem;
    margin-bottom: -0.125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-size: inherit;
}
/* ── Section (collapsible header) ─────────────────────────────────── */
.dt-section-header {
    padding: var(--dt-header-py) var(--dt-px);
    display: flex;
    width: 100%;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    align-items: center;
    justify-content: space-between;
    border-top-width: 1px;
    border-bottom-width: 1px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.dt-section-header:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dt-section-header {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.dt-section-header:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dt-section-header {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.dt-section-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.dt-section-header {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.dt-section-header:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.dt-section-header:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.dt-section {
    margin-top: -1px;
}
.dt-section > div > table {
    margin-top: -1px;
}
.dt-section-chevron {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    width: 10px;
    font-size: 0.5em;
}
.dt-section-chevron.open {
    transform: rotate(90deg);
}
.dt-section-content {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.dt-section-content:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dt-section-title-group {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.dt-section-title {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.dt-section-subtitle {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --tw-text-opacity: 1;
    color: rgb(var(--cas-tint) / var(--tw-text-opacity, 1));
}
/* ── Add button + dropdown ────────────────────────────────────────── */
.dt-add-wrapper {
    position: relative;
}
.dt-add-btn {
    border: none;
    background: none;
    color: var(--syntax-string);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: opacity 150ms;
}
.dt-add-root:hover .dt-add-btn,
.dt-section-header:hover .dt-add-btn {
    opacity: 0.7;
}
.dt-add-btn:hover {
    opacity: 1;
}
.dt-add-root {
    display: flex;
    justify-content: flex-end;
    padding: 4px var(--dt-px);
    border-bottom: 1px solid var(--border-default);
}
.dt-add-overlay {
    position: fixed;
    inset: 0;
    z-index: 49;
}
.dt-add-dropdown {
    position: fixed;
    z-index: 50;
    min-width: 200px;
    max-height: 360px;
    overflow-y: auto;
    border-radius: 8px;
    border: 1px solid var(--border-default);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 6px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.dt-add-dropdown:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dt-add-dropdown-divider {
    height: 1px;
    margin: 4px 0;
    background: var(--border-default);
}
.dt-add-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    font-size: var(--dt-font-size);
    color: var(--text-body);
    background: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
}
.dt-add-dropdown-item:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.dt-add-dropdown-item:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dt-add-dropdown-action {
    color: var(--syntax-string);
    font-weight: 500;
}
.dt-add-dropdown-indent {
    padding-left: 26px;
}
.dt-add-dropdown-group {
    padding: 10px 10px 3px;
    font-size: calc(var(--dt-font-size) - 1px);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.dt-add-dropdown-group:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
/* ── Dropdown cell ────────────────────────────────────────────────── */
/* Negative margin stretches container to td edges (+ 1px for the td
   border) so the fixed-position panel aligns with the cell borders.
   Padding on the trigger restores the normal cell spacing. */
.dt-dropdown-cell {
    margin: calc(-1 * var(--dt-cell-py)) calc(-1 * var(--dt-px)) calc(-1 * var(--dt-cell-py)) calc(-1 * var(--dt-px) - 1px);
}
.dt-dropdown-cell [role="button"] {
    padding: var(--dt-cell-py) var(--dt-px) var(--dt-cell-py) calc(var(--dt-px) + 1px);
}
/* ── File dropdown (toolbar) ──────────────────────────────────────── */
/* Stretch trigger to toolbar edges so the dropdown panel aligns with
   the toolbar's bottom border, matching dt-dropdown-cell behaviour. */
.dt-file-dropdown {
    align-self: stretch;
}
.dt-file-dropdown [role="button"] {
    height: 100%;
    gap: 0.5rem;
    border-left-width: 1px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.dt-file-dropdown [role="button"]:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.dt-file-dropdown [role="option"].text-secondary {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.dt-file-dropdown [role="option"].text-secondary:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
/* ── Editable cell ────────────────────────────────────────────────── */
.dt-cell-editable {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
}
.dt-cell-editable input {
    min-width: 0px;
    flex: 1 1 0%;
    border-width: 0px;
    background-color: transparent;
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.dt-cell-editable input:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.dt-cell-editable input {
    padding: 0 16px 0 0;
    font: inherit;
    line-height: inherit;
}
/* DefinitionTable validation styling — `dt-cell-invalid` / `dt-cell-valid`
   live on an inner div (`dt-cell-display` / `dt-cell-editable`) inside the
   `<td>`. The visual cell-level border + bg is hoisted onto the parent <td>
   via `:has()` so the styling sits flush with the cell edges instead of
   appearing as a small box inside the td padding. The inner div keeps only
   the text colour.

   This is the bridge for DefinitionTable until it migrates to the unified
   `ValidatedDataTable` (which puts the class on the <td> directly). */
/* Hoist the validation styling to the parent <td> so it sits flush with the
   cell edges (and so the colour beats per-syntax classes like .dt-json-string).
   The :has() rule has higher specificity than .dt-json-* so the red wins. */
.dt-panel td:has(> .dt-cell-invalid),
.dt-panel td:has(> .dt-cell-display.dt-cell-invalid),
.dt-panel td:has(> .dt-cell-editable.dt-cell-invalid) {
    /* Same red as the samples-table invalid cells and the low-confidence tint —
       one attention colour across both tables. */
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.dt-panel td:has(> .dt-cell-invalid):is(.dark *),
.dt-panel td:has(> .dt-cell-display.dt-cell-invalid):is(.dark *),
.dt-panel td:has(> .dt-cell-editable.dt-cell-invalid):is(.dark *) {
    background-color: rgb(127 29 29 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.dt-panel td:has(> .dt-cell-invalid),
.dt-panel td:has(> .dt-cell-display.dt-cell-invalid),
.dt-panel td:has(> .dt-cell-editable.dt-cell-invalid) {
    border: 1px solid #f87171;
}
.dark .dt-panel td:has(> .dt-cell-invalid) {
    border-color: #dc2626;
}
/* Force red on every descendant — overrides .dt-json-string / .dt-json-number
   syntax colours that would otherwise win on specificity ties. */
.dt-panel td:has(> .dt-cell-invalid) *,
.dt-panel td:has(> .dt-cell-display.dt-cell-invalid) *,
.dt-panel td:has(> .dt-cell-editable.dt-cell-invalid) * {
    color: inherit;
}
.dt-panel td:has(> .dt-cell-valid),
.dt-panel td:has(> .dt-cell-display.dt-cell-valid),
.dt-panel td:has(> .dt-cell-editable.dt-cell-valid) {
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.dt-panel td:has(> .dt-cell-valid):is(.dark *),
.dt-panel td:has(> .dt-cell-display.dt-cell-valid):is(.dark *),
.dt-panel td:has(> .dt-cell-editable.dt-cell-valid):is(.dark *) {
    background-color: rgb(20 83 45 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.dt-panel td:has(> .dt-cell-valid),
.dt-panel td:has(> .dt-cell-display.dt-cell-valid),
.dt-panel td:has(> .dt-cell-editable.dt-cell-valid) {
    border: 1px solid #4ade80;
}
.dark .dt-panel td:has(> .dt-cell-valid) {
    border-color: #16a34a;
}
.dt-panel td:has(> .dt-cell-valid) *,
.dt-panel td:has(> .dt-cell-display.dt-cell-valid) *,
.dt-panel td:has(> .dt-cell-editable.dt-cell-valid) * {
    color: inherit;
}
/* Last row of a section table: under border-collapse the winning cell border is centered
   on the table's OUTER bottom edge, so its lower half paints beyond the table box and
   bleeds over the section divider below. `hidden` suppresses the collapsed edge entirely
   (it wins every border conflict); an inset shadow then draws the bottom line fully
   inside the cell so the coloured box closes above the divider. */
.dt-panel .table-body-flush > tr:last-child > td:has(> .dt-cell-invalid) {
    border-bottom-style: hidden;
    box-shadow: inset 0 -1px 0 0 #f87171;
}
.dark .dt-panel .table-body-flush > tr:last-child > td:has(> .dt-cell-invalid) {
    box-shadow: inset 0 -1px 0 0 #dc2626;
}
.dt-panel .table-body-flush > tr:last-child > td:has(> .dt-cell-valid) {
    border-bottom-style: hidden;
    box-shadow: inset 0 -1px 0 0 #4ade80;
}
.dark .dt-panel .table-body-flush > tr:last-child > td:has(> .dt-cell-valid) {
    box-shadow: inset 0 -1px 0 0 #16a34a;
}
/* ==========================================================================
   ValidatedDataTable (vdt-*) — unified table primitive used by both
   DefinitionTable and NormalizedSamplesTable.

   Border strategy: `border-collapse: collapse` so adjacent invalid cells
   share a single 1px red border. Column separators live on <col> elements
   (col-level border, lower precedence than cell). Row separators live on
   <tr> (row-level, lower precedence than cell). Validation borders sit on
   the <td> itself (cell-level, highest precedence) so they win against
   neighbouring gray separators on every side.

   Cell layout: <td> has zero padding. The single inner element
   (`.vdt-cell-content` or `.vdt-cell-input`) carries the padding and fills
   the cell, so the validation border sits flush at the cell edge and the
   click-area is the full cell.
   ========================================================================== */
.vdt-table {
    /* Cell spacing — vertical bigger than horizontal for legibility. Single
       source of truth shared by both DefinitionTable and NormalizedSamplesTable. */
    --vdt-cell-py: 6px;
    --vdt-header-py: 4px;
    --vdt-px: 8px;
    border-collapse: collapse;
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.75rem;
    line-height: 1rem;
}
.job-row .vdt-table {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.vdt-table > colgroup > col + col {
    border-left-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.vdt-table > colgroup > col + col:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.vdt-table > thead > tr {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.vdt-table > thead > tr:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.vdt-table > tbody > tr.vdt-row {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.vdt-table > tbody > tr.vdt-row:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.vdt-table > tbody > tr.vdt-row:last-child {
    border-bottom: 0;
}
.vdt-table > thead > tr > th,
.vdt-table > tbody > tr > td {
    padding: 0;
    vertical-align: middle;
    /* Lower bound so columns can't shrink to 1-char widths and force-truncate
       data on focus. Matches the old `.normalized-samples-table` min-width. */
    min-width: 70px;
}
/* Body cells use the smaller cell padding. */
.vdt-cell-content {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    height: 100%;
    padding: var(--vdt-cell-py) var(--vdt-px);
    min-width: 0;
    /* Anchor for the per-cell hover tooltip below. */
    position: relative;
}
/* Per-cell hover tooltip — used for validation error messages. CSS-only, no JS,
   no per-render cost. Solid red, white text, shadow + arrow for clarity.
   Uses CSS Anchor Positioning (position: fixed + anchor()) so the tooltip escapes
   overflow:hidden / overflow:auto containers and flips above the cell when there's
   no room below. Same pattern as .dt-normalization-popover. */
.vdt-cell-content:hover {
    anchor-name: --vdtcellpop;
}
.vdt-cell-tooltip {
    z-index: 50;
    display: none;
    font-size: 0.75rem;
    line-height: 1rem;
}
.job-row .vdt-cell-tooltip {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.vdt-cell-tooltip {
    position: fixed;
    position-anchor: --vdtcellpop;
    top: calc(anchor(bottom) + 6px);
    left: anchor(left);
    pointer-events: none;
    /* Browser tries below first; flips to above (with the arrow flipping too) when the
       tooltip wouldn't fit at the bottom of the viewport. */
    position-try-fallbacks: flip-block;
}
.vdt-cell-content:hover > .vdt-cell-tooltip {
    display: block;
}
.vdt-cell-tooltip-inner {
    display: block;
    border-radius: 0.375rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    font-weight: 500;
    line-height: 1.375;
    background: #dc2626;
    color: white;
    max-width: 320px;
    white-space: normal;
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.25), 0 2px 6px -2px rgba(220, 38, 38, 0.4);
}
.dark .vdt-cell-tooltip-inner {
    background: #ef4444;
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(248, 113, 113, 0.5);
}
/* Dropdown cell — the whole cell is the click target. Cursor: pointer is the affordance;
   chevron darkens on hover (see .vdt-cell-dropdown-chevron rule below). No bg-tint on hover
   because uncertain cells already carry a red-50 background — stacking a cas-tint tint
   on top produced a muddy color and looked like "weird hover" feedback. */
.vdt-cell-content-has-dd {
    cursor: pointer;
}
/* The CURRENT uncertain cell/row (navigation cursor). Same red background as every other
   uncertain cell — the cursor is the ring, not a second shade (two shades read as two
   different states). red-500 ring at 75% keeps contrast in light and dark mode. */
.vdt-cell-current {
    box-shadow: inset 0 0 0 2px rgb(239 68 68 / 0.75);
}
tr.dt-row-current {
    outline: 2px solid rgb(239 68 68 / 0.75);
    outline-offset: -2px;
}
/* The value display sits where the editable input would; same monospace + padding so the
   visual position is identical to plain cells. */
.vdt-cell-dropdown-trigger {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    /* Reserve room on the right so the value never slides under the chevron. */
    padding-right: 14px;
}
/* Chevron at the right edge — visual hint that the cell is a dropdown. pointer-events:
   none so the cell-content's onclick owns every click. */
.vdt-cell-dropdown-chevron {
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.vdt-cell-dropdown-chevron:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dt-file-dropdown [role="option"].vdt-cell-dropdown-chevron {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.dt-file-dropdown [role="option"].vdt-cell-dropdown-chevron:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.vdt-cell-dropdown-chevron {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    line-height: 1;
    pointer-events: none;
}
.vdt-cell-content-has-dd:hover .vdt-cell-dropdown-chevron {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.vdt-cell-content-has-dd:hover .vdt-cell-dropdown-chevron:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
/* Anchor name applied to the cell when its dropdown is open. The popover (a sibling of the
   truncate div) anchors to it. */
.vdt-cell-dd-open {
    anchor-name: --vdtcelldd;
}
/* Invisible backdrop — covers the viewport and closes the dropdown when clicked. Lives below
   the popover (sibling order: backdrop first, popover second) so a click on a popover item
   doesn't bubble to the backdrop. */
.vdt-cell-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 95;
    background: transparent;
}
/* Popover with the alternatives. Top layer (HTML `popover="manual"` + showPopover) so it
   escapes any ancestor overflow / containing block; positioning is set inline by JS in
   OnAfterRenderAsync — pixel-perfect aligned to the cell, no border-radius, butts up
   against the cell's bottom edge. Same monospace + text-xs as the table cells so the
   alternatives read as a continuation of the cell. */
.vdt-cell-dropdown-popover {
    overflow-y: auto;
    border-width: 1px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.vdt-cell-dropdown-popover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.vdt-cell-dropdown-popover {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.vdt-cell-dropdown-popover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.job-row .vdt-cell-dropdown-popover {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.vdt-cell-dropdown-popover {
    min-width: 160px;
    max-width: 280px;
    max-height: 320px;
    z-index: 100;
    /* HTML [popover] elements get user-agent default padding (0.25em) + margin which created
       a white gap around the items inside the popover. Reset them so items butt against the
       popover border with no inner whitespace. */
    padding: 0;
    margin: 0;
}
/* Items: roomier than table cells — the popover is a focused interaction, items get
   their own padding so they're easy to read and click. Inherits the popover's monospace
   font + text-xs but bumps padding generously. */
.vdt-cell-dropdown-item {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    text-align: left;
    color: inherit;
    font: inherit;
}
.vdt-cell-dropdown-item + .vdt-cell-dropdown-item {
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.vdt-cell-dropdown-item + .vdt-cell-dropdown-item:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.vdt-cell-dropdown-item:hover {
    background-color: rgb(var(--cas-tint) / 0.1);
}
.vdt-cell-dropdown-item-current {
    font-weight: 500;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.vdt-cell-dropdown-item-current:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.vdt-cell-dropdown-item-value {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.vdt-cell-dropdown-item-value:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.vdt-cell-dropdown-item-suffix {
    white-space: nowrap;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.vdt-cell-dropdown-item-suffix:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.vdt-cell-dropdown-item-suffix {
    font-variant-numeric: tabular-nums;
}
.vdt-cell-content-truncate {
    min-width: 0px;
    flex: 1 1 0%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vdt-cell-input {
    width: 100%;
    height: 100%;
    /* Input elements have a browser-default min-width that would push the
       column wider on focus. min-width: 0 keeps the cell width fixed. */
    min-width: 0;
    /* No internal padding — .vdt-cell-input always lives inside .vdt-cell-content which
       already provides the cell padding via --vdt-cell-py/--vdt-px. Setting padding here
       would double up (visible as: input text drifting ~6-8px inward when a read-only
       span shows at the cell's content edge, or in advanced-mode JSON-quoted spans the
       value appearing visually higher/inset compared to editable rows). */
    padding: 0;
    background: transparent;
    border: 0;
    outline: 0;
    margin: 0;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-indent: 0;
    color: inherit;
    box-sizing: border-box;
}
/* Header background and slightly taller padding (matches dt-header-py). */
.vdt-table > thead {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.vdt-table > thead:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.vdt-table > thead > tr > th .vdt-cell-content {
    padding: var(--vdt-header-py) var(--vdt-px);
}
.vdt-table > thead > tr > th {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.vdt-table > thead > tr > th:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.job-row .vdt-table > thead > tr > th {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.vdt-table > thead > tr > th {
    text-transform: none;
}
/* Validation: cell-level borders win precedence under collapse, so the
   red/green outline shows on all 4 sides regardless of neighbouring gray.
   ONE attention colour everywhere: validation problems and low-confidence
   cells share the same red — different colours for the same "needs your
   attention" read as different states. */
.vdt-cell-invalid {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.vdt-cell-invalid:is(.dark *) {
    background-color: rgb(127 29 29 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.vdt-cell-invalid {
    border: 1px solid #f87171;
}
.dark .vdt-cell-invalid {
    border-color: #dc2626;
}
.vdt-cell-valid {
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.vdt-cell-valid:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity, 1));
    background-color: rgb(20 83 45 / 0.2);
}
.vdt-cell-valid {
    border: 1px solid #22c55e;
}
.dark .vdt-cell-valid {
    border-color: #4ade80;
}
/* Depth indentation: the first cell on a row pads left proportional to
   `--vdt-depth` (set inline by the table primitive). Indented inside the
   content wrapper so it doesn't shift the validation border. */
.vdt-row > td:first-child > .vdt-cell-content {
    padding-left: calc(0.75rem + var(--vdt-depth, 0) * 16px);
}
/* Section header rendered as a tr-with-colspan inside the table. */
.vdt-section-row > .vdt-section-cell {
    padding: 0;
}
.vdt-section-header {
    padding: var(--dt-header-py, 8px) var(--dt-px, 12px);
    display: flex;
    width: 100%;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    align-items: center;
    justify-content: space-between;
    border-top-width: 1px;
    border-bottom-width: 1px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.vdt-section-header:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.vdt-section-header {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.vdt-section-header:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.vdt-section-header {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.vdt-section-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.vdt-section-header {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.vdt-section-header:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.vdt-section-header:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.vdt-section-title-group {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.vdt-section-title {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.vdt-section-subtitle {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --tw-text-opacity: 1;
    color: rgb(var(--cas-tint) / var(--tw-text-opacity, 1));
}
.vdt-section-chevron {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    width: 10px;
    font-size: 0.5em;
}
.vdt-section-chevron.open {
    transform: rotate(90deg);
}
/* Custom rows: full-width slots for stats, remarks, link rows, add-buttons. */
.vdt-custom-row > .vdt-custom-cell {
    padding: 0;
}
/* Outer wrapper. Flex column so toolbar + scroll viewport + footer share parent height
   correctly. `min-height: 0` lets the wrapper shrink inside a flex parent — without it
   the table sizes to its content (6000+ px on big certs) and Virtualize "sees" a huge
   viewport, defeating row virtualization. */
.vdt {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}
/* Sticky-header wrapper: the table sits inside a scroll container so a sticky <thead> can pin.
   `flex: 1 1 0` + `min-height: 0` makes this the actual scroll viewport, bounded by `.vdt`. */
.vdt-scroll {
    overflow: auto;
    flex: 1 1 0;
    min-height: 0;
    overscroll-behavior: contain;
}
/* ==========================================================================
   DataTable<T> — unified table component (greenfield, replaces Vdt* over time)
   See CAS.Blazor.Core/Components/DataTable/.
   ========================================================================== */
.datatable {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}
.datatable-scroll {
    overflow: auto;
    flex: 1 1 0;
    min-height: 0;
    overscroll-behavior: contain;
}
.datatable-table {
    --datatable-cell-py: 5px;
    --datatable-px: 10px;
    /* Mirror the legacy vdt-* custom properties onto datatable-table so cell templates that
       still use `.vdt-cell-content` / `.vdt-cell-content-truncate` (NormalizedSamplesTable
       hasn't fully migrated its inner markup yet) inherit the right padding. */
    /* Body cells: roomier than the tight 3px/6px the legacy override used — the read view
       was too cramped. Headers: tighter than the 8px override so the column titles don't
       dominate vertically over the data. */
    --vdt-cell-py: 7px;
    --vdt-px: 10px;
    --vdt-header-py: 5px;
    /* Inherit the same monospace + size as .vdt-table / DefinitionTable so cell text and
       inputs render in the project's standard mono — without this, descendants fall back
       to the body's sans-serif default. */
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.75rem;
    line-height: 1rem;
}
.job-row .datatable-table {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.datatable-table {
    border-collapse: collapse;
    /* Fixed layout makes <col width> values authoritative — auto layout treats them as
       hints and shrinks columns containing inputs (which have no intrinsic width) below
       what the content actually needs. */
    table-layout: fixed;
    width: 100%;
}
.datatable-table > colgroup > col + col {
    border-left-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.datatable-table > colgroup > col + col:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.datatable-table > thead > tr {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.datatable-table > thead > tr:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.datatable-table > tbody > tr.datatable-row {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.datatable-table > tbody > tr.datatable-row:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.datatable-table > tbody > tr.datatable-row:last-child {
    border-bottom: 0;
}
.datatable-table > thead > tr > th,
.datatable-table > tbody > tr > td {
    padding: 0;
    vertical-align: middle;
    min-width: 70px;
}
.datatable-table > thead {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.datatable-table > thead:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.datatable-table > thead > tr > th {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.datatable-table > thead > tr > th:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.job-row .datatable-table > thead > tr > th {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.datatable-table > thead > tr > th {
    text-transform: none;
}
/* Header cells delegate padding to the inner .datatable-cell, with a tighter vertical
   value than body cells (matches the vdt-table convention exactly). */
.datatable-table > thead > tr > th .datatable-cell {
    padding: var(--vdt-header-py) var(--vdt-px);
}
.datatable-thead-sticky {
    position: sticky;
    top: 0px;
    z-index: 10;
}
/* Body cell wrapper. Same metrics for display and editing-input states so the swap doesn't
   shift content — the input replaces the div in place with matching padding/line-height. */
.datatable-cell,
.datatable-cell-input {
    width: 100%;
    height: 100%;
    padding: var(--datatable-cell-py) var(--datatable-px);
    line-height: 1.25;
    font: inherit;
    box-sizing: border-box;
    min-width: 0;
}
.datatable-cell {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.datatable-cell-clickable {
    cursor: pointer;
}
.datatable-cell-input {
    background: transparent;
    border: 0;
    outline: 0;
    text-indent: 0;
    color: inherit;
}
.datatable-cell-input:focus {
    background: transparent;
}
/* First-column inset scales with row depth so nested sections indent without a separate
   class per level. */
.datatable-row > td:first-child > .datatable-cell {
    padding-left: calc(var(--datatable-px) + var(--datatable-depth, 0) * 16px);
}
/* Section headers + custom rows render as full-width tr (colspan handled inline). */
.datatable-section-row > .datatable-section-cell,
.datatable-custom-row > .datatable-custom-cell {
    padding: 0;
}
.datatable-section-header {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: 0.5rem;
    padding: 6px var(--datatable-px);
}
.datatable-section-title {
    font-weight: 500;
}
.datatable-section-subtitle {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.datatable-section-subtitle:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.job-row .datatable-section-subtitle {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.datatable-section-actions {
    margin-left: auto;
}
.datatable-custom-cell {
    padding: 6px var(--datatable-px);
}
/* Validation classes — adapter sets these on td via CellClassProvider. */
.datatable-cell-invalid {
    box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.85);
}
.datatable-cell-valid {
    box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.85);
}
.datatable-cell-corrected {
    background: rgba(34, 197, 94, 0.10);
}
.datatable-cell-uncertain {
    background: rgba(251, 191, 36, 0.18);
}
.datatable-cell-focused {
    background: rgba(255, 220, 0, 0.35);
    box-shadow: inset 0 0 0 2px rgba(220, 180, 0, 1);
}
.vdt-thead-sticky {
    position: sticky;
    top: 0px;
    z-index: 10;
}
.dt-cell-overlay {
    pointer-events: none;
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    right: 0;
    top: 0;
    bottom: 0;
}
.dt-cell-overlay > * {
    pointer-events: auto;
}
.dt-delete-field {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    margin-left: 4px;
    opacity: 0;
    transition: opacity 150ms;
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.dt-delete-field:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.dt-cell-display:hover .dt-delete-field {
    opacity: 1;
}
.dt-cell-reset {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.dt-cell-reset:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.dt-cell-reset {
    font-size: 0.625rem;
}
.dt-cell-reset:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.dt-cell-reset:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* ── Display cell ─────────────────────────────────────────────────── */
.dt-cell-display {
    display: flex;
    height: 100%;
    width: 100%;
    cursor: pointer;
    align-items: center;
}
.dt-status-dot {
    margin-right: 0.25rem;
    height: 0.5rem;
    width: 0.5rem;
    flex-shrink: 0;
    border-radius: 9999px;
}
/* ── JSON syntax colours ──────────────────────────────────────────── */
.dt-json-null {
    color: var(--syntax-literal);
    font-style: italic;
}
.dt-json-string {
    color: var(--syntax-string);
}
.dt-json-number {
    color: var(--syntax-number);
}
.dt-json-value {
    min-width: 0px;
    flex: 1 1 0%;
    word-break: break-all;
}
.dt-now-value {
    word-break: break-all;
}
/* ── Stats table ──────────────────────────────────────────────────── */
.dt-stats-table {
    width: 100%;
    table-layout: fixed;
}
.dt-stats-body > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.dt-stats-body > :not([hidden]) ~ :not([hidden]):is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.dt-stats-label {
    border-right-width: 1px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-right: 0.5rem;
    text-align: right;
    vertical-align: top;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.dt-stats-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.dt-stats-label {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.dt-stats-label:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.dt-stats-label {
    padding-left: var(--dt-px);
}
.dt-stats-value {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    vertical-align: top;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
/* ── Remarks section ──────────────────────────────────────────────── */
.dt-remarks {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.dt-remarks:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
/* ===========================================
   NORMALIZED SAMPLES TABLE
   =========================================== */
.normalized-samples-table {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.75rem;
    line-height: 1rem;
}
.job-row .normalized-samples-table {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.normalized-samples-table {
    table-layout: auto;
    /* `separate` lets per-cell borders (notably the validation indicator)
       render on all four sides without competing against neighbouring cells.
       `border-spacing: 0` keeps the visual layout flush like collapse. */
    border-collapse: separate;
    border-spacing: 0;
}
.normalized-samples-table .table-header-cell {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    text-transform: none;
}
.job-row .normalized-samples-table .table-header-cell {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.normalized-samples-table .table-header-cell {
    min-width: 70px;
}
.normalized-samples-table .table-cell {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
}
.job-row .normalized-samples-table .table-cell {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
/* Vertical separators between every column. The `:not(.dt-cell-invalid)`
   guard keeps the gray border off invalid cells so the red validation
   border doesn't compete with column-separator gray. */
.normalized-samples-table .table-header-cell:not(:last-child),
.normalized-samples-table .table-cell:not(:last-child):not(.dt-cell-invalid):not(.dt-cell-valid) {
    border-right-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.normalized-samples-table .table-header-cell:not(:last-child):is(.dark *),
.normalized-samples-table .table-cell:not(:last-child):not(.dt-cell-invalid):not(.dt-cell-valid):is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
/* Horizontal separators per row. In `separate` mode the existing
   `tr.table-row { border-b }` is ignored, so the line is moved to each body
   cell. The header gets its bottom line from `sticky-header-shadow` already,
   so it's intentionally excluded here. The last row drops its border so the
   table edge stays clean. */
.normalized-samples-table tbody .table-cell:not(.dt-cell-invalid):not(.dt-cell-valid) {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.normalized-samples-table tbody .table-cell:not(.dt-cell-invalid):not(.dt-cell-valid):is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.normalized-samples-table tbody tr:last-child .table-cell {
    border-bottom: 0;
}
.normalized-level-prefix {
    margin-right: 0.5rem;
    font-weight: 600;
}
.normalized-level-heat {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.normalized-level-product {
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.normalized-level-sample {
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.normalized-samples-table .table-cell.dt-cell-corrected {
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.normalized-samples-table .table-cell.dt-cell-corrected:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.normalized-samples-table .normalized-cell-input {
    margin: 0px;
    width: 100%;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.normalized-samples-table .normalized-cell-input:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.normalized-samples-table .normalized-cell-input {
    font: inherit;
}
/* Source cell highlight when linked to a bounding box.
   Two shapes:
   - On a single <td> (NormalizedSamplesTable cell click): highlight that cell directly.
   - On a <tr> (DefinitionTable row whose id matches the field path): highlight only the
     value cell (last column), never the property/label cell. */
td.field-source-active,
tr.field-source-active > td:last-child,
.vdt-cell-content.field-source-active {
    box-shadow: inset 0 0 0 2px rgba(220, 180, 0, 1) !important;
}
/* ── Segmented control (radio-group as pill row) ────────────────── */
.segmented-control {
    display: inline-flex;
    flex-wrap: wrap;
    overflow: hidden;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.segmented-control:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.segmented-control {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.segmented-control:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.segmented-control-segment {
    background-color: transparent;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.segmented-control-segment:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dt-file-dropdown [role="option"].segmented-control-segment {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.dt-file-dropdown [role="option"].segmented-control-segment:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.job-row .segmented-control-segment {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.segmented-control-segment {
    border-left-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.segmented-control-segment:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.segmented-control-segment {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
}
.segmented-control-segment:first-child {
    border-left: 0;
}
.segmented-control-segment:hover:not(:disabled):not(.selected) {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.segmented-control-segment:hover:not(:disabled):not(.selected):is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.segmented-control-segment:hover:not(:disabled):not(.selected) {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.segmented-control-segment:hover:not(:disabled):not(.selected):is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.segmented-control-segment.selected,
.segmented-control-segment.selected:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--cas-tint) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.segmented-control-segment:disabled {
    cursor: not-allowed;
}
/* =========================================================================
   SplitReview — wall of stacks with click-to-expand & drag between stacks
   ========================================================================= */
.split-review {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 0%, rgba(var(--cas-tint-rgb, 99 102 241) / 0.06), transparent 60%),
        radial-gradient(circle at 80% 100%, rgba(0, 0, 0, 0.05), transparent 50%);

    /* Unified timing tokens so transitions across the view feel coordinated. */
    --split-ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* easeOutQuart */
    --split-fast: 180ms;
    --split-mid: 280ms;
    --split-slow: 420ms;
}
.dark .split-review {
    background:
        radial-gradient(circle at 30% 0%, rgba(var(--cas-tint-rgb, 99 102 241) / 0.10), transparent 60%),
        radial-gradient(circle at 80% 100%, rgba(0, 0, 0, 0.30), transparent 50%);
}
/* ----- Header ----- */
.split-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-width: 1px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.split-review-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.split-review-header {
    flex: 0 0 auto;
}
.split-review-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.split-review-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.split-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.375rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.split-back-btn:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dt-file-dropdown [role="option"].split-back-btn {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.dt-file-dropdown [role="option"].split-back-btn:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.job-row .split-back-btn {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.split-back-btn:hover {
    background-color: rgb(243 244 246);
    color: rgb(17 24 39);
}
.dark .split-back-btn:hover {
    background-color: rgb(31 41 55);
    color: rgb(249 250 251);
}
.split-confirm-btn {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--cas-tint) / var(--tw-bg-opacity, 1));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.job-row .split-confirm-btn {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.split-confirm-btn:hover {
    opacity: 0.9;
}
/* ----- Stage (the visual canvas) ----- */
.split-review-stage {
    position: relative;
    flex: 1 1 0%;
    overflow: hidden;
}
.split-stacks {
    position: absolute;
    inset: 0px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: center;
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
    row-gap: 3rem;
    overflow-y: auto;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
    transition:
        filter var(--split-mid) var(--split-ease),
        transform var(--split-mid) var(--split-ease),
        opacity var(--split-mid) var(--split-ease);
    will-change: transform, filter, opacity;
}
/* ----- Loader (shown until top-card thumbnails finish loading) ----- */
.split-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--split-mid) var(--split-ease);
}
.split-review.is-images-ready .split-loader {
    opacity: 0;
}
.split-loader-spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid rgba(var(--cas-tint-rgb, 99 102 241), 0.16);
    border-top-color: rgb(var(--cas-tint-rgb, 99 102 241));
    animation: split-loader-spin 0.9s linear infinite;
}
@keyframes split-loader-spin {
    to { transform: rotate(360deg); }
}
/* Stacks-container stays interactive once images are ready; per-stack
   visibility is owned by the rules below so the reveal can cascade. */
.split-review:not(.is-images-ready) .split-stacks {
    pointer-events: none;
}
/* ----- Initial stack reveal (cascade) -------------------------------------
   Until is-images-ready flips on, every .split-stack (including the "+" tile,
   which carries the same class) is parked slightly below its slot with a
   small scale-down, completely transparent. When the class flips, the CSS
   rule no longer matches → transform/opacity transition back to defaults.
   The is-revealing class — added together with is-images-ready and removed
   ~1s later — substitutes a longer easing curve and a per-nth-child delay so
   the stacks come up one-by-one like cards being laid out. Once is-revealing
   is removed the .split-stack returns to its normal var(--split-mid) speed
   so hovers, drags and is-background transitions don't feel sluggish. */
.split-review:not(.is-images-ready) .split-stack {
    opacity: 0;
    transform: translateY(22px) scale(0.94);
}
.split-review.is-revealing .split-stack {
    transition:
        transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity   480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.split-review.is-revealing .split-stack:nth-child(1) { transition-delay: 0ms; }
.split-review.is-revealing .split-stack:nth-child(2) { transition-delay: 70ms; }
.split-review.is-revealing .split-stack:nth-child(3) { transition-delay: 140ms; }
.split-review.is-revealing .split-stack:nth-child(4) { transition-delay: 210ms; }
.split-review.is-revealing .split-stack:nth-child(5) { transition-delay: 280ms; }
.split-review.is-revealing .split-stack:nth-child(n+6) { transition-delay: 350ms; }
.split-review.is-expanded .split-stacks {
    transform: scale(0.72);
    filter: blur(5px) saturate(0.7);
    opacity: 0.6;
    pointer-events: none;
}
/* While a drag is happening, the expanded overlay fades and the stacks pop
   back to full size as drop targets. Both transitions use the same duration
   so the two halves of the gesture feel like one motion. */
.split-review.is-dragging .split-stacks {
    transform: none;
    filter: none;
    opacity: 1;
    pointer-events: auto;
}
/* ----- Individual stack ----- */
.split-stack {
    position: relative;
    display: flex;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    flex-direction: column;
    align-items: center;
    background: transparent;
    border: none;
    padding: 0;
    /* default colors (overridden inline via --stack-color) */
    --stack-color: #6366f1;
    --stack-color-soft: rgba(99, 102, 241, 0.18);
    transition:
        transform var(--split-mid) var(--split-ease),
        opacity var(--split-mid) var(--split-ease);
}
.split-stack:hover .split-stack-deck { transform: translateY(-4px); }
.split-stack.is-active { z-index: 30; }
.split-stack.is-background {
    opacity: 0.7;
}
.split-stack-deck {
    position: relative;
    /* Height fixed; width follows the actual page aspect ratio (set per-stack
       by JS once the top-card image loads). Default 0.708 = A4 portrait. */
    height: 254px;
    aspect-ratio: var(--page-aspect, 0.708);
    transition: transform var(--split-mid) var(--split-ease),
                aspect-ratio var(--split-mid) var(--split-ease);
}
/* deck card stacking — top card is layer 0, deeper layers offset down/right */
.split-thumb-deck {
    position: absolute;
    inset: 0;
    transform:
        translate(calc(var(--layer) * 6px), calc(var(--layer) * 5px))
        rotate(calc(var(--layer) * 1.2deg));
    z-index: calc(10 - var(--layer));
    transition:
        transform var(--split-mid) var(--split-ease),
        box-shadow var(--split-mid) var(--split-ease);
}
.split-thumb {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 6px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.08),
        0 8px 24px var(--stack-color-soft),
        0 0 0 1px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--stack-color);
    font-weight: 600;
}
.dark .split-thumb {
    background: #1f2937;
    color: white;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 8px 24px var(--stack-color-soft),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}
.split-thumb-pagenum {
    font-size: 28px;
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
}
.split-thumb-image {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    background: white;
    border-radius: 6px;
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
.dark .split-thumb-image {
    background: #1f2937;
}
/* Unified glow shared by the top deck card, expanded thumbs and the zoom view —
   feels like the same "lit" paper across all three views. */
.split-thumb-deck[style*="--layer:0"],
.split-thumb-large,
.split-zoom-image {
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.05),
        0 0 0 3px var(--stack-color-soft),
        0 0 24px 4px var(--stack-color-soft);
}
.dark .split-thumb-deck[style*="--layer:0"],
.dark .split-thumb-large,
.dark .split-zoom-image {
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.50),
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 0 3px var(--stack-color-soft),
        0 0 24px 4px var(--stack-color-soft);
}
.split-thumb-empty {
    border: 2px dashed rgba(0, 0, 0, 0.15);
    background: transparent;
    box-shadow: none;
}
.dark .split-thumb-empty {
    border-color: rgba(255, 255, 255, 0.15);
}
.split-thumb-plus {
    border: 2px dashed var(--stack-color);
    background: transparent;
    box-shadow: none;
    color: var(--stack-color);
    font-size: 32px;
    opacity: 0.55;
    transition: opacity 200ms ease, transform 200ms ease;
}
.split-stack-add {
    --stack-color: #94a3b8;
    --stack-color-soft: rgba(148, 163, 184, 0.15);
}
.split-stack-add:hover .split-thumb-plus {
    opacity: 1;
    transform: scale(1.04);
}
/* discarded stack: muted gray */
.split-stack-discarded {
    --stack-color: #94a3b8;
    --stack-color-soft: rgba(148, 163, 184, 0.20);
}
.split-stack-discarded .split-thumb-deck[style*="--layer:0"] {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.10),
        0 8px 24px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(0, 0, 0, 0.06);
}
/* ----- Stack meta ----- */
.split-stack-meta {
    margin-top: 1.25rem;
    text-align: center;
}
.split-stack-label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.split-stack-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.job-row .split-stack-label {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.split-stack-count {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.split-stack-count:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dt-file-dropdown [role="option"].split-stack-count {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.dt-file-dropdown [role="option"].split-stack-count:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.job-row .split-stack-count {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
/* ----- Expanded overlay ----- */
.split-expanded-overlay {
    position: absolute;
    inset: 0px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
    z-index: 50;
    /* No background tint — the stacks behind are already blurred + scaled by
       .split-review.is-expanded .split-stacks. Adding an overlay tint washes out
       the foreground thumbs. */
    transition: opacity var(--split-mid) var(--split-ease);
    pointer-events: auto;
}
.split-review.is-dragging .split-expanded-overlay {
    opacity: 0;
    pointer-events: none;
}
/* ----- Expanded view prev/next navigation --------------------------------- */
.split-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.7);
    color: rgb(17 24 39);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background var(--split-fast) var(--split-ease),
                transform var(--split-fast) var(--split-ease);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10),
                0 0 0 1px rgba(0, 0, 0, 0.05);
    z-index: 5;
}
.dark .split-nav-btn {
    background: rgba(31, 41, 55, 0.75);
    color: rgb(229 231 235);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30),
                0 0 0 1px rgba(255, 255, 255, 0.06);
}
.split-nav-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-50%) scale(1.06);
}
.dark .split-nav-btn:hover {
    background: rgba(31, 41, 55, 0.95);
}
.split-nav-prev { left: 1.5rem; }
.split-nav-next { right: 1.5rem; }
/* ----- SortableJS classes -------------------------------------------------
   When a drag is in progress SortableJS adds three temporary classes:
     .split-thumb-ghost  → placeholder where the dropped item would land
     .split-thumb-chosen → the item being held (still in the source list)
     .split-thumb-drag   → the floating clone that follows the cursor */
/* Default ghost (in the expanded-pages list): faint placeholder */
.split-thumb-ghost {
    opacity: 0.2;
}
.split-thumb-chosen {
    opacity: 0.35;
}
.split-thumb-drag {
    cursor: grabbing;
    /* SortableJS positions this element via `transform: matrix(...)`; we leave
       its transform alone (otherwise SortableJS's matrix.a compensation
       compounds). The visible card + box-shadow lives on `.split-thumb-drag
       -inner` (a child div the JS wraps in on drag start) so the inner can
       scale independently for the over-dropzone shrink. */
}
/* Higher specificity (0,2,0) than `.split-thumb-large` (0,1,0) so we win the
   cascade and the outer becomes invisible (the inner draws everything,
   including the box-shadow that `.split-thumb-large` would otherwise apply
   via the unified glow rule at the top of this file). */
.split-thumb-large.split-thumb-drag {
    background: transparent;
    box-shadow: none;
}
.split-thumb-drag-inner {
    width: 100%;
    height: 100%;
    background: white;
    box-shadow:
        0 32px 64px rgba(0, 0, 0, 0.35),
        0 12px 20px rgba(0, 0, 0, 0.20),
        0 0 0 2px var(--stack-color),
        0 0 80px 16px var(--stack-color-soft);
    transition: transform 0.16s ease-out, box-shadow 0.16s ease-out;
}
.dark .split-thumb-drag-inner {
    background: #1f2937;
}
/* `transform: scale(0.4)` also scales the box-shadow — a 2px ring becomes
   0.8px, the 80px glow blur becomes 32px, etc. Pre-multiply the shadow
   offsets/blur/spread by 1/0.4 = 2.5× so the rendered shadow matches the
   original (non-shrunk) values after scaling. */
.split-thumb-drag-inner.is-shrunk {
    transform: scale(0.4);
    box-shadow:
        0 80px 160px rgba(0, 0, 0, 0.35),
        0 30px 50px rgba(0, 0, 0, 0.20),
        0 0 0 5px var(--stack-color),
        0 0 200px 40px var(--stack-color-soft);
}
/* The original image sizing rule (`.split-thumb-large > .split-thumb-image`)
   doesn't match anymore once we've wrapped the image in `.split-thumb-drag
   -inner`. Restore it for the drag clone. */
.split-thumb-drag-inner > .split-thumb-image {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}
/* When the ghost lands inside an overview deck the 360px-tall large thumb
   overflows the deck container and visually crashes through neighbouring
   stacks — so we hide it. We must NOT use `display: none` here: SortableJS
   reads the ghost's bounding rect at drop time to determine the insertion
   point, and a hidden-without-layout element makes the drop abort. Keep it
   in the flow but visually gone. */
.split-stack-deck > .split-thumb-ghost {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
/* Stack/«+» highlight when its deck contains a ghost (i.e. it's the current
   drop target). Uses CSS :has() which matches modern Chromium/Safari/Firefox. */
.split-stack:has(.split-stack-deck > .split-thumb-ghost) .split-stack-deck,
.split-stack-add:has(.split-stack-deck > .split-thumb-ghost) .split-stack-deck {
    transform: translateY(-10px) scale(1.05);
}
.split-stack:has(.split-stack-deck > .split-thumb-ghost) .split-thumb-deck[style*="--layer:0"] {
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.05),
        0 0 0 6px var(--stack-color),
        0 0 80px 20px var(--stack-color-soft);
}
.split-stack-add:has(.split-stack-deck > .split-thumb-ghost) .split-thumb-plus {
    opacity: 1;
    border-style: solid;
    border-width: 3px;
    border-color: rgb(var(--cas-tint-rgb, 99 102 241));
    color: rgb(var(--cas-tint-rgb, 99 102 241));
    background: rgba(var(--cas-tint-rgb, 99 102 241), 0.08);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.05),
        0 0 0 3px rgba(var(--cas-tint-rgb, 99 102 241), 0.35),
        0 0 24px 4px rgba(var(--cas-tint-rgb, 99 102 241), 0.35);
    transform: scale(1.04);
}
.split-expanded-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    /* Auto-size to content. Stays narrower than the overlay so the "background"
       area around it is empty (overlay handles click-to-close) AND so a
       SortableJS drop onto a stack-deck behind doesn't get captured by this
       expanded-pages container.

       The glow on each thumb extends past these bounds — we keep overflow
       visible here and let the overlay handle scroll when content is tall. */
    max-width: 92%;
    overflow: visible;
}
.split-thumb-large {
    /* Fixed height + width derived from --page-aspect. We set width explicitly
       (not via aspect-ratio alone) because this card is a flex item containing
       an <img> whose natural dimensions otherwise become the flex basis and
       get clamped to max-width — making portrait pages render as 600×360
       landscape cards. aspect-ratio stays as a fallback. */
    height: 360px;
    width: calc(360px * var(--page-aspect, 0.708));
    aspect-ratio: var(--page-aspect, 0.708);
    min-width: 200px;
    max-width: 600px;
    cursor: grab;
    background: white;
    /* Promote to its own compositor layer so transform animations don't trigger
       paints of the large colored box-shadow. */
    will-change: transform, opacity;
    /* box-shadow is the unified glow defined alongside .split-thumb-deck[layer:0]
       (see "Unified glow" rule above). No CSS animation — JS orchestrates the
       expand-from-stack fly-out via splitReview.animateExpand. */
}
.dark .split-thumb-large {
    background: #1f2937;
}
/* Highlight for the page that was just dropped here from another stack —
   pulses the colored glow twice over ~2.4s, then settles back to the unified
   glow. The animation overrides the box-shadow only while playing; once it
   finishes the .split-thumb-deck/.split-thumb-large/.split-zoom-image rule
   applies again. */
.split-thumb-large.is-newly-added {
    animation: split-newly-added 1.2s ease-in-out 2 both;
    z-index: 2;
}
@keyframes split-newly-added {
    0%, 100% {
        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.12),
            0 0 0 1px rgba(0, 0, 0, 0.05),
            0 0 0 3px var(--stack-color-soft),
            0 0 24px 4px var(--stack-color-soft);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 14px 32px rgba(0, 0, 0, 0.18),
            0 0 0 1px rgba(0, 0, 0, 0.05),
            0 0 0 6px var(--stack-color),
            0 0 80px 16px var(--stack-color-soft);
        transform: scale(1.04);
    }
}
/* The image fills the (already aspect-locked) parent and is contain-fitted —
   any minor mismatch with --page-aspect just shows a tiny letterbox rather
   than resizing the card. */
.split-thumb-large > .split-thumb-image {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}
.split-thumb-large:active { cursor: grabbing; }
/* page-number font already 28px via .split-thumb-pagenum default */
@keyframes split-thumb-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* ----- Page zoom (single page fullsize) -----------------------------------
   Click on a large thumb opens a full-size page preview on top of everything.
   ESC or click-outside dismisses. */
.split-zoom-overlay {
    position: absolute;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 80;
    /* No dark tint — just blur whatever's behind. Light dimming via white
       overlay so the foreground image still pops. */
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
    cursor: zoom-out;
    overflow: hidden;
    animation: split-zoom-overlay-in var(--split-mid) var(--split-ease);
}
.dark .split-zoom-overlay {
    background: rgba(15, 23, 42, 0.35);
}
@keyframes split-zoom-overlay-in {
    from { opacity: 0; backdrop-filter: blur(0); }
    to   { opacity: 1; backdrop-filter: blur(10px); }
}
.split-zoom-image {
    max-width: 92%;
    max-height: 92%;
    border-radius: 8px;
    /* box-shadow comes from the unified glow rule and uses --stack-color-soft
       inherited from the zoom-overlay inline style. No CSS animation — JS
       FLIP from the clicked thumb's rect (splitReview.animateZoomIn). */
    -o-object-fit: contain;
       object-fit: contain;
    cursor: default;
    transform-origin: center center;
    will-change: transform;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    /* Hidden by default — JS animateZoomIn reveals the image once it has set
       the initial transform to the clicked-thumb's rect. Without this guard,
       cached (preloaded) images paint at full size for one frame before JS
       runs, causing a visible "shrink then grow" jolt on second-zoom click. */
    opacity: 0;
}
/* While zoomed, push the expanded view back like overview→expanded does for stacks. */
.split-review.is-zoomed .split-expanded-overlay {
    transform: scale(0.94);
    filter: blur(3px) saturate(0.85);
    opacity: 0.55;
    pointer-events: none;
}
.split-zoom-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--split-fast) var(--split-ease);
    z-index: 1;
    border: none;
}
.split-zoom-close:hover {
    background: rgba(255, 255, 255, 0.25);
}
/* Tighter stagger — last visible thumb lands within ~420ms total. */
.split-thumb-large:nth-child(1) { animation-delay: 0ms; }
.split-thumb-large:nth-child(2) { animation-delay: 30ms; }
.split-thumb-large:nth-child(3) { animation-delay: 60ms; }
.split-thumb-large:nth-child(4) { animation-delay: 90ms; }
.split-thumb-large:nth-child(5) { animation-delay: 120ms; }
.split-thumb-large:nth-child(6) { animation-delay: 150ms; }
.split-thumb-large:nth-child(n+7) { animation-delay: 180ms; }
*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}
::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}
/* ! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
html.dark,
    html.dark body {
        background-color: rgb(17 24 39); /* gray-900 */
        color: rgb(249 250 251); /* gray-50 */
    }
.\!container {
    width: 100% !important;
}
.container {
    width: 100%;
}
@media (min-width: 640px) {
    .\!container {
        max-width: 640px !important;
    }
    .container {
        max-width: 640px;
    }
}
@media (min-width: 768px) {
    .\!container {
        max-width: 768px !important;
    }
    .container {
        max-width: 768px;
    }
}
@media (min-width: 1024px) {
    .\!container {
        max-width: 1024px !important;
    }
    .container {
        max-width: 1024px;
    }
}
@media (min-width: 1280px) {
    .\!container {
        max-width: 1280px !important;
    }
    .container {
        max-width: 1280px;
    }
}
@media (min-width: 1536px) {
    .\!container {
        max-width: 1536px !important;
    }
    .container {
        max-width: 1536px;
    }
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.pointer-events-none {
    pointer-events: none;
}
.pointer-events-auto {
    pointer-events: auto;
}
.\!visible {
    visibility: visible !important;
}
.visible {
    visibility: visible;
}
.invisible {
    visibility: hidden;
}
.collapse {
    visibility: collapse;
}
.static {
    position: static;
}
.fixed {
    position: fixed;
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.sticky {
    position: sticky;
}
.inset-0 {
    inset: 0px;
}
.inset-y-0 {
    top: 0px;
    bottom: 0px;
}
.-right-6 {
    right: -1.5rem;
}
.bottom-0 {
    bottom: 0px;
}
.bottom-4 {
    bottom: 1rem;
}
.bottom-full {
    bottom: 100%;
}
.left-0 {
    left: 0px;
}
.left-0\.5 {
    left: 0.125rem;
}
.left-2 {
    left: 0.5rem;
}
.left-full {
    left: 100%;
}
.right-0 {
    right: 0px;
}
.right-2 {
    right: 0.5rem;
}
.right-3 {
    right: 0.75rem;
}
.right-4 {
    right: 1rem;
}
.right-5 {
    right: 1.25rem;
}
.right-8 {
    right: 2rem;
}
.right-full {
    right: 100%;
}
.top-0 {
    top: 0px;
}
.top-0\.5 {
    top: 0.125rem;
}
.top-1\/2 {
    top: 50%;
}
.top-2 {
    top: 0.5rem;
}
.top-full {
    top: 100%;
}
.isolate {
    isolation: isolate;
}
.z-10 {
    z-index: 10;
}
.z-40 {
    z-index: 40;
}
.z-50 {
    z-index: 50;
}
.z-\[9998\] {
    z-index: 9998;
}
.z-\[9999\] {
    z-index: 9999;
}
.m-0 {
    margin: 0px;
}
.-mx-1\.5 {
    margin-left: -0.375rem;
    margin-right: -0.375rem;
}
.-my-0 {
    margin-top: -0px;
    margin-bottom: -0px;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}
.-mt-2 {
    margin-top: -0.5rem;
}
.mb-1 {
    margin-bottom: 0.25rem;
}
.mb-1\.5 {
    margin-bottom: 0.375rem;
}
.mb-2 {
    margin-bottom: 0.5rem;
}
.mb-3 {
    margin-bottom: 0.75rem;
}
.mb-4 {
    margin-bottom: 1rem;
}
.mb-6 {
    margin-bottom: 1.5rem;
}
.mb-8 {
    margin-bottom: 2rem;
}
.ml-0\.5 {
    margin-left: 0.125rem;
}
.ml-1 {
    margin-left: 0.25rem;
}
.ml-2 {
    margin-left: 0.5rem;
}
.ml-3 {
    margin-left: 0.75rem;
}
.ml-4 {
    margin-left: 1rem;
}
.ml-6 {
    margin-left: 1.5rem;
}
.ml-auto {
    margin-left: auto;
}
.mr-1 {
    margin-right: 0.25rem;
}
.mr-1\.5 {
    margin-right: 0.375rem;
}
.mr-2 {
    margin-right: 0.5rem;
}
.mr-3 {
    margin-right: 0.75rem;
}
.mr-4 {
    margin-right: 1rem;
}
.mt-0 {
    margin-top: 0px;
}
.mt-0\.5 {
    margin-top: 0.125rem;
}
.mt-1 {
    margin-top: 0.25rem;
}
.mt-2 {
    margin-top: 0.5rem;
}
.mt-3 {
    margin-top: 0.75rem;
}
.mt-4 {
    margin-top: 1rem;
}
.mt-6 {
    margin-top: 1.5rem;
}
.mt-8 {
    margin-top: 2rem;
}
.block {
    display: block;
}
.inline-block {
    display: inline-block;
}
.inline {
    display: inline;
}
.flex {
    display: flex;
}
.inline-flex {
    display: inline-flex;
}
.table {
    display: table;
}
.table-cell {
    display: table-cell;
}
.table-row {
    display: table-row;
}
.grid {
    display: grid;
}
.contents {
    display: contents;
}
.hidden {
    display: none;
}
.h-1 {
    height: 0.25rem;
}
.h-10 {
    height: 2.5rem;
}
.h-12 {
    height: 3rem;
}
.h-14 {
    height: 3.5rem;
}
.h-16 {
    height: 4rem;
}
.h-2 {
    height: 0.5rem;
}
.h-2\.5 {
    height: 0.625rem;
}
.h-24 {
    height: 6rem;
}
.h-3 {
    height: 0.75rem;
}
.h-3\.5 {
    height: 0.875rem;
}
.h-4 {
    height: 1rem;
}
.h-5 {
    height: 1.25rem;
}
.h-6 {
    height: 1.5rem;
}
.h-7 {
    height: 1.75rem;
}
.h-8 {
    height: 2rem;
}
.h-9 {
    height: 2.25rem;
}
.h-\[26px\] {
    height: 26px;
}
.h-\[30px\] {
    height: 30px;
}
.h-\[36px\] {
    height: 36px;
}
.h-\[38px\] {
    height: 38px;
}
.h-\[46px\] {
    height: 46px;
}
.h-\[calc\(100vh-4rem\)\] {
    height: calc(100vh - 4rem);
}
.h-full {
    height: 100%;
}
.h-px {
    height: 1px;
}
.h-screen {
    height: 100vh;
}
.max-h-48 {
    max-height: 12rem;
}
.max-h-60 {
    max-height: 15rem;
}
.max-h-64 {
    max-height: 16rem;
}
.max-h-80 {
    max-height: 20rem;
}
.max-h-96 {
    max-height: 24rem;
}
.max-h-\[420px\] {
    max-height: 420px;
}
.max-h-\[calc\(100vh-4rem\)\] {
    max-height: calc(100vh - 4rem);
}
.max-h-full {
    max-height: 100%;
}
.min-h-0 {
    min-height: 0px;
}
.min-h-\[100px\] {
    min-height: 100px;
}
.min-h-\[38px\] {
    min-height: 38px;
}
.min-h-\[62px\] {
    min-height: 62px;
}
.min-h-\[70px\] {
    min-height: 70px;
}
.min-h-screen {
    min-height: 100vh;
}
.w-0 {
    width: 0px;
}
.w-1\/2 {
    width: 50%;
}
.w-1\/3 {
    width: 33.333333%;
}
.w-1\/4 {
    width: 25%;
}
.w-1\/5 {
    width: 20%;
}
.w-10 {
    width: 2.5rem;
}
.w-11 {
    width: 2.75rem;
}
.w-12 {
    width: 3rem;
}
.w-14 {
    width: 3.5rem;
}
.w-16 {
    width: 4rem;
}
.w-2 {
    width: 0.5rem;
}
.w-2\.5 {
    width: 0.625rem;
}
.w-2\/3 {
    width: 66.666667%;
}
.w-2\/5 {
    width: 40%;
}
.w-20 {
    width: 5rem;
}
.w-28 {
    width: 7rem;
}
.w-3 {
    width: 0.75rem;
}
.w-3\.5 {
    width: 0.875rem;
}
.w-3\/4 {
    width: 75%;
}
.w-3\/5 {
    width: 60%;
}
.w-32 {
    width: 8rem;
}
.w-4 {
    width: 1rem;
}
.w-4\/5 {
    width: 80%;
}
.w-40 {
    width: 10rem;
}
.w-44 {
    width: 11rem;
}
.w-48 {
    width: 12rem;
}
.w-5 {
    width: 1.25rem;
}
.w-56 {
    width: 14rem;
}
.w-6 {
    width: 1.5rem;
}
.w-64 {
    width: 16rem;
}
.w-7 {
    width: 1.75rem;
}
.w-72 {
    width: 18rem;
}
.w-8 {
    width: 2rem;
}
.w-\[120px\] {
    width: 120px;
}
.w-\[180px\] {
    width: 180px;
}
.w-\[200px\] {
    width: 200px;
}
.w-\[30\%\] {
    width: 30%;
}
.w-\[30px\] {
    width: 30px;
}
.w-\[38px\] {
    width: 38px;
}
.w-\[40px\] {
    width: 40px;
}
.w-\[46px\] {
    width: 46px;
}
.w-\[72px\] {
    width: 72px;
}
.w-\[X\] {
    width: X;
}
.w-\[calc\(\(100\%-452px\)\*1\.5\/10\.5\)\] {
    width: calc((100% - 452px) * 1.5 / 10.5);
}
.w-\[calc\(\(100\%-452px\)\*2\/10\.5\)\] {
    width: calc((100% - 452px) * 2 / 10.5);
}
.w-\[calc\(\(100\%-452px\)\*4\/10\.5\)\] {
    width: calc((100% - 452px) * 4 / 10.5);
}
.w-auto {
    width: auto;
}
.w-full {
    width: 100%;
}
.min-w-0 {
    min-width: 0px;
}
.min-w-\[1\.25rem\] {
    min-width: 1.25rem;
}
.min-w-\[100px\] {
    min-width: 100px;
}
.min-w-\[12rem\] {
    min-width: 12rem;
}
.min-w-\[150px\] {
    min-width: 150px;
}
.min-w-\[200px\] {
    min-width: 200px;
}
.min-w-\[24px\] {
    min-width: 24px;
}
.min-w-\[280px\] {
    min-width: 280px;
}
.min-w-full {
    min-width: 100%;
}
.min-w-max {
    min-width: -moz-max-content;
    min-width: max-content;
}
.max-w-40 {
    max-width: 10rem;
}
.max-w-\[280px\] {
    max-width: 280px;
}
.max-w-full {
    max-width: 100%;
}
.max-w-md {
    max-width: 28rem;
}
.max-w-sm {
    max-width: 24rem;
}
.flex-1 {
    flex: 1 1 0%;
}
.flex-shrink {
    flex-shrink: 1;
}
.flex-shrink-0 {
    flex-shrink: 0;
}
.shrink {
    flex-shrink: 1;
}
.shrink-0 {
    flex-shrink: 0;
}
.grow {
    flex-grow: 1;
}
.grow-0 {
    flex-grow: 0;
}
.table-fixed {
    table-layout: fixed;
}
.border-collapse {
    border-collapse: collapse;
}
.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {
    50% {
        opacity: .5;
    }
}
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.animate-spin {
    animation: spin 1s linear infinite;
}
.cursor-grab {
    cursor: grab;
}
.cursor-help {
    cursor: help;
}
.cursor-not-allowed {
    cursor: not-allowed;
}
.cursor-pointer {
    cursor: pointer;
}
.select-none {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
.select-all {
    -webkit-user-select: all;
       -moz-user-select: all;
            user-select: all;
}
.resize {
    resize: both;
}
.appearance-none {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-\[auto_1fr\] {
    grid-template-columns: auto 1fr;
}
.flex-col {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.content-start {
    align-content: flex-start;
}
.items-start {
    align-items: flex-start;
}
.items-end {
    align-items: flex-end;
}
.items-center {
    align-items: center;
}
.items-baseline {
    align-items: baseline;
}
.justify-end {
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.gap-0 {
    gap: 0px;
}
.gap-0\.5 {
    gap: 0.125rem;
}
.gap-1 {
    gap: 0.25rem;
}
.gap-1\.5 {
    gap: 0.375rem;
}
.gap-2 {
    gap: 0.5rem;
}
.gap-3 {
    gap: 0.75rem;
}
.gap-4 {
    gap: 1rem;
}
.gap-5 {
    gap: 1.25rem;
}
.gap-6 {
    gap: 1.5rem;
}
.gap-8 {
    gap: 2rem;
}
.gap-px {
    gap: 1px;
}
.gap-x-10 {
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
}
.gap-x-3 {
    -moz-column-gap: 0.75rem;
         column-gap: 0.75rem;
}
.gap-y-1 {
    row-gap: 0.25rem;
}
.gap-y-12 {
    row-gap: 3rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.25rem * var(--tw-space-x-reverse));
    margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.self-stretch {
    align-self: stretch;
}
.overflow-auto {
    overflow: auto;
}
.overflow-hidden {
    overflow: hidden;
}
.\!overflow-visible {
    overflow: visible !important;
}
.overflow-visible {
    overflow: visible;
}
.overflow-x-auto {
    overflow-x: auto;
}
.overflow-y-auto {
    overflow-y: auto;
}
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.whitespace-nowrap {
    white-space: nowrap;
}
.whitespace-pre {
    white-space: pre;
}
.whitespace-pre-wrap {
    white-space: pre-wrap;
}
.break-words {
    overflow-wrap: break-word;
}
.break-all {
    word-break: break-all;
}
.rounded {
    border-radius: 0.25rem;
}
.rounded-2xl {
    border-radius: 1rem;
}
.rounded-full {
    border-radius: 9999px;
}
.rounded-lg {
    border-radius: 0.5rem;
}
.rounded-md {
    border-radius: 0.375rem;
}
.rounded-sm {
    border-radius: 0.125rem;
}
.rounded-l-md {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}
.rounded-r-md {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}
.\!border-0 {
    border-width: 0px !important;
}
.border {
    border-width: 1px;
}
.border-0 {
    border-width: 0px;
}
.border-2 {
    border-width: 2px;
}
.border-4 {
    border-width: 4px;
}
.border-y {
    border-top-width: 1px;
    border-bottom-width: 1px;
}
.border-b {
    border-bottom-width: 1px;
}
.border-b-2 {
    border-bottom-width: 2px;
}
.border-l {
    border-left-width: 1px;
}
.border-l-2 {
    border-left-width: 2px;
}
.border-r {
    border-right-width: 1px;
}
.border-t {
    border-top-width: 1px;
}
.border-dashed {
    border-style: dashed;
}
.border-none {
    border-style: none;
}
.\!border-cas-tint {
    --tw-border-opacity: 1 !important;
    border-color: rgb(var(--cas-tint) / var(--tw-border-opacity, 1)) !important;
}
.border-amber-200 {
    --tw-border-opacity: 1;
    border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-amber-500 {
    --tw-border-opacity: 1;
    border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.border-cas-tint {
    --tw-border-opacity: 1;
    border-color: rgb(var(--cas-tint) / var(--tw-border-opacity, 1));
}
.border-cas-tint-dark {
    --tw-border-opacity: 1;
    border-color: rgb(var(--cas-tint-dark) / var(--tw-border-opacity, 1));
}
.border-cas-tint\/20 {
    border-color: rgb(var(--cas-tint) / 0.2);
}
.border-cas-tint\/30 {
    border-color: rgb(var(--cas-tint) / 0.3);
}
.border-cas-tint\/40 {
    border-color: rgb(var(--cas-tint) / 0.4);
}
.border-gray-200 {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-green-200 {
    --tw-border-opacity: 1;
    border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.border-red-200 {
    --tw-border-opacity: 1;
    border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-500 {
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-transparent {
    border-color: transparent;
}
.border-l-cas-tint {
    --tw-border-opacity: 1;
    border-left-color: rgb(var(--cas-tint) / var(--tw-border-opacity, 1));
}
.border-l-transparent {
    border-left-color: transparent;
}
.\!bg-cas-tint\/10 {
    background-color: rgb(var(--cas-tint) / 0.1) !important;
}
.bg-amber-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-amber-600\/70 {
    background-color: rgb(217 119 6 / 0.7);
}
.bg-black\/50 {
    background-color: rgb(0 0 0 / 0.5);
}
.bg-blue-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-600\/20 {
    background-color: rgb(37 99 235 / 0.2);
}
.bg-blue-600\/70 {
    background-color: rgb(37 99 235 / 0.7);
}
.bg-cas-tint {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--cas-tint) / var(--tw-bg-opacity, 1));
}
.bg-cas-tint\/10 {
    background-color: rgb(var(--cas-tint) / 0.1);
}
.bg-cas-tint\/15 {
    background-color: rgb(var(--cas-tint) / 0.15);
}
.bg-cas-tint\/20 {
    background-color: rgb(var(--cas-tint) / 0.2);
}
.bg-cas-tint\/70 {
    background-color: rgb(var(--cas-tint) / 0.7);
}
.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.bg-gray-500\/75 {
    background-color: rgb(107 114 128 / 0.75);
}
.bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-green-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-green-600\/20 {
    background-color: rgb(22 163 74 / 0.2);
}
.bg-green-600\/70 {
    background-color: rgb(22 163 74 / 0.7);
}
.bg-orange-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-purple-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-red-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-red-600\/20 {
    background-color: rgb(220 38 38 / 0.2);
}
.bg-red-600\/70 {
    background-color: rgb(220 38 38 / 0.7);
}
.bg-transparent {
    background-color: transparent;
}
.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-yellow-200\/30 {
    background-color: rgb(254 240 138 / 0.3);
}
.bg-yellow-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.bg-opacity-10 {
    --tw-bg-opacity: 0.1;
}
.bg-opacity-75 {
    --tw-bg-opacity: 0.75;
}
.bg-opacity-90 {
    --tw-bg-opacity: 0.9;
}
.object-contain {
    -o-object-fit: contain;
       object-fit: contain;
}
.object-cover {
    -o-object-fit: cover;
       object-fit: cover;
}
.\!p-0 {
    padding: 0px !important;
}
.p-0 {
    padding: 0px;
}
.p-1 {
    padding: 0.25rem;
}
.p-1\.5 {
    padding: 0.375rem;
}
.p-12 {
    padding: 3rem;
}
.p-2 {
    padding: 0.5rem;
}
.p-3 {
    padding: 0.75rem;
}
.p-4 {
    padding: 1rem;
}
.p-6 {
    padding: 1.5rem;
}
.px-0 {
    padding-left: 0px;
    padding-right: 0px;
}
.px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}
.px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}
.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
}
.py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}
.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.py-px {
    padding-top: 1px;
    padding-bottom: 1px;
}
.\!pr-0 {
    padding-right: 0px !important;
}
.pb-0\.5 {
    padding-bottom: 0.125rem;
}
.pb-2 {
    padding-bottom: 0.5rem;
}
.pb-20 {
    padding-bottom: 5rem;
}
.pb-5 {
    padding-bottom: 1.25rem;
}
.pb-6 {
    padding-bottom: 1.5rem;
}
.pl-3 {
    padding-left: 0.75rem;
}
.pl-5 {
    padding-left: 1.25rem;
}
.pl-7 {
    padding-left: 1.75rem;
}
.pl-9 {
    padding-left: 2.25rem;
}
.pr-0 {
    padding-right: 0px;
}
.pr-1\.5 {
    padding-right: 0.375rem;
}
.pr-10 {
    padding-right: 2.5rem;
}
.pr-2 {
    padding-right: 0.5rem;
}
.pr-3 {
    padding-right: 0.75rem;
}
.pr-4 {
    padding-right: 1rem;
}
.pr-6 {
    padding-right: 1.5rem;
}
.pr-8 {
    padding-right: 2rem;
}
.pt-1\.5 {
    padding-top: 0.375rem;
}
.pt-10 {
    padding-top: 2.5rem;
}
.pt-2 {
    padding-top: 0.5rem;
}
.pt-3 {
    padding-top: 0.75rem;
}
.pt-4 {
    padding-top: 1rem;
}
.pt-5 {
    padding-top: 1.25rem;
}
.pt-6 {
    padding-top: 1.5rem;
}
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.align-top {
    vertical-align: top;
}
.align-middle {
    vertical-align: middle;
}
.align-bottom {
    vertical-align: bottom;
}
.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}
.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}
.text-5xl {
    font-size: 3rem;
    line-height: 1;
}
.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}
.text-8xl {
    font-size: 6rem;
    line-height: 1;
}
.text-\[10px\] {
    font-size: 10px;
}
.text-\[11px\] {
    font-size: 11px;
}
.text-\[13px\] {
    font-size: 13px;
}
.text-\[9px\] {
    font-size: 9px;
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
.font-bold {
    font-weight: 700;
}
.font-medium {
    font-weight: 500;
}
.font-normal {
    font-weight: 400;
}
.font-semibold {
    font-weight: 600;
}
.uppercase {
    text-transform: uppercase;
}
.normal-case {
    text-transform: none;
}
.italic {
    font-style: italic;
}
.leading-6 {
    line-height: 1.5rem;
}
.leading-none {
    line-height: 1;
}
.leading-relaxed {
    line-height: 1.625;
}
.leading-tight {
    line-height: 1.25;
}
.tracking-wide {
    letter-spacing: 0.025em;
}
.tracking-wider {
    letter-spacing: 0.05em;
}
.\!text-cas-tint {
    --tw-text-opacity: 1 !important;
    color: rgb(var(--cas-tint) / var(--tw-text-opacity, 1)) !important;
}
.text-\[\#00a4ef\] {
    --tw-text-opacity: 1;
    color: rgb(0 164 239 / var(--tw-text-opacity, 1));
}
.text-amber-500 {
    --tw-text-opacity: 1;
    color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-amber-600 {
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700 {
    --tw-text-opacity: 1;
    color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800 {
    --tw-text-opacity: 1;
    color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800 {
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-cas-tint {
    --tw-text-opacity: 1;
    color: rgb(var(--cas-tint) / var(--tw-text-opacity, 1));
}
.text-current {
    color: currentColor;
}
.text-cyan-600 {
    --tw-text-opacity: 1;
    color: rgb(8 145 178 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-500 {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600 {
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-700 {
    --tw-text-opacity: 1;
    color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-green-800 {
    --tw-text-opacity: 1;
    color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-orange-800 {
    --tw-text-opacity: 1;
    color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}
.text-purple-600 {
    --tw-text-opacity: 1;
    color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.text-purple-800 {
    --tw-text-opacity: 1;
    color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}
.text-red-500 {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800 {
    --tw-text-opacity: 1;
    color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-red-900 {
    --tw-text-opacity: 1;
    color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}
.text-secondary {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-sky-600 {
    --tw-text-opacity: 1;
    color: rgb(2 132 199 / var(--tw-text-opacity, 1));
}
.text-slate-400 {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500 {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-violet-600 {
    --tw-text-opacity: 1;
    color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-yellow-600 {
    --tw-text-opacity: 1;
    color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.text-yellow-900 {
    --tw-text-opacity: 1;
    color: rgb(113 63 18 / var(--tw-text-opacity, 1));
}
.underline {
    text-decoration-line: underline;
}
.underline-offset-4 {
    text-underline-offset: 4px;
}
.accent-cas-tint {
    accent-color: rgb(var(--cas-tint) / 1);
}
.accent-primary {
    accent-color: #3b82f6;
}
.opacity-0 {
    opacity: 0;
}
.opacity-100 {
    opacity: 1;
}
.opacity-30 {
    opacity: 0.3;
}
.opacity-50 {
    opacity: 0.5;
}
.opacity-60 {
    opacity: 0.6;
}
.opacity-70 {
    opacity: 0.7;
}
.opacity-90 {
    opacity: 0.9;
}
.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_0_0_rgb\(var\(--border-color\)\)\] {
    --tw-shadow: 0 1px 0 0 rgb(var(--border-color));
    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.outline {
    outline-style: solid;
}
.ring {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-black {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));
}
.ring-cas-tint {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--cas-tint) / var(--tw-ring-opacity, 1));
}
.ring-cas-tint\/20 {
    --tw-ring-color: rgb(var(--cas-tint) / 0.2);
}
.ring-opacity-5 {
    --tw-ring-opacity: 0.05;
}
.blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.sepia {
    --tw-sepia: sepia(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.duration-150 {
    transition-duration: 150ms;
}
.duration-200 {
    transition-duration: 200ms;
}
.duration-300 {
    transition-duration: 300ms;
}
.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
/* Client-specific styling */
/* Compact job row styling */
.job-row {
    height: 22px;
    max-height: 22px;
}
.job-row td {
    padding-top: 2px;
    padding-bottom: 2px;
    vertical-align: middle;
}
.job-row .text-sm {
    font-size: 0.8125rem; /* Slightly smaller than default text-sm */
    line-height: 1.2;
}
.job-row .text-xs {
    font-size: 0.6875rem; /* Slightly smaller than default text-xs */
    line-height: 1.1;
}
.placeholder\:text-gray-400::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.placeholder\:text-gray-400::placeholder {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.last\:mb-0:last-child {
    margin-bottom: 0px;
}
.last\:border-r-0:last-child {
    border-right-width: 0px;
}
.hover\:border-cas-tint:hover {
    --tw-border-opacity: 1;
    border-color: rgb(var(--cas-tint) / var(--tw-border-opacity, 1));
}
.hover\:bg-amber-100\/50:hover {
    background-color: rgb(254 243 199 / 0.5);
}
.hover\:bg-amber-600\/10:hover {
    background-color: rgb(217 119 6 / 0.1);
}
.hover\:bg-amber-600\/80:hover {
    background-color: rgb(217 119 6 / 0.8);
}
.hover\:bg-amber-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}
.hover\:bg-black\/10:hover {
    background-color: rgb(0 0 0 / 0.1);
}
.hover\:bg-cas-tint-dark:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--cas-tint-dark) / var(--tw-bg-opacity, 1));
}
.hover\:bg-cas-tint\/10:hover {
    background-color: rgb(var(--cas-tint) / 0.1);
}
.hover\:bg-cas-tint\/25:hover {
    background-color: rgb(var(--cas-tint) / 0.25);
}
.hover\:bg-cas-tint\/5:hover {
    background-color: rgb(var(--cas-tint) / 0.05);
}
.hover\:bg-cas-tint\/80:hover {
    background-color: rgb(var(--cas-tint) / 0.8);
}
.hover\:bg-gray-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-600\/10:hover {
    background-color: rgb(22 163 74 / 0.1);
}
.hover\:bg-green-600\/80:hover {
    background-color: rgb(22 163 74 / 0.8);
}
.hover\:bg-red-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-600\/10:hover {
    background-color: rgb(220 38 38 / 0.1);
}
.hover\:bg-red-600\/80:hover {
    background-color: rgb(220 38 38 / 0.8);
}
.hover\:bg-red-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-opacity-90:hover {
    --tw-bg-opacity: 0.9;
}
.hover\:text-cas-tint:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--cas-tint) / var(--tw-text-opacity, 1));
}
.hover\:text-cas-tint-dark:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--cas-tint-dark) / var(--tw-text-opacity, 1));
}
.hover\:text-gray-600:hover {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.hover\:text-secondary:hover {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
    text-decoration-line: underline;
}
.hover\:opacity-100:hover {
    opacity: 1;
}
.hover\:opacity-80:hover {
    opacity: 0.8;
}
.hover\:opacity-90:hover {
    opacity: 0.9;
}
.focus\:border-cas-tint:focus {
    --tw-border-opacity: 1;
    border-color: rgb(var(--cas-tint) / var(--tw-border-opacity, 1));
}
.focus\:border-red-500:focus {
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.focus\:bg-blue-50:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.focus\:bg-gray-50:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.focus\:text-cas-tint:focus {
    --tw-text-opacity: 1;
    color: rgb(var(--cas-tint) / var(--tw-text-opacity, 1));
}
.focus\:text-gray-600:focus {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.focus\:ring-1:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-cas-tint:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--cas-tint) / var(--tw-ring-opacity, 1));
}
.focus\:ring-cas-tint\/20:focus {
    --tw-ring-color: rgb(var(--cas-tint) / 0.2);
}
.focus\:ring-green-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}
.focus\:ring-primary:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.focus\:ring-red-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}
.focus\:ring-yellow-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(234 179 8 / var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-1:focus {
    --tw-ring-offset-width: 1px;
}
.focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
}
.disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
}
.disabled\:bg-gray-400:disabled {
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.disabled\:opacity-50:disabled {
    opacity: 0.5;
}
.disabled\:hover\:bg-transparent:hover:disabled {
    background-color: transparent;
}
.group[open] .group-open\:rotate-90 {
    --tw-rotate: 90deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/job:hover .group-hover\/job\:opacity-0 {
    opacity: 0;
}
.group\/job:hover .group-hover\/job\:opacity-100 {
    opacity: 1;
}
.group\/thead:hover .group-hover\/thead\:opacity-100 {
    opacity: 1;
}
.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}
.peer:checked ~ .peer-checked\:translate-x-5 {
    --tw-translate-x: 1.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.peer:checked ~ .peer-checked\:border-cas-tint {
    --tw-border-opacity: 1;
    border-color: rgb(var(--cas-tint) / var(--tw-border-opacity, 1));
}
.peer:checked ~ .peer-checked\:bg-cas-tint {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--cas-tint) / var(--tw-bg-opacity, 1));
}
.peer:checked ~ .peer-checked\:opacity-100 {
    opacity: 1;
}
.peer:focus ~ .peer-focus\:ring-1 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.peer:focus ~ .peer-focus\:ring-cas-tint {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--cas-tint) / var(--tw-ring-opacity, 1));
}
.peer:focus ~ .peer-focus\:ring-offset-0 {
    --tw-ring-offset-width: 0px;
}
.dark\:border-amber-800:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
}
.dark\:border-cas-tint:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(var(--cas-tint) / var(--tw-border-opacity, 1));
}
.dark\:border-cas-tint\/30:is(.dark *) {
    border-color: rgb(var(--cas-tint) / 0.3);
}
.dark\:border-gray-600:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.dark\:border-gray-700:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.dark\:border-green-800:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(22 101 52 / var(--tw-border-opacity, 1));
}
.dark\:border-red-400:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.dark\:border-red-800:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
}
.dark\:bg-amber-500\/20:is(.dark *) {
    background-color: rgb(245 158 11 / 0.2);
}
.dark\:bg-amber-500\/70:is(.dark *) {
    background-color: rgb(245 158 11 / 0.7);
}
.dark\:bg-amber-900\/20:is(.dark *) {
    background-color: rgb(120 53 15 / 0.2);
}
.dark\:bg-amber-900\/30:is(.dark *) {
    background-color: rgb(120 53 15 / 0.3);
}
.dark\:bg-black:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.dark\:bg-blue-500\/20:is(.dark *) {
    background-color: rgb(59 130 246 / 0.2);
}
.dark\:bg-blue-900\/30:is(.dark *) {
    background-color: rgb(30 58 138 / 0.3);
}
.dark\:bg-cas-tint:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--cas-tint) / var(--tw-bg-opacity, 1));
}
.dark\:bg-cas-tint\/20:is(.dark *) {
    background-color: rgb(var(--cas-tint) / 0.2);
}
.dark\:bg-gray-600:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-700:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-700\/50:is(.dark *) {
    background-color: rgb(55 65 81 / 0.5);
}
.dark\:bg-gray-800:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-900:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.dark\:bg-green-500\/20:is(.dark *) {
    background-color: rgb(34 197 94 / 0.2);
}
.dark\:bg-green-500\/70:is(.dark *) {
    background-color: rgb(34 197 94 / 0.7);
}
.dark\:bg-green-900\/20:is(.dark *) {
    background-color: rgb(20 83 45 / 0.2);
}
.dark\:bg-green-900\/30:is(.dark *) {
    background-color: rgb(20 83 45 / 0.3);
}
.dark\:bg-orange-900\/30:is(.dark *) {
    background-color: rgb(124 45 18 / 0.3);
}
.dark\:bg-purple-900\/30:is(.dark *) {
    background-color: rgb(88 28 135 / 0.3);
}
.dark\:bg-red-500\/20:is(.dark *) {
    background-color: rgb(239 68 68 / 0.2);
}
.dark\:bg-red-500\/70:is(.dark *) {
    background-color: rgb(239 68 68 / 0.7);
}
.dark\:bg-red-900\/15:is(.dark *) {
    background-color: rgb(127 29 29 / 0.15);
}
.dark\:bg-red-900\/20:is(.dark *) {
    background-color: rgb(127 29 29 / 0.2);
}
.dark\:bg-red-900\/30:is(.dark *) {
    background-color: rgb(127 29 29 / 0.3);
}
.dark\:bg-red-950\/40:is(.dark *) {
    background-color: rgb(69 10 10 / 0.4);
}
.dark\:bg-transparent:is(.dark *) {
    background-color: transparent;
}
.dark\:bg-yellow-950\/40:is(.dark *) {
    background-color: rgb(66 32 6 / 0.4);
}
.dark\:bg-opacity-75:is(.dark *) {
    --tw-bg-opacity: 0.75;
}
.dark\:text-amber-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.dark\:text-cyan-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-50:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-500:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.dark\:text-green-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}
.dark\:text-green-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.dark\:text-green-500:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.dark\:text-purple-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.dark\:text-red-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.dark\:text-red-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.dark\:text-red-500:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.dark\:text-sky-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-500:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.dark\:text-violet-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(167 139 250 / var(--tw-text-opacity, 1));
}
.dark\:text-white:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark\:text-yellow-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(254 240 138 / var(--tw-text-opacity, 1));
}
.dark\:text-yellow-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.dark\:ring-gray-700:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity, 1));
}
.dark\:placeholder\:text-gray-500:is(.dark *)::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.dark\:placeholder\:text-gray-500:is(.dark *)::placeholder {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.dark\:hover\:bg-amber-500\/80:hover:is(.dark *) {
    background-color: rgb(245 158 11 / 0.8);
}
.dark\:hover\:bg-cas-tint\/80:hover:is(.dark *) {
    background-color: rgb(var(--cas-tint) / 0.8);
}
.dark\:hover\:bg-gray-700:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-gray-800:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-green-500\/10:hover:is(.dark *) {
    background-color: rgb(34 197 94 / 0.1);
}
.dark\:hover\:bg-green-500\/80:hover:is(.dark *) {
    background-color: rgb(34 197 94 / 0.8);
}
.dark\:hover\:bg-red-500\/10:hover:is(.dark *) {
    background-color: rgb(239 68 68 / 0.1);
}
.dark\:hover\:bg-red-500\/80:hover:is(.dark *) {
    background-color: rgb(239 68 68 / 0.8);
}
.dark\:hover\:bg-white\/10:hover:is(.dark *) {
    background-color: rgb(255 255 255 / 0.1);
}
.dark\:hover\:text-gray-300:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dark\:focus\:bg-blue-900\/20:focus:is(.dark *) {
    background-color: rgb(30 58 138 / 0.2);
}
.dark\:focus\:text-gray-300:focus:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dark\:focus\:ring-offset-gray-800:focus:is(.dark *) {
    --tw-ring-offset-color: #1f2937;
}
@media (min-width: 640px) {
    .sm\:my-8 {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    .sm\:mt-0 {
        margin-top: 0px;
    }
    .sm\:block {
        display: block;
    }
    .sm\:inline-block {
        display: inline-block;
    }
    .sm\:flex {
        display: flex;
    }
    .sm\:h-screen {
        height: 100vh;
    }
    .sm\:w-auto {
        width: auto;
    }
    .sm\:w-full {
        width: 100%;
    }
    .sm\:max-w-2xl {
        max-width: 42rem;
    }
    .sm\:max-w-4xl {
        max-width: 56rem;
    }
    .sm\:max-w-6xl {
        max-width: 72rem;
    }
    .sm\:max-w-lg {
        max-width: 32rem;
    }
    .sm\:max-w-sm {
        max-width: 24rem;
    }
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sm\:flex-row-reverse {
        flex-direction: row-reverse;
    }
    .sm\:gap-3 {
        gap: 0.75rem;
    }
    .sm\:p-0 {
        padding: 0px;
    }
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .sm\:align-middle {
        vertical-align: middle;
    }
}
@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}