.jobBrowser{margin:12px 0;min-width:0;scroll-margin-top:18px}
.jobBrowserFilters{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;align-items:end}
.jobBrowserFilters label{display:grid;gap:5px;color:var(--ink);font-size:.85rem}
.jobBrowserFilters label:first-child{grid-column:span 2}
.jobBrowserFilters input,.jobBrowserFilters select{width:100%;min-width:0;box-sizing:border-box;background:var(--field,var(--soft));color:var(--ink);border:1px solid var(--line);padding:9px;border-radius:6px}
.jobBrowserError{color:var(--error-ink,var(--ink));font-weight:700}
.jobBrowserTable{overflow:auto;max-width:100%;border:1px solid var(--line);border-radius:8px}
.jobBrowserTable table{width:100%;min-width:760px;border-collapse:collapse;font-size:.85rem}
.jobBrowserTable th,.jobBrowserTable td{padding:10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);overflow-wrap:anywhere;max-width:250px;color:var(--ink)}
.jobBrowserTable th{background:var(--soft)}
.jobBrowserSelected{outline:2px solid var(--accent);outline-offset:-2px}
.jobBrowserPager{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:12px}
.jobBrowser button:focus-visible,.jobBrowser input:focus-visible,.jobBrowser select:focus-visible,.jobBrowserTable:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(max-width:550px){.jobBrowserFilters{grid-template-columns:1fr}.jobBrowserFilters label:first-child{grid-column:auto}}
@media(forced-colors:active){.jobBrowserSelected{outline-color:Highlight}}

.jobDetailDialog{width:min(1120px,calc(100vw - 24px));max-width:1120px;max-height:92vh;max-height:92dvh;margin:auto;padding:0;border:1px solid var(--line,#66829a);border-radius:8px;background:var(--panel,#0b2132);color:var(--ink,#fff);box-shadow:0 20px 70px #0009;overflow:hidden}
.jobDetailDialog[open]{display:flex;flex-direction:column}
.jobDetailDialog::backdrop{background:#020b14bd;backdrop-filter:blur(3px)}
.jobDetailModalHeader{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line,#66829a);flex:0 0 auto;background:var(--panel,#0b2132)}
.jobDetailModalHeader h2{margin:0;font-size:1.2rem;overflow-wrap:anywhere}
.jobDetailModalHeader button{flex:0 0 auto;min-height:44px}
.jobDetailModalBody{overflow:auto;overscroll-behavior:contain;min-height:0;padding:0;scrollbar-gutter:stable}
.jobDetailDialog #dispatchJob.card{margin:0;border:0;border-radius:0;box-shadow:none;min-width:0;overflow-wrap:anywhere}
.jobDetailDialog :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid var(--accent,#ffad66);outline-offset:3px}
@media(max-width:600px){.jobDetailDialog{width:calc(100vw - 12px);max-height:94vh;max-height:94dvh}.jobDetailModalHeader{padding:10px 12px;gap:8px}.jobDetailModalHeader h2{font-size:1rem}.jobDetailDialog #dispatchJob.card{padding:12px}.jobDetailDialog .facts{grid-template-columns:1fr}}

.jobBrowserNumber{border:0;background:transparent;color:inherit;font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;padding:0;cursor:pointer;min-height:36px}.jobBrowserTable tbody tr[data-job-row]{cursor:pointer}.jobBrowserTable tbody tr[data-job-row]:hover{background:var(--soft,#12344a)}

@media(max-width:600px){
  #jobDetailDialog>.jobDetailModalHeader{flex-direction:row;flex-wrap:nowrap;text-align:left}
  #jobDetailDialog>.jobDetailModalHeader h2{flex:1 1 auto;min-width:0;text-align:left;line-height:1.3}
  #jobDetailDialog>.jobDetailModalHeader button{flex:0 0 auto}
  #jobDetailDialog #dispatchJob>.cardHead{flex-direction:column;align-items:stretch;gap:12px}
  #jobDetailDialog #dispatchJob>.cardHead>div{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
  #jobDetailDialog #dispatchJob>.cardHead>div:first-child{flex:0 0 auto}
  #jobDetailDialog #dispatchJob>.cardHead>div:last-child{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px;text-align:left}
  #jobDetailDialog #dispatchJob>.cardHead :is(button,.badge){min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;box-sizing:border-box}
  #jobDetailDialog #dispatchJob>.cardHead h2{white-space:normal;overflow-wrap:anywhere}
}