:root { --body-font: var(--font-ui); }

.v2-badge {
  margin-left: 6px; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; white-space: nowrap; text-decoration: none;
  background: var(--appbar-tint, rgba(255,255,255,.18)); color: inherit;
}
.v2-badge:hover { background: var(--appbar-tint-2, rgba(255,255,255,.28)); }


.v2-pop-backdrop { position: fixed; inset: 0; z-index: 44; }

.od-new-btn { text-decoration: none; }

.v2-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.v2-card {
  background: var(--surface); border: 1px solid var(--stroke); border-radius: 8px;
  padding: 16px 18px;
}
.v2-notported { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.v2-notported-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }

.v2-skeleton { display: flex; flex-direction: column; gap: 10px; }

.v2-failed {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 18px; border-radius: 8px; background: var(--surface); border: 1px solid var(--stroke);
}
.v2-failed-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.v2-failed-line { font-size: 12.5px; color: var(--text-secondary); }


.v2-listbox { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.v2-gridwrap { overflow: auto; min-height: 0; }

.v2-fill { flex: 1 1 auto; min-height: 120px; }
.v2-fill > .v2-gridwrap { flex: 1 1 auto; }

.v2-fill > .v2-gridwrap:has(> .ds-empty-cell) { display: flex; flex-direction: column; }
.v2-gridwrap > .ds-empty-cell {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 12.5px;
}

.ds-content:has(> .v2-fill), .ds-content:has(> * > .v2-fill) { overflow: hidden; flex: 1 1 auto; min-height: 0; }

.v2-grid { width: 100%; font-size: 12.5px; font-family: var(--font-ui); }
.v2-grid th {
  height: var(--colhead-h); padding: 0 10px; text-align: left; white-space: nowrap;
  background: var(--surface); border-bottom: 1px solid var(--grid-line);
  font-weight: 600; color: var(--text-primary);
}
.v2-grid td {
  height: var(--row-h-compact); padding: 6px 10px; vertical-align: middle;
  border-bottom: 1px solid var(--divider); color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0;
}
.v2-grid th:first-child, .v2-grid td:first-child { padding-left: 24px; }
.v2-grid th:last-child, .v2-grid td:last-child { padding-right: 24px; }
.v2-grid tr.ds-row:hover td { background: var(--surface-alt); }


.v2-grid td.ds-row--open, .v2-grid td.ds-row--picked { box-shadow: none; }
.v2-grid td.ds-row--open:first-child { box-shadow: inset 3px 0 0 var(--od-brand); }

.v2-grid td.ds-row--picked:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.v2-grid tr.ds-row--bad td:first-child { box-shadow: inset 2px 0 0 var(--ds-bad); }
.v2-grid tr.ds-row--warn td:first-child { box-shadow: inset 2px 0 0 var(--ds-warn); }
.v2-grid td.col-justify-end, .v2-grid td.col-justify-right { text-align: right; }
.v2-grid .ds-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.v2-grid td { max-width: none; }
.v2-trunc { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.v2-trunc--type { min-width: min(150px, 8vw); max-width: min(230px, 12vw); }
.v2-trunc--source { min-width: min(215px, 10vw); max-width: min(300px, 12vw); }
.v2-trunc--name { max-width: min(260px, 14vw); }
.v2-trunc--long { max-width: clamp(140px, calc(15.5vw - 56px), 340px); }


.v2-grid th .od-th { margin-left: -8px; }

.v2-grid th.col-justify-start { text-align: left; }
.v2-th-static { cursor: default; }
.v2-th-static:hover { background: none; }


.v2-colmenu { --popover-padding: 0; }
.v2-colmenu-body { display: flex; flex-direction: column; min-width: 208px; max-width: 320px; padding: 4px 0; }
.v2-colmenu-body .od-colmenu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px;
  border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 13px; color: var(--text-primary);
}
.v2-colmenu-body .od-colmenu-item:hover { background: var(--surface-hover); }
.v2-colmenu-body .od-colmenu-item.is-on { font-weight: 600; color: var(--accent); }
.v2-colmenu-body .od-colmenu-opts { max-height: 300px; overflow-y: auto; }
.v2-colmenu-group {
  padding: 8px 12px 2px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary);
}
.v2-colmenu-body .ds-filter-option-check { visibility: hidden; margin-left: auto; }


