/* Scoped optional tire workspace: uses the existing app theme. */
#tab-tires .tires-intro {max-width:60ch}
#tab-tires .seg {margin:18px 0;display:flex;gap:8px;flex-wrap:wrap}
#tab-tires .seg button {flex:1;min-width:140px}
#tab-tires form {padding:18px;border:1px solid var(--border,#ddd);border-radius:14px;margin:12px 0 24px}
#tab-tires .tire-filters {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
#tab-tires .tire-filters>div {min-width:0}
#tab-tires .tire-selection-actions {display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
#tire-candidates {max-height:320px;overflow-y:auto;border:1px solid var(--border,#ddd);border-radius:12px}
#tab-tires .tire-choice {display:flex;align-items:flex-start;gap:12px;padding:12px;margin:0;border-bottom:1px solid var(--border,#ddd);cursor:pointer}
#tab-tires .tire-choice:last-child {border-bottom:0}
#tab-tires .tire-choice input {width:20px;height:20px;flex:none;margin:2px 0;accent-color:var(--primary,#34495e)}
#tab-tires .tire-choice>span {display:flex;flex-direction:column;gap:4px;min-width:0;overflow-wrap:anywhere}
#tab-tires .tire-remove {align-self:flex-start;margin-top:6px}
#tab-tires .tire-item {display:flex;flex-direction:column;gap:5px;padding:14px 0;border-bottom:1px solid var(--border,#ddd);overflow-wrap:anywhere}
#tab-tires .tire-empty {padding:18px;border:1px dashed var(--border,#ddd);border-radius:12px;color:var(--muted,#667085)}
#tab-tires .tire-count {font-size:.85em;color:var(--muted,#667085);font-weight:normal}
#tab-features .tire-feature-card {border:1px solid var(--border,#ddd);border-radius:16px;margin-top:20px;padding:20px;max-width:720px}
#tires-feature-settings .tire-feature-row {display:flex;gap:12px;align-items:center;flex-wrap:wrap}
@media(max-width:600px){#tab-tires form{padding:14px}#tab-tires .seg button{min-width:0;padding:10px 8px}#tab-tires .tire-filters{grid-template-columns:1fr}}

#tab-tires #tire-3d-panel {margin-top:24px;padding-top:16px;border-top:1px solid var(--border,#ddd)}
#tab-tires .tire-3d-canvas {height:470px;width:100%;border-radius:14px;overflow:hidden;background:#eef2f5;margin-top:12px}
#tab-tires .tire-3d-canvas canvas {display:block;width:100%;height:100%;touch-action:pan-y}
#tab-tires .tire-3d-canvas img {display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:600px){#tab-tires .tire-3d-canvas{height:430px}}

#tab-tires .tire-position-buttons {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}
#tab-tires .tire-position-buttons button {text-align:left;min-height:44px;background:var(--panel,#f4f7fa);color:var(--text,#243849);border:1px solid var(--border,#ddd)}
#tab-tires .tire-position-buttons button span {display:block;font-size:.85em;font-weight:normal}
#tab-tires .tire-position-buttons button.mounted {border-color:#2a8871}
#tab-tires .tire-position-buttons button[aria-pressed="true"] {outline:2px solid var(--accent,#326985);outline-offset:1px}
#tab-tires .tire-position-detail {padding:16px;margin:14px 0;background:var(--panel,#f4f7fa);border-radius:12px;overflow-wrap:anywhere}
#tab-tires .tire-position-detail dl {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
#tab-tires .tire-position-detail dd {margin:0}
body.shell :is(#panes,#view-asset) #tab-tires .tire-confirm {display:flex;align-items:flex-start;gap:10px;margin:16px 0}
body.shell :is(#panes,#view-asset) #tab-tires .tire-confirm input {width:20px;height:20px;min-height:20px;flex:none;margin:2px 0;accent-color:var(--navy-700)}
body.shell :is(#panes,#view-asset) #tab-tires .tire-position-buttons button {text-align:left;background:var(--surface-alt,#f4f7fa);color:var(--ink-900,#243849);border:1px solid var(--line,#ddd)}
body.shell :is(#panes,#view-asset) #tab-tires .tire-position-buttons button.mounted {border-color:#2a8871}
body.shell :is(#panes,#view-asset) #tab-tires .tire-position-detail {background:var(--surface-alt,#f4f7fa)}

/* Tire Management wheel order and physical callouts on wide screens. */
#tab-tires .tire-model-layout {container-type:inline-size;container-name:tire-stage;position:relative;margin:12px auto 0;max-width:1100px}
#tab-tires .tire-model-layout .tire-3d-canvas {margin-top:0}
#tab-tires .tire-position-buttons {grid-template-columns:minmax(0,1fr)}
#tab-tires .tire-axle-row {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#tab-tires .tire-wheel-pair {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;min-width:0}
#tab-tires .tire-wheel-pair:has(> :only-child) {grid-template-columns:minmax(0,1fr)}
body.shell :is(#panes,#view-asset) #tab-tires .tire-position-buttons button {display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-width:0;min-height:54px;padding:8px 4px;border-radius:8px;box-shadow:0 2px 8px #294f6810}
#tab-tires .tire-position-buttons button strong {display:block;font-size:13px;line-height:1.4}
#tab-tires .tire-position-buttons button span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.6}
body.shell :is(#panes,#view-asset) #tab-tires .tire-position-buttons button.mounted {background:#e9f3fb;color:#19567e;border-color:#a8cde6}
body.shell :is(#panes,#view-asset) #tab-tires .tire-position-buttons button[aria-pressed="true"] {background:#e0f3ff;color:#075e9a;border-color:#149be3;outline-color:#149be3;box-shadow:0 0 0 4px #149be326}
@container tire-stage (min-width:700px) {
 #tab-tires .tire-model-layout.model-ready .tire-3d-canvas {height:620px}
 #tab-tires .tire-model-layout.model-ready .tire-position-buttons {position:absolute;inset:0;display:block;margin:0;pointer-events:none}
 #tab-tires .tire-model-layout.model-ready .tire-axle-row {display:contents}
 #tab-tires .tire-model-layout.model-ready .tire-wheel-pair {position:absolute;top:var(--wheel-y);left:var(--wheel-x);width:clamp(160px,27%,300px)}
 #tab-tires .tire-model-layout.model-ready .tire-wheel-pair.left {transform:translate(-100%,-50%);margin-left:-48px}
 #tab-tires .tire-model-layout.model-ready .tire-wheel-pair.right {transform:translateY(-50%);margin-left:48px}
 #tab-tires .tire-model-layout.model-ready .tire-wheel-pair::after {content:"";position:absolute;top:50%;width:48px;height:1px;background:#b5cadd}
 #tab-tires .tire-model-layout.model-ready .tire-wheel-pair.left::after {left:100%}
 #tab-tires .tire-model-layout.model-ready .tire-wheel-pair.right::after {right:100%}
 body.shell :is(#panes,#view-asset) #tab-tires .tire-model-layout.model-ready .tire-position-buttons button {pointer-events:auto;min-height:68px;padding:10px 6px}
}

/* Compact overview rows; infrequent actions stay in the row menu. */
#tab-tires .tire-vehicle-row {display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line,#ddd)}
#tab-tires .tire-vehicle-info {flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;overflow-wrap:anywhere}
#tab-tires .tire-vehicle-info strong {display:flex;align-items:center;gap:8px}
#tab-tires .tire-brand-logo {height:16px;width:auto;max-width:64px;object-fit:contain;vertical-align:middle}
#tab-tires .tire-brand-line {display:flex;align-items:center;gap:8px;margin:8px 0;color:var(--muted,#667085);font-size:13px}
#tab-tires .tire-brand-line:empty {display:none}
#tab-tires .tire-row-menu {position:relative;flex:none}
#tab-tires .tire-row-menu>summary {list-style:none;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;border-radius:8px;font-size:24px;color:var(--muted,#667085)}
#tab-tires .tire-row-menu>summary::-webkit-details-marker {display:none}
#tab-tires .tire-row-menu>summary:hover {background:var(--surface-alt,#f4f7fa)}
#tab-tires .tire-row-menu>div {position:absolute;right:0;top:100%;z-index:125;background:var(--surface,#fff);border:1px solid var(--line,#ddd);border-radius:10px;padding:6px;box-shadow:0 5px 20px #17374e25;min-width:210px}
body.shell :is(#panes,#view-asset) #tab-tires .tire-row-menu button {width:100%;background:transparent;color:var(--danger,#a32d35);border:0;text-align:left}
/* The overview and selected tire are adjacent, independently scrollable panes. */
#tires-overview {display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
#tires-overview-main {min-width:0;max-height:70dvh;overflow-y:auto;overscroll-behavior:contain;padding-right:6px}
#tire-detail-drawer {min-width:0}
#tab-tires .tire-drawer {max-height:70dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--surface,#fff);border:1px solid var(--line,#ddd);border-radius:12px;padding:16px;box-sizing:border-box}
#tab-tires .tire-drawer-header {position:sticky;top:0;z-index:2;background:var(--surface,#fff);padding-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:12px}
#tab-tires .tire-drawer-header h3 {margin:0}
body.shell :is(#panes,#view-asset) #tab-tires #tire-drawer-close {width:36px;height:36px;padding:0;background:var(--surface-alt,#f4f7fa);color:var(--ink-900,#243849)}
#tab-tires .tire-drawer form {padding:0;border:0;margin-bottom:0}
#tab-tires .tire-drawer .tire-position-detail {padding:12px;margin:12px 0}
#tab-tires .tire-drawer .tire-position-detail dl {grid-template-columns:1fr;gap:4px}
#tab-tires .tire-drawer dt {color:var(--muted,#667085);font-size:13px;margin-top:8px}
#tire-history {border-top:1px solid var(--line,#ddd);margin:16px 0;padding-top:12px}
#tire-history h4 {margin:0 0 12px}
#tab-tires .tire-history-list {list-style:none;padding:0;margin:0}
#tab-tires .tire-history-list li {display:flex;flex-direction:column;gap:4px;margin:0 0 16px;padding-left:12px;border-left:2px solid var(--line,#ddd);font-size:13px;overflow-wrap:anywhere}
#tab-tires .tire-history-list time {color:var(--muted,#667085);font-size:12px}
@media(min-width:900px){
 #tires-overview:has(#tire-detail-drawer:not(.hidden)) {grid-template-columns:minmax(0,1fr) minmax(300px,380px)}
 #tires-overview-main,#tab-tires .tire-drawer {height:calc(100dvh - 290px);min-height:320px;max-height:none}
}

body.shell :is(#panes,#view-asset) #tab-tires .tire-position-buttons button.empty:not([aria-pressed="true"]) {border-color:color-mix(in srgb,var(--line,#ddd) 45%,var(--surface,#fff));background:var(--surface,#fff);box-shadow:none}

#tab-tires .tire-brand-logo {background:#fff;padding:2px;border-radius:3px;box-sizing:content-box}
#tab-tires .tire-selected-brand {display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:22px;margin:6px 0;color:var(--muted);font-size:13px}
#tab-tires [data-tire-position] strong {display:flex;align-items:center;justify-content:center;gap:5px}
#tab-tires .tire-slot-icon {width:15px;height:22px;flex:none}
#tab-tires .tire-brand-block {display:flex;flex-direction:column;align-items:flex-start;gap:6px}
#tab-tires :is(.tire-brand-block,.tire-selected-brand) .tire-brand-logo {height:22px;max-width:104px}

/* Keep the complete tractor inside the available viewport. */
#tab-tires #tire-3d-panel {margin-top:0;padding-top:0;border-top:0}
#tab-tires .tire-model-layout .tire-3d-canvas,
#tab-tires .tire-model-layout.model-ready .tire-3d-canvas {height:clamp(240px,calc(100dvh - 360px),560px)}
#tires-overview-main {max-height:none;overflow:visible}
@media(min-width:1000px){#tires-overview-main{height:auto;min-height:0}}

#tab-tires .tire-modal {width:min(680px,calc(100vw - 32px));max-height:85dvh;overflow:auto;border:1px solid var(--line,#ddd);border-radius:16px;padding:20px;color:var(--ink-900);background:var(--surface,#fff)}
#tab-tires .tire-modal::backdrop {background:#142b4566}
#tab-tires .tire-modal-header {display:flex;align-items:center;justify-content:space-between;gap:12px}
#tab-tires .tire-modal-header h3 {margin:0}
#tab-tires .tire-modal-header button {min-width:44px}
#tab-tires .tire-modal form {border:0;padding:0;margin-bottom:0}
@media(max-width:600px){
 #tab-tires .tire-model-layout .tire-3d-canvas,
 #tab-tires .tire-model-layout.model-ready .tire-3d-canvas {height:clamp(160px,calc(100dvh - 470px),430px)}
}

/* Horizontal tractor and trailer view retains the tire inventory and installation drawers. */
#tab-tires [hidden] {display:none!important}
#tab-tires .tire-model-layout {max-width:none;container-type:normal}
#tab-tires .rig-card {margin:0;padding:12px;border:0;box-shadow:none}
#tab-tires #tires-overview-main {height:auto;min-height:0;max-height:none}
#tab-tires #rig-model {height:100%;min-height:0}
#tab-tires .rig-stage {background:#f4f7fb}
#tab-tires .rig-card h2 {font-size:18px}
#tab-tires #tire-3d-title {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

@media(max-width:600px){#tab-tires #tires-subtabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#tab-tires #tires-subtabs button{width:100%;min-width:0;white-space:nowrap}}

/* Trailer registry: keep headings, controls and rows inside one consistent inset. */
#tab-tires #tab-trailers .view-header {margin:24px 0 18px}
#tab-tires #tab-trailers .view-header h2 {font-size:21px;margin:0 0 6px;line-height:1.35}
#tab-tires #tab-trailers .view-header p {margin:0;line-height:1.6}
body .trailer-registry {background:var(--surface,#fff);border:1px solid var(--line,#dce3ea);border-radius:16px;padding:20px;box-sizing:border-box}
body .trailer-registry-head {display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line,#dce3ea)}
body .trailer-registry-head h3 {font-size:16px;line-height:1.4;margin:0}
body .trailer-registry button {width:auto;margin:0;white-space:nowrap;min-height:40px}
body .trailer-toolbar {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;margin:18px 0 12px}
body .trailer-toolbar label {font-size:13px;line-height:1.5;margin:0}
body .trailer-toolbar input {width:100%;margin:6px 0 0;min-height:42px;box-sizing:border-box}
#tab-tires #trailer-count {font-size:13px;margin:0 0 16px;color:var(--muted,#667789)}
#tab-tires #trailer-list {display:grid;gap:12px}
body .trailer-row {display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0;padding:16px;border:1px solid var(--line,#dce3ea);border-radius:12px;background:var(--surface-alt,#f7f9fc)}
body .trailer-row>div:first-child {min-width:0}
body .trailer-row b {font-size:15px;line-height:1.5}
body .trailer-row p {font-size:13px;line-height:1.6;margin:5px 0 0;overflow-wrap:anywhere}
body .trailer-row-actions {display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}
body .trailer-form {padding:18px;margin:18px 0;border:1px solid var(--line,#dce3ea);border-radius:12px;background:var(--surface-alt,#f7f9fc)}
body .trailer-form h3 {font-size:17px;margin:0 0 16px}
body .trailer-fields {gap:14px}
body .trailer-fields label {font-size:13px;line-height:1.5;margin:0}
body .trailer-fields input:not([type="checkbox"]),body .trailer-fields select,body .trailer-fields textarea {margin:6px 0 0;width:100%;box-sizing:border-box}
body .trailer-form .trailer-row-actions {margin-top:18px}
#tab-tires #trailer-list>.hint {padding:20px;margin:0;border:1px dashed var(--line,#dce3ea);border-radius:12px;line-height:1.7}
@media(max-width:600px){
 body .trailer-registry {padding:14px;border-radius:14px}
 body .trailer-registry-head {padding-bottom:14px;gap:10px}
 body .trailer-toolbar {grid-template-columns:minmax(0,1fr);gap:10px;margin-top:14px}
 body .trailer-toolbar button {justify-self:end}
 body .trailer-row {flex-direction:column;align-items:stretch;gap:12px;padding:14px}
 body .trailer-row-actions {justify-content:flex-end}
 body .trailer-form {padding:14px}
}

body .trailer-fields .trailer-active {grid-column:1/-1;gap:9px;justify-content:flex-start;align-items:center;padding:4px 0;color:var(--muted)}
body .trailer-fields .trailer-active input[type="checkbox"] {width:18px;height:18px;min-height:18px;flex:0 0 18px;padding:0;margin:0;accent-color:var(--accent,#30485a)}

/* Compact hierarchy for the tire workspace and shared registration popups. */
body.shell :is(#panes,#view-asset) #tab-tires {padding:22px;}
body.shell :is(#panes,#view-asset) #tab-tires .tires-title {margin:0 0 8px;font-size:22px;}
body.shell :is(#panes,#view-asset) #tab-tires .tires-intro {margin:0 0 12px;line-height:1.6;}
#tab-tires .tire-topbar {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
#tab-tires .tire-topbar p {margin:0;color:var(--muted);font-size:13px;}
#tab-tires .tire-topbar .tire-selection-actions {margin:0;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-topbar button {width:auto;margin:0;min-height:40px;padding:9px 16px;}
body.shell :is(#panes,#view-asset) #tab-tires #tires-subtabs {margin:16px 0;gap:0;padding:4px;border:1px solid var(--line,#dce3ea);border-radius:12px;background:var(--surface-alt,#f7f9fc);}
body.shell :is(#panes,#view-asset) #tab-tires #tires-subtabs button {min-width:0;margin:0;border:0;border-radius:8px;min-height:42px;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-model-layout {margin:0;}
body.shell :is(#panes,#view-asset) #tab-tires #tire-3d-name {margin:0 0 10px;font-size:13px;}
body.shell :is(#panes,#view-asset) #tab-tires #rig-card {padding:16px;margin:0;border:1px solid var(--line,#dce3ea);border-radius:14px;background:var(--surface,#fff);}
body.shell :is(#panes,#view-asset) #tab-tires #rig-controls>.sec {margin:0 0 14px;padding:0 0 12px;min-height:0;}
body.shell :is(#panes,#view-asset) #tab-tires #rig-controls>.sec h2 {margin:0;font-size:16px;line-height:1.4;}
body.shell :is(#panes,#view-asset) #tab-tires .rig-choices {gap:12px;padding:0;}
body.shell :is(#panes,#view-asset) #tab-tires .rig-select-label {margin:0;}
body.shell :is(#panes,#view-asset) #tab-tires .rig-select-label label {margin:0;font-size:13px;}
body.shell :is(#panes,#view-asset) #tab-tires .rig-choices select {margin:0;min-height:42px;font-size:14px;}
body.shell :is(#panes,#view-asset) #tab-tires .rig-tools {margin:12px 0;gap:8px;}
body.shell :is(#panes,#view-asset) #tab-tires .rig-tools button {width:auto;margin:0;min-height:36px;padding:7px 11px;font-size:12px;}
body .trailer-modal {width:min(640px,calc(100vw - 28px));max-height:88dvh;box-sizing:border-box;overflow:auto;border:1px solid var(--line,#dce3ea);border-radius:18px;padding:22px;background:var(--surface,#fff);color:var(--ink-900,#243849);box-shadow:0 24px 70px #142b4533;}
body .trailer-modal::backdrop {background:#142b4566;backdrop-filter:blur(3px);}
body.shell #panes body .trailer-modal .trailer-form {padding:0;border:0;background:transparent;margin:0;}
body .trailer-modal-header {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}
body.shell #panes body .trailer-modal-header h3 {margin:0;font-size:19px;}
body.shell :is(#panes,#view-asset) #tab-tires #btn-trailer-close {width:40px;height:40px;min-height:40px;margin:0;padding:0;}
body .trailer-form>label {display:flex;flex-direction:column;gap:6px;}
body.shell #panes body .trailer-form textarea {width:100%;box-sizing:border-box;}
body.shell #panes body .trailer-modal .trailer-row-actions {justify-content:flex-end;}
body.shell #panes body .trailer-modal .trailer-row-actions button {width:auto;margin:0;}
#tire-brand-other-field {margin-top:8px;}
@media(max-width:600px){
 body.shell :is(#panes,#view-asset) #tab-tires {padding:14px;}
 body.shell :is(#panes,#view-asset) #tab-tires .tire-topbar {align-items:flex-start;}
 body.shell :is(#panes,#view-asset) #tab-tires .tire-topbar p {width:100%;}
 body.shell :is(#panes,#view-asset) #tab-tires #tires-subtabs {gap:4px;}
 body.shell :is(#panes,#view-asset) #tab-tires #rig-card {padding:12px;}
 body.shell :is(#panes,#view-asset) #tab-tires .rig-choices {grid-template-columns:1fr;gap:12px;}
 #tab-tires .rig-choices>span {display:none;}
 body.shell :is(#panes,#view-asset) #tab-tires .rig-tools>div {gap:6px;}
 body .trailer-modal {padding:16px;}
}

/* Selected tire details sit below the model on every device. */
body.shell :is(#panes,#view-asset) #tab-tires #tires-overview:has(#tire-detail-drawer:not(.hidden)) {grid-template-columns:minmax(0,1fr);}
body.shell :is(#panes,#view-asset) #tab-tires .tire-drawer {height:auto;min-height:0;max-height:none;overflow:visible;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-drawer-header {position:static;}
body.shell :is(#panes,#view-asset) #tab-tires #rig-selected {display:none;}
@media(min-width:900px){
 body.shell :is(#panes,#view-asset) #tab-tires .tire-drawer .tire-position-detail dl {grid-template-columns:180px minmax(0,1fr);gap:10px 16px;}
 body.shell :is(#panes,#view-asset) #tab-tires .tire-drawer dt {margin:0;}
}

body.shell :is(#panes,#view-asset) #tab-tires #rig-controls>.sec {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
body.shell :is(#panes,#view-asset) #tab-tires #tire-3d-name {margin:0 0 0 auto;max-width:65%;display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:12px;text-align:right;}
body.shell :is(#panes,#view-asset) #tab-tires #tire-3d-name:empty {display:none;}
#tab-tires #tire-3d-name span {overflow-wrap:anywhere;}
#tab-tires #tire-3d-name img {height:18px;max-width:80px;flex:none;}
@media(max-width:600px){body.shell :is(#panes,#view-asset) #tab-tires #tire-3d-name {max-width:100%;font-size:11px;}body.shell :is(#panes,#view-asset) #tab-tires #rig-controls>.sec h2 {font-size:14px;}}
@media(max-width:600px){
 body .trailer-modal-header {position:sticky;top:0;z-index:2;background:var(--surface,#fff);padding-bottom:10px;}
 body .trailer-modal .trailer-row-actions {position:sticky;bottom:0;z-index:2;background:var(--surface,#fff);padding:12px 0 0;}
}
@media(min-width:360px) and (max-width:600px){
 body .trailer-modal .trailer-fields {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
 body .trailer-modal .trailer-fields label:first-child,
 body .trailer-modal .trailer-fields label:nth-child(6) {grid-column:1/-1;}
}

/* Vertical model keeps the labels alongside each wheel and details beside the vehicle. */
body.shell :is(#panes,#view-asset) #tab-tires #rig-view.labels-ready {min-width:430px;}
body.shell :is(#panes,#view-asset) #tab-tires #rig-view.has-tires {height:680px;}
body.shell :is(#panes,#view-asset) #tab-tires #rig-view.has-tires #rig-model {height:680px;}
body.shell :is(#panes,#view-asset) #tab-tires .rig-stage:has(#rig-view.has-tires) {min-height:680px;}
body.shell :is(#panes,#view-asset) #tab-tires #rig-connectors {height:100%;}
body.shell :is(#panes,#view-asset) #tab-tires .labels-ready button.rig-tire {width:68px!important;}
@media(min-width:900px){
 body.shell :is(#panes,#view-asset) #tab-tires #tires-overview:has(#tire-detail-drawer:not(.hidden)) {grid-template-columns:minmax(0,1fr) 320px;}
 body.shell :is(#panes,#view-asset) #tab-tires #tire-detail-drawer {position:sticky;top:100px;}
 body.shell :is(#panes,#view-asset) #tab-tires .tire-drawer {max-height:calc(100dvh - 120px);overflow-y:auto;}
 body.shell :is(#panes,#view-asset) #tab-tires .tire-drawer .tire-position-detail dl {grid-template-columns:1fr;gap:5px;}
}
@media(max-width:899px){
 body.shell :is(#panes,#view-asset) #tab-tires #rig-view.has-tires,
 body.shell :is(#panes,#view-asset) #tab-tires #rig-view.has-tires #rig-model {height:620px;}
 body.shell :is(#panes,#view-asset) #tab-tires .rig-stage:has(#rig-view.has-tires) {min-height:620px;}
}

/* Keep registry details inline and leave more room for the vehicle. */
body.shell :is(#panes,#view-asset) #tab-tires {position:relative;padding:16px;}
body.shell :is(#panes,#view-asset) #tab-tires>.manual-context-tools {position:absolute;top:10px;right:12px;margin:0;}
body.shell :is(#panes,#view-asset) #tab-tires .tires-title {padding-right:100px;margin:0 0 4px;font-size:20px;line-height:1.4;}
body.shell :is(#panes,#view-asset) #tab-tires .tires-intro {margin:0 0 6px;font-size:12px;line-height:1.5;}
body.shell :is(#panes,#view-asset) #tab-tires #tires-msg:empty {display:none;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-topbar {gap:8px;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-topbar button {min-height:36px;padding:7px 12px;}
body.shell :is(#panes,#view-asset) #tab-tires #tires-subtabs {margin:8px 0 10px;padding:3px;}
body.shell :is(#panes,#view-asset) #tab-tires #tires-subtabs button {min-height:36px;padding:7px 10px;}
body.shell :is(#panes,#view-asset) #tab-tires #tires-overview {gap:12px;}
body.shell :is(#panes,#view-asset) #tab-tires #rig-card {padding:12px;}
body.shell :is(#panes,#view-asset) #tab-tires #rig-controls>.sec {margin-bottom:8px;padding-bottom:8px;}
body.shell :is(#panes,#view-asset) #tab-tires .rig-choices {gap:8px;}
body.shell :is(#panes,#view-asset) #tab-tires .rig-choices select {min-height:36px;padding:7px 10px;}
body.shell :is(#panes,#view-asset) #tab-tires .rig-tools {margin:8px 0;}
body.shell :is(#panes,#view-asset) #tab-tires .rig-tools p {margin:0;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-drawer {padding:12px;}
#tab-tires .tire-vehicle-info {flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px 14px;}
#tab-tires .tire-vehicle-row {padding:9px 0;}
#tab-tires .tire-item {flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:9px 0;}
#tab-tires .tire-item>.hint {flex:1;min-width:120px;}
#tab-tires .tire-item .tire-brand-block {flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-item>button {width:auto;min-height:36px;margin:0;padding:7px 12px;}
body .trailer-registry {padding:12px;}
body .trailer-registry-head {padding-bottom:10px;}
body .trailer-toolbar {margin:10px 0;}
#tab-tires #trailer-count {margin-bottom:10px;}
#tab-tires #trailer-list {gap:8px;}
body .trailer-row {padding:10px 12px;gap:12px;}
body .trailer-row>div:first-child {display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 12px;}
body .trailer-row p {margin:0;}
@media(max-width:600px){
 body.shell :is(#panes,#view-asset) #tab-tires {padding:10px;}
 body.shell :is(#panes,#view-asset) #tab-tires>.manual-context-tools {top:6px;right:6px;}
 body.shell :is(#panes,#view-asset) #tab-tires .tire-topbar {align-items:center;}
 body.shell :is(#panes,#view-asset) #tab-tires .tire-topbar p {width:auto;flex:1;min-width:120px;font-size:11px;}
 body.shell :is(#panes,#view-asset) #tab-tires #rig-card {padding:8px;}
 #tab-tires .tire-item {gap:6px 10px;}
 body .trailer-row {gap:8px;}
}
#tab-tires .rig-tire {min-height:34px;overflow-wrap:anywhere;}
@media(max-width:600px){#tab-tires #tires-stock-list {padding-bottom:80px;}}
#tab-tires .tire-history-pane {min-width:0;padding:12px;background:var(--surface,#fff);border:1px solid var(--line,#ddd);border-radius:12px;box-sizing:border-box;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-history-pane #tire-history {border:0;margin:0;padding:0;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-history-pane h4 {margin:0 0 12px;font-size:15px;}
@media(min-width:900px){
 body.shell :is(#panes,#view-asset) #tab-tires #tire-history-pane {grid-column:2;position:sticky;top:100px;max-height:calc(100dvh - 120px);overflow-y:auto;}
}
@media(min-width:1200px){
 body.shell :is(#panes,#view-asset) #tab-tires #tires-overview:has(#tire-detail-drawer:not(.hidden)) {grid-template-columns:minmax(430px,1fr) 280px 240px;}
 body.shell :is(#panes,#view-asset) #tab-tires #tire-history-pane {grid-column:3;grid-row:1;}
}
@media(min-width:900px) and (max-width:1199px){body.shell :is(#panes,#view-asset) #tab-tires #tire-history-pane {position:static;}}
#tab-tires .tire-selected-brand:empty {display:none;}
#tab-tires .tire-selected-brand,
#tab-tires .tire-position-detail .tire-brand-block {flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-drawer .tire-position-detail {margin:8px 0;padding:10px;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-position-detail h4 {margin:0 0 8px;font-size:14px;}
body.shell :is(#panes,#view-asset) #tab-tires #tire-install-form label {margin:8px 0 4px;font-size:12px;}
body.shell :is(#panes,#view-asset) #tab-tires #tire-install-form :is(select,input) {margin:0;min-height:38px;padding:8px;font-size:13px;}
body.shell :is(#panes,#view-asset) #tab-tires #tire-install-form .grid2 {gap:8px;}
body.shell :is(#panes,#view-asset) #tab-tires #tire-install-form .tire-selection-actions {margin:10px 0 0;gap:8px;}
body.shell :is(#panes,#view-asset) #tab-tires #tire-install-form button {margin:0;min-height:38px;padding:8px 10px;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-row-menu>summary {margin:0;padding:0;min-height:36px;line-height:1;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-management-actions {margin:8px 0;gap:8px;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-management-actions button {width:auto;margin:0;min-height:38px;padding:8px 12px;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-topbar .tire-management-actions {margin:0;}
body.shell :is(#panes,#view-asset) #tab-tires .labels-ready button.rig-tire {white-space:normal;overflow-wrap:anywhere;line-height:1.1;}
/* A shared control row sits above three panels aligned at the same level. */
body.shell :is(#panes,#view-asset) #tab-tires #tires-subtabs {display:flex;width:fit-content;max-width:100%;flex-wrap:wrap;gap:6px;padding:0;border:0;background:transparent;}
body.shell :is(#panes,#view-asset) #tab-tires #tires-subtabs button {flex:0 0 auto;width:auto;min-height:30px;padding:5px 12px;border:1px solid var(--line,#dce3ea);border-radius:999px;font-size:12px;line-height:1.4;}
#tab-tires #rig-controls {grid-column:1/-1;padding:12px;border:1px solid var(--line,#dce3ea);border-radius:12px;background:var(--surface,#fff);min-width:0;}
body.shell :is(#panes,#view-asset) #tab-tires #rig-controls .rig-tools {margin-bottom:0;}
body.shell :is(#panes,#view-asset) #tab-tires #rig-card {padding:0;border:0;background:transparent;}
body.shell :is(#panes,#view-asset) #tab-tires #tires-overview-main {padding:0;}
body.shell :is(#panes,#view-asset) #tab-tires .labels-ready button.rig-tire {word-break:break-all;font-size:10px;}
#tab-tires .tire-history-usage {display:flex;flex-direction:column;gap:5px;padding:10px;margin:0 0 14px;border-radius:9px;background:var(--surface-alt,#f4f7fa);font-size:12px;}
#tab-tires .tire-history-usage strong {font-size:18px;line-height:1.4;}
#tab-tires .tire-history-usage small {color:var(--muted,#667085);}
@media(min-width:900px){
 body.shell :is(#panes,#view-asset) #tab-tires #tires-overview-main {grid-column:1;grid-row:2;}
 body.shell :is(#panes,#view-asset) #tab-tires #tire-detail-drawer {grid-column:2;grid-row:2;}
 body.shell :is(#panes,#view-asset) #tab-tires #tire-history-pane {grid-row:3;}
}
@media(min-width:1200px){body.shell :is(#panes,#view-asset) #tab-tires #tire-history-pane {grid-column:3;grid-row:2;}}
/* Horizontal overview with tire details opened only in a modal. */
body.shell:has(#tab-tires:not(.hidden)) #fab-scan {display:none!important;}
body.shell :is(#panes,#view-asset) #tab-tires #tires-overview,
body.shell :is(#panes,#view-asset) #tab-tires #tires-overview:has(#tire-detail-drawer:not(.hidden)) {grid-template-columns:minmax(0,1fr);}
body.shell :is(#panes,#view-asset) #tab-tires #rig-view.labels-ready {min-width:1050px;}
body.shell :is(#panes,#view-asset) #tab-tires #rig-view.has-tires,
body.shell :is(#panes,#view-asset) #tab-tires #rig-view.has-tires #rig-model {height:440px;}
body.shell :is(#panes,#view-asset) #tab-tires .rig-stage:has(#rig-view.has-tires) {min-height:440px;}
body.shell :is(#panes,#view-asset) #tab-tires #rig-connectors {height:440px;}
@media(max-width:899px){
 body.shell :is(#panes,#view-asset) #tab-tires #rig-controls {padding:8px;}
 body.shell :is(#panes,#view-asset) #tab-tires #rig-controls .tire-pane-head {display:flex;align-items:center;justify-content:space-between;gap:6px;}
 body.shell :is(#panes,#view-asset) #tab-tires #rig-controls .tire-pane-head h2 {font-size:14px;margin:0;white-space:nowrap;}
 body.shell :is(#panes,#view-asset) #tab-tires #tire-3d-name {font-size:10px;gap:4px;}
 body.shell :is(#panes,#view-asset) #tab-tires #tire-3d-name img {max-height:20px;max-width:75px;}
 body.shell :is(#panes,#view-asset) #tab-tires .rig-choices {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:8px 0;}
 body.shell :is(#panes,#view-asset) #tab-tires .rig-choices>span {display:none;}
 body.shell :is(#panes,#view-asset) #tab-tires .rig-choice {gap:3px;}
 body.shell :is(#panes,#view-asset) #tab-tires .rig-select-label {flex-wrap:wrap;gap:2px;}
 body.shell :is(#panes,#view-asset) #tab-tires .rig-select-label label {font-size:11px;}
 body.shell :is(#panes,#view-asset) #tab-tires .rig-select-label button {font-size:10px;min-height:24px;}
 body.shell :is(#panes,#view-asset) #tab-tires #rig-controls .rig-tools {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px;}
 body.shell :is(#panes,#view-asset) #tab-tires #rig-controls .rig-tools>div {grid-column:1/-1;grid-row:2;}
 body.shell :is(#panes,#view-asset) #tab-tires #tire-trailer-meter-open {grid-column:2;grid-row:1;min-height:28px;padding:4px 6px;font-size:10px;}
 body.shell :is(#panes,#view-asset) #tab-tires #rig-caption {grid-column:1;grid-row:1;align-self:center;}
 body.shell :is(#panes,#view-asset) #tab-tires #rig-caption {font-size:11px;}
 body.shell :is(#panes,#view-asset) #tab-tires .tire-management-actions {margin:0;gap:6px;}
 body.shell :is(#panes,#view-asset) #tab-tires .tire-management-actions button {font-size:11px;padding:6px 8px;min-height:34px;}
 body.shell :is(#panes,#view-asset) #tab-tires .rig-stage {padding:4px;}
 body.shell :is(#panes,#view-asset) #tab-tires #rig-view.labels-ready {min-width:0;width:100%;}
 body.shell :is(#panes,#view-asset) #tab-tires .labels-ready button.rig-tire {width:44px!important;min-width:44px;min-height:34px;font-size:9px;overflow:hidden;}
}
#tab-tires .tire-detail-modal {width:min(820px,calc(100vw - 28px));max-height:88dvh;margin:auto;padding:18px;border:1px solid var(--line,#dce3ea);border-radius:16px;background:var(--surface,#fff);color:var(--ink-900,#243849);box-sizing:border-box;overflow:auto;box-shadow:0 24px 70px #142b4533;}
#tab-tires .tire-detail-modal::backdrop {background:#142b4566;backdrop-filter:blur(2px);}
#tab-tires .tire-popup-layout {display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;align-items:start;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-detail-modal #tire-detail-drawer,
body.shell :is(#panes,#view-asset) #tab-tires .tire-detail-modal #tire-history-pane {grid-column:auto;grid-row:auto;position:static;max-height:none;overflow:visible;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-detail-modal .tire-drawer,
body.shell :is(#panes,#view-asset) #tab-tires .tire-detail-modal .tire-history-pane {padding:0;border:0;max-height:none;overflow:visible;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-detail-modal .tire-history-pane {padding-left:18px;border-left:1px solid var(--line,#dce3ea);border-radius:0;}
@media(max-width:650px){
 #tab-tires .tire-detail-modal {padding:14px;max-height:90dvh;}
 #tab-tires .tire-popup-layout {grid-template-columns:minmax(0,1fr);gap:14px;}
 body.shell :is(#panes,#view-asset) #tab-tires .tire-detail-modal .tire-history-pane {padding:14px 0 0;border-left:0;border-top:1px solid var(--line,#dce3ea);}
}

#tab-tires .rig-tire-preview {position:fixed;z-index:1100;width:250px;max-width:calc(100vw - 16px);padding:12px;border:1px solid #dbe3eb;border-radius:12px;background:#fff;color:#223343;box-shadow:0 8px 28px #172b4d25;pointer-events:none;font-size:12px;line-height:1.5;display:flex;flex-direction:column;gap:4px;}
#tab-tires .rig-tire-preview[hidden] {display:none;}
#tab-tires .rig-tire-preview small {color:#7a8795;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-modal-header h3 {flex:1;min-width:0;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-modal-header button {flex:0 0 36px;width:36px;min-width:36px;height:36px;padding:0;background:var(--surface-alt,#f4f7fa);color:var(--ink-900,#243849);}
body.shell :is(#panes,#view-asset) #tab-tires .tire-history-filters {display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:10px;margin:12px 0;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-event-row {display:flex;justify-content:space-between;gap:12px;width:100%;padding:12px;text-align:left;border:1px solid var(--line);background:var(--surface);color:var(--ink-900);margin:6px 0;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-event-row span,body.shell :is(#panes,#view-asset) #tab-tires .tire-event-row small {display:block;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-event-row small {color:var(--ink-500);margin-top:4px;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-round-card {padding:12px;border:1px solid var(--line);border-radius:12px;margin:12px 0;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-round-card.selected {border-color:#2465a5;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-operation-fields {display:grid;grid-template-columns:1fr 1fr;gap:10px;}
body.shell :is(#panes,#view-asset) #tab-tires [hidden] {display:none!important;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-reading-row {display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-management-actions {display:inline-flex;gap:8px;flex-wrap:wrap;}
@media(max-width:700px){body.shell :is(#panes,#view-asset) #tab-tires .tire-history-filters {grid-template-columns:1fr 1fr;}body.shell :is(#panes,#view-asset) #tab-tires .tire-history-filters label:first-child {grid-column:1/-1;}body.shell :is(#panes,#view-asset) #tab-tires .tire-event-row {flex-direction:column;}body.shell :is(#panes,#view-asset) #tab-tires .tire-operation-fields {grid-template-columns:1fr;}}

body.shell :is(#panes,#view-asset) #tab-tires .tire-history-filters label {margin:0;min-width:0;font-size:12px;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-history-filters input,body.shell :is(#panes,#view-asset) #tab-tires .tire-history-filters select,body.shell :is(#panes,#view-asset) #tab-tires .tire-operation-fields input,body.shell :is(#panes,#view-asset) #tab-tires .tire-operation-fields select {box-sizing:border-box;width:100%;min-width:0;margin:4px 0 0;}

body.shell :is(#panes,#view-asset) #tab-tires .tire-event-row {height:auto!important;min-height:76px;line-height:1.5;align-items:center;box-sizing:border-box;}
@media(max-width:700px){body.shell :is(#panes,#view-asset) #tab-tires .tire-event-row {align-items:stretch;}}

#tab-tires .tire-stock-filter{display:flex;align-items:center;gap:10px;margin:8px 0 12px}#tab-tires .tire-stock-filter label{margin:0;white-space:nowrap}#tab-tires .tire-stock-filter select{width:180px;max-width:100%}

#tab-tires .tire-item>.tire-row-menu{margin-left:auto}

/* Registration navigation and compact, distinct usage rounds. */
body.shell :is(#panes,#view-asset) #tab-tires .tire-registration-link {display:inline;padding:0!important;margin:0!important;min-height:0!important;height:auto!important;border:0!important;border-radius:0;background:transparent!important;color:var(--primary,#2465a5);font:inherit;font-weight:600;text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:normal;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-registration-link:focus-visible {outline:2px solid #2465a5;outline-offset:3px;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-history-heading {font-size:14px;margin:20px 0 8px;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-round-card {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.6fr) minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 8px;margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;font-size:13px;line-height:1.6;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-round-card.selected {background:var(--surface-alt,#f4f7fa);box-shadow:inset 3px 0 #2465a5;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-round-card span,body.shell :is(#panes,#view-asset) #tab-tires .tire-round-card small {display:block;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-round-card small {color:var(--muted,#667085);}
body.shell :is(#panes,#view-asset) #tab-tires .tire-round-card .tire-round-current {display:inline-block;color:#2465a5;font-weight:600;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-round-distance {font-weight:600;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-round-card .tire-row-menu {justify-self:end;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-change-list li {display:grid;grid-template-columns:90px minmax(110px,.6fr) minmax(0,1.5fr);gap:8px;border:0;border-bottom:1px solid var(--line);margin:0;padding:10px 8px;font-size:12px;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-change-list li small {grid-column:2/-1;color:var(--muted,#667085);}
@media(max-width:700px){
 body.shell :is(#panes,#view-asset) #tab-tires .tire-round-card {grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:12px 8px;}
 body.shell :is(#panes,#view-asset) #tab-tires .tire-round-owner {grid-column:1;grid-row:1;}
 body.shell :is(#panes,#view-asset) #tab-tires .tire-round-dates {grid-column:1;grid-row:2;}
 body.shell :is(#panes,#view-asset) #tab-tires .tire-round-distance {grid-column:1;grid-row:3;}
 body.shell :is(#panes,#view-asset) #tab-tires .tire-round-card .tire-row-menu {grid-column:2;grid-row:1;align-self:start;}
 body.shell :is(#panes,#view-asset) #tab-tires .tire-change-list li {grid-template-columns:80px minmax(0,1fr);gap:4px 8px;}
 body.shell :is(#panes,#view-asset) #tab-tires .tire-change-list li span,body.shell :is(#panes,#view-asset) #tab-tires .tire-change-list li small {grid-column:2;}
}

body.shell :is(#panes,#view-asset) #tab-tires .tire-round-card .tire-row-menu>div {min-width:170px;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-round-card .tire-row-menu button {height:auto!important;min-height:44px;padding:8px 12px!important;margin:0!important;font-size:13px;line-height:1.4;color:var(--ink-900,#172b3a);}
body.shell :is(#panes,#view-asset) #tab-tires .tire-round-card .tire-row-menu button.danger {color:var(--danger,#a32d35);}

body.shell :is(#panes,#view-asset) #tab-tires .tire-detail-tabs {display:flex;gap:6px;margin:16px 0 8px;border-bottom:1px solid var(--line);}
body.shell :is(#panes,#view-asset) #tab-tires .tire-detail-tabs button {flex:1;min-width:0;min-height:44px;height:auto!important;padding:8px!important;border:0;border-radius:8px 8px 0 0;background:transparent;color:var(--ink-500,#667085);font-size:13px;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-detail-tabs button[aria-selected="true"] {color:var(--primary,#2465a5);background:var(--surface-alt,#f4f7fa);box-shadow:inset 0 -2px #2465a5;font-weight:600;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-round-card .tire-row-menu>div {top:auto;bottom:100%;margin-bottom:4px;}

/* Matching vehicle and trailer registries. Keep headings and rows aligned. */
body.shell :is(#panes,#view-asset) #tab-tires :is(#tires-vehicles-list,#trailer-list) {display:block;}
body.shell :is(#panes,#view-asset) #tab-tires :is(#tires-vehicles-list .tire-vehicle-row,#trailer-list .trailer-row,.tire-registry-heading) {display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) 150px;gap:24px;align-items:center;margin:0;border:0;border-bottom:1px solid var(--line-soft);border-radius:0;background:transparent;padding:24px 16px;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-registry-heading {padding:16px;background:var(--surface-alt);border-bottom:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink-600);}
body.shell :is(#panes,#view-asset) #tab-tires .registry-registration .tire-registration-link {width:auto;margin:0;padding:0;background:none;border:0;box-shadow:none;font-size:18px;font-weight:700;text-align:left;color:var(--brand);line-height:1.6;overflow-wrap:anywhere;}
body.shell :is(#panes,#view-asset) #tab-tires .registry-registration .tire-registration-link:hover {background:none;text-decoration:underline;}
#tab-tires .registry-registration small,#tab-tires .registry-description small {display:block;color:var(--muted);margin-top:4px;font-size:12px;line-height:1.7;}
#tab-tires .registry-description {min-width:0;line-height:1.7;overflow-wrap:anywhere;}
#tab-tires .registry-description p {margin:0;}
#tab-tires .registry-description .tire-brand-logo {display:inline-block;vertical-align:middle;margin-left:4px;}
#tab-tires .registry-actions,#tab-tires #trailer-list .trailer-row-actions {justify-self:end;}
@media(max-width:600px) {
 body.shell :is(#panes,#view-asset) #tab-tires #tires-subtabs {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:100%;gap:6px;}
 body.shell :is(#panes,#view-asset) #tab-tires #tires-subtabs button {grid-column:span 2;}
 body.shell :is(#panes,#view-asset) #tab-tires #tires-subtabs :is(#tire-stock-tab,#tire-history-tab) {grid-column:span 3;}
 body.shell :is(#panes,#view-asset) #tab-tires #tires-subtabs button {width:100%;}
 body.shell :is(#panes,#view-asset) #tab-tires :is(#tires-vehicles-list .tire-vehicle-row,#trailer-list .trailer-row,.tire-registry-heading) {grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px 18px;padding-left:0;padding-right:0;}
 #tab-tires .registry-actions-heading {display:none;}
 #tab-tires .registry-actions,#tab-tires #trailer-list .trailer-row-actions {grid-column:2;}
 #tab-tires .registry-description {font-size:13px;}
}

/* Quiet position tags for the fixed overhead model. */
body.shell :is(#panes,#view-asset) #tab-tires .labels-ready button.rig-tire {border-radius:4px;border:1px solid var(--line,#dce4ec);background:var(--surface,#fff);color:var(--ink-700,#41576b);box-shadow:0 1px 2px #24394d08;font-weight:500;letter-spacing:0;}
#tab-tires .labels-ready #rig-connectors path {stroke:#9babb9;opacity:.35;stroke-width:.75;}

.tire-position-actions {margin-top:16px;border-top:1px solid var(--line,#e2e8f0);padding-top:12px;}
#tire-position-move-picker button {display:block;width:100%;text-align:left;margin:8px 0;white-space:normal;}

/* Tap source and destination in a fixed top-view axle map. */
#tire-move-map{margin-top:16px;padding:12px;border:1px solid var(--line,#cbd5e1);border-radius:14px;background:var(--card,#fff)}
 .tire-move-front{text-align:center;font-weight:700;margin-bottom:8px}
.tire-move-stage{position:relative}.tire-move-stage.model-ready{padding-block:120px}.tire-move-vehicle{height:220px;display:block}.tire-move-stage.unavailable .tire-move-vehicle{display:none}.model-ready .tire-move-vehicle{display:block}.tire-move-vehicle canvas{display:block;width:100%;height:100%}.tire-move-connectors{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.model-ready .tire-move-connectors{display:block}.tire-move-connectors path{fill:none;stroke:#98a6b6;stroke-width:1}.tire-move-labels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.model-ready .tire-move-labels{display:block;position:absolute;inset:0;pointer-events:none}
body.shell :is(#panes,#view-asset) #tab-tires #tire-move-map .tire-move-labels button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:46px;height:auto!important;padding:4px!important;background:#f1f5f9;color:#18324a;border:2px solid #cbd5e1;border-radius:8px;font-size:11px;line-height:1.4;white-space:normal}
body.shell :is(#panes,#view-asset) #tab-tires #tire-move-map .model-ready button{margin:0!important;position:absolute;width:58px;height:48px!important;pointer-events:auto;transform:translateX(-50%)}
body.shell :is(#panes,#view-asset) #tab-tires #tire-move-map button strong,body.shell :is(#panes,#view-asset) #tab-tires #tire-move-map button span{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.shell :is(#panes,#view-asset) #tab-tires #tire-move-map button.source{border-color:#0284c7;background:#e0f2fe;opacity:1}body.shell :is(#panes,#view-asset) #tab-tires #tire-move-map button[aria-pressed=true]{border-color:#16a34a;background:#dcfce7}body.shell :is(#panes,#view-asset) #tab-tires #tire-move-map button:focus-visible{outline:3px solid #0284c7;outline-offset:2px}.tire-move-legend{font-size:12px;line-height:1.6}#tire-move-map>.hint{margin-top:12px}.tire-current-position>strong{display:block}.tire-current-position p{margin:8px 0}
#tire-move-summary{font-weight:700;line-height:1.65}[data-move-scope][aria-pressed=true]{box-shadow:0 0 0 2px #0284c7}

/* Use the same type illustration as the machinery list, before the plate. */
#tab-tires .tire-model-picture {display:flex;align-items:center;justify-content:center;width:112px;height:76px;flex:none;}
#tab-tires .tire-model-picture img {display:block;width:112px;height:76px;max-width:none;object-fit:contain;}
#tab-tires #tires-vehicles-list .registry-registration {display:flex;align-items:center;gap:12px;min-width:0;}
#tab-tires .tire-registration-text {min-width:0;overflow-wrap:anywhere;}
@media(max-width:600px) {
 #tab-tires .tire-model-picture,#tab-tires .tire-model-picture img {width:84px;height:64px;}
 body.shell :is(#panes,#view-asset) #tab-tires #tires-vehicles-list .tire-vehicle-row {grid-template-columns:84px minmax(0,1fr) 40px;gap:8px 12px;}
 #tab-tires #tires-vehicles-list .registry-registration {grid-column:1 / -1;}
 #tab-tires #tires-vehicles-list .registry-description {grid-column:2;}
 #tab-tires #tires-vehicles-list .registry-actions {grid-column:3;justify-self:end;grid-row:auto;}
 #tab-tires #tires-vehicles-list .tire-registry-heading {display:none!important;}
}

/* Choose the vehicle type first; trailers are available only for tractors. */
#tab-tires .rig-type-choice {display:flex;flex-direction:column;gap:6px;margin:12px 0;}
#tab-tires .rig-type-choice label {font-size:13px;font-weight:600;}
#tab-tires .rig-type-choice select {width:100%;margin:0;min-height:42px;}
body.shell :is(#panes,#view-asset) #tab-tires .rig-choices.rig-solo {grid-template-columns:minmax(0,1fr);}
#tab-tires #rig-trailer-choice[hidden],#tab-tires #rig-coupling-plus[hidden] {display:none;}

/* Pointer preview stays clear of drop targets and is clamped to the viewport. */
.fleet-tire-drag{position:fixed;z-index:1100;pointer-events:none;display:flex;align-items:center;gap:8px;padding:6px 9px;border:1px solid #cedce8;border-radius:10px;background:linear-gradient(135deg,#fff,#edf5fc);color:#163c57;font-size:11px;font-weight:600;line-height:1.4;box-shadow:0 5px 14px #123d5b24;max-width:210px;box-sizing:border-box}
.fleet-tire-drag[hidden]{display:none}
.fleet-tire-drag img{flex:none;width:32px;height:36px;filter:drop-shadow(0 2px 2px #123d5b24);transform:rotate(-12deg)}
.fleet-tire-drag[data-valid="true"]{border-color:#39a78c;background:linear-gradient(135deg,#fff,#e5f8f1);color:#14644e}
#tab-tires .rig-drag-hint{display:none}
@media(min-width:901px) and (hover:hover) and (pointer:fine){
 #tab-tires .rig-drag-hint:not([hidden]){display:block;margin:10px 0;padding:8px 12px;border:1px solid #c9dfef;border-radius:10px;background:#eef7fd;color:#174b70}
 #tab-tires .rig-drag-hint strong{display:block;font-size:13px;line-height:1.5}

}

/* Keep long serial numbers on one line in the model's tire labels. */
body.shell :is(#panes,#view-asset) #tab-tires .labels-ready button.rig-tire{display:block;white-space:nowrap;overflow:hidden;text-overflow:clip;overflow-wrap:normal;word-break:normal;line-height:24px}

body.shell :is(#panes,#view-asset) #tab-tires .labels-ready button.rig-tire .rig-tire-code{display:inline-block;white-space:nowrap;line-height:24px;vertical-align:top}
body.shell :is(#panes,#view-asset) #tab-tires #tire-move-map .tire-move-labels button span.rig-tire-code{display:inline-block;max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap}

/* Fleet detail shows the model; tire details use the shared popup. */
#view-asset #as-tires-panel {grid-column:1/-1;min-width:0}
#asset-tire-intro {display:none}
#tab-tires.asset-tire-surface #asset-tire-intro {display:block}
#view-asset #tab-tires.asset-tire-surface #tires-title,#view-asset #tab-tires.asset-tire-surface #tires-subtabs,#view-asset #tab-tires.asset-tire-surface #rig-controls {display:none!important}
#tab-tires.asset-tire-surface {margin:0;box-shadow:none}
#tab-tires.asset-tire-surface #tire-3d-panel {margin:12px 0;padding:0;border:0}
#tab-tires.asset-tire-surface .rig-tire:empty::after {content:"ว่าง";color:var(--muted)}
body.shell #view-asset #tab-tires.asset-tire-surface #tires-overview {display:grid;grid-template-columns:minmax(0,1fr)}
body.shell #view-asset #tab-tires.asset-tire-surface #tires-overview-main {min-width:0}
body.shell #view-asset #tab-tires.asset-tire-surface #rig-view.labels-ready {min-width:0!important;width:100%}
body.shell #view-asset #tab-tires .detail-history-body>[hidden] {display:none!important}
@media(min-width:901px){
 #view-asset #tab-tires.asset-tire-surface #rig-view.has-tires,#view-asset #tab-tires.asset-tire-surface #rig-view.has-tires #rig-model {height:440px}
}

/* Tire activity follows the application's dated history ledger. */
body.shell :is(#panes,#view-asset) #tab-tires .tire-ledger-date {margin:18px 0 2px;padding:8px 0;font-size:14px;font-weight:700;color:var(--ink-900);border-bottom:1px solid var(--line)}
body.shell :is(#panes,#view-asset) #tab-tires .tire-ledger-entry.continued .tire-ledger-date {display:none}
body.shell :is(#panes,#view-asset) #tab-tires .tire-ledger-entry[hidden]+.tire-ledger-entry:not([hidden]) .tire-ledger-date {display:block}
body.shell :is(#panes,#view-asset) #tab-tires .tire-event-row {display:grid;grid-template-columns:minmax(0,1fr) auto 12px;gap:12px;align-items:start;width:100%;height:auto;min-height:0;padding:12px 0;margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;text-align:left;white-space:normal;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
body.shell :is(#panes,#view-asset) #tab-tires .tire-event-row:hover {background:var(--surface-alt,#f4f7fa)}
body.shell :is(#panes,#view-asset) #tab-tires .tire-event-main {min-width:0}
body.shell :is(#panes,#view-asset) #tab-tires .tire-event-row .tire-event-heading {display:flex;align-items:center;gap:6px;flex-wrap:wrap}
body.shell :is(#panes,#view-asset) #tab-tires .tire-event-row .tire-event-kind {display:inline-flex;width:auto;font-size:11px;font-weight:600;padding:1px 6px;border-radius:5px;background:var(--surface-alt,#eef2f6);color:var(--ink-600,#526070);border:1px solid var(--line)}
body.shell :is(#panes,#view-asset) #tab-tires .tire-event-location {margin-top:3px;font-weight:400}
body.shell :is(#panes,#view-asset) #tab-tires .tire-event-mileage {font-size:12px;min-width:0;max-width:230px;font-weight:400}
body.shell :is(#panes,#view-asset) #tab-tires .tire-event-chevron {align-self:center;color:var(--muted);font-size:18px}
body.shell :is(#panes,#view-asset) #tab-tires .tire-event-row:not(:has(.tire-event-mileage)) {grid-template-columns:minmax(0,1fr) 12px}
@media(max-width:700px){
 body.shell :is(#panes,#view-asset) #tab-tires .tire-event-row {grid-template-columns:minmax(0,1fr) 12px;gap:6px 10px}
 body.shell :is(#panes,#view-asset) #tab-tires .tire-event-main {grid-column:1;grid-row:1}
 body.shell :is(#panes,#view-asset) #tab-tires .tire-event-mileage {grid-column:1;grid-row:2;max-width:none}
 body.shell :is(#panes,#view-asset) #tab-tires .tire-event-chevron {grid-column:2;grid-row:1/3}
}

/* Keep tire actions compact so the history is reachable on a phone. */
body.shell :is(#panes,#view-asset) #tab-tires #tire-round-dialog .tire-position-actions {display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:12px}
body.shell :is(#panes,#view-asset) #tab-tires #tire-round-dialog .tire-position-actions button {flex:1 1 90px;width:auto;height:auto;min-height:44px;margin:0;padding:8px;font-size:12px;white-space:normal}
body.shell :is(#panes,#view-asset) #tab-tires #tire-round-dialog .tire-brand-block {flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0}

/* Recorded timestamps use the same question-mark disclosure as history. */
body.shell :is(#panes,#view-asset) #tab-tires .tire-round-card .tire-recorded-info {position:relative;display:inline-flex;vertical-align:middle}
body.shell :is(#panes,#view-asset) #tab-tires .tire-recorded-info .hist-time {display:inline-flex;align-items:center;justify-content:center;width:28px;min-width:28px;height:28px;min-height:28px;margin:0;padding:0;border:0;border-radius:6px;background:transparent;box-shadow:none;color:var(--muted);cursor:pointer}
body.shell :is(#panes,#view-asset) #tab-tires .tire-recorded-info .hist-info-panel {display:none;position:absolute;z-index:60;top:var(--hist-info-top,100%);left:var(--hist-info-left,0px);width:260px;max-width:calc(100vw - 84px);box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card,#fff);color:var(--ink-900);font-size:12px;font-weight:400;line-height:1.6;white-space:normal;overflow-wrap:anywhere;box-shadow:0 4px 16px #0002;text-align:left}
body.shell :is(#panes,#view-asset) #tab-tires .tire-recorded-info.is-open>.hist-info-panel {display:block}

#tab-features .tire-feature-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
body.shell #panes #tab-features button.feature-toggle{position:relative;flex:0 0 64px;box-sizing:border-box;width:64px;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:999px;background:transparent;box-shadow:none;cursor:pointer}
body.shell #panes #tab-features button.feature-toggle::before{content:"";position:absolute;inset:4px 0;border-radius:999px;background:#c7c7cc;transition:background .18s ease}
body.shell #panes #tab-features button.feature-toggle::after{content:"";position:absolute;top:8px;left:4px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .18s ease}
body.shell #panes #tab-features button.feature-toggle[aria-checked="true"]::before{background:#22c55e}
body.shell #panes #tab-features button.feature-toggle[aria-checked="true"]::after{transform:translateX(28px)}
body.shell #panes #tab-features button.feature-toggle:focus-visible{outline:2px solid #15803d;outline-offset:3px}
body.shell #panes #tab-features button.feature-toggle:disabled{opacity:.55;cursor:wait}
@media(prefers-reduced-motion:reduce){body.shell #panes #tab-features button.feature-toggle::before,body.shell #panes #tab-features button.feature-toggle::after{transition:none}}

/* Compact, expandable change records. The summary is the actual detail control. */
body.shell :is(#panes,#view-asset) #tab-tires .tire-change-list .tire-ledger-entry {display:block;padding:0;margin:0;border:0;border-bottom:1px solid var(--line);}
body.shell :is(#panes,#view-asset) #tab-tires .tire-change {margin:0;border:0;padding:0;background:transparent;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-change > summary {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;list-style:none;cursor:pointer;margin:0;padding:12px 4px;border:0;line-height:1.5;font-size:13px;color:var(--ink-900);}
body.shell :is(#panes,#view-asset) #tab-tires .tire-change > summary::-webkit-details-marker {display:none;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-change > summary:hover {background:var(--surface-alt,#f4f7fa);}
body.shell :is(#panes,#view-asset) #tab-tires .tire-change > summary:focus-visible {outline:2px solid var(--primary,#2465a5);outline-offset:-2px;border-radius:6px;}
.tire-change-heading {display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;}
.tire-change-location {grid-column:1;overflow-wrap:anywhere;color:var(--ink-500,#667085);}
.tire-change-meter {grid-column:2;grid-row:1;white-space:nowrap;font-size:12px;}
.tire-change-toggle {grid-column:2;grid-row:2;color:var(--primary,#2465a5);font-size:12px;}
.tire-change[open] .tire-change-toggle > span {display:inline-block;transform:rotate(180deg);}
.tire-change-detail {margin:0 0 10px;padding:10px 12px;border-radius:8px;background:var(--surface-alt,#f4f7fa);font-size:12px;line-height:1.6;}
.tire-change-detail > div {display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;padding:3px 0;}
.tire-change-detail dt {color:var(--ink-500,#667085);}
.tire-change-detail dd {margin:0;overflow-wrap:anywhere;}
#tire-changes-panel .detail-history-body {max-height:none;overflow:visible;scrollbar-gutter:auto;}
@media(max-width:440px){
 body.shell :is(#panes,#view-asset) #tab-tires .tire-change > summary {grid-template-columns:minmax(0,1fr) auto;padding:10px 2px;}
 .tire-change-meter {white-space:normal;}
 .tire-change-detail > div {grid-template-columns:90px minmax(0,1fr);}
}
body.shell :is(#panes,#view-asset) #tab-tires .tire-change > summary > .tire-change-heading,
body.shell :is(#panes,#view-asset) #tab-tires .tire-change > summary > .tire-change-location {grid-column:1;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-change > summary > .tire-change-meter {grid-column:2;grid-row:1;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-change > summary > .tire-change-toggle {grid-column:2;grid-row:2;}