.fca-info-pop { --popover-padding: 0; }
.fca-info-body { max-width: 340px; padding: 10px 12px; }
.fca-info-title { font-size: 12px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.fca-info-text { font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.v2-colmenu-body .ds-filter-option-check.is-on { visibility: visible; color: var(--accent); }


fluent-tabs::part(tablist) {
  gap: 2px;
  padding: 0 2px;
  border-bottom: 1px solid var(--ds-line);
}
fluent-tab {
  padding: 9px 14px 8px;
  font-size: 12.5px;
  color: var(--ds-muted);
  border-radius: 6px 6px 0 0;
}
fluent-tab:hover { color: var(--ds-ink); background: var(--ds-line2); }
fluent-tab[aria-selected="true"] { color: var(--od-brand); font-weight: 600; }


fluent-tabs::part(activeIndicator) {
  background: var(--od-brand);
  height: 2px;
  border-radius: 2px 2px 0 0;
  width: 100%;
}

fluent-tab .od-tab-count { margin-left: 6px; }


.v2-confirm-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.v2-confirm-lines { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.v2-confirm-cost { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--ds-warn); }
.v2-confirm-type { margin-top: 12px; font-size: 12.5px; color: var(--text-secondary); }


.v2-drawer-shell { position: absolute; inset: 0; display: flex; z-index: 200; }
.v2-drawer-shell > .ds-mdetail-backdrop { flex: 1; }


#drawer-host:not(:empty) { top: 0; }


.v2-drawer-panel { width: 100%; }


@media (max-width: 1100px) {
  .v2-drawer-panel { width: min(560px, 92vw); }
}


body { --v2-drawer-wide: min(1280px, max(72vw, 100vw - 360px)); }
#drawer-host:not(:empty):has(.v2-drawer-wide) { width: var(--v2-drawer-wide); }
body.ds-ma-panel:has(#drawer-host .v2-drawer-wide) .ds-page { padding-right: var(--v2-drawer-wide); }
@media (max-width: 1100px) {
  .v2-drawer-wide .v2-drawer-panel { width: min(1280px, 96vw); }
}
.v2-drawer-head { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; }
.v2-drawer-tabs { padding: 0 18px; border-bottom: 1px solid var(--stroke); flex-shrink: 0; }


#blazor-error-ui {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  padding: 10px 16px; background: var(--warning-bg); color: var(--warning-fg);
  box-shadow: var(--shadow-menu); font-size: 13px;
}
#blazor-error-ui .reload { margin-left: 8px; color: inherit; font-weight: 600; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }




body.ds-mobile #drawer-host:not(:empty) { position: fixed; inset: 0; width: auto; padding: 0; z-index: 50; background: none; }
body.ds-mobile.ds-ma-panel .ds-page { padding-right: 0; }
body.ds-mobile .v2-drawer-panel { width: 100%; }


body.ds-mobile fluent-dialog { --dialog-width: calc(100vw - 16px) !important; }


body.ds-mobile .ds-content:has(> .v2-fill), body.ds-mobile .ds-content:has(> * > .v2-fill) { overflow: auto; flex: 0 1 auto; }
body.ds-mobile .v2-fill, body.ds-mobile .v2-fill > .v2-gridwrap { flex: none; min-height: 0; }


body.ds-mobile .v2-grid th, body.ds-mobile .v2-grid td { padding: 8px; }
body.ds-mobile .v2-grid th:first-child, body.ds-mobile .v2-grid td:first-child { padding-left: 12px; }
body.ds-mobile .v2-grid th:last-child, body.ds-mobile .v2-grid td:last-child { padding-right: 12px; }
body.ds-mobile .v2-colmenu-body { max-width: calc(100vw - 24px); }


body.ds-mobile .ds-subheader:empty { display: none; }


body.ds-mobile .ds-pcard { cursor: pointer; }


body.ds-mobile .ds-menu-theme { display: flex; gap: 6px; padding: 8px; }
body.ds-mobile .ds-menu-theme .od-theme-opt { flex: 1 1 0; justify-content: center; min-height: 40px; }
body.ds-mobile .ds-menu .od-lang { padding: 4px 8px 8px; }
body.ds-mobile .ds-mnav-item { position: relative; }
body.ds-mobile .ds-mnav-item .od-nav-badge { position: absolute; top: 6px; left: calc(50% + 6px); margin: 0; }