/*
 * Cases visual system v2
 *
 * This file is intentionally loaded after the legacy stylesheet. It gathers the
 * final visual decisions in one reversible layer while the legacy CSS can be
 * retired gradually without changing application behaviour.
 */

/* The type scale: every font size in the app is one of these steps.
   micro — tiny marks (badges, chart ticks); caption — secondary text and the
   tables; body — ordinary text, fields, buttons, the top row; title — window
   and panel titles; heading, display, hero — big numbers and wordmarks. */
:root {
  --type-micro: 10.5px;
  --type-caption: 11.5px;
  --type-body: 13px;
  --type-title: 15px;
  --type-heading: 18px;
  --type-display: 22px;
  --type-hero: 26px;
}
body.cases-visual-v2 {
  --v2-surface: rgba(240, 244, 250, .85);
  --v2-surface-strong: rgba(242, 246, 251, .96);
  --v2-ink: #20384d;
  --v2-ink-strong: #142b40;
  --v2-muted: #5d7387;
  --v2-line: rgba(142, 169, 191, .34);
  --v2-line-strong: rgba(110, 147, 176, .48);
  --v2-focus: #167db5;
  --v2-focus-ring: rgba(22, 125, 181, .18);
  --v2-blue: #287fc3;
  --v2-blue-soft: rgba(40, 127, 195, .10);
  --v2-amber: #9c6719;
  --v2-red: #b34f5d;
  --v2-radius-xs: 9px;
  --v2-radius-sm: 9px;
  --v2-radius-md: 9px;
  --v2-shadow-float: 0 18px 42px rgba(31, 59, 84, .16);
  --v2-ease: cubic-bezier(.2, .8, .2, 1);
  color: var(--v2-ink) !important;
  font-size: var(--type-body) !important;
  line-height: 1.45 !important;
  background: linear-gradient(135deg, #ebf0f6 0%, #e6ecf3 48%, #e2e9f1 100%) !important;
}

/* -------------------------------------------------------------------------- */
/* Unified architectural canvas                                                */
/* -------------------------------------------------------------------------- */

/* One continuous background crosses the sidebar and every page. The restrained
   diagonal planes replace the former radial, curtain-like lighting. */
html body.cases-visual-v2 {
  background:
    linear-gradient(171deg, transparent 0 6.72%, rgba(255, 255, 255, .26) 6.78%, rgba(255, 255, 255, .10) 7.02%, transparent 7.08%),
    linear-gradient(171deg, transparent 0 7.16%, rgba(37, 67, 89, .032) 7.22%, rgba(37, 67, 89, .014) 8.35%, transparent 10.4%),
    linear-gradient(158deg, transparent 0 30.74%, rgba(255, 255, 255, .22) 30.80%, rgba(255, 255, 255, .09) 31.02%, transparent 31.08%),
    linear-gradient(158deg, transparent 0 31.16%, rgba(49, 61, 91, .028) 31.22%, rgba(49, 61, 91, .012) 33.1%, transparent 36.2%),
    linear-gradient(163deg, transparent 0 19.76%, rgba(255, 255, 255, .12) 19.84%, transparent 20.16%),
    linear-gradient(154deg, transparent 0 51.72%, rgba(255, 255, 255, .11) 51.82%, transparent 52.18%),
    linear-gradient(163deg, transparent 0 20%, rgba(111, 168, 204, .075) 20.08%, rgba(111, 168, 204, .025) 38%, transparent 38.12%),
    linear-gradient(154deg, transparent 0 52%, rgba(137, 136, 168, .045) 52.08%, rgba(137, 136, 168, .016) 69%, transparent 69.12%),
    linear-gradient(171deg, transparent 0 7%, rgba(var(--cases-primary-rgb, 79, 127, 181), .11) 7.06%, rgba(var(--cases-primary-rgb, 79, 127, 181), .11) 7.13%, transparent 7.2%),
    linear-gradient(158deg, transparent 0 31%, rgba(137, 136, 168, .10) 31.06%, rgba(137, 136, 168, .10) 31.13%, transparent 31.2%),
    linear-gradient(135deg, #ebf0f6 0%, #e6ecf3 48%, #e2e9f1 100%) !important;
  background-attachment: fixed !important;
}

html body.cases-visual-v2 :is(.cases-sidebar, .cases-main, .titlebar) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Selected metric-card direction: borderless typography on the shared canvas. */
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card,
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card:is(:hover, :focus-within) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card::before,
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card::after {
  content: none !important;
  display: none !important;
}

body.cases-visual-v2::before,
body.cases-visual-v2::after {
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
}

body.cases-visual-v2,
body.cases-visual-v2 :where(button, input, select, textarea, table) {
  font-family: var(--cases-ui-font) !important;
  font-optical-sizing: auto !important;
}

body.cases-visual-v2 :where(button, input, select, textarea) {
  font-size: var(--type-body) !important;
  line-height: 1.35 !important;
}

body.cases-visual-v2 :where(h1, h2, h3, th, .nav-title, .settings-nav-item > span:last-child) {
  color: var(--v2-ink-strong) !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
}

body.cases-visual-v2 :where(p, small, .muted, .report-note, .deadline-settings-note) {
  color: var(--v2-muted) !important;
}

body.cases-visual-v2 :where(button, a, input, select, textarea, [tabindex]):focus {
  outline: none !important;
}

body.cases-visual-v2 :where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--v2-focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--v2-focus-ring) !important;
}

body.cases-visual-v2 :where(button, .nav-item, .settings-nav-item, .cases-card, input, select, textarea) {
  transition:
    color .16s var(--v2-ease),
    border-color .16s var(--v2-ease),
    background-color .16s var(--v2-ease),
    box-shadow .18s var(--v2-ease),
    transform .18s var(--v2-ease),
    opacity .16s var(--v2-ease) !important;
}

body.cases-visual-v2 .cases-main {
  color: var(--v2-ink) !important;
}


/* Navigation: preserve the Cases artwork while clarifying state and rhythm. */
body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-item {
  min-height: 46px !important;
  color: var(--v2-muted) !important;
  border: 0 !important;
  border-radius: var(--v2-radius-sm) !important;
}


body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-icon,
body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-icon svg {
  color: currentColor !important;
}

/* Shared surfaces and section hierarchy. */
body.cases-visual-v2 .cases-main :where(.cases-card, .cases-table-wrap, .settings-sidebar, .settings-empty-panel) {
  border-color: var(--v2-line) !important;
  background-color: var(--v2-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66) !important;
  backdrop-filter: blur(14px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
}

body.cases-visual-v2 .cases-main :where(.form-section, .reference-block, .deadline-settings-panel, .report-builder-card) {
  border-radius: var(--v2-radius-md) !important;
}






body.cases-visual-v2 .cases-main :where(.icon-action, .row-icon-action, .settings-action-btn, .date-picker-button) {
  color: var(--v2-muted) !important;
  border-color: transparent !important;
  background-color: transparent !important;
}

body.cases-visual-v2 .cases-main :where(.icon-action, .row-icon-action, .settings-action-btn, .date-picker-button):hover {
  color: var(--v2-blue) !important;
  border-color: rgba(40, 127, 195, .18) !important;
  background-color: var(--v2-blue-soft) !important;
  transform: translateY(-1px) !important;
}

body.cases-visual-v2 .cases-main :where(.delete-action, .danger-action, .delete-reference, .delete-backup):hover {
  color: var(--v2-red) !important;
  border-color: rgba(179, 79, 93, .20) !important;
  background-color: rgba(179, 79, 93, .08) !important;
}

body.cases-visual-v2 :where(button, .nav-item, .settings-nav-item):active {
  transform: translateY(0) scale(.98) !important;
}

/* Home: neutral cards with a quiet signature rail and clear numeric hierarchy. */
body.cases-visual-v2 .cases-main .cases-page-root:has(.home-summary-grid) {
  --home-text-color: var(--v2-ink);
  --home-rule-color: var(--v2-line);
}

body.cases-visual-v2 .cases-main .home-summary-card[data-summary-key] {
  position: relative !important;
  overflow: hidden !important;
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  gap: 8px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  color: var(--v2-ink) !important;
  border-color: transparent !important;
  border-radius: var(--v2-radius-sm) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.cases-visual-v2 .cases-main .home-summary-card[data-summary-key]::before {
  content: "" !important;
  position: absolute !important;
  top: 18px !important;
  bottom: 18px !important;
  left: 0 !important;
  width: 2px !important;
  border-radius: 99px !important;
  background: rgba(124, 58, 237, .56) !important;
  opacity: 0 !important;
  transform: scaleY(.6) !important;
  transition: opacity .18s var(--v2-ease), transform .18s var(--v2-ease) !important;
}

body.cases-visual-v2 .cases-main .home-summary-card[data-summary-key]:hover::before,
body.cases-visual-v2 .cases-main .home-summary-card[data-summary-key]:focus-within::before {
  opacity: 1 !important;
  transform: scaleY(1) !important;
}

body.cases-visual-v2 .cases-main .home-summary-card[data-summary-key] > span {
  color: var(--v2-muted) !important;
  font-size: var(--type-caption) !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  display: -webkit-box !important;
  min-height: 32px !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-align: center !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body.cases-visual-v2 .cases-main .home-summary-card[data-summary-key] .home-count-button {
  color: var(--v2-ink-strong) !important;
  font-size: clamp(var(--type-display), 2vw, var(--type-hero)) !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
}


body.cases-visual-v2 .cases-main .home-mobile-panel::before,
body.cases-visual-v2 .cases-main .home-overall-panel::before {
  opacity: .72 !important;
}


body.cases-visual-v2 .cases-main .home-mobile-table .home-group-name {
  color: var(--v2-muted) !important;
  font-size: var(--type-caption) !important;
  font-weight: 400 !important;
  justify-content: flex-start !important;
  padding-inline: 8px !important;
  overflow: hidden !important;
  text-align: left !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.cases-visual-v2 .cases-main .home-mobile-table .home-table-count {
  color: var(--v2-ink-strong) !important;
  font-size: var(--type-title) !important;
  font-weight: 500 !important;
}

html body.cases-visual-v2 .cases-main .cases-page-root:has(.home-summary-grid) :is(h1, h2, h3, p, span, strong, th, td, button:not(.home-count-button), select, option) {
  font-size: var(--type-body) !important;
  font-weight: 400 !important;
}

html body.cases-visual-v2 .cases-main .home-summary-card[data-summary-key] > span {
  color: var(--v2-muted) !important;
  font-size: var(--type-caption) !important;
}

html body.cases-visual-v2 .cases-main .home-summary-card[data-summary-key] .home-count-button {
  color: var(--v2-ink-strong) !important;
  font-size: clamp(var(--type-display), 2vw, var(--type-hero)) !important;
  font-weight: 500 !important;
}


/* Chart selector: compact icons, with the selected mode named in place. */
body.cases-visual-v2 .cases-main .home-chart-controls {
  gap: 12px !important;
  padding: 2px 4px 8px !important;
}

body.cases-visual-v2 .cases-main .home-single-chart-panel .home-chart-mode-button,
body.cases-visual-v2 .cases-main .home-single-chart-panel .home-chart-mode-button:hover,
body.cases-visual-v2 .cases-main .home-single-chart-panel .home-chart-mode-button:focus,
body.cases-visual-v2 .cases-main .home-single-chart-panel .home-chart-mode-button:focus-visible,
body.cases-visual-v2 .cases-main .home-single-chart-panel .home-chart-mode-button:active {
  display: inline-flex !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  flex: 0 0 auto !important;
  gap: 0 !important;
  padding: 0 6px !important;
  color: var(--v2-muted) !important;
  border-radius: var(--v2-radius-xs) !important;
}

body.cases-visual-v2 .cases-main .home-single-chart-panel .home-chart-mode-button[aria-pressed="true"] {
  width: auto !important;
  max-width: 230px !important;
  gap: 7px !important;
  padding: 0 10px 0 7px !important;
  color: var(--chart-mode-action-color) !important;
  border-color: color-mix(in srgb, var(--chart-mode-action-color) 28%, transparent) !important;
  background: var(--chart-mode-action-bg) !important;
}



body.cases-visual-v2 .cases-main .home-chart-period-button {
  color: var(--v2-muted) !important;
  font-size: var(--type-caption) !important;
}

body.cases-visual-v2 .cases-main .home-chart-period-button[aria-pressed="true"] {
  color: var(--home-chart-color-text) !important;
  font-weight: 500 !important;
}


body.cases-visual-v2 .cases-main .home-single-chart-panel[data-chart-mode="incoming"][data-incoming-level="years"] .home-chart-scroll {
  overflow-x: hidden !important;
}

body.cases-visual-v2 .cases-main .home-single-chart-panel[data-chart-mode="incoming"][data-incoming-level="years"] .home-chart-plot {
  width: 100% !important;
  min-width: 100% !important;
}

body.cases-visual-v2 .cases-main .home-single-chart-panel[data-chart-mode="incoming"][data-incoming-level="years"] .home-chart-columns {
  grid-template-columns: repeat(var(--chart-columns), minmax(34px, 1fr)) !important;
}


body.cases-visual-v2 .cases-main .home-chart-column:hover .home-chart-bar-track > i,
body.cases-visual-v2 .cases-main .home-chart-column:focus-visible .home-chart-bar-track > i {
  filter: saturate(1.08) brightness(1.03) !important;
  transform: scaleX(1.045) !important;
}

/* Case lists: never squeeze eleven columns into unreadable labels. */



body.cases-visual-v2 .cases-main .case-table-search {
  border-color: var(--v2-line) !important;
  background: rgba(250, 252, 255, .72) !important;
}

body.cases-visual-v2 .cases-main .case-table-search:focus-within {
  border-color: var(--v2-focus) !important;
  box-shadow: 0 0 0 4px var(--v2-focus-ring) !important;
}

body.cases-visual-v2 .cases-main .case-table-search > input::placeholder {
  color: var(--v2-muted) !important;
  opacity: .88 !important;
}

body.cases-visual-v2 .cases-main .cases-table-wrap {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border-radius: var(--v2-radius-md) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(71, 111, 143, .38) transparent !important;
}

body.cases-visual-v2 .cases-main .cases-table-wrap::-webkit-scrollbar {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
}

body.cases-visual-v2 .cases-main .cases-table-wrap::-webkit-scrollbar-track {
  display: block !important;
  background: transparent !important;
}

body.cases-visual-v2 .cases-main .cases-table-wrap::-webkit-scrollbar-thumb {
  border-radius: 99px !important;
  background: rgba(71, 111, 143, .38) !important;
}

body.cases-visual-v2 .cases-main .cases-table {
  width: 100% !important;
  min-width: 1606px !important;
  color: var(--v2-ink) !important;
}

body.cases-visual-v2 .cases-main .cases-table thead tr,
body.cases-visual-v2 .cases-main .cases-table tbody tr {
  grid-template-columns: 144px 116px 120px 128px 130px 123px 132px 102px 122px 115px 136px minmax(150px, 1fr) !important;
  gap: 8px !important;
}

body.cases-visual-v2 .cases-main .cases-table thead {
  position: relative !important;
  z-index: 8 !important;
}

body.cases-visual-v2 .cases-main .cases-table th {
  min-height: 48px !important;
  height: 48px !important;
  padding: 8px 7px !important;
  color: var(--v2-muted) !important;
  font-size: var(--type-caption) !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  border-bottom-color: var(--v2-line-strong) !important;
  background: rgba(244, 248, 252, .96) !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  text-wrap: balance !important;
}

body.cases-visual-v2 .cases-main .cases-table td,
body.cases-visual-v2 .cases-main .cases-table td:nth-child(n),
body.cases-visual-v2 .cases-main .cases-table td:nth-child(11) {
  padding: 10px 7px !important;
  color: var(--v2-ink) !important;
  font-size: var(--type-body) !important;
  line-height: 1.32 !important;
  font-weight: 400 !important;
  border-bottom-color: rgba(142, 169, 191, .24) !important;
}

body.cases-visual-v2 .cases-main .cases-table tbody tr.virtual-case-row {
  border-radius: var(--v2-radius-xs) !important;
}

body.cases-visual-v2 .cases-main .cases-table tbody tr.virtual-case-row:hover > td {
  background: rgba(223, 237, 248, .48) !important;
}

body.cases-visual-v2 .cases-main .cases-table :is(th, td):first-child {
  position: relative !important;
  left: 0 !important;
  z-index: 5 !important;
  background: #f4f8fc !important;
  box-shadow: 1px 0 0 var(--v2-line) !important;
  transform: translateX(var(--case-table-scroll-x, 0px)) !important;
  width: calc(100% + 8px) !important;
}

body.cases-visual-v2 .cases-main .cases-table :is(th, td):nth-child(2) {
  position: relative !important;
  left: 0 !important;
  z-index: 4 !important;
  background: #f4f8fc !important;
  box-shadow: 1px 0 0 var(--v2-line) !important;
  transform: translateX(var(--case-table-scroll-x, 0px)) !important;
  width: calc(100% + 8px) !important;
}

body.cases-visual-v2 .cases-main .cases-table thead :is(th:first-child, th:nth-child(2)) {
  z-index: 10 !important;
  background: #eef4f9 !important;
}

body.cases-visual-v2 .cases-main .cases-table tbody tr.virtual-case-row:hover > :is(td:first-child, td:nth-child(2)) {
  background: #e9f2f9 !important;
}


body.cases-visual-v2 .cases-main :is(.cases-table, .report-preview-table) .status-pill {
  font-size: var(--type-body) !important;
  font-weight: 500 !important;
}

/* Editor: clearer hierarchy, stable action lane, and responsive rows. */
body.cases-visual-v2 .cases-main .cases-editor-panel {
  gap: 16px !important;
}

body.cases-visual-v2 .cases-main .cases-editor-panel .cases-card {
  padding: 18px !important;
  border-color: var(--v2-line) !important;
  background: var(--v2-surface) !important;
}

body.cases-visual-v2 .cases-main .cases-editor-panel label,
body.cases-visual-v2 .settings-content label {
  color: var(--v2-muted) !important;
  font-size: var(--type-caption) !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
}

body.cases-visual-v2 .cases-main .cases-editor-panel :where(input, select, textarea),
body.cases-visual-v2 .settings-content :where(input, select, textarea) {
  color: var(--v2-ink-strong) !important;
  font-size: var(--type-body) !important;
  font-weight: 400 !important;
  border-color: var(--v2-line-strong) !important;
  border-radius: var(--v2-radius-sm) !important;
  background-color: rgba(253, 254, 255, .72) !important;
}

body.cases-visual-v2 .cases-main .cases-editor-panel :where(input, select, textarea):hover,
body.cases-visual-v2 .settings-content :where(input, select, textarea):hover {
  border-color: rgba(65, 119, 158, .58) !important;
}

body.cases-visual-v2 .cases-main .cases-editor-panel :where(input, select, textarea):focus,
body.cases-visual-v2 .settings-content :where(input, select, textarea):focus {
  border-color: var(--v2-focus) !important;
  box-shadow: 0 0 0 4px var(--v2-focus-ring) !important;
}

body.cases-visual-v2 .cases-main .cases-object-row {
  grid-template-columns: minmax(130px, 1fr) minmax(160px, 1.25fr) minmax(160px, 1.2fr) minmax(130px, 1fr) 38px !important;
  align-items: end !important;
}

body.cases-visual-v2 .cases-main .cases-registration-row {
  grid-template-columns: minmax(180px, 1.3fr) minmax(180px, 1fr) minmax(180px, 1fr) 38px !important;
  align-items: end !important;
}

body.cases-visual-v2 .cases-main .cases-retrieval-row {
  align-items: end !important;
}

body.cases-visual-v2 .cases-main :is(.cases-object-row, .cases-retrieval-row, .cases-registration-row) > .row-icon-action {
  align-self: end !important;
  justify-self: end !important;
  margin: 0 !important;
}

/* Settings: same navigation grammar as the main sidebar, quieter content plane. */

body.cases-visual-v2 .cases-main .settings-sidebar .settings-nav-item {
  min-height: 46px !important;
  color: var(--v2-muted) !important;
  border: 0 !important;
  border-radius: var(--v2-radius-sm) !important;
}


body.cases-visual-v2 .settings-content,
body.cases-visual-v2 .settings-content > *,
body.cases-visual-v2 .settings-content .cases-about-page {
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Unified transient surfaces. */

body.cases-visual-v2 :where(.styled-autofill-option, .styled-select-option, .styled-calendar-day, .deadline-notification-row):hover,
body.cases-visual-v2 :where(.styled-autofill-option, .styled-select-option, .styled-calendar-day, .deadline-notification-row):focus-visible {
  color: var(--v2-ink-strong) !important;
  background: rgba(40, 127, 195, .09) !important;
}

body.cases-visual-v2 .app-confirm-copy :where(h2, p) {
  color: var(--v2-ink) !important;
  font-size: var(--type-body) !important;
}

body.cases-visual-v2 .toast-item {
  font-size: var(--type-body) !important;
  font-weight: 400 !important;
}

body.cases-visual-v2 .empty-state {
  min-height: 96px !important;
  color: var(--v2-muted) !important;
  font-size: var(--type-body) !important;
  line-height: 1.5 !important;
}


/* Supported narrow window: preserve information via scroll/reflow, never overlap. */
@media (max-width: 1280px) {
  

  html body.cases-visual-v2 .cases-main .cases-editor-panel .information-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.cases-visual-v2 .cases-main .cases-editor-panel .information-row > label {
    grid-column: auto !important;
    min-width: 0 !important;
  }

  html body.cases-visual-v2 .cases-main .cases-object-row,
  html body.cases-visual-v2 .cases-main .cases-registration-row {
    position: relative !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding-right: 34px !important;
  }

  html body.cases-visual-v2 .cases-main :is(.cases-object-row, .cases-retrieval-row, .cases-registration-row) > label {
    grid-column: auto !important;
    min-width: 0 !important;
  }

  html body.cases-visual-v2 .cases-main :is(.cases-object-row, .cases-retrieval-row, .cases-registration-row) > .row-icon-action {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    grid-column: auto !important;
    justify-self: end !important;
  }

  body.cases-visual-v2 .cases-main .home-chart-controls {
    gap: 8px !important;
  }

  body.cases-visual-v2 .cases-main .home-chart-mode-button[aria-pressed="true"] .home-chart-mode-label {
    max-width: 128px !important;
  }
}

@media (max-height: 820px) {
  html body.cases-visual-v2 .cases-main .home-mobile-table-wrap {
    max-height: 128px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(71, 111, 143, .34) transparent !important;
  }

  html body.cases-visual-v2 .cases-main .home-mobile-table-wrap::-webkit-scrollbar {
    width: 5px !important;
  }

  html body.cases-visual-v2 .cases-main .home-mobile-table-wrap::-webkit-scrollbar-thumb {
    border-radius: 99px !important;
    background: rgba(71, 111, 143, .34) !important;
  }
}

@media (max-width: 1160px) {
  

  body.cases-visual-v2 .cases-main .case-table-search {
    width: min(260px, 30vw) !important;
  }

  body.cases-visual-v2 .cases-main .home-chart-mode-button[aria-pressed="true"] .home-chart-mode-label {
    max-width: 98px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.cases-visual-v2 *,
  body.cases-visual-v2 *::before,
  body.cases-visual-v2 *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Visual consistency correction: one baseline, one control grammar, one table surface. */
body.cases-visual-v2 {
  --v2-control-height: 38px;
  --v2-control-radius: 9px;
  --v2-control-border: rgba(112, 148, 177, .34);
  --v2-control-border-hover: rgba(65, 119, 158, .66);
  --v2-control-bg: rgba(249, 252, 255, .74);
  --v2-control-bg-hover: rgba(252, 254, 255, .92);
  --v2-table-bg: #f4f8fc;
  --v2-table-hover: #e9f2f9;
  --v2-page-content-top: 96px;
}

/* Primary content begins on the same 140px guide used by Home, New Card and Reports. */
html body.cases-visual-v2 .cases-main .cases-page-root:has(.case-list-page) {
  box-sizing: border-box !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding-top: var(--v2-page-content-top) !important;
}


html body.cases-visual-v2 .cases-main .cases-page-root:has(.settings-layout) {
  box-sizing: border-box !important;
  padding-top: var(--v2-page-content-top) !important;
  overflow: hidden !important;
}

html body.cases-visual-v2 .cases-main .cases-page-root:has(.settings-layout) > .settings-layout {
  height: calc(100% - var(--v2-page-content-top)) !important;
  margin: 0 !important;
  align-items: start !important;
  overflow: visible !important;
}

html body.cases-visual-v2 .cases-main .settings-layout > .settings-sidebar,
html body.cases-visual-v2 .cases-main .settings-layout > .settings-content {
  box-sizing: border-box !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

html body.cases-visual-v2 .cases-main .settings-layout > .settings-sidebar {
  align-self: start !important;
  padding: 6px !important;
}

html body.cases-visual-v2 .cases-main .settings-layout > .settings-content {
  height: 100% !important;
  padding-right: 0 !important;
}

/* Home exposes every mobile-group row; the page scrolls as a whole on short windows. */
html body.cases-visual-v2 .cases-main .cases-page-root:has(.home-summary-grid) {
  align-content: start !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(71, 111, 143, .30) transparent !important;
}


@media (max-height: 820px) {
  html body.cases-visual-v2 .cases-main .home-mobile-table-wrap {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* All data-entry controls use the same border, radius and clean translucent fill. */
html body.cases-visual-v2 .cases-main .cases-editor-panel :is(input:not(.native-date-picker), select, textarea),
html body.cases-visual-v2 .cases-main .settings-content :is(input, select, textarea),
html body.cases-visual-v2 .cases-main .report-action-strip .report-source-select {
  box-sizing: border-box !important;
  color: var(--v2-ink-strong) !important;
  font-weight: 400 !important;
  border: 1px solid var(--v2-control-border) !important;
  border-radius: var(--v2-control-radius) !important;
  background: var(--v2-control-bg) !important;
  background-color: var(--v2-control-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main .cases-editor-panel :is(input:not(.native-date-picker), select, textarea):hover,
html body.cases-visual-v2 .cases-main .settings-content :is(input, select, textarea):hover,
html body.cases-visual-v2 .cases-main .report-action-strip .report-source-select:hover {
  border-color: var(--v2-control-border-hover) !important;
  background: var(--v2-control-bg-hover) !important;
}

html body.cases-visual-v2 .cases-main .cases-editor-panel :is(input:not(.native-date-picker), select).has-value:not(#statusId),
html body.cases-visual-v2 .cases-main .cases-editor-panel :is(input:not(.native-date-picker), select).has-value:not(#statusId):hover,
html body.cases-visual-v2 .cases-main .cases-editor-panel :is(input:not(.native-date-picker), select).has-value:not(#statusId):focus {
  color: var(--v2-ink-strong) !important;
  border-color: var(--v2-control-border) !important;
  background: var(--v2-control-bg) !important;
  background-color: var(--v2-control-bg) !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main form#caseForm.cases-editor-panel input.has-value:not(.native-date-picker):not(#statusId),
html body.cases-visual-v2 .cases-main form#caseForm.cases-editor-panel select.has-value:not(#statusId),
html body.cases-visual-v2 .cases-main form#caseForm.cases-editor-panel textarea.has-value,
html body.cases-visual-v2 .cases-main form#caseForm.cases-editor-panel input.has-value:not(.native-date-picker):not(#statusId):hover,
html body.cases-visual-v2 .cases-main form#caseForm.cases-editor-panel select.has-value:not(#statusId):hover,
html body.cases-visual-v2 .cases-main form#caseForm.cases-editor-panel textarea.has-value:hover,
html body.cases-visual-v2 .cases-main form#caseForm.cases-editor-panel input.has-value:not(.native-date-picker):not(#statusId):focus,
html body.cases-visual-v2 .cases-main form#caseForm.cases-editor-panel select.has-value:not(#statusId):focus,
html body.cases-visual-v2 .cases-main form#caseForm.cases-editor-panel textarea.has-value:focus {
  color: var(--v2-ink-strong) !important;
  border-color: var(--v2-control-border) !important;
  background: var(--v2-control-bg) !important;
  background-color: var(--v2-control-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main .cases-editor-panel .date-entry,
html body.cases-visual-v2 .cases-main .cases-editor-panel .date-entry:has(.date-text-input.has-value),
html body.cases-visual-v2 .cases-main .cases-editor-panel .field-mobile-group:has(#mobileGroup.has-value) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main .cases-editor-panel .date-entry:has(.date-text-input.has-value) .date-text-input,
html body.cases-visual-v2 .cases-main .cases-editor-panel .field-mobile-group #mobileGroup.has-value,
html body.cases-visual-v2 .cases-main .cases-editor-panel input#mobileGroup.has-value[readonly] {
  color: var(--v2-ink-strong) !important;
  border: 1px solid var(--v2-control-border) !important;
  border-radius: var(--v2-control-radius) !important;
  background: var(--v2-control-bg) !important;
  background-color: var(--v2-control-bg) !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main .cases-editor-panel #statusId,
html body.cases-visual-v2 .cases-main .cases-editor-panel #statusId:hover,
html body.cases-visual-v2 .cases-main .cases-editor-panel #statusId:focus {
  font-weight: 400 !important;
  border-color: var(--v2-control-border) !important;
  background: var(--v2-control-bg) !important;
  background-color: var(--v2-control-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main .settings-content .reference-add-row input,
html body.cases-visual-v2 .cases-main .settings-content .deadline-settings-fields input {
  height: var(--v2-control-height) !important;
  min-height: var(--v2-control-height) !important;
  max-height: var(--v2-control-height) !important;
}

html body.cases-visual-v2 .cases-main .report-action-strip .report-source-select {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
}

/* Navigation and utility pictograms are neutral; color is reserved for meaning. */
html body.cases-visual-v2 .cases-main .settings-sidebar .settings-nav-item:nth-child(n) .settings-nav-icon,
html body.cases-visual-v2 .cases-main .settings-sidebar .settings-nav-item:nth-child(n) .settings-nav-icon svg {
  color: inherit !important;
  background: transparent !important;
}

html body.cases-visual-v2 .cases-main :is(.date-picker-button, .report-excel-action, .settings-empty-icon),
html body.cases-visual-v2 .cases-main :is(.date-picker-button, .report-excel-action, .settings-empty-icon) svg {
  color: var(--v2-muted) !important;
  background: transparent !important;
  background-color: transparent !important;
}

html body.cases-visual-v2 .cases-main :is(.date-picker-button, .report-excel-action):hover,
html body.cases-visual-v2 .cases-main :is(.date-picker-button, .report-excel-action):focus-visible {
  color: var(--v2-blue) !important;
}

html body.cases-visual-v2 .cases-about-page :is(.icon-blue, .icon-green, .icon-red, .icon-purple, .icon-teal, .icon-slate){
  color: var(--v2-muted) !important;
  background: transparent !important;
}

/* Case-list rows are a single coherent surface in both rest and hover states. */
html body.cases-visual-v2 .cases-main .cases-table-wrap,
html body.cases-visual-v2 .cases-main .cases-table,
html body.cases-visual-v2 .cases-main .cases-table thead,
html body.cases-visual-v2 .cases-main .cases-table tbody {
  background: var(--v2-table-bg) !important;
  background-color: var(--v2-table-bg) !important;
}

html body.cases-visual-v2 .cases-main .cases-table thead tr,
html body.cases-visual-v2 .cases-main .cases-table tbody tr {
  gap: 0 !important;
}

html body.cases-visual-v2 .cases-main .cases-table th,
html body.cases-visual-v2 .cases-main .cases-table td,
html body.cases-visual-v2 .cases-main .cases-table td:nth-child(n),
html body.cases-visual-v2 .cases-main .cases-table td:nth-child(11),
html body.cases-visual-v2 .cases-main .cases-table :is(th, td):first-child,
html body.cases-visual-v2 .cases-main .cases-table :is(th, td):nth-child(2) {
  background: var(--v2-table-bg) !important;
  background-color: var(--v2-table-bg) !important;
}

html body.cases-visual-v2 .cases-main .cases-table :is(th, td):first-child,
html body.cases-visual-v2 .cases-main .cases-table :is(th, td):nth-child(2) {
  width: 100% !important;
}

html body.cases-visual-v2 .cases-main .cases-table tbody tr.virtual-case-row:hover > td,
html body.cases-visual-v2 .cases-main .cases-table tbody tr.virtual-case-row:hover > td:nth-child(n),
html body.cases-visual-v2 .cases-main .cases-table tbody tr.virtual-case-row:hover > :is(td:first-child, td:nth-child(2)) {
  background: var(--v2-table-hover) !important;
  background-color: var(--v2-table-hover) !important;
}

html body.cases-visual-v2 .cases-main :is(.cases-table, .report-preview-table) .status-pill,
html body.cases-visual-v2 .cases-main :is(.cases-table, .report-preview-table) .status-pill:hover,
html body.cases-visual-v2 .cases-main :is(.cases-table, .report-preview-table) .status-pill:focus-visible {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main .cases-table th,
html body.cases-visual-v2 .cases-main .cases-table td,
html body.cases-visual-v2 .cases-main .cases-table td:nth-child(n),
html body.cases-visual-v2 .cases-main :is(.cases-table, .report-preview-table) .status-pill {
  font-size: var(--type-caption) !important;
  font-weight: 400 !important;
}

html body.cases-visual-v2 .cases-main .cases-table.is-virtualized tbody tr.virtual-case-row,
html body.cases-visual-v2 .cases-main .cases-table.is-virtualized tbody tr.virtual-case-empty,
html body.cases-visual-v2 .cases-main .cases-table.is-virtualized tbody tr.virtual-case-empty > td.empty-state,
html body.cases-visual-v2 .cases-main .cases-table.is-virtualized tbody tr.virtual-case-row > td,
html body.cases-visual-v2 .cases-main .cases-table.is-virtualized tbody tr.virtual-case-row > td:nth-child(n) {
  height: var(--case-row-height, 80px) !important;
  min-height: var(--case-row-height, 80px) !important;
  max-height: var(--case-row-height, 80px) !important;
}

html body.cases-visual-v2 .cases-main .cases-table.is-virtualized tbody tr.virtual-case-row > td:nth-child(n) {
  padding-top: var(--case-row-padding, 10px) !important;
  padding-bottom: var(--case-row-padding, 10px) !important;
}

/* Report rows own the frame; their editable text does not draw a second nested box. */
html body.cases-visual-v2 .cases-main #reportPanel .report-unified-row,
html body.cases-visual-v2 .cases-main #reportPanel .report-unified-row.is-active,
html body.cases-visual-v2 .cases-main #reportPanel .report-unified-row.is-inactive {
  border-color: var(--v2-control-border) !important;
  border-radius: var(--v2-control-radius) !important;
  background: var(--v2-control-bg) !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main #reportPanel .report-field-title-input,
html body.cases-visual-v2 .cases-main #reportPanel .report-field-title-input:hover,
html body.cases-visual-v2 .cases-main #reportPanel .report-field-title-input:focus {
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* On standard desktop widths every column is present in one view. */
@media (min-width: 1360px) {
  html body.cases-visual-v2 .cases-main .cases-table {
    min-width: max(100%, 1520px) !important;
  }

  html body.cases-visual-v2 .cases-main .cases-table thead tr,
  html body.cases-visual-v2 .cases-main .cases-table tbody tr {
    grid-template-columns: 1.26fr 1.02fr 1.05fr 1.18fr 1.18fr 1.24fr 1.12fr .92fr 1.12fr .98fr 1.02fr 1.18fr !important;
    gap: 0 !important;
  }

  html body.cases-visual-v2 .cases-main .cases-table :is(th, td):first-child,
  html body.cases-visual-v2 .cases-main .cases-table :is(th, td):nth-child(2) {
    position: relative !important;
    z-index: auto !important;
    width: auto !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

/* ========================================================================== */
/* Cases unified component system                                             */
/* ========================================================================== */
body.cases-visual-v2 {
  --ui-page-content-top: 96px;
  --ui-toolbar-top: 49px;
  --ui-toolbar-height: 34px;
  --ui-toolbar-width: 220px;
  --ui-control-height: 38px;
  --ui-control-radius: 9px;
  --ui-control-border: rgba(112, 148, 177, .34);
  --ui-control-border-hover: rgba(65, 119, 158, .66);
  --ui-control-bg: rgba(249, 252, 255, .74);
  --ui-control-bg-hover: rgba(252, 254, 255, .92);
  --ui-frame-radius: 9px;
  --ui-frame-border: rgba(112, 148, 177, .34);
  --ui-frame-bg: rgba(240, 244, 250, .82);
  --ui-row-hover: #e9f2f9;
  --ui-icon-size: 18px;
  --ui-icon-button-size: 34px;
  --ui-inline-action-size: 34px;
  --ui-field-action-size: 34px;
}

/* Every page owns the same title/action lane and begins content at one guide. */
html body.cases-visual-v2 .cases-main .cases-page-root:not(:has(.cases-editor-panel)):has(> .ui-page-toolbar) {
  box-sizing: border-box !important;
  padding-top: var(--ui-page-content-top) !important;
}

html body.cases-visual-v2 .cases-main .cases-page-root:has(.home-summary-grid) > .home-summary-grid {
  margin-top: 0 !important;
}

html body.cases-visual-v2 .cases-main .cases-page-root:has(.cases-editor-panel) {
  box-sizing: border-box !important;
  grid-template-rows: var(--ui-toolbar-height) auto !important;
  gap: 13px !important;
  padding-top: var(--ui-toolbar-top) !important;
}

html body.cases-visual-v2 .cases-main .cases-page-root:not(:has(.cases-editor-panel)) > .ui-page-toolbar,
html body.cases-visual-v2 .cases-main .cases-page-root > .report-action-strip,
html body.cases-visual-v2 .cases-main .cases-page-root > .home-notification-action-strip,
html body.cases-visual-v2 .cases-main .cases-page-root > .case-table-action-strip,
html body.cases-visual-v2 .cases-main .cases-page-root > .settings-action-strip {
  position: absolute !important;
  top: var(--ui-toolbar-top) !important;
  right: 2px !important;
  left: 2px !important;
}

html body.cases-visual-v2 .cases-main .cases-page-root:has(.home-summary-grid) > .home-notification-action-strip.ui-page-toolbar,
html body.cases-visual-v2 .cases-main .cases-page-root:has(#reportPanel.report-builder-page) > .report-action-strip.ui-page-toolbar,
html body.cases-visual-v2 .cases-main .cases-page-root:has(.case-list-page) > .case-table-action-strip.ui-page-toolbar,
html body.cases-visual-v2 .cases-main .cases-page-root:has(.settings-layout) > .settings-action-strip.ui-page-toolbar {
  top: var(--ui-toolbar-top) !important;
}

html body.cases-visual-v2 .cases-main .ui-page-toolbar,
html body.cases-visual-v2 .cases-main .editor-action-strip.ui-page-toolbar {
  box-sizing: border-box !important;
  display: flex !important;
  width: auto !important;
  height: var(--ui-toolbar-height) !important;
  min-height: var(--ui-toolbar-height) !important;
  max-height: var(--ui-toolbar-height) !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}





html body.cases-visual-v2 .cases-main .ui-toolbar-actions,
html body.cases-visual-v2 .cases-main .ui-page-toolbar > .page-actions {
  display: flex !important;
  height: var(--ui-toolbar-height) !important;
  min-height: var(--ui-toolbar-height) !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
}

/* Search and report-source select are the same toolbar-control component. */
html body.cases-visual-v2 .cases-main .ui-toolbar-control,
html body.cases-visual-v2 .cases-main .case-table-search,
html body.cases-visual-v2 .cases-main .report-action-strip .report-source-select {
  box-sizing: border-box !important;
  width: var(--ui-toolbar-width) !important;
  min-width: var(--ui-toolbar-width) !important;
  max-width: var(--ui-toolbar-width) !important;
  height: var(--ui-toolbar-height) !important;
  min-height: var(--ui-toolbar-height) !important;
  max-height: var(--ui-toolbar-height) !important;
  margin: 0 !important;
  padding: 0 12px !important;
  color: var(--v2-ink) !important;
  font-size: var(--type-body) !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
  text-align: center !important;
  border: 1px solid var(--ui-control-border) !important;
  border-radius: var(--ui-control-radius) !important;
  background: var(--ui-control-bg) !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main .ui-toolbar-control:hover,
html body.cases-visual-v2 .cases-main .case-table-search:hover,
html body.cases-visual-v2 .cases-main .report-action-strip .report-source-select:hover {
  border-color: var(--ui-control-border-hover) !important;
  background: var(--ui-control-bg-hover) !important;
}

html body.cases-visual-v2 .cases-main .case-table-search:focus-within,
html body.cases-visual-v2 .cases-main .report-action-strip .report-source-select:focus {
  border-color: var(--v2-focus) !important;
  box-shadow: 0 0 0 4px var(--v2-focus-ring) !important;
}

html body.cases-visual-v2 .cases-main .case-table-search > input,
html body.cases-visual-v2 .cases-main .case-table-search > input:hover,
html body.cases-visual-v2 .cases-main .case-table-search > input:focus {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  text-align: center !important;
  border: 0 !important;
  border-radius: inherit !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main .cases-page-root:has(#reportPanel.report-builder-page) .report-action-strip .report-source-select.ui-toolbar-control {
  height: var(--ui-toolbar-height) !important;
  min-height: var(--ui-toolbar-height) !important;
  max-height: var(--ui-toolbar-height) !important;
}

/* All form controls share one measurable geometry and interaction treatment. */
html body.cases-visual-v2 .cases-main .cases-editor-panel :is(input:not(.native-date-picker), select),
html body.cases-visual-v2 .cases-main .settings-content :is(input, select),
html body.cases-visual-v2 .municipality-employee-popover select {
  box-sizing: border-box !important;
  width: 100% !important;
  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  max-height: var(--ui-control-height) !important;
  padding: 0 12px !important;
  color: var(--v2-ink-strong) !important;
  font-size: var(--type-body) !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  border: 1px solid var(--ui-control-border) !important;
  border-radius: var(--ui-control-radius) !important;
  background: var(--ui-control-bg) !important;
  background-color: var(--ui-control-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main .cases-editor-panel textarea,
html body.cases-visual-v2 .cases-main .settings-content textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: var(--ui-control-height) !important;
  padding: 9px 12px !important;
  color: var(--v2-ink-strong) !important;
  font-size: var(--type-body) !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  border: 1px solid var(--ui-control-border) !important;
  border-radius: var(--ui-control-radius) !important;
  background: var(--ui-control-bg) !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main .cases-editor-panel :is(input:not(.native-date-picker), select, textarea):hover,
html body.cases-visual-v2 .cases-main .settings-content :is(input, select, textarea):hover,
html body.cases-visual-v2 .municipality-employee-popover select:hover {
  border-color: var(--ui-control-border-hover) !important;
  background: var(--ui-control-bg-hover) !important;
}

html body.cases-visual-v2 .cases-main .cases-editor-panel :is(input:not(.native-date-picker), select, textarea):focus,
html body.cases-visual-v2 .cases-main .settings-content :is(input, select, textarea):focus,
html body.cases-visual-v2 .municipality-employee-popover select:focus {
  border-color: var(--v2-focus) !important;
  background: var(--ui-control-bg-hover) !important;
  box-shadow: 0 0 0 4px var(--v2-focus-ring) !important;
}

/* Date and readonly-field wrappers never draw a second box around the control. */
html body.cases-visual-v2 .cases-main .cases-editor-panel .date-entry,
html body.cases-visual-v2 .cases-main .cases-editor-panel .date-entry:has(.date-text-input.has-value),
html body.cases-visual-v2 .cases-main .cases-editor-panel .field-mobile-group:has(#mobileGroup.has-value) {
  height: var(--ui-control-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main .cases-editor-panel .field-mobile-group:has(#mobileGroup.has-value)::after {
  content: none !important;
  display: none !important;
}

/* One frame component for forms, lists, reports, settings and every table edge. */
html body.cases-visual-v2 .cases-main .ui-frame,
html body.cases-visual-v2 .cases-main .cases-editor-panel > .cases-card,
html body.cases-visual-v2 .cases-main .settings-content > :is(.cases-card, .cases-about-page),
html body.cases-visual-v2 .cases-main #reportPanel.report-builder-page,
html body.cases-visual-v2 .cases-main .cases-table-wrap {
  box-sizing: border-box !important;
  border: 1px solid var(--ui-frame-border) !important;
  border-radius: var(--ui-frame-radius) !important;
  background: var(--ui-frame-bg) !important;
  background-color: var(--ui-frame-bg) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66) !important;
}

html body.cases-visual-v2 .cases-main .settings-sidebar.ui-frame,
html body.cases-visual-v2 .cases-main .settings-content > .deadline-settings-panel.ui-frame,
html body.cases-visual-v2 .cases-main .settings-content > .reference-block.ui-frame,
html body.cases-visual-v2 .cases-main .settings-content > .cases-about-page.ui-frame{
  border-color: var(--ui-frame-border) !important;
  border-radius: var(--ui-frame-radius) !important;
  background: var(--ui-frame-bg) !important;
  background-color: var(--ui-frame-bg) !important;
}

html body.cases-visual-v2 .cases-main #reportPanel .report-builder-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Selectable report fields retain their control-row surface. */
html body.cases-visual-v2 .cases-main #reportPanel .report-unified-row {
  box-sizing: border-box !important;
  width: 100% !important;
  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  max-height: var(--ui-control-height) !important;
  margin: 0 !important;
  padding: 0 7px 0 12px !important;
  color: var(--v2-ink) !important;
  font-size: var(--type-body) !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  border: 1px solid var(--ui-control-border) !important;
  border-radius: var(--ui-control-radius) !important;
  background: var(--ui-control-bg) !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main #reportPanel .report-unified-row:hover {
  border-color: var(--ui-control-border-hover) !important;
  background: var(--ui-control-bg-hover) !important;
}

html body.cases-visual-v2 .cases-main .settings-content .reference-add-row input {
  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  max-height: var(--ui-control-height) !important;
  border-radius: var(--ui-control-radius) !important;
}

html body.cases-visual-v2 .cases-main #reportPanel .report-field-title-input,
html body.cases-visual-v2 .cases-main #reportPanel .report-field-title-input:hover,
html body.cases-visual-v2 .cases-main #reportPanel .report-field-title-input:focus {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Page and section typography follow one title hierarchy. */
html body.cases-visual-v2 .cases-main :is(
  .form-section > h3,
  .section-action-title > h3,
  .settings-panel-title-row h3,
  .report-builder-section-title h3,
  .ui-section-title
) {
  margin-top: 0 !important;
  color: var(--v2-ink-strong) !important;
  font-size: var(--type-body) !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
  letter-spacing: -.01em !important;
}

html body.cases-visual-v2 .cases-main :is(.cases-editor-panel, .settings-content) label {
  color: var(--v2-muted) !important;
  font-size: var(--type-caption) !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
}

/* Toolbar, inline and field actions use three deliberate size variants. */
html body.cases-visual-v2 .cases-main button.ui-icon-button,
html body.cases-visual-v2 .cases-main button.ui-icon-button:hover,
html body.cases-visual-v2 .cases-main button.ui-icon-button:focus,
html body.cases-visual-v2 .cases-main button.ui-icon-button:active {
  box-sizing: border-box !important;
  display: inline-grid !important;
  place-items: center !important;
  width: var(--ui-icon-button-size) !important;
  min-width: var(--ui-icon-button-size) !important;
  max-width: var(--ui-icon-button-size) !important;
  height: var(--ui-icon-button-size) !important;
  min-height: var(--ui-icon-button-size) !important;
  max-height: var(--ui-icon-button-size) !important;
  flex: 0 0 var(--ui-icon-button-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--v2-muted) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
}

html body.cases-visual-v2 .cases-main button.ui-icon-button:hover,
html body.cases-visual-v2 .cases-main button.ui-icon-button:focus-visible {
  color: var(--v2-blue) !important;
  border-color: rgba(40, 127, 195, .18) !important;
  background: var(--v2-blue-soft) !important;
}

html body.cases-visual-v2 .cases-main button.ui-inline-action,
html body.cases-visual-v2 .cases-main button.ui-inline-action:hover,
html body.cases-visual-v2 .cases-main button.ui-inline-action:focus,
html body.cases-visual-v2 .cases-main button.ui-inline-action:active {
  box-sizing: border-box !important;
  display: inline-grid !important;
  place-items: center !important;
  width: var(--ui-inline-action-size) !important;
  min-width: var(--ui-inline-action-size) !important;
  max-width: var(--ui-inline-action-size) !important;
  height: var(--ui-inline-action-size) !important;
  min-height: var(--ui-inline-action-size) !important;
  max-height: var(--ui-inline-action-size) !important;
  flex: 0 0 var(--ui-inline-action-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--v2-muted) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  transform: none !important;
}

html body.cases-visual-v2 .cases-main button.ui-inline-action:hover,
html body.cases-visual-v2 .cases-main button.ui-inline-action:focus-visible {
  color: var(--v2-blue) !important;
  background: var(--v2-blue-soft) !important;
}

html body.cases-visual-v2 .cases-main button.ui-field-action,
html body.cases-visual-v2 .cases-main button.ui-field-action:hover,
html body.cases-visual-v2 .cases-main button.ui-field-action:focus,
html body.cases-visual-v2 .cases-main button.ui-field-action:active {
  box-sizing: border-box !important;
  width: var(--ui-field-action-size) !important;
  min-width: var(--ui-field-action-size) !important;
  max-width: var(--ui-field-action-size) !important;
  height: var(--ui-field-action-size) !important;
  min-height: var(--ui-field-action-size) !important;
  max-height: var(--ui-field-action-size) !important;
  padding: 0 !important;
  color: var(--v2-muted) !important;
  border: 0 !important;
  background: transparent !important;
}

html body.cases-visual-v2 .cases-main :is(.ui-icon-button, .ui-inline-action, .ui-field-action) svg {
  width: var(--ui-icon-size) !important;
  min-width: var(--ui-icon-size) !important;
  max-width: var(--ui-icon-size) !important;
  height: var(--ui-icon-size) !important;
  min-height: var(--ui-icon-size) !important;
  max-height: var(--ui-icon-size) !important;
  stroke: currentColor !important;
}

html body.cases-visual-v2 .cases-main :is(.delete-action, .danger-action, .delete-reference, .delete-backup),
html body.cases-visual-v2 .cases-main :is(.delete-action, .danger-action, .delete-reference, .delete-backup):hover,
html body.cases-visual-v2 .cases-main :is(.delete-action, .danger-action, .delete-reference, .delete-backup):focus-visible {
  color: var(--v2-red) !important;
}

html body.cases-visual-v2 .cases-main :is(.add-action, .save-action),
html body.cases-visual-v2 .cases-main :is(.add-action, .save-action):hover,
html body.cases-visual-v2 .cases-main :is(.add-action, .save-action):focus-visible {
  color: var(--v2-muted) !important;
}

html body.cases-visual-v2 .cases-main .deadline-notification-button.has-notifications {
  color: var(--v2-amber) !important;
}

html body.cases-visual-v2 .cases-main .deadline-notification-button.has-overdue {
  color: var(--v2-red) !important;
}

/* Table frames, rules, headers and hover surfaces use the same data grammar. */
html body.cases-visual-v2 .cases-main .ui-table-frame {
  box-sizing: border-box !important;
  border: 1px solid var(--ui-frame-border) !important;
  border-radius: var(--ui-frame-radius) !important;
  background: #f4f8fc !important;
  overflow: hidden !important;
}

html body.cases-visual-v2 .cases-main .ui-table-frame :is(table, thead, tbody, tr, th, td) {
  border-color: var(--ui-frame-border) !important;
}

html body.cases-visual-v2 .cases-main .ui-table-frame th {
  color: var(--v2-muted) !important;
  font-size: var(--type-caption) !important;
  font-weight: 400 !important;
  background: #eef4f9 !important;
}

html body.cases-visual-v2 .cases-main .ui-table-frame td {
  color: var(--v2-ink) !important;
  font-size: var(--type-caption) !important;
  font-weight: 400 !important;
  background: #f4f8fc !important;
}

html body.cases-visual-v2 .cases-main .ui-table-frame tbody tr:hover > td {
  background: var(--ui-row-hover) !important;
}





/* Home keeps its intentionally transparent cards, but shares text and rule tokens. */
html body.cases-visual-v2 .cases-main :is(.home-summary-card, .home-mobile-panel, .home-chart-card) {
  box-shadow: none !important;
}


/* Every transient surface belongs to the same popup family. */
html body.cases-visual-v2 :is(
  .styled-autofill-popup,
  .styled-select-popup,
  .styled-calendar-popup,
  .styled-hover-tooltip,
  .home-chart-detail-popup,
  .deadline-notification-popup,
  .municipality-employee-popover,
  .status-color-popover,
  .case-filter-popover,
  .app-confirm-dialog,
  .toast-item
) {
  box-sizing: border-box !important;
  color: var(--v2-ink) !important;
  border: 1px solid var(--ui-control-border) !important;
  border-radius: var(--ui-frame-radius) !important;
  background: rgba(247, 250, 254, .94) !important;
  box-shadow: var(--v2-shadow-float) !important;
  backdrop-filter: blur(22px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.08) !important;
}

html body.cases-visual-v2 :is(
  .styled-autofill-option,
  .styled-select-option,
  .deadline-notification-row
) {
  box-sizing: border-box !important;
  min-height: 36px !important;
  padding: 8px 12px !important;
  color: var(--v2-ink) !important;
  font-size: var(--type-body) !important;
  font-weight: 400 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
}

html body.cases-visual-v2 :is(
  .styled-autofill-option,
  .styled-select-option,
  .styled-calendar-day,
  .deadline-notification-row
):hover,
html body.cases-visual-v2 :is(
  .styled-autofill-option,
  .styled-select-option,
  .styled-calendar-day,
  .deadline-notification-row
):focus-visible {
  color: var(--v2-ink-strong) !important;
  background: var(--ui-row-hover) !important;
}

/* Deadline list: one line per case: the number, the deadline date, and the state at the right in its colour. Every row the same height, no old side rail. */
html body.cases-visual-v2 .deadline-notification-list .deadline-notification-row.deadline-notification-row {
  display: grid !important;
  grid-template-columns: minmax(52px, auto) 1fr auto !important;
  align-items: center !important;
  column-gap: 10px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  box-shadow: none !important;
  font-size: var(--type-body) !important;
  line-height: 18px !important;
  white-space: nowrap !important;
}
html body.cases-visual-v2 .deadline-notification-list .deadline-notification-row > span:first-child { color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; }
html body.cases-visual-v2 .deadline-notification-list .deadline-notification-row > span:is(:nth-child(2), :last-child) { font-size: var(--type-caption) !important; }
html body.cases-visual-v2 .deadline-notification-list .deadline-notification-row > span:nth-child(2) { color: var(--v2-muted) !important; }
html body.cases-visual-v2 .deadline-notification-list .deadline-notification-row > span:last-child { text-align: right !important; }
html body.cases-visual-v2 .deadline-notification-list .deadline-notification-row.is-overdue > span:last-child { color: var(--cases-danger) !important; }
html body.cases-visual-v2 .deadline-notification-list .deadline-notification-row.is-upcoming > span:last-child { color: var(--cases-tint-time) !important; }html body.cases-visual-v2 .styled-hover-tooltip {
  max-width: min(360px, calc(100vw - 24px)) !important;
  padding: 7px 10px !important;
  font-size: var(--type-caption) !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

html body.cases-visual-v2 .app-confirm-actions > button,
html body.cases-visual-v2 .deadline-notification-popup-close {
  width: var(--ui-icon-button-size) !important;
  min-width: var(--ui-icon-button-size) !important;
  max-width: var(--ui-icon-button-size) !important;
  height: var(--ui-icon-button-size) !important;
  min-height: var(--ui-icon-button-size) !important;
  max-height: var(--ui-icon-button-size) !important;
  border-radius: var(--ui-control-radius) !important;
}

@media (max-width: 1160px) {
  html body.cases-visual-v2 .cases-main .ui-toolbar-control,
  html body.cases-visual-v2 .cases-main .case-table-search,
  html body.cases-visual-v2 .cases-main .report-action-strip .report-source-select {
    width: min(var(--ui-toolbar-width), 30vw) !important;
    min-width: min(var(--ui-toolbar-width), 30vw) !important;
    max-width: min(var(--ui-toolbar-width), 30vw) !important;
  }
}

/* Specificity lock for the shared system; intentional semantic colors remain. */
html body.cases-visual-v2 .cases-main #pageRoot > .ui-page-toolbar {
  height: var(--ui-toolbar-height) !important;
  min-height: var(--ui-toolbar-height) !important;
  max-height: var(--ui-toolbar-height) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot:has(#reportPanel.report-builder-page) > .report-action-strip.ui-page-toolbar {
  height: var(--ui-toolbar-height) !important;
  min-height: var(--ui-toolbar-height) !important;
  max-height: var(--ui-toolbar-height) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .ui-section-title,
html body.cases-visual-v2 .cases-main #pageRoot .settings-content h3{
  color: var(--v2-ink-strong) !important;
  font-weight: 400 !important;
}


html body.cases-visual-v2 .cases-main #pageRoot .ui-table-frame {
  border: 1px solid var(--ui-frame-border) !important;
  border-radius: var(--ui-frame-radius) !important;
  background: var(--ui-frame-bg) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .report-action-strip #exportReportExcel.report-excel-action.ui-icon-button,
html body.cases-visual-v2 .cases-main #pageRoot .settings-content button.ui-icon-button {
  width: var(--ui-icon-button-size) !important;
  min-width: var(--ui-icon-button-size) !important;
  max-width: var(--ui-icon-button-size) !important;
  height: var(--ui-icon-button-size) !important;
  min-height: var(--ui-icon-button-size) !important;
  max-height: var(--ui-icon-button-size) !important;
  flex: 0 0 var(--ui-icon-button-size) !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  background: transparent !important;
}

html body.cases-visual-v2 .cases-main #pageRoot button.ui-inline-action {
  border: 1px solid transparent !important;
  background: transparent !important;
}

html body.cases-visual-v2 .cases-main #pageRoot button:is(.delete-action, .danger-action, .delete-reference, .delete-backup),
html body.cases-visual-v2 .cases-main #pageRoot button:is(.delete-action, .danger-action, .delete-reference, .delete-backup):hover,
html body.cases-visual-v2 .cases-main #pageRoot button:is(.delete-action, .danger-action, .delete-reference, .delete-backup):focus-visible {
  color: var(--v2-red) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot button:is(.add-action, .save-action),
html body.cases-visual-v2 .cases-main #pageRoot button:is(.add-action, .save-action):hover,
html body.cases-visual-v2 .cases-main #pageRoot button:is(.add-action, .save-action):focus-visible {
  color: var(--v2-muted) !important;
}

/* ========================================================================== */
/* Component consistency corrections                                          */
/* ========================================================================== */

/* Page names are intentionally absent; the action lane stays aligned. */

/* About owns one outer frame. Its internal content is not framed again. */


/* The Settings add action belongs to the input, like actions in saved rows. */
html body.cases-visual-v2 .cases-main #pageRoot .settings-content .reference-add-row {
  position: relative !important;
  display: block !important;
  grid-template-columns: none !important;
  /* 630px of Georgian text plus input padding, add action and breathing room. */
  width: min(100%, 720px) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-content .reference-add-row > label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-content .kancelaria-credentials-panel .settings-item.ui-control-row {
  width: min(100%, 720px) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-content .kancelaria-credentials-panel .kancelaria-add-row {
  box-sizing: border-box !important;
  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  max-height: var(--ui-control-height) !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin-bottom: 16px !important;
  font-weight: 600 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-content .settings-new-value-control {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: var(--ui-control-height) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content .reference-block .settings-new-value-control > input,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content .reference-block .settings-new-value-control > input:is(:hover, :focus, :focus-visible, :focus-within) {
  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  max-height: var(--ui-control-height) !important;
  padding-right: 50px !important;
  border: 1px solid var(--ui-control-border) !important;
  border-radius: var(--ui-control-radius) !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 140ms ease !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content .reference-block .settings-new-value-control > input:is(:focus, :focus-visible, :focus-within) {
  border-color: var(--v2-blue) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-content .settings-new-value-control > .add-reference {
  position: absolute !important;
  z-index: 2 !important;
  top: 50% !important;
  right: 4px !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-content .settings-item-actions {
  align-self: stretch !important;
  display: inline-flex !important;
  height: 100% !important;
  align-items: center !important;
}

/* All visible data controls and control rows share the same 38px geometry. */
html body.cases-visual-v2 .cases-main #pageRoot .cases-editor-panel :is(
  input:not(.native-date-picker),
  select,
  textarea
),
html body.cases-visual-v2 .cases-main #pageRoot #reportPanel .report-unified-row,
html body.cases-visual-v2 .cases-main #pageRoot .settings-content :is(
  .settings-new-value-control,
  .settings-new-value-control > input,
  .settings-item,
  .deadline-settings-fields input
) {
  box-sizing: border-box !important;
  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  max-height: var(--ui-control-height) !important;
}

/* Repeat-block headings are clean; row actions align to the field center. */


html body.cases-visual-v2 .cases-main #pageRoot .cases-editor-panel :is(
  .cases-object-row,
  .cases-retrieval-row,
  .cases-registration-row
) > button.ui-inline-action {
  align-self: end !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: calc((var(--ui-control-height) - var(--ui-inline-action-size)) / 2) !important;
  margin-left: 0 !important;
}

/* Middle matrix shows complete wrapped names and scrolls by whole rows. */

html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table-wrap {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scroll-snap-type: y proximity !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(71, 111, 143, .34) transparent !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table {
  table-layout: fixed !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table tbody tr {
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  scroll-snap-align: start !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table tbody td,
html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table tbody td:first-child,
html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table .home-table-count {
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table .home-group-name {
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 2px 5px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  text-overflow: clip !important;
  line-height: 1.18 !important;
  text-align: left !important;
}

/* Chart labels receive a complete lower lane instead of being clipped. */
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-column {
  grid-template-rows: 18px minmax(0, 1fr) 58px !important;
}


html body.cases-visual-v2 .cases-main #pageRoot .home-chart-label {
  box-sizing: border-box !important;
  width: 100% !important;
  max-height: 54px !important;
  padding: 2px 2px 4px !important;
  overflow: hidden !important;
  line-height: 1.18 !important;
  -webkit-line-clamp: 4 !important;
}

/* Table paint is clipped by the actual frame, including all four corners. */
html body.cases-visual-v2 .cases-main #pageRoot .ui-table-frame {
  overflow: hidden !important;
  contain: paint !important;
  border: 1px solid var(--ui-frame-border) !important;
  border-radius: var(--ui-frame-radius) !important;
  background: linear-gradient(to bottom, #eef4f9 0 50px, #f4f8fc 50px 100%) !important;
  background-color: #f4f8fc !important;
  background-clip: padding-box !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .ui-table-frame > table {
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: var(--ui-frame-radius) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Sticky and ordinary header cells must paint the same surface at both top corners. */
html body.cases-visual-v2 .cases-main #pageRoot .ui-table-frame table thead th,
html body.cases-visual-v2 .cases-main #pageRoot .cases-table-wrap.ui-table-frame table.cases-table thead th {
  background: #eef4f9 !important;
  background-color: #eef4f9 !important;
  background-image: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .ui-table-frame thead tr:first-child > th:first-child {
  border-top-left-radius: var(--ui-frame-radius) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .ui-table-frame thead tr:first-child > th:last-child {
  border-top-right-radius: var(--ui-frame-radius) !important;
}



/* -------------------------------------------------------------------------- */
/* Final component alignment                                                   */
/* -------------------------------------------------------------------------- */

/* Main and Settings navigation use Pactum's single, static sidebar component. */
html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-item,
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  color: var(--v2-muted) !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative !important;
  animation: none !important;
  transition: none !important;
}



html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-item :is(.nav-icon),
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item :is(.settings-nav-icon) {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-item .nav-icon svg,
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item .settings-nav-icon svg {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  color: inherit !important;
  stroke: currentColor !important;
  background: transparent !important;
}

html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-item > .nav-title,
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item > span:last-child {
  min-width: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: var(--type-body) !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
  text-align: left !important;
}

/* Children fill their own lane; the add lane is capped independently of the list. */
html body.cases-visual-v2 .cases-main #pageRoot .settings-content :is(
  .reference-add-row > label,
  .settings-new-value-control,
  .settings-new-value-control > input,
  .settings-list,
  .settings-list-expanded,
  .settings-item
) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-content :is(.reference-add-row, .settings-list, .settings-list-expanded) {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-content .settings-item {
  position: relative !important;
  padding-right: 42px !important;
}

/* Room for the actions on the right: a municipality's group name (up to
   260px) with Delete; a group's municipalities, colour and Delete. */
html body.cases-visual-v2 .cases-main #pageRoot .settings-content .settings-item:has(.municipality-group-name) {
  padding-right: 320px !important;
}
html body.cases-visual-v2 .cases-main #pageRoot .settings-content .settings-item:has(.group-municipalities-trigger) {
  padding-right: 120px !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-content .settings-item-actions {
  position: absolute !important;
  z-index: 2 !important;
  top: 50% !important;
  right: 9px !important;
  bottom: auto !important;
  left: auto !important;
  display: inline-flex !important;
  width: auto !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-content .settings-item-actions > button,
html body.cases-visual-v2 .cases-main #pageRoot .settings-content .settings-new-value-control > .add-reference {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Report field labels use the same text scale as other saved/input values. */
html body.cases-visual-v2 .cases-main #pageRoot #reportPanel :is(
  .report-field-title-input,
  .report-field-static-title
),
html body.cases-visual-v2 .cases-main #pageRoot #reportPanel .report-field-title-input:is(:hover, :focus) {
  color: var(--v2-ink) !important;
  font-size: var(--type-body) !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

/* Chart mode and period titles share typography/color and keep Georgian descenders visible. */
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-controls {
  align-items: center !important;
  padding-bottom: 10px !important;
  overflow: visible !important;
}

/* FINAL VISIBLE CORRECTIONS — authoritative overrides. */

/* The Settings navigation grew from 7px to 12px rhythm. Its legacy fixed
   495px viewport clipped the last destination, so the list now sizes to its
   eight complete rows and remains fully visible. */

/* Hover/selection is communicated only by the left rail. No raised edge or
   horizontal highlight is allowed around a navigation row. */
html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-item:not(.sidebar-cloud-status):is(:hover,:focus-visible,.active),
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item:is(:hover,:focus-visible,.active) {
  border: 0 !important;
  outline: 0 !important;
  background: rgba(218, 230, 239, .28) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Backup history is one continuous raised surface. The header no longer
   paints a separate glass strip and every outer corner belongs to the shell. */






/* CANONICAL SIDEBAR TILE GEOMETRY
   Main, utility and Settings navigation use one measured 250 x 54 surface. */
html body.cases-visual-v2 .cases-sidebar .cases-sidebar-nav > :is(
  .nav-main-group,
  .nav-bottom-group
) {
  box-sizing: border-box !important;
  width: var(--cases-nav-w, 250px) !important;
  margin-inline: auto !important;
}

html body.cases-visual-v2 :is(
  .cases-sidebar .nav-main-group > .nav-item:not(.sidebar-cloud-status),
  .cases-sidebar .nav-bottom-group > .nav-item:not(.sidebar-cloud-status),
  .cases-main #pageRoot .settings-sidebar > .settings-nav-item
) {
  box-sizing: border-box !important;
  width: var(--cases-nav-w, 252px) !important;
  min-width: var(--cases-nav-w, 252px) !important;
  max-width: var(--cases-nav-w, 252px) !important;
  height: var(--ui-sidebar-row-height) !important;
  min-height: var(--ui-sidebar-row-height) !important;
  max-height: var(--ui-sidebar-row-height) !important;
  padding: 8px 24px !important;
}

/* The iCloud status chip is excluded from the rule above (it isn't a nav
   button) but shares the same .nav-item icon/label layout, so its own
   horizontal padding must be kept in step by hand. */


/* FINAL CLEAN DEPTH — visible single contours, no duplicate frame illusion. */
html body.cases-visual-v2 {
  --ui-frame-border: rgba(111, 148, 177, .28) !important;
  --atmos-canvas-image:
    linear-gradient(171deg, transparent 0 6.72%, rgba(255,255,255,.17) 6.78%, rgba(255,255,255,.045) 7.02%, transparent 7.08%),
    linear-gradient(171deg, transparent 0 7.16%, rgba(37,67,89,.012) 7.22%, rgba(37,67,89,.004) 8.35%, transparent 10.4%),
    linear-gradient(158deg, transparent 0 30.74%, rgba(255,255,255,.15) 30.80%, rgba(255,255,255,.04) 31.02%, transparent 31.08%),
    linear-gradient(158deg, transparent 0 31.16%, rgba(49,61,91,.012) 31.22%, rgba(49,61,91,.004) 33.1%, transparent 36.2%),
    linear-gradient(163deg, transparent 0 19.76%, rgba(255,255,255,.07) 19.84%, transparent 20.16%),
    linear-gradient(154deg, transparent 0 51.72%, rgba(255,255,255,.055) 51.82%, transparent 52.18%),
    linear-gradient(163deg, transparent 0 20%, rgba(91,148,183,.028) 20.08%, rgba(91,148,183,.009) 38%, transparent 38.12%),
    linear-gradient(154deg, transparent 0 52%, rgba(120,119,153,.020) 52.08%, rgba(120,119,153,.006) 69%, transparent 69.12%),
    linear-gradient(171deg, transparent 0 7%, rgba(68,112,158,.034) 7.06%, rgba(68,112,158,.034) 7.13%, transparent 7.2%),
    linear-gradient(158deg, transparent 0 31%, rgba(120,119,153,.030) 31.06%, rgba(120,119,153,.030) 31.13%, transparent 31.2%),
    linear-gradient(135deg, #eef4f6 0%, #ebf1f4 48%, #e8eff3 100%) !important;
  background: var(--atmos-canvas-image) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot :is(
  .home-overview-frame,
  .home-single-chart-panel.ui-frame,
  .cases-editor-panel > .cases-card,
  #reportPanel.report-builder-page.ui-frame,
  .case-list-page > .cases-table-shell.ui-table-frame,
  .backup-list-panel .backup-table-shell.ui-table-frame,
  .settings-content > .reference-block.ui-frame,
  .settings-content > .deadline-settings-panel.ui-frame,
  .settings-content > .backup-list-panel.ui-frame,
  .settings-content > .cases-about-page.ui-frame,
  .settings-content > .settings-empty-panel.ui-frame
) {
  border: 1px solid var(--ui-frame-border) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.09)) !important;
  box-shadow: 0 5px 10px -9px rgba(51,72,91,.28) !important;
}

/* Main and Settings navigation: identical raised tile, active state adds only
   the left rail. No top/bottom/right perimeter line in any state. */
html body.cases-visual-v2 :is(
  .cases-sidebar .sidebar-nav .nav-item:not(.sidebar-cloud-status),
  .cases-main #pageRoot .settings-sidebar .settings-nav-item
) {
  border: 0 !important;
  border-color: transparent !important;
  outline: 0 !important;
  background: rgba(255,255,255,.10) !important;
  box-shadow: 0 5px 9px -8px rgba(45,67,85,.28) !important;
}

html body.cases-visual-v2 :is(
  .cases-sidebar .sidebar-nav .nav-item:not(.sidebar-cloud-status),
  .cases-main #pageRoot .settings-sidebar .settings-nav-item
):is(:hover,:focus,:focus-visible,:active,.active) {
  border: 0 !important;
  border-color: transparent !important;
  outline: 0 !important;
  background: rgba(255,255,255,.10) !important;
  box-shadow: 0 5px 9px -8px rgba(45,67,85,.28) !important;
  transform: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel .home-chart-mode-button,
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-period-button {
  color: var(--home-text-color) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-mode-label,
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-period-button {
  box-sizing: border-box !important;
  color: inherit !important;
  font-size: var(--type-caption) !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}


/* Editor fields keep their existing geometry and semantic fills, without elevation. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot form#caseForm.cases-editor-panel :is(
  input:not(.native-date-picker):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
),
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot form#caseForm.cases-editor-panel :is(
  input:not(.native-date-picker):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
):is(:hover, :focus, :focus-visible, :focus-within) {
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 140ms ease, background-color 140ms ease !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot form#caseForm.cases-editor-panel :is(
  input:not(.native-date-picker):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea
):not(.has-value) {
  border-color: var(--case-field-border, var(--ui-control-border)) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot form#caseForm.cases-editor-panel :is(
  input:not(.native-date-picker), select, textarea
):is(:focus, :focus-visible, :focus-within):not(:disabled) {
  --case-field-border: var(--v2-blue);
  border-color: var(--case-field-border) !important;
}

/* Filled case controls retain the green data-present state during focus. */
html body.cases-visual-v2 .cases-main #pageRoot form#caseForm.cases-editor-panel :is(
  input.has-value:not(.native-date-picker):not(#statusId),
  select.has-value:not(#statusId),
  textarea.has-value
),
html body.cases-visual-v2 .cases-main #pageRoot form#caseForm.cases-editor-panel :is(
  input.has-value:not(.native-date-picker):not(#statusId),
  select.has-value:not(#statusId),
  textarea.has-value
):is(:hover, :focus) {
  color: var(--v2-ink-strong) !important;
  border-color: var(--case-field-border, rgba(34, 197, 94, .60)) !important;
  background: rgba(220, 252, 231, .64) !important;
  background-color: rgba(220, 252, 231, .64) !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-text-fill-color: var(--v2-ink-strong) !important;
}


html body.cases-visual-v2 .cases-main #pageRoot form#caseForm.cases-editor-panel .date-entry .date-text-input.has-value,
html body.cases-visual-v2 .cases-main #pageRoot form#caseForm.cases-editor-panel .field-mobile-group #mobileGroup.has-value[readonly] {
  color: var(--v2-ink-strong) !important;
  border: 1px solid var(--case-field-border, rgba(34, 197, 94, .60)) !important;
  border-radius: var(--ui-control-radius) !important;
  background: rgba(220, 252, 231, .64) !important;
  background-color: rgba(220, 252, 231, .64) !important;
  box-shadow: none !important;
}

/* The label wrapper includes both its caption and the 38px control. Only the
   control may have the fixed control height; constraining the wrapper pushes
   a populated mobile-group field below the rest of the information row. */

/* Status remains transparent, but its semantic text is clearer in both tables. */
html body.cases-visual-v2 .cases-main #pageRoot :is(.cases-table, .report-preview-table) .status-pill {
  opacity: 1 !important;
  font-weight: 600 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}








/* The table frame is an independent overlay; scrolling belongs only to its inner viewport. */
html body.cases-visual-v2 .cases-main #pageRoot .case-list-page > .cases-table-shell.ui-table-frame {
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 1px !important;
  overflow: visible !important;
  contain: none !important;
  border: 0 !important;
  border-radius: var(--ui-frame-radius) !important;
  background: #f4f8fc !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .case-list-page > .cases-table-shell.ui-table-frame::after {
  content: "" !important;
  position: absolute !important;
  z-index: 50 !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  border: 1px solid var(--ui-frame-border) !important;
  border-radius: var(--ui-frame-radius) !important;
  background: transparent !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62) !important;
}

/* Keep the final visible row rule one pixel clear of the outer frame. This
   preserves the exact full-row viewport while preventing a doubled bottom
   edge when a virtual row ends on the frame boundary. */
html body.cases-visual-v2 .cases-main #pageRoot .case-list-page > .cases-table-shell.ui-table-frame::before {
  content: "" !important;
  position: absolute !important;
  z-index: 49 !important;
  right: 1px !important;
  bottom: 1px !important;
  left: 1px !important;
  display: block !important;
  height: 1px !important;
  background: #f4f8fc !important;
  pointer-events: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .case-list-page .cases-table-shell > .cases-table-wrap {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  contain: none !important;
  border: 0 !important;
  border-radius: var(--ui-frame-radius) !important;
  background: #f4f8fc !important;
  box-shadow: none !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(71, 111, 143, .34) transparent !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .case-list-page .cases-table-shell > .cases-table-wrap::-webkit-scrollbar {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .case-list-page .cases-table-shell > .cases-table-wrap::-webkit-scrollbar-track {
  background: transparent !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .case-list-page .cases-table-shell > .cases-table-wrap::-webkit-scrollbar-thumb {
  border-radius: 99px !important;
  background: rgba(71, 111, 143, .34) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .cases-table-shell .cases-table {
  border: 0 !important;
  border-radius: var(--ui-frame-radius) !important;
  background: transparent !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .cases-table-shell .cases-table tbody tr:last-child > td {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Transparent neutral surfaces and compact report                            */
/* -------------------------------------------------------------------------- */

body.cases-visual-v2 {
  --v2-control-bg: transparent;
  --v2-control-bg-hover: transparent;
  --ui-control-bg: transparent;
  --ui-control-bg-hover: transparent;
}

/* Settings owns borders and structure, but no white panel fill. */
html body.cases-visual-v2 .cases-main #pageRoot .settings-layout > .settings-sidebar.ui-frame,
html body.cases-visual-v2 .cases-main #pageRoot .settings-content > :is(
  .reference-block.ui-frame,
  .deadline-settings-panel.ui-frame,
  .backup-list-panel.ui-frame,
  .cases-about-page.ui-frame,
  .settings-empty-panel.ui-frame,
) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* -------------------------------------------------------------------------- */
/* Raised navigation and icon-led summary cards are finalized at EOF. */


/* Every neutral field is transparent; semantic/filled fields keep their color below. */
html body.cases-visual-v2 .cases-main #pageRoot .cases-editor-panel :is(
  input:not(.native-date-picker):not(.has-value),
  select:not(.has-value),
  textarea:not(.has-value)
),
html body.cases-visual-v2 .cases-main #pageRoot .settings-content :is(input, select, textarea),
html body.cases-visual-v2 .cases-main #pageRoot :is(
  .report-source-select,
  .case-table-search,
  .case-table-search > input,
  .report-field-title-input,
  .report-unified-row
),
html body.cases-visual-v2 .municipality-employee-popover select {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .cases-editor-panel :is(
  input:not(.native-date-picker):not(.has-value),
  select:not(.has-value),
  textarea:not(.has-value)
):is(:hover, :focus),
html body.cases-visual-v2 .cases-main #pageRoot .settings-content :is(input, select, textarea):is(:hover, :focus),
html body.cases-visual-v2 .cases-main #pageRoot :is(
  .report-source-select,
  .case-table-search,
  .case-table-search > input,
  .report-unified-row
):is(:hover, :focus, :focus-within) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Report occupies only the height its fields need and has no white surface. */
html body.cases-visual-v2 .cases-main #pageRoot:has(#reportPanel.report-builder-page) {
  align-content: start !important;
  overflow-y: auto !important;
}

html body.cases-visual-v2 .cases-main #pageRoot > #reportPanel#reportPanel.report-builder-page.ui-frame {
  box-sizing: border-box !important;
  align-self: start !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  contain: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot #reportPanel .report-field-card.report-unified-field-card,
html body.cases-visual-v2 .cases-main #pageRoot #reportPanel .report-unified-field-catalog,
html body.cases-visual-v2 .cases-main #pageRoot #reportPanel .report-unified-list{
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}


/* Report rows are symmetrical, with their labels centered in both states. */
html body.cases-visual-v2 .cases-main #pageRoot #reportPanel .report-unified-row,
html body.cases-visual-v2 .cases-main #pageRoot #reportPanel .report-unified-row:is(.is-active, .is-inactive) {
  grid-template-columns: 28px minmax(0, 1fr) 28px !important;
  align-items: center !important;
  padding-right: 8px !important;
  padding-left: 8px !important;
  background: transparent !important;
  background-color: transparent !important;
}

html body.cases-visual-v2 .cases-main #pageRoot #reportPanel :is(
  .report-field-title-input,
  .report-field-static-title
) {
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  text-align: center !important;
  line-height: 1.35 !important;
  background: transparent !important;
  background-color: transparent !important;
}

html body.cases-visual-v2 .cases-main #pageRoot #reportPanel .report-drag-handle,
html body.cases-visual-v2 .cases-main #pageRoot #reportPanel .report-drag-handle:is(:hover, :focus-visible) {
  background: transparent !important;
  background-color: transparent !important;
}

/* Excel action uses the compact toolbar-icon size. */
html body.cases-visual-v2 .cases-main #pageRoot .report-action-strip #exportReportExcel.report-excel-action.ui-icon-button,
html body.cases-visual-v2 .cases-main #pageRoot .report-action-strip #exportReportExcel.report-excel-action.ui-icon-button:is(:hover, :focus, :active) {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  flex-basis: 24px !important;
  padding: 0 !important;
}


/* Backup table sizing; the surrounding settings panel owns the visible frame. */








/* -------------------------------------------------------------------------- */
/* Settings content rhythm, archive status, and grouped main navigation       */
/* -------------------------------------------------------------------------- */

/* The main navigation uses two transparent frames: primary routes and utilities. */
html body.cases-visual-v2 .cases-sidebar .cases-sidebar-nav > :is(.nav-main-group, .nav-bottom-group) {
  position: relative !important;
  box-sizing: border-box !important;
  width: calc(var(--cases-nav-w, 252px) - 2px) !important;
  min-width: calc(var(--cases-nav-w, 252px) - 2px) !important;
  max-width: calc(var(--cases-nav-w, 252px) - 2px) !important;
  padding: 6px !important;
  gap: 7px !important;
  border: 1px solid var(--ui-frame-border) !important;
  border-radius: var(--ui-frame-radius) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-sidebar .cases-sidebar-nav > .nav-main-group {
  margin: 0 auto !important;
}

html body.cases-visual-v2 .cases-sidebar .cases-sidebar-nav {
  gap: 0 !important;
}

html body.cases-visual-v2 .cases-sidebar .cases-sidebar-nav > .nav-bottom-group {
  margin: auto auto var(--sidebar-bottom-align-offset, 55px) !important;
  border-top: 1px solid var(--ui-frame-border) !important;
}


/* Deadline settings use the same label/control rows as Appearance. */
html body.cases-visual-v2 .cases-main #pageRoot .settings-content > .deadline-settings-panel.ui-frame {
  box-sizing: border-box !important;
  display: block !important;
  align-self: start !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 20px !important;
  overflow: visible !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-content .deadline-settings-fields.settings-vertical-fields {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  width: 100% !important;
  max-width: none !important;
  gap: 18px !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-content .deadline-settings-fields > .deadline-setting-row {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  padding: 0 12px !important;
  gap: 24px !important;
  margin: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content .deadline-settings-fields > .deadline-setting-row > input,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content .deadline-settings-fields > .deadline-setting-row > input:is(:hover, :focus, :focus-visible, :active) {
  flex: 0 0 80px !important;
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  text-align: right !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}



/* Equal 20px space above/below the toolbar; rows own the lower breathing room. */






/* Backup actions are quiet icon targets, not raised tiles inside the table. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .cases-about-page button.settings-action-btn,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .cases-about-page button.settings-action-btn:is(:hover, :focus, :focus-visible, :active){
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  border-radius: var(--ui-control-radius) !important;
  transition: background-color 140ms ease !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .cases-about-page button.settings-action-btn:is(:hover, :focus-visible){
  background: var(--ui-row-hover) !important;
}







/* About contains the two requested facts, copyright and the Marsus maker mark. */
html body.cases-visual-v2 .cases-main #pageRoot .settings-content > .cases-about-page.ui-frame {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-self: start !important;
  width: 100% !important;
  height: auto !important;
  min-height: max-content !important;
  padding: 20px !important;
  margin-bottom: 4px !important;
  gap: 10px !important;
  overflow: visible !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page .about-info-grid,
html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page .about-info-card,
html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page .about-tech-card {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page .about-tech-card dl {
  display: grid !important;
  width: 100% !important;
  margin: 0 !important;
  gap: 10px !important;
}

/* Facts and footer share the same two column guides and inner inset. */
html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page .about-tech-card dl > div,
html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page > .about-footer {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(110px, .85fr) minmax(0, 1fr) !important;
  align-items: center !important;
  width: 100% !important;
  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  max-height: var(--ui-control-height) !important;
  padding: 0 12px !important;
  border: 1px solid var(--ui-control-border) !important;
  border-radius: var(--ui-control-radius) !important;
  background: transparent !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page .about-tech-card :is(dt, dd),
html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page > .about-footer,
html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page > .about-footer > span {
  color: var(--about-text-color, var(--v2-muted)) !important;
  -webkit-text-fill-color: var(--about-text-color, var(--v2-muted)) !important;
  font-size: var(--type-body) !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page .about-tech-card :is(dt, dd) {
  margin: 0 !important;
  min-width: 0 !important;
  position: static !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page .about-tech-card dd {
  text-align: right !important;
}


html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page .about-maker-logo {
  display: block;
  justify-self: end;
  flex: 0 0 auto;
  width: auto;
  /* The lockup is cut to its artwork: black on a light page, white on a dark one. */
  height: 36px;
  object-fit: contain;
}
html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page .about-maker-logo.maker-on-dark { display: none; }
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot .cases-about-page .about-maker-logo.maker-on-light { display: none; }
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot .cases-about-page .about-maker-logo.maker-on-dark { display: block; }

/* The legacy global regular-weight guard carries five ID selectors. Status
   chips use the light (300) cut of the variable Georgian font. */
html body #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot :is(.cases-table, .report-preview-table) .status-pill {
  font-weight: 300 !important;
}

/* ========================================================================== */
/* Final visual QA pass                                                        */
/* ========================================================================== */

/*
 * Increase legibility without introducing opaque surfaces.  These values are
 * shared by frames, fields, tables and transient surfaces, so equivalent
 * components keep exactly the same contrast everywhere in the application.
 */
body.cases-visual-v2 {
  --v2-primary-purple: #7c3aed;
  --v2-ink: #1b354b;
  --v2-ink-strong: #102a40;
  --v2-muted: #506a80;
  --v2-line: rgba(105, 146, 177, .42);
  --v2-line-strong: rgba(87, 132, 166, .58);
  --v2-control-border: rgba(112, 148, 177, .34);
  --v2-control-border-hover: rgba(48, 111, 156, .78);
  --ui-control-border: rgba(112, 148, 177, .34);
  --ui-control-border-hover: rgba(48, 111, 156, .78);
  --ui-frame-border: rgba(112, 148, 177, .34);
  --ui-row-hover: rgba(213, 231, 244, .62);
  --v2-table-hover: rgba(213, 231, 244, .62);
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

/* Inter supplies the numerals while Noto Sans Georgian supplies Georgian text. */
html body.cases-visual-v2 :is(
  .home-count-button,
  .home-table-count,
  .home-chart-value,
  .cases-table,
  input,
  .about-tech-card dd,
  .deadline-notification-popup-foot
) {
  font-variant-numeric: tabular-nums !important;
}

/* Give every interactive control the same crisp rest/hover/focus boundary. */
html body.cases-visual-v2 .cases-main #pageRoot :is(
  .cases-editor-panel input:not(.native-date-picker),
  .cases-editor-panel select,
  .cases-editor-panel textarea,
  .settings-content input,
  .settings-content select,
  .settings-content textarea,
  .report-unified-row,
  .ui-toolbar-control
) {
  border-color: var(--ui-control-border) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot :is(
  .cases-editor-panel input:not(.native-date-picker),
  .cases-editor-panel select,
  .cases-editor-panel textarea,
  .settings-content input,
  .settings-content select,
  .settings-content textarea,
  .report-unified-row,
  .ui-toolbar-control
):hover {
  border-color: var(--ui-control-border-hover) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot :is(
  .cases-editor-panel input:not(.native-date-picker),
  .cases-editor-panel select,
  .cases-editor-panel textarea,
  .settings-content input,
  .settings-content select,
  .settings-content textarea,
  .report-field-title-input,
  .ui-toolbar-control
):focus-visible {
  border-color: var(--v2-focus) !important;
  box-shadow: 0 0 0 3px var(--v2-focus-ring) !important;
}

/* Long dashboard headings wrap deliberately instead of losing final letters. */
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card[data-summary-key] > span {
  font-size: var(--type-caption) !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Table rules and chart rules now use the same single visual token. */


/* Only the complete frozen table region gets a divider on compact widths. */
@media (max-width: 1359px) {
  html body.cases-visual-v2 .cases-main #pageRoot .cases-table :is(th, td):first-child {
    box-shadow: none !important;
  }

  html body.cases-visual-v2 .cases-main #pageRoot .cases-table :is(th, td):nth-child(2) {
    box-shadow: 1px 0 0 var(--ui-frame-border) !important;
  }

  /* Three lines are necessary for long Georgian group names at minimum width. */
  html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table tbody tr,
  html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table tbody td,
  html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table tbody td:first-child,
  html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table .home-table-count,
  html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table .home-group-name {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
  }

  html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table .home-group-name {
    padding-block: 4px !important;
    line-height: 1.15 !important;
  }

  /* The matrix opens on complete rows; additional rows remain available inside it. */
  html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-panel {
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
  }
}


/* iCloud is a real navigation row visually, but remains independently placed
   at the measured midpoint between Reports and Settings. */


/* The cards sit 22px inside the (borderless) frame on every side, the same
   measure as every inter-card gutter. */
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame > .home-summary-grid {
  gap: 22px !important;
  padding-right: 22px !important;
  padding-left: 22px !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-mobile-table tr {
  box-sizing: border-box !important;
  column-gap: 22px !important;
  /* With the panel's own inset: the same 22px as the cards above, so every
     count sits under its card. */
  padding-right: 9px !important;
  padding-left: 9px !important;
}

/* Chart titles and contextual selectors use the shared application radius. */
html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel :is(
  .home-incoming-select-field,
  .home-incoming-select
) {
  border-radius: var(--ui-frame-radius, 9px) !important;
}

/* -------------------------------------------------------------------------- */
/* Unified raised page guide and useful sidebar breathing room                */
/* -------------------------------------------------------------------------- */

/* Every page moves as one unit: toolbar first, content frame second. The
   right inset protects the frameless window controls while both lanes occupy
   the compact title-bar band. */
html body.cases-visual-v2 {
  --v2-page-content-top: 44px;
  --ui-page-content-top: 44px;
  --ui-toolbar-top: 0px;
}

html body.cases-visual-v2 .cases-main .cases-page-root > :is(
  .ui-page-toolbar,
  .report-action-strip,
  .home-notification-action-strip,
  .case-table-action-strip,
  .settings-action-strip,
  .editor-action-strip
) {
  top: var(--ui-toolbar-top) !important;
  right: 88px !important;
}


html body.cases-visual-v2 .cases-main .cases-page-root:has(#reportPanel.report-builder-page),
html body.cases-visual-v2 .cases-main .cases-page-root:has(.case-list-page),
html body.cases-visual-v2 .cases-main .cases-page-root:has(.settings-layout) {
  padding-top: var(--ui-page-content-top) !important;
}

html body.cases-visual-v2 .cases-main .cases-page-root:has(.cases-editor-panel) {
  padding-top: 0 !important;
  gap: 10px !important;
}

html body.cases-visual-v2 .cases-main .cases-page-root:has(.cases-editor-panel) > .editor-action-strip {
  transform: translateY(var(--ui-toolbar-top)) !important;
}

/* The logo and primary navigation reclaim the same vertical space as the
   page surfaces, without changing their internal sizes or row rhythm. */
html body.cases-visual-v2 .cases-sidebar .cases-brand {
  /* The SVG has 76/512 intrinsic top whitespace. At 64px this is 9.5px, so
     with the image box at 5.5px the visible top tiles sit 15px below the
     window's top edge — as far as Exit sits above its bottom edge — and the
     emblem's middle is the top row's line (--ui-top-row-center). */
  transform: translateY(-32.5px) !important;
}

html body.cases-visual-v2 .cases-sidebar .cases-sidebar-nav {
  overflow: visible !important;
}

html body.cases-visual-v2 .cases-sidebar .cases-sidebar-nav > .nav-main-group {
  /* Natural navigation top is 140px; the shared page guide is 84px (24px
     below the emblem, the page toolbar on the top row). Start on it — the
     first Settings lane — including compact windows. */
  transform: translateY(-56px) !important;
}

/* The empty sidebar band remains calm but now communicates a useful state. */


html body.cases-visual-v2 .cases-sidebar .cases-sidebar-nav > .nav-bottom-group {
  position: static !important;
  margin: auto auto var(--sidebar-bottom-stable-offset, 55px) !important;
  transform: none !important;
}









/* Every analytical mode belongs to the same atmospheric family. Distinct
   hues preserve fast recognition without reintroducing the old neon palette. */
html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel[data-chart-mode="municipalities"] {
  --home-chart-color: #8db8d2 !important;
  --home-chart-color-strong: #6fa8cc !important;
  --home-chart-color-text: #4e7f9f !important;
  --home-chart-color-shadow: rgba(111, 168, 204, .18) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel[data-chart-mode="mobileGroups"] {
  --home-chart-color: #79cbc5 !important;
  --home-chart-color-strong: #5fbfba !important;
  --home-chart-color-text: #398f8a !important;
  --home-chart-color-shadow: rgba(95, 191, 186, .18) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel[data-chart-mode="performance"] {
  --home-chart-color: #c1c0d2 !important;
  --home-chart-color-strong: #8f8eae !important;
  --home-chart-color-text: #6f6e8e !important;
  --home-chart-color-shadow: rgba(143, 142, 174, .18) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-mode-button[data-home-chart-mode="municipalities"] {
  --chart-mode-action-color: #6fa8cc !important;
  --chart-mode-action-bg: rgba(111, 168, 204, .12) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-mode-button[data-home-chart-mode="mobileGroups"] {
  --chart-mode-action-color: #4ea9a4 !important;
  --chart-mode-action-bg: rgba(95, 191, 186, .13) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-mode-button[data-home-chart-mode="performance"] {
  --chart-mode-action-color: #8988a8 !important;
  --chart-mode-action-bg: rgba(170, 169, 194, .14) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel[data-chart-mode="mobileGroups"] .home-chart-bar-fill {
  background: linear-gradient(180deg, #79cbc5 0%, #5fbfba 100%) !important;
}

/* Navigation pictograms reuse the palette as restrained wayfinding. Destructive
   actions keep their semantic red and are intentionally excluded. */
html body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item:nth-child(1) .nav-icon { color: var(--cases-primary, #4f7fb5) !important; }
html body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item:nth-child(2) .nav-icon { color: #6fa8cc !important; }
html body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item:nth-child(3) .nav-icon { color: #4ea9a4 !important; }
html body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item:nth-child(4) .nav-icon { color: #8988a8 !important; }
html body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item:nth-child(5) .nav-icon { color: #738b7d !important; }
html body.cases-visual-v2 .cases-sidebar .nav-bottom-group .nav-item:first-child .nav-icon { color: var(--cases-primary, #4f7fb5) !important; }

html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item:nth-child(8n) .settings-nav-icon { color: #8988a8 !important; }

/* Reference lists grow in complete rows up to the measured Exit guide. */
html body.cases-visual-v2 .cases-main #pageRoot .settings-content > .reference-block.settings-single-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-content > .reference-block.settings-single-panel > :is(
  .settings-list,
  .settings-list-expanded
) {
  height: var(--reference-list-height, auto) !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-bottom: 0 !important;
  scroll-padding-bottom: 0 !important;
  align-content: start !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(71, 111, 143, .34) transparent !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .reference-block .settings-list > :is(.settings-item, .empty-state) {
  box-sizing: border-box !important;
  height: var(--reference-row-height, var(--ui-control-height)) !important;
  min-height: var(--reference-row-height, var(--ui-control-height)) !important;
  max-height: var(--reference-row-height, var(--ui-control-height)) !important;
  margin-block: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .reference-block .settings-list > .empty-state {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-block: 0 !important;
}

/* Saved values are flat list rows; only the new-value input is a field. */
html body.cases-visual-v2 .cases-main #pageRoot .reference-block .settings-list > .settings-item {
  color: var(--v2-ink) !important;
  font-size: var(--type-body) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-data-divider) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 140ms ease !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .reference-block .settings-list > .settings-item:last-child {
  border-bottom-color: transparent !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .reference-block .settings-list > .settings-item:is(:hover, :focus-within) {
  background: var(--ui-row-hover) !important;
}

/* One focus ring is enough; avoid the doubled outline/shadow seen on popovers. */
html body.cases-visual-v2 :where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 3px var(--v2-focus-ring) !important;
}

/* Eight Settings destinations fit without clipping at the supported minimum. */

/* Dashboard numbers keep their appearance but receive a practical click area. */
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card .home-count-button {
  width: 100% !important;
  min-width: 44px !important;
  height: 30px !important;
  min-height: 30px !important;
  display: inline-grid !important;
  place-items: center !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table .home-table-count {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

/* The mobile-group names and top-card captions share one exact type size. */
html body.cases-visual-v2 .cases-main #pageRoot :is(
  .home-summary-card[data-summary-key] > span,
  .home-mobile-table .home-group-name
) {
  font-size: var(--type-caption) !important;
  font-weight: 400 !important;
}

/* Home uses two clear frames: overview (cards + matrix) and chart. */
html body.cases-visual-v2 .cases-main #pageRoot:has(> .home-overview-frame) {
  grid-template-rows: auto auto !important;
  row-gap: 24px !important;
  column-gap: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot > :is(
  .home-overview-frame,
  .home-single-chart-panel.ui-frame
) {
  box-sizing: border-box !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 1px solid var(--ui-frame-border) !important;
  border-radius: var(--ui-frame-radius) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot > .home-overview-frame {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 10px !important;
  padding: 22px 0 10px !important;
  overflow: hidden !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame > :is(
  .home-summary-grid,
  .home-mobile-panel
) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame > .home-mobile-panel {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot > .home-single-chart-panel.ui-frame {
  height: 340px !important;
  min-height: 340px !important;
  max-height: 340px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body.cases-visual-v2 .cases-main #pageRoot > .home-single-chart-panel.ui-frame > .home-chart-card {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: var(--ui-frame-radius) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Main and Settings navigation share the application's purple active rail. */
html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-item.active,
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item.active {
  box-shadow: 0 10px 24px rgba(37, 67, 94, .12) !important;
}

/* The mobile-group matrix keeps its rule under the final record too (drawn by the row's ::after). */



/* Show the complete mobile-group matrix; scrolling belongs to the page, not the table. */
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-mobile-panel {
  height: max-content !important;
  min-height: max-content !important;
  max-height: none !important;
  overflow: hidden !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-mobile-table-wrap {
  height: max-content !important;
  min-height: max-content !important;
  max-height: none !important;
  overflow: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-mobile-table-wrap::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot > .home-overview-frame {
  height: max-content !important;
  min-height: max-content !important;
  max-height: none !important;
  align-self: start !important;
}

/* New-card controls stay transparent until they actually contain data. */
html body.cases-visual-v2 .cases-main #pageRoot form#caseForm.cases-editor-panel :is(
  input:not(.native-date-picker):not(.has-value),
  select:not(.has-value),
  textarea:not(.has-value)
),
html body.cases-visual-v2 .cases-main #pageRoot form#caseForm.cases-editor-panel :is(
  input:not(.native-date-picker):not(.has-value),
  select:not(.has-value),
  textarea:not(.has-value)
):is(:hover, :focus, :focus-visible) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}


/* Editor headings share the measured Property → Municipality spacing. */

html body.cases-visual-v2 .cases-main #pageRoot form#caseForm.cases-editor-panel > .card-main-section,
html body.cases-visual-v2 .cases-main #pageRoot form#caseForm.cases-editor-panel > .notes-section {
  gap: 0 !important;
}



/* ========================================================================== */
/* Hybrid frame hierarchy                                                     */
/* ========================================================================== */

/*
 * Frames describe structure, control borders describe interaction, and quiet
 * dividers describe data rhythm. Keeping these three strengths separate makes
 * the interface feel lighter without sacrificing discoverability.
 */
body.cases-visual-v2 {
  --ui-frame-radius: 9px;
  --ui-control-radius: 9px;
  --ui-frame-border: rgba(93, 135, 166, .27);
  --ui-control-border: rgba(79, 130, 168, .50);
  --ui-control-border-hover: rgba(111, 71, 190, .66);
  --ui-data-divider: rgba(105, 146, 177, .25);
  --ui-interaction-tint: rgba(124, 58, 237, .055);
  --ui-row-hover: rgba(124, 58, 237, .045);
  --v2-table-hover: rgba(124, 58, 237, .045);
}

/* Structural containers retain one quiet outline and never imitate a field. */
html body.cases-visual-v2 .cases-main #pageRoot :is(
  .home-overview-frame,
  .home-single-chart-panel.ui-frame,
  .cases-editor-panel > .cases-card,
  #reportPanel.report-builder-page.ui-frame,
  .case-list-page > .cases-table-shell.ui-table-frame,
  .backup-list-panel .backup-table-shell.ui-table-frame,
  .settings-content > .reference-block.ui-frame,
  .settings-content > .deadline-settings-panel.ui-frame,
  .settings-content > .backup-list-panel.ui-frame,
  .settings-content > .cases-about-page.ui-frame,
  .settings-content > .settings-empty-panel.ui-frame
) {
  border-color: transparent !important;
  border-radius: var(--ui-frame-radius) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 2px 2px -2px rgba(255, 255, 255, .42),
    inset 0 -1px 0 rgba(64, 96, 121, .03),
    0 -1px 2px rgba(38, 61, 79, .05),
    0 1px 2px rgba(38, 61, 79, .05),
    0 3px 5px -4px rgba(38, 61, 79, .12) !important;
}

/* Settings navigation belongs to the same flat navigation plane as the main
   sidebar; only the page content receives elevation. */


/* Main navigation groups stay completely open on the shared low-poly plane. */
html body.cases-visual-v2 .cases-sidebar .cases-sidebar-nav > :is(.nav-main-group, .nav-bottom-group) {
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}


/* Navigation state is carried by a purple rail and tint, not another outline. */
html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-item,
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item {
  border-color: transparent !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-item:is(:hover, :focus-visible),
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item:is(:hover, :focus-visible) {
  border-color: transparent !important;
  background: rgba(124, 58, 237, .035) !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-item.active,
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item.active {
  border-color: transparent !important;
  background: var(--ui-interaction-tint) !important;
  box-shadow: none !important;
}

/* Inputs and control rows remain visibly interactive and use the tighter radius. */
html body.cases-visual-v2 .cases-main #pageRoot :is(
  .cases-editor-panel input:not(.native-date-picker),
  .cases-editor-panel select,
  .cases-editor-panel textarea,
  .settings-content input,
  .settings-content select,
  .settings-content textarea,
  .report-unified-row,
  .ui-toolbar-control
) {
  border-color: var(--ui-control-border) !important;
  border-radius: var(--ui-control-radius) !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot :is(
  .cases-editor-panel input:not(.native-date-picker),
  .cases-editor-panel select,
  .cases-editor-panel textarea,
  .settings-content input,
  .settings-content select,
  .settings-content textarea,
  .report-unified-row,
  .ui-toolbar-control
):hover {
  border-color: var(--ui-control-border-hover) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Tables have one outer frame; all interior rhythm comes from quiet row rules. */
html body.cases-visual-v2 .cases-main #pageRoot :is(
  .home-mobile-table th,
  .home-mobile-table td,
  .cases-table th,
  .cases-table td,
  .backup-table-scroll th,
  .backup-table-scroll td
) {
  border-color: var(--ui-data-divider) !important;
}


html body.cases-visual-v2 .cases-main #pageRoot :is(
  .cases-table,
  .home-mobile-table,
  .backup-table-scroll table
) thead th {
  background: rgba(71, 111, 143, .035) !important;
  background-color: rgba(71, 111, 143, .035) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot :is(
  .cases-table,
  .home-mobile-table,
  .backup-table-scroll table
) tbody tr:hover > td {
  background: var(--ui-row-hover) !important;
  background-color: var(--ui-row-hover) !important;
}

/* Summary cards are content, not seven nested panels. */
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card[data-summary-key]:is(:hover, :focus-within)::before {
  opacity: 1 !important;
  transform: scaleY(1) !important;
}

/* Case-list controls mirror the Report source/export pair exactly. */
html body.cases-visual-v2 .cases-main #pageRoot .case-table-search.ui-toolbar-control,
html body.cases-visual-v2 .cases-main #pageRoot .report-action-strip .report-source-select.ui-toolbar-control {
  width: var(--ui-toolbar-width) !important;
  min-width: var(--ui-toolbar-width) !important;
  max-width: var(--ui-toolbar-width) !important;
  height: var(--ui-toolbar-height) !important;
  min-height: var(--ui-toolbar-height) !important;
  max-height: var(--ui-toolbar-height) !important;
  border-radius: var(--ui-control-radius) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .case-table-action-strip .case-filter-trigger.ui-icon-button,
html body.cases-visual-v2 .cases-main #pageRoot .case-table-action-strip .case-filter-trigger.ui-icon-button:is(:hover, :focus, :active),
html body.cases-visual-v2 .cases-main #pageRoot .report-action-strip #exportReportExcel.report-excel-action.ui-icon-button,
html body.cases-visual-v2 .cases-main #pageRoot .report-action-strip #exportReportExcel.report-excel-action.ui-icon-button:is(:hover, :focus, :active) {
  width: var(--ui-icon-button-size) !important;
  min-width: var(--ui-icon-button-size) !important;
  max-width: var(--ui-icon-button-size) !important;
  height: var(--ui-icon-button-size) !important;
  min-height: var(--ui-icon-button-size) !important;
  max-height: var(--ui-icon-button-size) !important;
  flex-basis: var(--ui-icon-button-size) !important;
  padding: 0 !important;
}


/* Every application-owned icon-only action shares one 34/18 geometry.
   Native window controls deliberately remain outside this system. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot button:is(.ui-icon-button, .ui-inline-action, .ui-field-action),
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot button:is(.ui-icon-button, .ui-inline-action, .ui-field-action):is(:hover, :focus, :active),
html body.cases-visual-v2 :is(.case-tool-close, .case-filter-icon-action, .deadline-notification-popup-close, .app-confirm-accept, .app-confirm-cancel) {
  box-sizing: border-box !important;
  width: var(--ui-icon-button-size) !important;
  min-width: var(--ui-icon-button-size) !important;
  max-width: var(--ui-icon-button-size) !important;
  height: var(--ui-icon-button-size) !important;
  min-height: var(--ui-icon-button-size) !important;
  max-height: var(--ui-icon-button-size) !important;
  flex: 0 0 var(--ui-icon-button-size) !important;
  padding: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot button:is(.ui-icon-button, .ui-inline-action, .ui-field-action) svg,
html body.cases-visual-v2 :is(.case-tool-close, .deadline-notification-popup-close, .app-confirm-accept, .app-confirm-cancel) svg {
  width: var(--ui-icon-size) !important;
  min-width: var(--ui-icon-size) !important;
  max-width: var(--ui-icon-size) !important;
  height: var(--ui-icon-size) !important;
  min-height: var(--ui-icon-size) !important;
  max-height: var(--ui-icon-size) !important;
}

html body.cases-visual-v2 .case-filter-popover .case-filter-date-entry .date-picker-button,
html body.cases-visual-v2 .case-filter-popover .case-filter-date-entry .date-picker-button:is(:hover, :focus, :active) {
  width: var(--ui-icon-button-size) !important;
  min-width: var(--ui-icon-button-size) !important;
  max-width: var(--ui-icon-button-size) !important;
  height: var(--ui-icon-button-size) !important;
  min-height: var(--ui-icon-button-size) !important;
  max-height: var(--ui-icon-button-size) !important;
  padding: 0 !important;
}

html body.cases-visual-v2 .case-filter-popover .case-filter-date-entry .date-picker-button svg {
  width: var(--ui-icon-size) !important;
  min-width: var(--ui-icon-size) !important;
  max-width: var(--ui-icon-size) !important;
  height: var(--ui-icon-size) !important;
  min-height: var(--ui-icon-size) !important;
  max-height: var(--ui-icon-size) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .cases-object-row {
  /* Identifier carries a 34px map-pin button inside its own column now — a
     touch more width (borrowed from Address, which had the most slack) keeps
     its actual input box as wide as its neighbors instead of looking pinched. */
  grid-template-columns: minmax(130px, 1fr) minmax(160px, 1.15fr) minmax(160px, 1.3fr) minmax(130px, 1fr) var(--ui-icon-button-size) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .cases-registration-row {
  grid-template-columns: minmax(180px, 1.3fr) minmax(180px, 1fr) minmax(180px, 1fr) var(--ui-icon-button-size) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-content .settings-item-actions {
  right: 3px !important;
  height: var(--ui-icon-button-size) !important;
  min-height: var(--ui-icon-button-size) !important;
  max-height: var(--ui-icon-button-size) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-content .settings-item-actions > button,
html body.cases-visual-v2 .cases-main #pageRoot .settings-content .settings-new-value-control > .add-reference{
  width: var(--ui-icon-button-size) !important;
  min-width: var(--ui-icon-button-size) !important;
  max-width: var(--ui-icon-button-size) !important;
  height: var(--ui-icon-button-size) !important;
  min-height: var(--ui-icon-button-size) !important;
  max-height: var(--ui-icon-button-size) !important;
}

@media (max-width: 1280px) {
  html body.cases-visual-v2 .cases-main #pageRoot :is(.cases-object-row, .cases-retrieval-row, .cases-registration-row) {
    padding-right: 42px !important;
  }
}

/* One uninterrupted data rule across the mobile-group matrix rows. */

html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table tbody tr::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: block !important;
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
  background: var(--ui-data-divider) !important;
  pointer-events: none !important;
}

/* ...and the same rule above the first record. */
html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table tbody tr:first-child::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  display: block !important;
  height: 1px !important;
  background: var(--ui-data-divider) !important;
  pointer-events: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table tbody td {
  border-bottom: 0 !important;
}

/* Graph grid and data tables use the same 1px solid divider token. */
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-grid > i {
  box-sizing: border-box !important;
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
  border: 0 !important;
  background: var(--ui-data-divider) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .cases-table td {
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  border-bottom-color: var(--ui-data-divider) !important;
}

/* The header owns one uninterrupted divider; header cells and the first row
   must not paint a second line against it. */
html body.cases-visual-v2 .cases-main #pageRoot .cases-table thead {
  border-bottom: 1px solid var(--ui-data-divider) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .cases-table thead th {
  border-bottom: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .cases-table tbody tr:first-child > td {
  border-top: 0 !important;
}

/* Center the glyph itself, not only its 34px action box, on the Settings axis. */
html body.cases-visual-v2 .cases-main #pageRoot .settings-content .settings-item-actions > button .button-icon {
  box-sizing: border-box !important;
  display: inline-grid !important;
  width: var(--ui-icon-size) !important;
  min-width: var(--ui-icon-size) !important;
  max-width: var(--ui-icon-size) !important;
  height: var(--ui-icon-size) !important;
  min-height: var(--ui-icon-size) !important;
  max-height: var(--ui-icon-size) !important;
  place-items: center !important;
  margin: 0 !important;
  flex: 0 0 var(--ui-icon-size) !important;
}

/* On Settings pages the full-height divider is centered between the visible
   active frame in the main sidebar and the first visible content frame. The
   coordinate is measured at runtime because both edges move with window size. */
html body.cases-visual-v2 .cases-main #pageRoot .settings-layout {
  --settings-nav-column: var(--cases-nav-w, 252px);
  position: relative !important;
  height: 100% !important;
  grid-template-columns: var(--settings-nav-column) minmax(0, 1fr) !important;
  column-gap: 57px !important;
}

html body.cases-visual-v2 .cases-app-frame:has(#pageRoot .settings-layout)::before {
  content: "" !important;
  position: fixed !important;
  z-index: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: var(--settings-main-divider-x, 458px) !important;
  display: block !important;
  width: 1px !important;
  background: rgba(111, 72, 145, .12) !important;
  box-shadow: 1px 0 0 rgba(255, 255, 255, .50), 14px 0 34px rgba(74, 48, 104, .045) !important;
  pointer-events: none !important;
}

/* Hide the physical sidebar edge on Settings only; otherwise a second line
   remains at the old column boundary and masks the measured divider. */

html body.cases-visual-v2 .cases-main #pageRoot .settings-layout > .settings-sidebar.ui-frame {
  position: relative !important;
  z-index: 1 !important;
  width: var(--settings-nav-column) !important;
  min-width: var(--settings-nav-column) !important;
  max-width: var(--settings-nav-column) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-layout > .settings-content {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 980px) {
  html body.cases-visual-v2 .cases-main #pageRoot .settings-layout {
    --settings-nav-column: 210px;
  }

  html body.cases-visual-v2 .cases-app-frame:has(#pageRoot .settings-layout)::before {
    left: 259px !important;
  }
}

/* The supplied transparent emblem and Aquire wordmark form one centered lockup. */
html body.cases-visual-v2 .cases-sidebar .logo-only-brand.cases-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  /* The emblem starts on the line of the menu's pictograms (its own transparent margin is 9px; the pictograms' glyphs start 53px from the window's edge), the wordmark follows it. */
  padding-inline: 30px 0 !important;
}

html body.cases-visual-v2 .cases-sidebar .logo-only-brand .full-sidebar-logo {
  display: block !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  flex: 0 0 auto !important;
}

html body.cases-visual-v2 .cases-sidebar .logo-only-brand .sidebar-brand-title {
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  color: #4d5680 !important;
  font-family: "Cases Aquire Embedded", "Cases Inter Embedded", sans-serif !important;
  font-size: 23px !important; /* the CASES wordmark: a logo, not text — outside the type scale (the lock screen's is the same) */
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .16em !important;
  /* (the last letter's trailing space is not part of the lockup) */
  margin-right: -.16em !important;
  white-space: nowrap !important;
}

/* Primary chart modes and their contextual sub-controls form two clear
   navigation levels without adding another framed surface. */

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-tier {
  position: relative !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  min-height: 30px !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-tier.is-primary {
  padding-right: 12px !important;
}


html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-tier.is-secondary {
  gap: 10px !important;
  padding: 1px 5px !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, var(--home-chart-color) 4%, transparent) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-incoming-month-select {
  width: 112px !important;
  min-width: 112px !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-incoming-compare-select {
  width: 164px !important;
  min-width: 164px !important;
}

html body.cases-visual-v2 .cases-main #pageRoot
  .home-single-chart-panel:is(
    [data-chart-mode="incoming"],
    [data-chart-mode="municipalities"],
    [data-chart-mode="mobileGroups"]
  )[data-incoming-level="years"] .home-chart-scroll {
  overflow-x: hidden !important;
}

html body.cases-visual-v2 .cases-main #pageRoot
  .home-single-chart-panel:is(
    [data-chart-mode="incoming"],
    [data-chart-mode="municipalities"],
    [data-chart-mode="mobileGroups"]
  )[data-incoming-level="years"] .home-chart-plot {
  width: 100% !important;
  min-width: 100% !important;
}


/* Report controls remain framed, while the redundant page-level outline is open. */
html body.cases-visual-v2 .cases-main #pageRoot > #reportPanel#reportPanel.report-builder-page.ui-frame {
  border-width: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Settings pages live directly on the shared low-poly plane. Only the large
   page wrapper is frameless; controls, saved rows and table frames stay intact. */
html body.cases-visual-v2 .cases-main #pageRoot .settings-layout > .settings-content > :is(
  .reference-block.ui-frame,
  .deadline-settings-panel.ui-frame,
  .backup-list-panel.ui-frame,
  .cases-about-page.ui-frame,
  .settings-empty-panel.ui-frame
) {
  border-width: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Status colors are reference data, not name-based presentation rules. */
html body.cases-visual-v2 .cases-main #pageRoot :is(.cases-table, .report-preview-table) .status-pill[data-status-color],
html body.cases-visual-v2 .cases-main #pageRoot :is(.cases-table, .report-preview-table) .status-pill[data-status-color]:is(:hover, :focus, :focus-visible, :active) {
  color: var(--case-status-color) !important;
  -webkit-text-fill-color: var(--case-status-color) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .cases-editor-panel #statusId[data-status-color],
html body.cases-visual-v2 .cases-main #pageRoot .cases-editor-panel #statusId[data-status-color]:is(:hover, :focus) {
  color: var(--case-status-color) !important;
  -webkit-text-fill-color: var(--case-status-color) !important;
  border-color: var(--ui-control-border) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-content .settings-item.status-settings-item {
  padding-right: 70px !important;
}

html body.cases-visual-v2 .settings-content .status-color-trigger,
html body.cases-visual-v2 .settings-content .status-color-trigger:is(:hover, :focus-visible) {
  color: var(--v2-muted) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html body.cases-visual-v2 .status-color-swatch,
html body.cases-visual-v2 .status-color-option-swatch {
  box-sizing: border-box !important;
  display: block !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  border: 2px solid rgba(255, 255, 255, .88) !important;
  border-radius: 50% !important;
  background: var(--status-swatch-color) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-swatch-color) 60%, rgba(27, 53, 75, .24)) !important;
}

html body.cases-visual-v2 .status-color-popover {
  position: fixed !important;
  z-index: 1300 !important;
  width: min(264px, calc(100vw - 24px)) !important;
  padding: 14px !important;
  display: grid !important;
  gap: 11px !important;
}

html body.cases-visual-v2 .status-color-popover-title {
  color: var(--v2-ink) !important;
  font-size: var(--type-caption) !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

html body.cases-visual-v2 .status-color-palette {
  display: grid !important;
  grid-template-columns: repeat(6, 34px) !important;
  justify-content: space-between !important;
  gap: 7px 5px !important;
}

html body.cases-visual-v2 .status-color-option {
  position: relative !important;
  box-sizing: border-box !important;
  display: grid !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .status-color-option:is(:hover, :focus-visible) {
  border-color: var(--ui-control-border) !important;
  background: var(--ui-row-hover) !important;
  outline: none !important;
}

/* Settings fields keep one focus boundary: the purple border, without a second ring. */
html body.cases-visual-v2 .cases-main #pageRoot .settings-content :is(input, select, textarea):is(:focus, :focus-visible) {
  border-color: var(--v2-focus) !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/*
 * The outer backup panel meets the sidebar's Exit guide. The inner table
 * grows in complete rows up to that limit, below an opaque sticky header.
 */








html body.cases-visual-v2 .status-color-option.is-selected {
  border-color: var(--v2-primary-purple) !important;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, .12) !important;
}

/* "Other colour": a full-width row opening the native picker (any colour). */
html body.cases-visual-v2 .status-color-custom {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 30px !important;
  padding: 4px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: var(--v2-ink) !important;
  font-size: var(--type-caption) !important;
  cursor: pointer !important;
}

html body.cases-visual-v2 .status-color-custom-icon {
  display: inline-flex !important;
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  color: var(--v2-muted) !important;
}

html body.cases-visual-v2 .status-color-popover .status-color-custom .status-color-custom-icon > svg.lucide {
  flex: 0 0 14px !important;
  width: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;
  height: 14px !important;
  min-height: 14px !important;
  max-height: 14px !important;
}

html body.cases-visual-v2 .status-color-custom:is(:hover, :focus-within) {
  border-color: var(--ui-control-border) !important;
  background: var(--ui-row-hover) !important;
}

html body.cases-visual-v2 .status-color-custom.is-selected {
  border-color: var(--ui-control-border) !important;
}


/* The mobile-groups matrix has independent value actions, so a row/cell hover
   would incorrectly suggest that the whole row is one selectable target. */
html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table tbody tr:is(:hover, :focus-within) > td,
html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table tbody tr:is(:hover, :focus-within) > td:nth-child(n) {
  background: transparent !important;
  background-color: transparent !important;
}

/* Incoming-card analytics stay in one compact family: years, months and days.
   Optional day comparison adds a second slim series without introducing a
   second chart or a permanent legend. */
html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel[data-chart-mode="incoming"] {
  --home-chart-color: #6fa8cc !important;
  --home-chart-color-strong: var(--cases-primary, #4f7fb5) !important;
  --home-chart-color-text: #3f6f9e !important;
  --home-chart-color-shadow: rgba(var(--cases-primary-rgb, 79, 127, 181), .18) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-mode-button[data-home-chart-mode="incoming"] {
  --chart-mode-action-color: var(--cases-primary, #4f7fb5) !important;
  --chart-mode-action-bg: rgba(var(--cases-primary-rgb, 79, 127, 181), .11) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot :is(
  .home-incoming-level-switch,
  .home-incoming-selectors
) {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  height: 30px !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-incoming-select-field {
  position: relative !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 28px !important;
  margin: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-incoming-select-field.is-primary::before,
html body.cases-visual-v2 .cases-main #pageRoot .home-incoming-select-field.is-comparison.is-active::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  left: 8px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--cases-primary, #4f7fb5) !important;
  pointer-events: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-incoming-select-field.is-comparison.is-active::before {
  background: #5fbfba !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-incoming-select,
html body.cases-visual-v2 .cases-main #pageRoot .home-incoming-select:is(:hover, :focus, :focus-visible) {
  box-sizing: border-box !important;
  width: 70px !important;
  min-width: 70px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin: 0 !important;
  padding: 0 8px 0 20px !important;
  color: var(--home-text-color) !important;
  font-size: var(--type-caption) !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  text-align: left !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-incoming-month-select {
  width: 94px !important;
  min-width: 94px !important;
  padding-left: 9px !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-incoming-compare-select {
  width: 142px !important;
  min-width: 142px !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-incoming-select-field.is-comparison:not(.is-active) .home-incoming-compare-select {
  padding-left: 9px !important;
}

html body.cases-visual-v2 .cases-main #pageRoot
  .home-single-chart-panel[data-chart-mode="incoming"]
  .home-chart-column:not(.home-chart-comparison-column):is(:hover, :focus-visible)
  .home-chart-year-segments,
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-comparison-bar:is(:hover, :focus-visible) .home-chart-year-segments,
html body.cases-visual-v2 .cases-main #pageRoot [data-home-chart-detail]:is(:hover, :focus-visible) .home-chart-year-segments,
html body.cases-visual-v2 .cases-main #pageRoot [data-home-chart-detail].has-chart-detail-open .home-chart-year-segments {
  visibility: visible !important;
  opacity: 1 !important;
  transform: scaleY(1) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot
  .home-single-chart-panel[data-chart-mode="incoming"] .home-chart-year-segments {
  transform: scaleY(.94) !important;
  transform-origin: center bottom !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-comparison-column {
  cursor: default !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-comparison-values {
  display: inline-flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 5px !important;
  font-size: var(--type-micro) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-comparison-values > span:first-child {
  color: #6543aa !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-comparison-values > span:last-child {
  color: #247d74 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-comparison-bars {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: end !important;
  gap: 3px !important;
  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0 3px !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-comparison-bar,
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-comparison-bar:is(:hover, :focus, :focus-visible, :active) {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-comparison-bar > .home-chart-bar-fill {
  position: relative !important;
  display: block !important;
  width: min(11px, 86%) !important;
  min-height: 2px !important;
  overflow: hidden !important;
  border-radius: 4px 4px 1px 1px !important;
  background: linear-gradient(180deg, #6fa8cc 0%, var(--cases-primary, #4f7fb5) 100%) !important;
  box-shadow: 0 2px 5px rgba(var(--cases-primary-rgb, 79, 127, 181), .17) !important;
  transform-origin: center bottom !important;
  transition: filter .16s ease, transform .16s ease !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-comparison-bar.is-comparison > .home-chart-bar-fill {
  background: linear-gradient(180deg, #7acdc7 0%, #5fbfba 100%) !important;
  box-shadow: 0 2px 5px rgba(95, 191, 186, .17) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-comparison-bar:is(:hover, :focus-visible) > .home-chart-bar-fill {
  filter: saturate(1.08) brightness(1.03) !important;
  transform: scaleX(1.08) !important;
}

html body.cases-visual-v2 .home-chart-detail-popup {
  position: fixed !important;
  z-index: 420 !important;
  box-sizing: border-box !important;
  width: min(var(--detail-popup-width, 480px), calc(100vw - 20px)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 20px) !important;
  max-height: calc(100vh - 20px) !important;
  overflow: auto !important;
  padding: 12px !important;
  visibility: hidden !important;
  opacity: 0 !important;
  color: var(--v2-ink, #355f7c) !important;
  border: 1px solid var(--ui-frame-border, rgba(127, 154, 181, .34)) !important;
  border-radius: 9px !important;
  background: rgba(244, 249, 253, .91) !important;
  box-shadow: 0 12px 30px rgba(42, 69, 101, .14) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  transform: translateY(5px) scale(.985) !important;
  transform-origin: center bottom !important;
  transition: opacity .17s ease, transform .17s ease, visibility 0s linear .17s !important;
  pointer-events: none !important;
}

html body.cases-visual-v2 .home-chart-detail-popup.visible {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition-delay: 0s !important;
  pointer-events: auto !important;
}

html body.cases-visual-v2 .home-chart-detail-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 1px 2px 8px !important;
  color: var(--v2-ink, #355f7c) !important;
  font-size: var(--type-caption) !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
}

html body.cases-visual-v2 .home-chart-detail-heading > span:first-child {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.cases-visual-v2 .home-chart-detail-heading > span:last-child {
  flex: 0 0 auto !important;
  color: var(--v2-muted, #6f8191) !important;
  font-variant-numeric: tabular-nums !important;
}







html body.cases-visual-v2 .home-chart-detail-list {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-columns: repeat(var(--detail-columns, 1), minmax(0, 1fr)) !important;
  grid-template-rows: repeat(var(--detail-rows, 1), max-content) !important;
  gap: 8px 18px !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html body.cases-visual-v2 .home-chart-detail-row {
  display: grid !important;
  gap: 4px !important;
}

html body.cases-visual-v2 .home-chart-detail-row-label {
  display: grid !important;
  grid-template-columns: 7px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  color: var(--v2-ink, #355f7c) !important;
  font-size: var(--type-caption) !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
}

html body.cases-visual-v2 .home-chart-detail-row-label > i {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--detail-color) !important;
}

html body.cases-visual-v2 .home-chart-detail-row-label > span:nth-child(2) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.cases-visual-v2 .home-chart-detail-row-label > span:last-child {
  color: var(--v2-muted, #6f8191) !important;
  font-variant-numeric: tabular-nums !important;
}

html body.cases-visual-v2 .home-chart-detail-track {
  position: relative !important;
  height: 4px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(127, 154, 181, .12) !important;
}

html body.cases-visual-v2 .home-chart-detail-track > i {
  display: block !important;
  width: var(--detail-width) !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: var(--detail-color) !important;
  transform-origin: left center !important;
  animation: home-chart-detail-grow .18s ease both !important;
}

html body.cases-visual-v2 .home-chart-detail-empty {
  padding: 6px 2px 3px !important;
  color: var(--v2-muted, #6f8191) !important;
  font-size: var(--type-caption) !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
  text-align: center !important;
}

@keyframes home-chart-detail-grow {
  from { transform: scaleX(0); opacity: .45; }
  to { transform: scaleX(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html body.cases-visual-v2 .home-chart-detail-popup,
  html body.cases-visual-v2 .home-chart-detail-track > i,
  html body.cases-visual-v2 .cases-main #pageRoot
    .home-single-chart-panel[data-chart-mode="incoming"] .home-chart-year-segments {
    animation: none !important;
    transition: none !important;
  }
}

html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel .home-chart-mode-button,
html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel .home-chart-mode-button:is(:hover, :focus, :focus-visible, :active),
html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel .home-chart-mode-button[aria-pressed="true"] {
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  gap: 7px !important;
  padding: 0 9px 0 7px !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-mode-label,
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-mode-button[aria-pressed="true"] .home-chart-mode-label {
  display: block !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  max-height: none !important;
  padding: 1px 0 2px !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-period-button,
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-period-button:is(:hover, :focus, :focus-visible, :active),
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-period-button[aria-pressed="true"] {
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* Noto Sans Georgian needs a taller line box than Latin Inter. Keep both the
   closed chart selectors and their app-owned options clear of the baseline. */


html body.cases-visual-v2 .cases-main #pageRoot .home-incoming-select,
html body.cases-visual-v2 .cases-main #pageRoot .home-incoming-select:is(:hover, :focus, :focus-visible) {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding-top: 1px !important;
  padding-bottom: 4px !important;
  overflow: visible !important;
  line-height: 1.45 !important;
}

html body.cases-visual-v2 :is(.styled-autofill-option, .styled-select-option),
html body.cases-visual-v2 :is(.styled-autofill-option, .styled-select-option):is(:hover, :focus, :focus-visible, :active) {
  min-height: 40px !important;
  padding-top: 7px !important;
  padding-bottom: 9px !important;
  overflow: visible !important;
  line-height: 1.5 !important;
}

/* "2020-ის შედარება" renders at about 113px (equal-width digits) in the embedded 11.5px type.
   A 142px control leaves about 29px for the marker, borders and safe insets. */
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-controls {
  --home-chart-control-width: 142px;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: center !important;
  column-gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-tier.is-primary {
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-tier.is-secondary {
  justify-self: stretch !important;
  justify-content: flex-end !important;
  width: 100% !important;
  min-width: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel .home-chart-mode-button,
html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel .home-chart-mode-button:is(:hover, :focus, :focus-visible, :active),
html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel .home-chart-mode-button[aria-pressed="true"],
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-period-button,
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-period-button:is(:hover, :focus, :focus-visible, :active),
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-period-button[aria-pressed="true"],
html body.cases-visual-v2 .cases-main #pageRoot .home-incoming-select-field,
html body.cases-visual-v2 .cases-main #pageRoot .home-incoming-select,
html body.cases-visual-v2 .cases-main #pageRoot .home-incoming-select:is(:hover, :focus, :focus-visible) {
  box-sizing: border-box !important;
  flex: 0 0 var(--home-chart-control-width) !important;
  width: var(--home-chart-control-width) !important;
  min-width: var(--home-chart-control-width) !important;
  max-width: var(--home-chart-control-width) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel .home-chart-mode-button,
html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel .home-chart-mode-button:is(:hover, :focus, :focus-visible, :active),
html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel .home-chart-mode-button[aria-pressed="true"] {
  justify-content: flex-start !important;
  gap: 4px !important;
  padding-right: 6px !important;
  padding-left: 6px !important;
}

@media (max-width: 1700px) {
  html body.cases-visual-v2 .cases-main #pageRoot .home-chart-controls {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 4px !important;
  }

  html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-tier.is-primary {
    justify-self: start !important;
    width: max-content !important;
    min-width: max-content !important;
  }

  html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-tier.is-secondary {
    justify-self: end !important;
    width: max-content !important;
    min-width: max-content !important;
  }

  html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-tier.is-primary::after {
    content: none !important;
    display: none !important;
  }
}

@media (max-width: 1200px) {
  html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-tier.is-secondary {
    flex-wrap: wrap !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Hierarchical year/month filters are three independent controls, not one
   shared colored strip. Their text and the four chart modes align centrally. */
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-tier.is-secondary {
  padding: 1px 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel .home-chart-mode-button,
html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel .home-chart-mode-button:is(:hover, :focus, :focus-visible, :active),
html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel .home-chart-mode-button[aria-pressed="true"],
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-period-button,
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-period-button:is(:hover, :focus, :focus-visible, :active),
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-period-button[aria-pressed="true"] {
  justify-content: center !important;
  text-align: center !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-incoming-select-field::before {
  content: none !important;
  display: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-incoming-select,
html body.cases-visual-v2 .cases-main #pageRoot .home-incoming-select:is(:hover, :focus, :focus-visible) {
  padding-right: 8px !important;
  padding-left: 8px !important;
  text-align: center !important;
  text-align-last: center !important;
}

/* Keep every chart title and contextual subtitle optically centered inside
   its own 32px frame. Explicit flex alignment prevents earlier grid/flex
   overrides from leaving Lucide icons on a different vertical axis. */

html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel .home-chart-mode-button,
html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel .home-chart-mode-button:is(:hover, :focus, :focus-visible, :active),
html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel .home-chart-mode-button[aria-pressed="true"],
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-period-button,
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-period-button:is(:hover, :focus, :focus-visible, :active),
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-period-button[aria-pressed="true"] {
  display: inline-flex !important;
  align-items: center !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-single-chart-panel .home-chart-mode-button > svg,
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-period-button > svg {
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-mode-label,
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-mode-button[aria-pressed="true"] .home-chart-mode-label {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.35 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-incoming-select,
html body.cases-visual-v2 .cases-main #pageRoot .home-incoming-select:is(:hover, :focus, :focus-visible) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 30px !important;
}

/* Settings navigation labels and icons share the exact center axis of their
   selection row. Older offsets deliberately nudged the Georgian label down. */
html body.cases-visual-v2 .cases-main #pageRoot .settings-layout > .settings-sidebar.ui-frame {
  padding-top: 0 !important;
}


html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-item > .nav-title,
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item > span:last-child {
  position: static !important;
  top: auto !important;
  display: flex !important;
  align-items: center !important;
  align-self: stretch !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transform: none !important;
}

html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-item > .nav-icon,
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item .settings-nav-icon {
  position: static !important;
  top: auto !important;
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transform: none !important;
}

html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-item > .nav-icon {
  grid-row: auto !important;
  grid-column: auto !important;
}

/* A medium-width window still has enough total room for both chart-control
   groups. Use a compact shared width instead of splitting subtitles onto a
   second, right-aligned row. */
@media (min-width: 1301px) and (max-width: 1700px) {
  html body.cases-visual-v2 .cases-main #pageRoot .home-chart-controls {
    --home-chart-control-width: 128px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 0 !important;
  }

  html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-tier.is-primary,
  html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-tier.is-secondary {
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-tier.is-primary {
    padding-right: 0 !important;
  }

  html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-tier.is-primary::after {
    content: "" !important;
    display: block !important;
  }

}

/* Below the one-line fit threshold, keep the two semantic groups centered
   instead of pinning them to opposite edges on separate rows. */
@media (max-width: 1300px) {
  html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-tier.is-primary,
  html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-tier.is-secondary {
    justify-self: center !important;
    justify-content: center !important;
  }
}

/* A block that is open but has no entries is only its title: it takes the same box as a folded one, so the gaps between the titles stay equal. */
html body.cases-visual-v2 .cases-main #pageRoot .cases-editor-panel
  .cases-repeat-section:has(:is(#retrievalRows, #registrationRows):empty) {
  display: block !important;
}




/* Each cadastral code / identifier and each registration number gets its own
   line instead of running together with "; " — the row height (renderer.js
   grows --case-row-height uniformly to fit whichever row has the most
   values) already leaves room. */
html body.cases-visual-v2 .cases-main #pageRoot :is(.cases-table, .report-preview-table) :is(.case-identifier-cell, .case-registration-number-cell) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 1px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html body.cases-visual-v2 .cases-main #pageRoot :is(.cases-table, .report-preview-table) .case-identifier-line {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot :is(.cases-table, .report-preview-table) .case-identifier-more {
  appearance: none !important;
  align-self: center !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit !important;
  line-height: 1.25 !important;
  text-align: left !important;
  color: var(--v2-muted) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

html body.cases-visual-v2 .cases-main #pageRoot :is(.cases-table, .report-preview-table) .case-identifier-more:is(:hover, :focus-visible) {
  color: var(--cases-accent) !important;
  outline: none !important;
}

/* Every number in the program (codes, dates, counts, fields) is set in equal-width digits, so lines of numbers start and end on the same edges. */
html body.cases-visual-v2,
html body.cases-visual-v2 :is(input, textarea, select, button, table, td, th, svg text),
html body.cases-visual-v2 .case-more-popover .case-more-item {
  font-variant-numeric: tabular-nums !important;
}

/* Addresses are whole text: they wrap inside their cell instead of being cut with an ellipsis. */
html body.cases-visual-v2 .cases-main #pageRoot :is(.cases-table, .report-preview-table) .case-address-cell .case-identifier-line:not(.case-identifier-more) {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* The list "+N" opens: the popup look, one whole entry per row, hairline between rows, a little room at the end. */
html body.cases-visual-v2 .case-more-popover.case-more-popover:not(#cases-win-a):not(#cases-win-b) {
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(360px, calc(100vw - 24px)) !important;
  padding: 0 !important;
}

html body.cases-visual-v2 .case-more-popover .case-more-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: min(320px, calc(100vh - 48px));
  padding: 6px;
  overflow-y: auto;
}

/* Rows as in the program's other list popups (selects): equal height, no hairlines, the hover is a rounded fill inside the frame. */
html body.cases-visual-v2 .case-more-popover .case-more-item,
html body.cases-visual-v2 .case-more-popover button.case-more-item.case-cadastral-code {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 40px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cases-ink-strong, var(--v2-ink-strong)) !important;
  font: inherit !important;
  font-size: var(--type-body) !important;
  line-height: 18px !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body.cases-visual-v2 .case-more-popover button.case-more-item.case-cadastral-code { cursor: pointer !important; color: var(--cases-accent) !important; }
html body.cases-visual-v2 .case-more-popover button.case-more-item.case-cadastral-code:is(:hover, :focus-visible) { background: var(--ui-row-hover) !important; outline: none !important; }

/* Department (short-named, active table only) and executor: wrap onto a
   couple of lines rather than truncating — nowrap+ellipsis was silently
   hiding part of the (already shortened) text when the column was narrower
   than a 2-3 word label. Department carries the full name as a tooltip when
   it was shortened. */
html body.cases-visual-v2 .cases-main #pageRoot .cases-table :is(.case-department-cell, .case-executor-cell) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .cases-table :is(.case-department-cell, .case-executor-cell) > span {
  display: block !important;
  width: 100% !important;
  max-height: 3.7em !important;
  overflow: hidden !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* A cadastral code (dot-separated digit groups, e.g. "42.16.43.037") in the
   Identifier column opens maps.gov.ge — styled as inline text with a link
   affordance rather than a boxed button, since it sits among plain text. */
html body.cases-visual-v2 .cases-main #pageRoot :is(.cases-table, .report-preview-table) .case-cadastral-code {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font: inherit !important;
  line-height: inherit !important;
  color: var(--v2-primary-purple) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

html body.cases-visual-v2 .cases-main #pageRoot :is(.cases-table, .report-preview-table) .case-cadastral-code:hover {
  text-decoration: underline !important;
}

/* Data tables sit directly on the shared atmospheric canvas. The frame and
   sticky header remain legible, while the white body sheet is removed. */

html body.cases-visual-v2 .cases-main #pageRoot .case-list-page .cases-table-shell > .cases-table-wrap,
html body.cases-visual-v2 .cases-main #pageRoot .case-list-page > .cases-table-shell.ui-table-frame::before {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .ui-table-frame :is(
  table,
  tbody,
  tbody tr,
  tbody td,
  tbody td:nth-child(n)
) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .ui-table-frame :is(thead, thead tr) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .ui-table-frame table thead th,
html body.cases-visual-v2 .cases-main #pageRoot .cases-table-wrap.ui-table-frame table.cases-table thead th {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: blur(8px) saturate(1.03) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.03) !important;
}

/* The backup archive uses a sticky header with a more specific selector.
   Keep it on the same transparent canvas instead of restoring an opaque strip. */


/* The frozen list columns still obscure horizontally scrolled text, but use
   a translucent glass fill instead of rebuilding the old white sheet. */
html body.cases-visual-v2 .cases-main #pageRoot .ui-table-frame table.cases-table tbody :is(
  td:first-child,
  td:nth-child(2)
) {
  background: rgba(244, 248, 252, .34) !important;
  background-color: rgba(244, 248, 252, .34) !important;
  backdrop-filter: blur(14px) saturate(1.03) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.03) !important;
}

/* At regular desktop widths the first two columns are not frozen, so they
   must not keep the compact-layout glass layer or its visible vertical edge. */
@media (min-width: 1360px) {
  html body.cases-visual-v2 .cases-main #pageRoot .ui-table-frame
    table.cases-table tbody :is(td:first-child, td:nth-child(2)) {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Hover is one row-level surface, including the two compact frozen cells. */
html body.cases-visual-v2 .cases-main #pageRoot .ui-table-frame
  table.cases-table tbody tr.virtual-case-row:hover > td,
html body.cases-visual-v2 .cases-main #pageRoot .ui-table-frame
  table.cases-table tbody tr.virtual-case-row:hover > td:nth-child(n),
html body.cases-visual-v2 .cases-main #pageRoot .ui-table-frame
  table.cases-table tbody tr.virtual-case-row:hover > :is(td:first-child, td:nth-child(2)) {
  background: var(--ui-row-hover) !important;
  background-color: var(--ui-row-hover) !important;
  box-shadow: none !important;
}

/* App-owned transient surfaces are neutral glass. They intentionally have no
   local gradient: the atmospheric canvas below each popup supplies its cyan
   or lilac hue, so opening a control never creates a second colour field. */

/* Sidebar and page are two regions of one continuous canvas. Keep the single
   structural divider, but remove the bright/dark double edge and side shadow
   that made the two transparent regions look like different backgrounds. */
html body.cases-visual-v2 :is(
  .app-frame.cases-app-frame,
  .sidebar.cases-sidebar,
  .main-shell.cases-main
) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html body.cases-visual-v2 .sidebar.cases-sidebar {
  border-right: 0 !important;
  box-shadow: none !important;
}

/* The backup archive stays on the shared canvas. Only its sticky header paints
   an opaque, viewport-aligned copy of that canvas so scrolled rows disappear
   underneath it without creating a separate coloured table surface. */






/* Status is calculated from the card workflow and is intentionally read-only. */
html body.cases-visual-v2 .cases-main #pageRoot #statusId:disabled {
  opacity: 1 !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* Align the first visible label/icon center with the first Settings navigation
   label. Different page templates have different first-row geometry. */
html body.cases-visual-v2 .cases-main #pageRoot .settings-layout > .settings-content > .settings-empty-panel.ui-frame {
  padding-top: 0 !important;
}

/* The empty-state card spans exactly four sidebar lanes (top of the first
   button to the bottom of the fourth). */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-layout > .settings-content > .settings-empty-panel.ui-frame {
  box-sizing: border-box !important;
  height: calc(var(--settings-lane-height, 54px) * 4 + var(--settings-lane-gap, 12px) * 3) !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-bottom: 0 !important;
}

/* Reference pages sit on the settings sidebar's lanes (measured in
   alignReferenceListViewport): one row per sidebar button line. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-layout > .settings-content > .reference-block.ui-frame {
  padding-top: var(--settings-lane-offset, 0px) !important;
  padding-bottom: 0 !important;
  row-gap: var(--settings-lane-gap, 12px) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content > .reference-block > :is(.reference-add-row, .kancelaria-add-row) {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  height: var(--settings-lane-height, 54px) !important;
  min-height: var(--settings-lane-height, 54px) !important;
  max-height: var(--settings-lane-height, 54px) !important;
  margin: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content > .reference-block > .settings-list {
  row-gap: var(--settings-lane-gap, 12px) !important;
}

/* The add field is a flat row like the list rows below it, so no boxed field
   sits against the card's top edge. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content > .reference-block > :is(.reference-add-row, .kancelaria-add-row) {
  border-bottom: 1px solid var(--ui-data-divider) !important;
  transition: background-color 140ms ease !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content > .reference-block > :is(.reference-add-row, .kancelaria-add-row):is(:hover, :focus-within) {
  background: transparent !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-content .reference-block .settings-new-value-control > input,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-content .reference-block .settings-new-value-control > input:is(:hover, :focus, :focus-visible, :focus-within) {
  padding-left: 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Settings rows stay still under the pointer; only their icon buttons react. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-content :is(
  .reference-block .settings-list > .settings-item,
  .deadline-setting-row,
  .appearance-setting-row,
  .about-tech-card dl > div
):is(:hover, :focus-within){
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Case tables: rows don't light up under the pointer. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .ui-table-frame table.cases-table tbody tr.virtual-case-row:hover > td,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .ui-table-frame table.cases-table tbody tr.virtual-case-row:hover > td:nth-child(n) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* On compact widths the first two columns are frozen glass; keep that fill. */
@media (max-width: 1359.98px) {
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .ui-table-frame table.cases-table tbody tr.virtual-case-row:hover > :is(td:first-child, td:nth-child(2)) {
    background: rgba(244, 248, 252, .34) !important;
    background-color: rgba(244, 248, 252, .34) !important;
  }
}

/* Status is a solid chip in its own colour with white text, so it reads as a
   separate target from the plain incoming-number link beside it. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot :is(.cases-table, .report-preview-table) .status-pill[data-status-color],
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot :is(.cases-table, .report-preview-table) .status-pill[data-status-color]:is(:hover, :focus, :active) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 28px !important;
  /* 1px bottom padding lifts the centred text 0.5px: Georgian words' ink
     sits a little low, so every label ends within 0.5px of the true middle. */
  padding: 0 5px 1px !important;
  color: var(--case-status-text, #ffffff) !important;
  -webkit-text-fill-color: var(--case-status-text, #ffffff) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--case-status-color) !important;
  background-color: var(--case-status-color) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Backup: the toolbar/header boundary gets the same divider as header/rows,
   and the last row stops on its lane's bottom edge so the card ends there. */
/* The scroll wrapper's rounded clip would cut the ends of the top divider. */










/* Lower settings pages: rows on the sidebar lanes, cards span exactly them. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-layout > .settings-content > :is(.appearance-settings-panel, .cases-about-page).ui-frame {
  padding-top: var(--settings-lane-offset, 0px) !important;
  padding-bottom: 0 !important;
  gap: var(--settings-lane-gap, 12px) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content .appearance-setting-row,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .cases-about-page .about-tech-card dl > div,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .cases-about-page > .about-footer {
  height: var(--settings-lane-height, 54px) !important;
  min-height: var(--settings-lane-height, 54px) !important;
  max-height: var(--settings-lane-height, 54px) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .cases-about-page .about-tech-card dl {
  gap: var(--settings-lane-gap, 12px) !important;
}

/* About rows: a divider centred in the gap below each row, footer excluded. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .cases-about-page .about-tech-card dl > div {
  position: relative !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .cases-about-page .about-tech-card dl > div::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(var(--settings-lane-gap, 12px) / -2 - 0.5px) !important;
  height: 1px !important;
  background: var(--ui-data-divider) !important;
  pointer-events: none !important;
}









/* The card spans exactly the two lanes its rows occupy. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-layout > .settings-content > .deadline-settings-panel.ui-frame {
  padding-top: var(--settings-lane-offset, 0px) !important;
  padding-bottom: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content .deadline-settings-fields {
  gap: var(--settings-lane-gap, 12px) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content .deadline-settings-fields > .deadline-setting-row {
  height: var(--settings-lane-height, 54px) !important;
  min-height: var(--settings-lane-height, 54px) !important;
  max-height: var(--settings-lane-height, 54px) !important;
}

/* The overview keeps one shared nine-column guide: the first lane is wide
   enough for the longest mobile-group name, while the other eight stay equal. */
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame {
  /* The first lane is as wide as a group's two people need (a third wraps under the first), with the same room on both sides. */
  --home-names-lane: 268px;
  /* The lane's track ends where the longest names end (36px short of the lane); then come eight figure tracks of one width, with a gap before each: the first gap is 0.4 of the others (24px at least) (the names' side pulls the figures in), the room it gives goes to the others. The cards above and the rows below stand on the same tracks. */
  --home-overview-columns: calc(var(--home-names-lane) - 36px) minmax(24px, .4fr) var(--home-number-lane, 64px) repeat(7, 1fr var(--home-number-lane, 64px));
}

@media (min-width: 1500px) {
  html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame { --home-names-lane: 300px; }
}

html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-summary-grid,
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-mobile-table tr {
  grid-template-columns: var(--home-overview-columns) !important;
  column-gap: 0 !important;
  justify-content: normal !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-summary-grid > :nth-child(1),
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-mobile-table tr > :nth-child(1) { grid-column: 1 !important; }
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-summary-grid > :nth-child(2),
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-mobile-table tr > :nth-child(2) { grid-column: 3 !important; }
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-summary-grid > :nth-child(3),
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-mobile-table tr > :nth-child(3) { grid-column: 5 !important; }
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-summary-grid > :nth-child(4),
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-mobile-table tr > :nth-child(4) { grid-column: 7 !important; }
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-summary-grid > :nth-child(5),
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-mobile-table tr > :nth-child(5) { grid-column: 9 !important; }
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-summary-grid > :nth-child(6),
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-mobile-table tr > :nth-child(6) { grid-column: 11 !important; }
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-summary-grid > :nth-child(7),
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-mobile-table tr > :nth-child(7) { grid-column: 13 !important; }
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-summary-grid > :nth-child(8),
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-mobile-table tr > :nth-child(8) { grid-column: 15 !important; }
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-summary-grid > :nth-child(9),
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-mobile-table tr > :nth-child(9) { grid-column: 17 !important; }
/* The first column's content is as wide as the lane was, from its start (a card or the names). */
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-summary-grid > :first-child,
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-mobile-table tr > :first-child {
  width: var(--home-names-lane) !important;
  max-width: none !important;
  justify-self: start !important;
}

/* The first and last columns stand on the page's own guides: left, the page title's pictogram; right, the toolbar's last pictogram (the bell). The last column is as wide as the widest figure (the card's, four digits), its figures and its card centred in it, so the widest figure ends on the close button's pictogram's line and the card stands in the middle of its figures. */
/* The first card stands over the names' own span (the lane less its 36px of room, from the names' pictograms): its pictogram and figure are centred over the names. */
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-summary-grid > :first-child { width: calc(var(--home-names-lane) - 36px) !important; margin-left: -3px !important; }

html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-summary-grid > :last-child,
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-mobile-table tr > :last-child { justify-self: end !important; width: var(--home-number-lane, 64px) !important; margin-right: 0 !important; text-align: center !important; }

html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table .home-group-name {
  padding-inline: 6px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-overflow: clip !important;
}

/* Home chart vertical optical balance: keep equal breathing room above the
   first value row and below the category labels inside the chart frame, and
   distribute the horizontal guide lines evenly between the top values and the
   bottom category labels. */
html body.cases-visual-v2 .cases-main #pageRoot > .home-single-chart-panel.ui-frame > .home-chart-card {
  --home-chart-edge-space: 16px;
  --home-chart-grid-edge-space: 20px;
}

html body.cases-visual-v2 .cases-main #pageRoot > .home-single-chart-panel.ui-frame .home-chart-body {
  box-sizing: border-box !important;
  padding-block: var(--home-chart-edge-space) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot > .home-single-chart-panel.ui-frame .home-chart-grid {
  top: var(--home-chart-grid-edge-space) !important;
  bottom: var(--home-chart-grid-edge-space) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot > .home-single-chart-panel.ui-frame .home-chart-column {
  grid-template-rows: 18px minmax(0, 1fr) auto !important;
}

html body.cases-visual-v2 .cases-main #pageRoot > .home-single-chart-panel.ui-frame .home-chart-label {
  align-self: end !important;
  padding-bottom: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Final divider rhythm                                                       */
/* -------------------------------------------------------------------------- */

/* New Card, Current and Archive establish the canonical 24px distance from
   the main divider to the first content frame. Use that same distance on the
   navigation side, and keep Home on the same content guide instead of moving
   only its two frames. */
html body.cases-visual-v2 {
  --ui-page-frame-gap: 24px;
  --ui-panel-inset: 20px;
  --ui-control-stack-gap: 12px;
  --ui-sidebar-row-height: 54px;
  --ui-sidebar-row-gap: 12px;
  /* Every settings panel spans the same width as the lists (was 640px for the short pages). */
  --ui-divider-frame-gap: var(--ui-page-frame-gap);
  /* The menu column: the buttons (the longest name of the settings' menu with its icon is 126px, in 24px paddings) and the margins around them. */
  --cases-nav-w: 176px;
}

html body.cases-visual-v2 .cases-sidebar .cases-sidebar-nav > :is(
  .nav-main-group,
  .nav-bottom-group
) {
  width: var(--cases-nav-w, 252px) !important;
  min-width: var(--cases-nav-w, 252px) !important;
  max-width: var(--cases-nav-w, 252px) !important;
  padding: 0 !important;
  border-width: 0 !important;
}

html body.cases-visual-v2 .cases-sidebar #navList#navList > :is(
  .nav-main-group,
  .nav-bottom-group
) > .nav-item {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

html body.cases-visual-v2 .cases-main #pageRoot > :is(
  .home-overview-frame,
  .home-single-chart-panel
) {
  position: static !important;
  left: auto !important;
  width: 100% !important;
  margin-left: 0 !important;
}

/* Settings has two structural dividers: the existing app/sidebar boundary and
   a second full-height divider between the Settings navigation and content.
   Explicit grid columns keep 24px of clear space on every visible side. */
html body.cases-visual-v2 .cases-app-frame:has(#pageRoot .settings-layout)::before {
  content: none !important;
  display: none !important;
}

html body.cases-visual-v2 .cases-app-frame:has(#pageRoot .settings-layout) > .sidebar.cases-sidebar {
  border-right: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-layout {
  position: relative !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  grid-template-columns: var(--cases-nav-w, 252px) 1px minmax(0, 1fr) !important;
  column-gap: var(--ui-divider-frame-gap) !important;
}

/* A transformed ancestor turns position:fixed into a local positioning
   context. Settings needs a true viewport-height structural divider, so this
   page does not retain the generic 4px entrance transform after rendering. */
html body.cases-visual-v2 .cases-main #pageRoot:has(.settings-layout) {
  animation: none !important;
  transform: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-layout::before {
  content: none !important;
  display: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-layout > .settings-vertical-divider {
  position: fixed !important;
  z-index: 3 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: calc(var(--cases-sidebar-w, calc(var(--cases-nav-w, 176px) + 2 * var(--ui-divider-frame-gap, 24px))) + var(--ui-divider-frame-gap) + var(--cases-nav-w, 252px) + var(--ui-divider-frame-gap)) !important;
  right: auto !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-layout > .settings-sidebar.ui-frame {
  grid-column: 1 !important;
  width: var(--cases-nav-w, 252px) !important;
  min-width: var(--cases-nav-w, 252px) !important;
  max-width: var(--cases-nav-w, 252px) !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* 2027 symbiosis: atmospheric minimalism + selective transient glass          */
/* -------------------------------------------------------------------------- */

body.cases-visual-v2 {
  --atmos-regatta: #4f7fb5;
  --atmos-canvas-image:
    linear-gradient(171deg, transparent 0 6.72%, rgba(255, 255, 255, .26) 6.78%, rgba(255, 255, 255, .10) 7.02%, transparent 7.08%),
    linear-gradient(171deg, transparent 0 7.16%, rgba(37, 67, 89, .032) 7.22%, rgba(37, 67, 89, .014) 8.35%, transparent 10.4%),
    linear-gradient(158deg, transparent 0 30.74%, rgba(255, 255, 255, .22) 30.80%, rgba(255, 255, 255, .09) 31.02%, transparent 31.08%),
    linear-gradient(158deg, transparent 0 31.16%, rgba(49, 61, 91, .028) 31.22%, rgba(49, 61, 91, .012) 33.1%, transparent 36.2%),
    linear-gradient(163deg, transparent 0 19.76%, rgba(255, 255, 255, .12) 19.84%, transparent 20.16%),
    linear-gradient(154deg, transparent 0 51.72%, rgba(255, 255, 255, .11) 51.82%, transparent 52.18%),
    linear-gradient(163deg, transparent 0 20%, rgba(111, 168, 204, .075) 20.08%, rgba(111, 168, 204, .025) 38%, transparent 38.12%),
    linear-gradient(154deg, transparent 0 52%, rgba(137, 136, 168, .045) 52.08%, rgba(137, 136, 168, .016) 69%, transparent 69.12%),
    linear-gradient(171deg, transparent 0 7%, rgba(var(--cases-primary-rgb, 79, 127, 181), .11) 7.06%, rgba(var(--cases-primary-rgb, 79, 127, 181), .11) 7.13%, transparent 7.2%),
    linear-gradient(158deg, transparent 0 31%, rgba(137, 136, 168, .10) 31.06%, rgba(137, 136, 168, .10) 31.13%, transparent 31.2%),
    linear-gradient(135deg, #e3ebef 0%, #dfe8ed 48%, #dce5eb 100%);
  --v2-ink: #2d4556;
  --v2-ink-strong: #1c3446;
  --v2-blue: var(--atmos-regatta);
  --v2-primary-purple: var(--atmos-regatta);
  --v2-focus: var(--atmos-regatta);
  --v2-focus-ring: rgba(var(--cases-primary-rgb, 79, 127, 181), .17);
  --v2-line: rgba(111, 168, 204, .28);
  --v2-line-strong: rgba(var(--cases-primary-rgb, 79, 127, 181), .42);
  --v2-control-border: rgba(var(--cases-primary-rgb, 79, 127, 181), .30);
  --ui-control-border: rgba(var(--cases-primary-rgb, 79, 127, 181), .30);
  --ui-control-border-hover: rgba(var(--cases-primary-rgb, 79, 127, 181), .62);
  --ui-frame-border: rgba(111, 168, 204, .31);
  --ui-data-divider: rgba(111, 168, 204, .26);
  --ui-interaction-tint: rgba(175, 201, 223, .22);
  --ui-row-hover: rgba(175, 201, 223, .18);
  --v2-table-hover: rgba(175, 201, 223, .18);
  background: var(--atmos-canvas-image) !important;
  background-attachment: fixed !important;
  background-position: 0 0 !important;
  background-size: 100vw 100vh !important;
}

/* Permanent frames avoid blur; their depth comes only from restrained light
   and shadow. Glass remains reserved for temporary context. */
html body.cases-visual-v2 .cases-main #pageRoot :is(
  .ui-frame,
  .ui-table-frame,
  .cases-card,
  .reference-row,
  .reference-add-row
) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body.cases-visual-v2 :is(
  .styled-autofill-popup,
  .styled-select-popup,
  .styled-calendar-popup,
  .styled-hover-tooltip,
  .home-chart-detail-popup,
  .deadline-notification-popup,
  .municipality-employee-popover,
  .status-color-popover,
  .case-filter-popover,
  .app-confirm-dialog,
  .app-prompt-dialog,
  .toast-item
) {
  border-color: transparent !important;
  background: rgba(247, 250, 253, .42) !important;
  background-color: rgba(247, 250, 253, .42) !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -1px 0 rgba(64, 96, 121, .045),
    0 2px 4px rgba(38, 61, 79, .075),
    0 14px 28px -12px rgba(38, 61, 79, .30) !important;
  backdrop-filter: blur(24px) saturate(1.10) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.10) !important;
}

/* Mobile groups use the compact category-icon language from the layered
   concept without changing the matrix columns or any filter behaviour. */
html body.cases-visual-v2 .cases-main #pageRoot .home-group-identity {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-inline: 6px !important;
}


/* Donut summary alongside the complete, viewport-fitted legend. */
html body.cases-visual-v2 .home-chart-detail-body {
  display: grid !important;
  grid-template-columns: 108px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
}

html body.cases-visual-v2 .home-chart-detail-donut {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 104px !important;
  height: 104px !important;
}

html body.cases-visual-v2 .home-chart-detail-donut > svg {
  width: 104px !important;
  height: 104px !important;
  overflow: visible !important;
  transform: rotate(-90deg) !important;
}

html body.cases-visual-v2 .home-chart-detail-donut-track {
  stroke: rgba(91, 132, 171, .12) !important;
  stroke-width: 13px !important;
}

html body.cases-visual-v2 .home-chart-detail-donut-segment {
  stroke-width: 13px !important;
  stroke-linecap: butt !important;
  animation: home-chart-detail-donut-in .22s ease both !important;
}

html body.cases-visual-v2 .home-chart-detail-donut > span {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--v2-ink) !important;
  line-height: 1.05 !important;
  pointer-events: none !important;
}

html body.cases-visual-v2 .home-chart-detail-donut > span > strong {
  font-size: var(--type-heading) !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
}

html body.cases-visual-v2 .home-chart-detail-donut > span > small {
  margin-top: 4px !important;
  color: var(--v2-muted) !important;
  font-size: var(--type-micro) !important;
  font-weight: 400 !important;
}

@keyframes home-chart-detail-donut-in {
  from { opacity: 0; stroke-dashoffset: 100; }
  to { opacity: 1; }
}

@media (max-width: 760px) {
  html body.cases-visual-v2 .home-chart-detail-body {
    grid-template-columns: 1fr !important;
  }

  html body.cases-visual-v2 .home-chart-detail-donut {
    margin-inline: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.cases-visual-v2 .home-chart-detail-donut-segment {
    animation: none !important;
  }
}

/* Preserve the shared first-row optical guide after the palette refresh. */
html body.cases-visual-v2 .cases-main #pageRoot .settings-content .reference-add-row > label {
  position: relative !important;
  top: 0 !important;
}



/* Main/Home is the immutable vertical and typographic reference. Report's
   visible section title needs a text-only correction; Settings instead moves
   its complete navigation lane so its icon and label keep one shared axis. */
html body.cases-visual-v2 .cases-main #pageRoot #reportPanel
  .report-builder-section-title h3.ui-section-title {
  position: relative !important;
  top: -5.2px !important;
  font-size: var(--type-body) !important;
  line-height: 1.35 !important;
}


/* The first visible Settings page label is the page-side continuation of the
   first navigation lane, so both its center line and typography match. */
html body.cases-visual-v2 .cases-main #pageRoot .settings-content
  .reference-add-row > label {
  font-size: var(--type-body) !important;
  line-height: 1.35 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-layout > .settings-content {
  grid-column: 3 !important;
}

/* Report has no outer page frame, so its field card is the first visible
   surface. Remove only the redundant 14px horizontal inset; the vertical
   breathing room stays unchanged. Its visible rows now share the same 24px
   page guide as New Card and both case tables. */
html body.cases-visual-v2 .cases-main #pageRoot #reportPanel
  .report-field-card.report-unified-field-card {
  box-sizing: border-box !important;
  padding: 14px var(--ui-panel-inset) !important;
  border-color: transparent !important;
  border-radius: var(--ui-frame-radius) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 2px 2px -2px rgba(255, 255, 255, .42),
    inset 0 -1px 0 rgba(64, 96, 121, .03),
    0 -1px 2px rgba(38, 61, 79, .05),
    0 1px 2px rgba(38, 61, 79, .05),
    0 3px 5px -4px rgba(38, 61, 79, .12) !important;
}

/* Settings' direct page wrappers are intentionally frameless. Their legacy
   20px horizontal padding therefore reads as extra empty space before the
   first real control. Keep the established vertical padding, but place every
   visible control/table frame on the shared 24px divider guide. */
html body.cases-visual-v2 .cases-main #pageRoot .settings-layout > .settings-content > :is(
  .reference-block.ui-frame,
  .deadline-settings-panel.ui-frame,
  .backup-list-panel.ui-frame,
  .cases-about-page.ui-frame
) {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* Mobile-group rows use one neutral people glyph. It remains visually
   separate from the group name and never contributes text to hover labels. */




/* -------------------------------------------------------------------------- */
/* 2027 dashboard component language                                           */
/* -------------------------------------------------------------------------- */

/* Selected metric-card option 1: a centered vertical title / icon / value
   stack on the shared canvas, while retaining every existing filter action. */
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card {
  --metric-color: var(--cases-primary, #4f7fb5);
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-content: stretch !important;
  align-items: center !important;
  gap: 0 !important;
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
  padding: 7px !important;
  overflow: visible !important;
  border: 1px solid rgba(91, 132, 171, .20) !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card[data-card-tone="indigo"] { --metric-color: #8988a8; }
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card[data-card-tone="amber"] { --metric-color: #b79b4c; }
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card[data-card-tone="orange"] { --metric-color: #d28a4a; }
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card[data-card-tone="blurple"] { --metric-color: #7d88c4; }
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card[data-card-tone="violet"] { --metric-color: #6fa8cc; }
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card[data-card-tone="cyan"] { --metric-color: #4ea9a4; }
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card[data-card-tone="teal"] { --metric-color: #738b7d; }
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card[data-card-tone="slate"] { --metric-color: #7895b5; }

html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card::before {
  content: none !important;
  display: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card:is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--metric-color) 32%, transparent) !important;
  background: transparent !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card,
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card:is(:hover, :focus-within) {
  border-color: transparent !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card .home-summary-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  color: var(--metric-color) !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  -webkit-line-clamp: unset !important;
}
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card .home-summary-icon,
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card .home-summary-icon:is(:hover,:focus,:focus-visible,:active),
html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-icon {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card[data-summary-key="signing"] .home-summary-icon > svg rect {
  fill: currentColor !important;
  stroke: none !important;
}

html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-icon > svg.archive-source-icon {
  width: 20px !important; min-width: 20px !important; max-width: 20px !important;
  height: 20px !important; min-height: 20px !important; max-height: 20px !important;
  fill: none !important;
  stroke: none !important;
}
html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-icon > svg.current-source-icon {
  width: 20px !important; min-width: 20px !important; max-width: 20px !important;
  height: 20px !important; min-height: 20px !important; max-height: 20px !important;
  fill: none !important;
  stroke: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card > .home-summary-copy {
  display: grid !important;
  grid-template-rows: 16px 60px !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  color: inherit !important;
  text-align: center !important;
  white-space: normal !important;
  -webkit-line-clamp: unset !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card .home-summary-value-row {
  display: grid !important;
  grid-template-rows: 24px 27px !important;
  align-items: center !important;
  justify-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 59px !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card .home-count-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  min-width: 0 !important;
  height: 27px !important;
  min-height: 27px !important;
  padding: 0 !important;
  color: var(--v2-ink-strong) !important;
  font-family: "Cases Inter Embedded", Inter, sans-serif !important;
  font-size: var(--type-display) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: default !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card .home-count-button:is(:hover, :focus, :focus-visible) {
  color: var(--v2-ink-strong) !important;
  text-decoration: none !important;
  outline: 0 !important;
  box-shadow: none !important;
}






/* Text avatars provide the people-list rhythm without introducing fictional
   profile photography. Multiple surnames are represented by stacked initials. */






/* The donut is a permanent compact summary in the existing chart frame. */






























@media (max-width: 1359px) {
  html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding-inline: 4px !important;
  }

  html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card .home-summary-icon {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
  }

  

  

  
}

/* -------------------------------------------------------------------------- */
/* Settings content safe area — authoritative final override                  */
/* -------------------------------------------------------------------------- */

/* Editor cards are frameless like every page frame: the same 20px inset. */
html body.cases-visual-v2 .cases-main #pageRoot .cases-editor-panel > .cases-card {
  padding: var(--ui-panel-inset) !important;
}

/* The repeat heading has a 9px intrinsic text-to-lane remainder; an 11px list
   margin completes the same visible 20px heading/control interval. */



html body.cases-visual-v2 .cases-main #pageRoot .settings-layout > .settings-content > :is(
  .reference-block.ui-frame,
  .deadline-settings-panel.ui-frame,
  .backup-list-panel.ui-frame,
  .cases-about-page.ui-frame,
  .settings-empty-panel.ui-frame,
  .appearance-settings-panel.ui-frame
) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-right: auto !important;
  margin-left: 0 !important;
  padding-right: var(--ui-panel-inset) !important;
  padding-left: var(--ui-panel-inset) !important;
}

/* Data lists use the shared right page edge; short settings stay readable. */

html body.cases-visual-v2 .cases-main #pageRoot .settings-content :is(
  .settings-list,
  .settings-list-expanded,
  .about-tech-card dl
) {
  gap: var(--ui-control-stack-gap) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page :is(
  .about-info-grid,
  .about-info-card,
  .about-tech-card,
  .about-tech-card dl,
  .about-tech-card dl > div,
  .about-footer
) {
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card > .home-summary-copy {
  grid-template-rows: 1fr !important; width: 100% !important; height: 100% !important; gap: 0 !important;
}
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card .home-summary-value-row {
  grid-template-rows: 30px 30px !important; gap: 12px !important; height: 72px !important;
  transform: translateY(2px) !important;
}
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card .home-summary-icon {
  width: 30px !important; min-width: 30px !important; max-width: 30px !important;
  height: 30px !important; min-height: 30px !important; max-height: 30px !important;
  border: 0 !important; border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card .home-summary-icon:is(:hover,:focus-visible) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  outline: 0 !important;
}
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card .home-summary-icon > svg {
  width: 30px !important; min-width: 30px !important; max-width: 30px !important;
  height: 30px !important; min-height: 30px !important; max-height: 30px !important; stroke-width: 1.8 !important;
  transform: none !important;
  transition: none !important;
}

/* All summary pictograms share one optical canvas. This final override keeps
   legacy per-status sizing rules from changing their visible proportions. */
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card .home-count-button {
  height: 30px !important; min-height: 30px !important; font-size: var(--type-hero) !important;
}

/* Clean vector rendering. Motion is intentionally limited to a tiny pressed
   response; hover never redraws, rotates or fades the pictogram. */
html body.cases-visual-v2 :is(.cases-sidebar .nav-icon svg,.settings-sidebar .settings-nav-icon svg,.home-summary-icon svg,.sidebar-cloud-icon svg,.ui-icon-button svg,.icon-action svg) {
  transform-box: fill-box;
  transform-origin: center;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}
html body.cases-visual-v2 :is(.ui-icon-button,.icon-action):active svg {
  transform: scale(.94);
  transition: transform 90ms ease-out;
}

/* Summary metrics stay completely static. Their icons are navigation targets,
   but neither the card nor the pictogram moves, redraws or changes surface on
   hover/focus. */
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card,
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card:is(:hover,:focus-within),
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card .home-summary-icon:is(:hover,:focus,:focus-visible,:active) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* FINAL SURFACE HIERARCHY
   Keep the shared atmospheric canvas unchanged. Permanent content surfaces
   are cut from the same material, only about one lightness step brighter. */
html body.cases-visual-v2 .cases-main #pageRoot :is(
  .home-overview-frame,
  .home-single-chart-panel.ui-frame,
  .cases-editor-panel > .cases-card,
  #reportPanel.report-builder-page.ui-frame,
  .case-list-page > .cases-table-shell.ui-table-frame,
  .backup-list-panel .backup-table-shell.ui-table-frame,
  .settings-content > .reference-block.ui-frame,
  .settings-content > .deadline-settings-panel.ui-frame,
  .settings-content > .backup-list-panel.ui-frame,
  .settings-content > .cases-about-page.ui-frame,
  .settings-content > .settings-empty-panel.ui-frame
) {
  border-color: transparent !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.11)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    -2px -2px 5px rgba(255,255,255,.32),
    0 4px 7px -5px rgba(51,72,91,.20) !important;
}

/* Navigation tiles keep enough rhythm for isolated elevation. */
html body.cases-visual-v2 .cases-sidebar .cases-sidebar-nav > :is(.nav-main-group,.nav-bottom-group),
html body.cases-visual-v2 .cases-main #pageRoot .settings-layout > .settings-sidebar.ui-frame {
  gap: var(--ui-sidebar-row-gap) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-content:has(> .cases-about-page) {
  box-sizing: border-box !important;
  min-height: 0 !important;
  padding-bottom: 16px !important;
  /* Match sibling pages: auto on one axis clips the frame shadow on both. */
  overflow: visible !important;
}

/* -------------------------------------------------------------------------- */
/* ABSOLUTE FINAL OVERRIDES — keep this block at the physical end of the file */
/* -------------------------------------------------------------------------- */

/* A clearly deeper shared canvas; raised content remains one restrained step
   lighter, preserving hierarchy without returning to separate page colours. */
html body.cases-visual-v2 {
  --atmos-canvas-image:
    linear-gradient(171deg, transparent 0 6.72%, rgba(255,255,255,.18) 6.78%, rgba(255,255,255,.05) 7.02%, transparent 7.08%),
    linear-gradient(171deg, transparent 0 7.16%, rgba(37,67,89,.016) 7.22%, rgba(37,67,89,.006) 8.35%, transparent 10.4%),
    linear-gradient(158deg, transparent 0 30.74%, rgba(255,255,255,.16) 30.80%, rgba(255,255,255,.045) 31.02%, transparent 31.08%),
    linear-gradient(158deg, transparent 0 31.16%, rgba(49,61,91,.015) 31.22%, rgba(49,61,91,.006) 33.1%, transparent 36.2%),
    linear-gradient(163deg, transparent 0 19.76%, rgba(255,255,255,.08) 19.84%, transparent 20.16%),
    linear-gradient(154deg, transparent 0 51.72%, rgba(255,255,255,.065) 51.82%, transparent 52.18%),
    linear-gradient(163deg, transparent 0 20%, rgba(91,148,183,.036) 20.08%, rgba(91,148,183,.012) 38%, transparent 38.12%),
    linear-gradient(154deg, transparent 0 52%, rgba(120,119,153,.026) 52.08%, rgba(120,119,153,.008) 69%, transparent 69.12%),
    linear-gradient(171deg, transparent 0 7%, rgba(68,112,158,.045) 7.06%, rgba(68,112,158,.045) 7.13%, transparent 7.2%),
    linear-gradient(158deg, transparent 0 31%, rgba(120,119,153,.040) 31.06%, rgba(120,119,153,.040) 31.13%, transparent 31.2%),
    linear-gradient(135deg, #f2f6f8 0%, #eff4f6 48%, #edf2f5 100%) !important;
  background: var(--atmos-canvas-image) !important;
  background-attachment: fixed !important;
  background-position: 0 0 !important;
  background-size: 100vw 100vh !important;
}

/* RESTORED CLEAN ELEVATION
   Keep the current palette separation, but restore the earlier readable
   light/shadow geometry and responsive interaction. */
html body.cases-visual-v2 .cases-main #pageRoot :is(
  .home-overview-frame,
  .home-single-chart-panel.ui-frame,
  .cases-editor-panel > .cases-card,
  #reportPanel.report-builder-page.ui-frame,
  .case-list-page > .cases-table-shell.ui-table-frame,
  .settings-content > .reference-block.ui-frame,
  .settings-content > .deadline-settings-panel.ui-frame,
  .settings-content > .backup-list-panel.ui-frame,
  .settings-content > .cases-about-page.ui-frame,
  .settings-content > .settings-empty-panel.ui-frame
) {
  border: 0 !important;
  background: linear-gradient(145deg, rgba(255,255,255,.25), rgba(255,255,255,.11)) !important;
  box-shadow:
    -3px -3px 8px rgba(255,255,255,.42),
    4px 6px 12px rgba(45,67,85,.095) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot :is(
  .settings-content input,
  .settings-content select,
  .settings-content textarea,
  .report-unified-row,
  .ui-toolbar-control
) {
  border-color: rgba(var(--cases-primary-rgb, 79, 127, 181),.34) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.42),
    0 3px 7px rgba(45,67,85,.06) !important;
  transition: border-color 160ms ease, box-shadow 180ms ease, background-color 180ms ease !important;
}

html body.cases-visual-v2 .cases-main #pageRoot :is(
  .settings-content input,
  .settings-content select,
  .settings-content textarea,
  .report-unified-row,
  .ui-toolbar-control
):hover {
  border-color: rgba(var(--cases-primary-rgb, 79, 127, 181),.58) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.52),
    0 4px 9px rgba(45,67,85,.085) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot :is(
  .settings-content input,
  .settings-content select,
  .settings-content textarea,
  .ui-toolbar-control
):is(:focus,:focus-visible,:focus-within) {
  border-color: var(--v2-primary-purple) !important;
  box-shadow: 0 0 0 3px var(--v2-focus-ring), 0 4px 10px rgba(45,67,85,.08) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot :is(
  .ui-icon-button,
  .ui-inline-action,
  .ui-field-action,
  .secondary-btn,
  .case-filter-trigger
) {
  border-radius: 7px 7px var(--v2-radius-md) var(--v2-radius-md) !important;
  box-shadow:
    -3px -3px 7px -3px rgba(255,255,255,.62),
    3px -3px 7px -3px rgba(255,255,255,.46),
    3px 5px 9px -5px rgba(45,67,85,.30) !important;
  transition: transform 150ms ease, box-shadow 170ms ease, background-color 170ms ease !important;
}

html body.cases-visual-v2 .cases-main #pageRoot :is(
  .ui-icon-button,
  .ui-inline-action,
  .ui-field-action,
  .secondary-btn,
  .case-filter-trigger
):is(:hover,:focus-visible) {
  box-shadow:
    -4px -4px 8px -4px rgba(255,255,255,.68),
    4px -4px 8px -4px rgba(255,255,255,.50),
    4px 6px 10px -5px rgba(45,67,85,.34) !important;
  transform: translateY(-1px) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot :is(
  .ui-icon-button,
  .ui-inline-action,
  .ui-field-action,
  .secondary-btn,
  .case-filter-trigger
):active {
  box-shadow:
    -2px -2px 5px -3px rgba(255,255,255,.52),
    2px 3px 7px -4px rgba(45,67,85,.28) !important;
  transform: translateY(1px) !important;
}

/* Header notification and table filter keep the New Card save action's clean
   raised frame. Hover must not draw a second border or shift the control. */
html body.cases-visual-v2 .cases-main #pageRoot :is(
  #saveCase,
  #deadlineNotificationButton,
  #caseFilterButton
),
html body.cases-visual-v2 .cases-main #pageRoot :is(
  #saveCase,
  #deadlineNotificationButton,
  #caseFilterButton
):is(:hover,:focus,:focus-visible,:active) {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow:
    -3px -3px 7px -3px rgba(255,255,255,.62),
    3px -3px 7px -3px rgba(255,255,255,.46),
    3px 5px 9px -5px rgba(45,67,85,.30) !important;
  transform: none !important;
}

/* Eight Settings destinations remain complete after the larger 12px rhythm. */
html body.cases-visual-v2 .cases-main #pageRoot .settings-layout > .settings-sidebar.ui-frame {
  height: auto !important;
  min-height: calc((9 * 46px) + (8 * 12px) + 2px) !important;
  max-height: none !important;
  padding-bottom: 2px !important;
  overflow: visible !important;
}

/* Backup table stays frameless inside its page panel; keep the header divider. */










/* FINAL PERMANENT-SURFACE SEPARATION
   Each raised block keeps its own readable top contour. A tight shadow adds
   depth without spilling into the gap and suggesting one shared outer frame. */
html body.cases-visual-v2 .cases-main #pageRoot :is(
  .home-overview-frame,
  .home-single-chart-panel.ui-frame,
  .cases-editor-panel > .cases-card,
  #reportPanel.report-builder-page.ui-frame,
  .case-list-page > .cases-table-shell.ui-table-frame,
  .settings-content > .reference-block.ui-frame,
  .settings-content > .deadline-settings-panel.ui-frame,
  .settings-content > .backup-list-panel.ui-frame,
  .settings-content > .cases-about-page.ui-frame,
  .settings-content > .settings-empty-panel.ui-frame
) {
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 7px 7px var(--v2-radius-md) var(--v2-radius-md) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.44), rgba(255,255,255,.18)) !important;
  box-shadow:
    -3px -3px 7px -3px rgba(255,255,255,.62),
    3px -3px 7px -3px rgba(255,255,255,.46),
    3px 5px 9px -5px rgba(45,67,85,.30) !important;
}


/* Cases pictogram family — clean SF-style outline artwork only. External
   button/nav/calendar frames, dimensions, spacing and interaction surfaces
   remain owned by the existing component rules above. */
html body.cases-visual-v2 :is(
  .cases-sidebar .nav-icon svg.cases-family-icon,
  .settings-sidebar .settings-nav-icon svg.cases-family-icon,
  .home-summary-icon svg.cases-family-icon,
  .sidebar-cloud-icon svg.cases-family-icon,
  .ui-icon-button svg.cases-family-icon,
  .icon-action svg.cases-family-icon,
  .ui-inline-action svg.cases-family-icon,
  .row-icon-action svg.cases-family-icon,
  .date-picker-button svg.cases-family-icon
) {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* ICON FAMILY CORRECTIONS — 2026-08-17
   Fix only pictogram rendering/alignment. Existing external control geometry,
   layout and spacing remain unchanged. */

/* Inner pictogram holders must never create a second frame inside an existing
   navigation cell/card/control. */
html body.cases-visual-v2 :is(
  .cases-sidebar .nav-icon,
  .settings-sidebar .settings-nav-icon,
  .home-summary-icon,
  .sidebar-cloud-icon,
  .button-icon
) {
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Restore every dashboard-card pictogram. Older per-status rules set stroke
   to none with higher specificity, which left only the signature visible. */
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card:is(
  [data-summary-key="active"],
  [data-summary-key="current"],
  [data-summary-key="investigation"],
  [data-summary-key="registration"],
  [data-summary-key="signing"],[data-summary-key="agreement"],
  [data-summary-key="archive"],
  [data-summary-key="all"]
) .home-summary-icon > svg.cases-family-icon {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}


/* Restore Current and Archive in the main sidebar. */
html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-icon > svg.current-source-icon.cases-family-icon,
html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-icon > svg.archive-source-icon.cases-family-icon {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-icon > svg.current-source-icon.cases-family-icon :is(path,rect,circle,line,polyline,polygon,ellipse),
html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-icon > svg.archive-source-icon.cases-family-icon :is(path,rect,circle,line,polyline,polygon,ellipse) {
  fill: none !important;
  stroke: currentColor !important;
}

/* Calendar artwork stays optically centered in its existing control in every
   interaction state. Do not let generic icon motion alter its vertical axis. */
html body.cases-visual-v2 .cases-main #pageRoot .cases-editor-panel .date-entry .date-picker-button,
html body.cases-visual-v2 .cases-main #pageRoot .cases-editor-panel .date-entry .date-picker-button:hover,
html body.cases-visual-v2 .cases-main #pageRoot .cases-editor-panel .date-entry .date-picker-button:focus,
html body.cases-visual-v2 .cases-main #pageRoot .cases-editor-panel .date-entry .date-picker-button:focus-visible,
html body.cases-visual-v2 .cases-main #pageRoot .cases-editor-panel .date-entry .date-picker-button:active {
  top: 50% !important;
  transform: translateY(-50%) !important;
}
html body.cases-visual-v2 .cases-main #pageRoot .cases-editor-panel .date-entry .date-picker-button > svg,
html body.cases-visual-v2 .cases-main #pageRoot .cases-editor-panel .date-entry .date-picker-button:hover > svg,
html body.cases-visual-v2 .cases-main #pageRoot .cases-editor-panel .date-entry .date-picker-button:focus > svg,
html body.cases-visual-v2 .cases-main #pageRoot .cases-editor-panel .date-entry .date-picker-button:focus-visible > svg,
html body.cases-visual-v2 .cases-main #pageRoot .cases-editor-panel .date-entry .date-picker-button:active > svg {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
  transform-origin: center !important;
}

/* One destructive colour for delete/trash pictograms on every page. */
html body.cases-visual-v2 .cases-main #pageRoot :is(
  .delete-action,
  .danger-action,
  .delete-reference,
  .delete-backup,
  [data-report-remove]
),
html body.cases-visual-v2 .cases-main #pageRoot :is(
  .delete-action,
  .danger-action,
  .delete-reference,
  .delete-backup,
  [data-report-remove]
):is(:hover,:focus,:focus-visible,:active) {
  color: var(--v2-red) !important;
}
html body.cases-visual-v2 .cases-main #pageRoot :is(
  .delete-action,
  .danger-action,
  .delete-reference,
  .delete-backup,
  [data-report-remove]
) :is(svg,path,rect,circle,line,polyline,polygon) {
  stroke: currentColor !important;
}

/* ---------------------------------------------------------------------------
   Reports-style content surfaces — 2026. Home, the case editor and the case
   tables now use the exact surface recipe of the Reports field card
   (visual-system.css line ~5652): no panel fill, no border — only a soft
   inset highlight and a faint drop shadow on the shared canvas. Settings is
   intentionally NOT included; its blocks stay filled. Dark mode already gives
   all of these the same surface as Reports via theme.css, so this is
   light-only. Doubled #pageRoot stays ahead of the surface-hierarchy rules
   above without another !important arms race.
   --------------------------------------------------------------------------- */
html[data-theme="light"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot > :is(
  .home-overview-frame,
  .home-single-chart-panel.ui-frame
),
html[data-theme="light"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot .cases-editor-panel > .cases-card,
html[data-theme="light"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot .case-list-page > .cases-table-shell.ui-table-frame,
html[data-theme="light"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot > #servicesFrame.services-frame.ui-frame {
  border: 0 !important;
  border-color: transparent !important;
  border-radius: var(--ui-frame-radius) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 2px 2px -2px rgba(255, 255, 255, .42),
    inset 0 -1px 0 rgba(64, 96, 121, .03),
    0 -1px 2px rgba(38, 61, 79, .05),
    0 1px 2px rgba(38, 61, 79, .05),
    0 3px 5px -4px rgba(38, 61, 79, .12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* The case + backup tables' visible contour is a ::after border overlay —
   Reports has no equivalent, so drop it and let the shell shadow carry the
   edge. */
html[data-theme="light"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot .case-list-page > .cases-table-shell.ui-table-frame::after{
  border: 0 !important;
  box-shadow: none !important;
}

/* Both sidebars' navigation "title" tiles get the same Reports-card surface as
   the page blocks above: transparent fill, no border, only the soft highlight
   and faint drop shadow — replacing the former raised neumorphic fill. Active
   tiles keep their accent rail + tint (handled elsewhere). Light-only. */
html[data-theme="light"] body.cases-visual-v2 .cases-sidebar #navList > :is(.nav-main-group, .nav-bottom-group) > .nav-item:not(.active):not(.sidebar-cloud-status),
html[data-theme="light"] body.cases-visual-v2 .cases-sidebar #navList > :is(.nav-main-group, .nav-bottom-group) > .nav-item:not(.active):not(.sidebar-cloud-status):is(:hover, :focus-visible),
html[data-theme="light"] body.cases-visual-v2 .cases-main #pageRoot .settings-layout > .settings-sidebar.ui-frame > .settings-nav-item:not(.active) {
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 2px 2px -2px rgba(255, 255, 255, .42),
    inset 0 -1px 0 rgba(64, 96, 121, .03),
    0 -1px 2px rgba(38, 61, 79, .05),
    0 1px 2px rgba(38, 61, 79, .05),
    0 3px 5px -4px rgba(38, 61, 79, .12) !important;
}

html[data-theme="light"] body.cases-visual-v2 .cases-sidebar #navList > :is(.nav-main-group, .nav-bottom-group) > .nav-item:not(.active):not(.sidebar-cloud-status):is(:hover, :focus-visible),
html[data-theme="light"] body.cases-visual-v2 .cases-main #pageRoot .settings-layout > .settings-sidebar.ui-frame > .settings-nav-item:not(.active):is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, .34) !important;
}

/* One interaction surface for both sides of the chart toolbar. */
html body.cases-visual-v2 .home-chart-controls {
  --chart-control-text: var(--home-text-color);
  --chart-control-fill: transparent;
  --chart-control-hover: color-mix(in srgb, var(--home-chart-color) 8%, transparent);
  --chart-control-selected: color-mix(in srgb, var(--home-chart-color) 11%, transparent);
  --chart-control-edge: color-mix(in srgb, var(--home-chart-color-strong) 24%, transparent);
  --chart-control-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(38,61,79,.09);
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot :is(
  .home-chart-mode-button, .home-chart-period-button, .home-incoming-select
),
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot :is(
  .home-chart-mode-button, .home-chart-period-button, .home-incoming-select
):is(:hover, :focus, :focus-visible, :active) {
  color: var(--chart-control-text) !important;
  border-color: transparent !important;
  border-radius: 9px !important;
  background: var(--chart-control-fill) !important;
  box-shadow: var(--chart-control-shadow) !important;
  outline: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: background-color 150ms ease, border-color 150ms ease !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot :is(
  .home-chart-mode-button, .home-chart-period-button, .home-incoming-select
):not(:disabled):is(:hover, :active, [aria-expanded="true"]) {
  background: var(--chart-control-hover) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot :is(
  .home-chart-mode-button[aria-pressed="true"],
  .home-chart-period-button[aria-pressed="true"],
  .home-incoming-select-field.is-active > .home-incoming-select
) {
  border-color: var(--chart-control-edge) !important;
  background: var(--chart-control-selected) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot :is(
  .home-chart-mode-button, .home-chart-period-button, .home-incoming-select
):focus-visible {
  outline: 2px solid var(--v2-primary-purple) !important;
  outline-offset: 2px !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot :is(
  .home-chart-mode-button, .home-chart-period-button, .home-incoming-select
):disabled {
  opacity: .45 !important;
  cursor: default !important;
}

/* Settings — every content page block gets the same Reports-card surface
   (transparent fill, no border, soft highlight + shadow). The settings sidebar
   container stays open — its nav tiles are framed individually, like the main
   sidebar. */
html[data-theme="light"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-layout > .settings-content > :is(
  .reference-block.ui-frame,
  .deadline-settings-panel.ui-frame,
  .backup-list-panel.ui-frame,
  .cases-about-page.ui-frame,
  .settings-empty-panel.ui-frame,
  .appearance-settings-panel.ui-frame
) {
  border: 0 !important;
  border-color: transparent !important;
  border-radius: var(--ui-frame-radius) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 2px 2px -2px rgba(255, 255, 255, .42),
    inset 0 -1px 0 rgba(64, 96, 121, .03),
    0 -1px 2px rgba(38, 61, 79, .05),
    0 1px 2px rgba(38, 61, 79, .05),
    0 3px 5px -4px rgba(38, 61, 79, .12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* The chart's two control groups collapse to one pictogram each — mode on
   the left, period filter on the right — opening a small popover with the
   full set of options instead of spreading every option out inline. */
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-controls {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-tier.is-primary,
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-tier.is-secondary {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-group {
  position: relative !important;
  display: inline-flex !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-trigger {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--v2-muted, #6f8191) !important;
  border: 1px solid var(--ui-control-border) !important;
  border-radius: 9px !important;
  background: transparent !important;
  cursor: pointer !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-trigger:hover {
  color: var(--v2-ink) !important;
  border-color: var(--ui-control-border-hover) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-trigger[aria-expanded="true"] {
  color: var(--cases-primary, #4f7fb5) !important;
  border-color: rgba(var(--cases-primary-rgb, 79, 127, 181), .48) !important;
  background: rgba(var(--cases-primary-rgb, 79, 127, 181), .11) !important;
}


html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-popover {
  box-sizing: border-box !important;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  z-index: 60 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  width: 190px !important;
  padding: 6px !important;
  color: var(--v2-ink) !important;
  border: 1px solid var(--ui-control-border) !important;
  border-radius: 12px !important;
  background: var(--v2-surface-strong) !important;
  box-shadow: var(--v2-shadow-float) !important;
  backdrop-filter: blur(22px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.08) !important;
  animation: home-control-popover-in .14s ease !important;
}

@keyframes home-control-popover-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-popover[hidden] {
  display: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-trigger {
  transition: color .12s ease, border-color .12s ease, background-color .12s ease !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-tier.is-primary .home-chart-control-popover {
  left: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-tier.is-secondary .home-chart-control-popover {
  right: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-popover :is(
  .home-chart-mode-button,
  .home-chart-period-button
),
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-popover :is(
  .home-chart-mode-button,
  .home-chart-period-button
):is(:hover, :focus, :focus-visible, :active, [aria-pressed="true"]) {
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  justify-content: flex-start !important;
  transform: none !important;
  animation: none !important;
}

/* The shared chart-control "soft card" shadow (--chart-control-shadow, set
   further up with a doubled #pageRoot#pageRoot to always win) reads as a
   nested frame once nine items are stacked inside this small popover — flatten
   it here with the same specificity trick so it actually overrides. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot :is(
  .home-chart-control-popover .home-chart-mode-button,
  .home-chart-control-popover .home-chart-period-button,
  .home-chart-control-popover .home-incoming-select
),
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot :is(
  .home-chart-control-popover .home-chart-mode-button,
  .home-chart-control-popover .home-chart-period-button,
  .home-chart-control-popover .home-incoming-select
):is(:hover, :focus, :focus-visible, :active) {
  box-shadow: none !important;
  border-color: transparent !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot :is(
  .home-chart-control-popover .home-chart-mode-button[aria-pressed="true"],
  .home-chart-control-popover .home-chart-period-button[aria-pressed="true"],
  .home-chart-control-popover .home-incoming-select-field.is-active > .home-incoming-select
) {
  box-shadow: none !important;
  border-color: transparent !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-popover .home-incoming-selectors {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 3px !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-popover .home-incoming-select-field {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-popover .home-incoming-select,
html body.cases-visual-v2 .cases-main #pageRoot .home-chart-control-popover .home-incoming-select:is(:hover, :focus, :focus-visible) {
  width: 100% !important;
  min-width: 168px !important;
  max-width: none !important;
  text-align: left !important;
  text-align-last: left !important;
  padding-left: 20px !important;
}

/* Identifier / registration-number editor fields: a small pin button opens
   the current value on maps.gov.ge, same as the table's clickable codes. */
html body .cases-editor-panel .text-field-with-action {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
}

html body .cases-editor-panel .text-field-with-action input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html body .cases-editor-panel .map-link-button {
  flex: 0 0 auto !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--v2-muted, #6f8191) !important;
  border: 1px solid var(--ui-control-border) !important;
  border-radius: var(--ui-control-radius, 9px) !important;
  background: transparent !important;
  cursor: pointer !important;
}

html body .cases-editor-panel .map-link-button:hover {
  color: var(--v2-primary-purple) !important;
  border-color: var(--ui-control-border-hover) !important;
}


/* Card editor fields in the settings-row language: no box, just a divider
   under the value. Focus thickens it in blue; a filled field keeps its
   green data-present cue on the line instead of a filled box. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(
  input:not(.native-date-picker):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
),
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(
  input:not(.native-date-picker):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
):is(:hover, :focus, :focus-visible, :focus-within, .has-value, [readonly]) {
  border: 0 !important;
  border-bottom: 1px solid var(--ui-data-divider) !important;
  border-radius: 0 !important;
  padding-left: 2px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 140ms ease, box-shadow 140ms ease !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(
  input:not(.native-date-picker):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
).has-value:not(:focus) {
  border-bottom-color: var(--case-field-filled-line, rgba(34, 197, 94, .85)) !important;
  box-shadow: inset 0 -1px 0 var(--case-field-filled-line, rgba(34, 197, 94, .85)) !important;
}

html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot form#caseForm.cases-editor-panel {
  --case-field-filled-line: rgba(74, 222, 128, .72);
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(
  input:not(.native-date-picker):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
):is(:focus, :focus-visible):not(:disabled):not([readonly]) {
  border-bottom-color: var(--v2-blue) !important;
  box-shadow: inset 0 -1px 0 var(--v2-blue) !important;
}
/* Remaining raised icon buttons use the flat settings-action language. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot :is(
  button.deadline-notification-button,
  button.sketch-action,
  button.editor-save-action,
  button.editor-delete-action,
  form#caseForm button.add-action,
  form#caseForm button.remove-object-row,
  form#caseForm button.remove-registration,
  button.case-filter-trigger,
  button.report-excel-action
),
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot :is(
  button.deadline-notification-button,
  button.sketch-action,
  button.editor-save-action,
  button.editor-delete-action,
  form#caseForm button.add-action,
  form#caseForm button.remove-object-row,
  form#caseForm button.remove-registration,
  button.case-filter-trigger,
  button.report-excel-action
):is(:hover, :focus, :focus-visible, :active) {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  border-radius: var(--ui-control-radius) !important;
  transition: background-color 140ms ease !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot :is(
  button.deadline-notification-button,
  button.sketch-action,
  button.editor-save-action,
  button.editor-delete-action,
  form#caseForm button.add-action,
  form#caseForm button.remove-object-row,
  form#caseForm button.remove-registration,
  button.case-filter-trigger,
  button.report-excel-action
):is(:hover, :focus-visible) {
  background: var(--ui-row-hover) !important;
}

/* Report fields: flat settings-style rows with a divider, no tiles. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .report-unified-list > .report-unified-row,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .report-unified-list > .report-unified-row:is(:hover, :focus-within) {
  border: 0 !important;
  border-bottom: 1px solid var(--ui-data-divider) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .report-unified-row .report-field-title-input,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .report-unified-row .report-field-title-input:is(:hover, :focus, :focus-visible) {
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Report: fields on the left (one vertical list, top-to-bottom = Excel column
   order), filters and a live preview of the export on the right. The panel
   ends on the Exit button's line. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot #reportPanel.report-split {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: var(--ui-frame-radius) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 2px 2px -2px rgba(255, 255, 255, .42),
    inset 0 -1px 0 rgba(64, 96, 121, .03),
    0 -1px 2px rgba(38, 61, 79, .05),
    0 1px 2px rgba(38, 61, 79, .05),
    0 3px 5px -4px rgba(38, 61, 79, .12) !important;
  height: var(--report-panel-height, calc(100vh - 140px)) !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot #reportPanel.report-split > .report-fields-pane {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  row-gap: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--ui-data-divider) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot #reportPanel.report-split .report-builder-section-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 0 0 50px !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 12px 0 20px !important;
  box-shadow: inset 0 -1px 0 var(--ui-data-divider) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot #reportPanel.report-split .report-field-catalog {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  padding: 0 12px 0 20px !important;
  scrollbar-width: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot #reportPanel.report-split .report-unified-list {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}


html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot #reportPanel.report-split .report-unified-row :is(.report-field-title-input, .report-field-static-title) {
  text-align: left !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot #reportPanel.report-split .report-unified-row.is-inactive {
  opacity: .62 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot #reportPanel.report-split > .report-preview-pane {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  height: auto !important;
  max-height: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 var(--ui-frame-radius) var(--ui-frame-radius) 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .report-filter-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-right: 12px !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .report-filter-reset {
  height: 30px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: var(--ui-control-radius) !important;
  background: transparent !important;
  color: var(--v2-blue) !important;
  font-size: var(--type-caption) !important;
  cursor: pointer !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .report-filter-reset:is(:hover, :focus-visible) {
  background: var(--ui-row-hover) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .report-preview-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
}

html body.cases-visual-v2 .cases-main #pageRoot table.report-preview-table {
  table-layout: fixed !important;
  min-width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: var(--type-caption) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot table.report-preview-table :is(th, td) {
  box-sizing: border-box !important;
  height: var(--report-row-height, 44px) !important;
  padding: 0 10px !important;
  border-bottom: 1px solid var(--ui-data-divider) !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
  color: var(--v2-ink) !important;
  background: transparent !important;
}

/* Header like the case tables: frosted, not a painted white strip. Every
   header is its column's filter. */
html body.cases-visual-v2 .cases-main #pageRoot table.report-preview-table th {
  position: static !important;
  padding: 0 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

html body.cases-visual-v2 .cases-main #pageRoot table.report-preview-table th > .report-column-filter-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  height: 50px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--v2-muted) !important;
  font: inherit !important;
  font-size: var(--type-caption) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  cursor: pointer !important;
}

html body.cases-visual-v2 .cases-main #pageRoot table.report-preview-table th > .report-column-filter-trigger:is(:hover, :focus-visible) {
  color: var(--v2-ink-strong) !important;
  outline: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot table.report-preview-table th.is-filtered > .report-column-filter-trigger {
  color: var(--v2-blue) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot table.report-preview-table th > .report-column-filter-trigger > svg {
  flex: 0 0 13px !important;
  width: 13px !important;
  height: 13px !important;
}

html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot table.report-preview-table th > .report-column-filter-trigger {
  color: var(--v2-ink) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .report-preview-scroll {
  scrollbar-width: none !important;
  cursor: default !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .report-preview-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .report-preview-scroll.is-panning {
  cursor: grabbing !important;
  user-select: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .report-filter-row[hidden] {
  display: none !important;
}


html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot #reportPanel.report-split {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    inset 0 -1px 0 rgba(0, 0, 0, .16),
    0 1px 2px rgba(0, 0, 0, .26),
    0 4px 9px -5px rgba(0, 0, 0, .44) !important;
}
/* The table runs edge to edge under its frosted header, like the case tables. */

html body.cases-visual-v2 .cases-main #pageRoot .report-scroll-rail {
  position: absolute !important;
  right: 3px !important;
  z-index: 3 !important;
  width: 10px !important;
  opacity: 0 !important;
  transition: opacity 180ms ease !important;
  cursor: pointer !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .report-scroll-rail[hidden] { display: none !important; }

html body.cases-visual-v2 .cases-main #pageRoot .report-scroll-rail:is(.is-visible, :hover, .is-dragging) { opacity: 1 !important; }

html body.cases-visual-v2 .cases-main #pageRoot .report-scroll-thumb {
  position: absolute !important;
  top: 0 !important;
  right: 2px !important;
  width: 5px !important;
  border-radius: 999px !important;
  background: rgba(var(--cases-primary-rgb, 79, 127, 181), .45) !important;
  transition: width 140ms ease, background-color 140ms ease !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .report-scroll-rail:is(:hover, .is-dragging) .report-scroll-thumb {
  width: 8px !important;
  background: rgba(var(--cases-primary-rgb, 79, 127, 181), .70) !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .report-scroll-bubble {
  position: absolute !important;
  top: 50% !important;
  right: 16px !important;
  padding: 7px 10px !important;
  font-size: var(--type-caption) !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  transform: translateY(-50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 140ms ease !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .report-scroll-rail.is-dragging .report-scroll-bubble:not([hidden]) { opacity: 1 !important; }
/* A small label: the controls' corner, not the windows' (the windows' look is its colours, border and shadow). */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .report-scroll-bubble:not(#cases-win-a):not(#cases-win-b) { border-radius: var(--ui-control-radius) !important; }

/* Header strip outside the scrolling body: rows disappear at its line. */
html body.cases-visual-v2 .cases-main #pageRoot .report-preview-head {
  flex: 0 0 50px !important;
  height: 50px !important;
  overflow: hidden !important;
  box-shadow: inset 0 -1px 0 var(--ui-data-divider) !important;
}

/* Virtual rows: the spacer gives the full height, the body table is moved
   to the rows in view. */
html body.cases-visual-v2 .cases-main #pageRoot .report-preview-scroll { position: relative !important; }
html body.cases-visual-v2 .cases-main #pageRoot .report-preview-spacer { width: 1px !important; }
html body.cases-visual-v2 .cases-main #pageRoot table.report-preview-body-table {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  will-change: transform !important;
}



html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-layout > .settings-content > .reference-block {
  height: var(--reference-panel-height, auto) !important;
  max-height: none !important;
}
/* Pane title: "ველები" and the field count share the strip's centre line. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot #reportPanel.report-split .report-builder-section-title > div {
  display: flex !important;
  align-items: center !important;
  align-self: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot #reportPanel.report-split .report-builder-section-title :is(h3, #reportSelectedCount) {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
  transform: none !important;
  position: static !important;
}
/* Two sizes, as elsewhere in the app: 13px for list text, 11.5px for the
   table (like the case tables) and secondary labels. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot #reportPreview table.report-preview-table td,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot #reportPanel.report-split #reportSelectedCount {
  font-size: var(--type-caption) !important;
}
/* ============================ Card editor ============================= */

/* One column grid for every section, so fields line up top to bottom: five equal columns and a wide third one (the mobile group's, which holds up to three people on one line), then the icon column of the rows' buttons.
   Information: row 1 number, date, mobile group, investigation date, outgoing number, outgoing date; row 2 department and executor over the same columns. */
@media (min-width: 1281px) {
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(.information-row, .cases-object-row, .cases-retrieval-row, .cases-registration-row) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 24px !important;
  }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .information-row > * { min-width: 0 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .information-row-top > .field-incoming-number { grid-column: 1 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .information-row-top > .field-incoming-date { grid-column: 2 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .information-row-top > .field-mobile-group { grid-column: 3 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .information-row-top > .field-investigation-date { grid-column: 4 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .information-row-top > .field-outgoing-number { grid-column: 5 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .information-row-top > .field-outgoing-date { grid-column: 6 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .information-row-bottom > .field-department { grid-column: 1 / span 3 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .information-row-bottom > .field-executor { grid-column: 4 / span 3 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .cases-object-row > :nth-child(1) { grid-column: 1 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .cases-object-row > :nth-child(2) { grid-column: 2 / span 2 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .cases-object-row > :nth-child(3) { grid-column: 4 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .cases-object-row > :nth-child(4) { grid-column: 5 / span 2 !important; }
  /* Registrations are laid out in two columns that meet at the middle of the card: an entry is the number and the two dates; the first stands on the left, the next on the right, the next below the first, and so on. */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel #registrationRows { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 24px !important; align-content: start !important; }
  /* The two dates are exactly as wide as the date fields of the information block (one column of its grid: the list's width less the gaps, over the sum of the column fractions). */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel #registrationRows { container-type: inline-size !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .cases-registration-row { --reg-date-w: calc((100cqw - 5 * 24px) / 7.3); grid-template-columns: minmax(0, 1fr) var(--reg-date-w) var(--reg-date-w) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .cases-registration-row > :nth-child(1) { grid-column: 1 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .cases-registration-row > :nth-child(2) { grid-column: 2 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .cases-registration-row > :nth-child(3) { grid-column: 3 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(.information-row, .cases-object-row, .cases-retrieval-row, .cases-registration-row) { position: relative !important; box-sizing: border-box !important; padding-right: 0 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(.cases-object-row, .cases-retrieval-row, .cases-registration-row) > .row-icon-action { position: absolute !important; right: 0 !important; bottom: 0 !important; margin: 0 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > section.cases-repeat-section > h3.editor-section-title > span { cursor: pointer !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > section.cases-repeat-section > h3.editor-section-title:is(:has(> span:hover), :focus-visible) > span:not(.editor-section-icon) { color: var(--cases-accent) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > section.cases-repeat-section > h3.editor-section-title .editor-section-icon { color: var(--editor-section-accent) !important; }
  /* The registration and notes blocks can be folded: only the title stays; a click on the title unfolds (the notes' title also folds again). */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > section.notes-section > h3.editor-section-title > span { cursor: pointer !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > section.notes-section > h3.editor-section-title:is(:has(> span:hover), :focus-visible) > span:not(.editor-section-icon) { color: var(--cases-accent) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > section.notes-section > h3.editor-section-title .editor-section-icon { color: var(--editor-section-accent) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > section > h3.editor-section-title[role="button"]:focus-visible { outline: none !important; box-shadow: none !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > section.is-collapsed > :not(h3.editor-section-title) { display: none !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > section.notes-section.is-collapsed { height: auto !important; min-height: 0 !important; flex: 0 0 auto !important; }
  /* No icon column: the block's title is its add button (no icon of its own), the delete button in the row's top-right corner (the empty end of the label line) and shows while the row is hovered or has the focus. Every block's lines end at the same place. */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(.cases-object-row, .cases-retrieval-row, .cases-registration-row) > .row-icon-action { position: absolute !important; top: -26px !important; right: 0 !important; bottom: auto !important; margin: 0 !important; opacity: 0 !important; transition: opacity 140ms ease !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(.cases-object-row, .cases-retrieval-row, .cases-registration-row):is(:hover, :focus-within) > .row-icon-action { opacity: 1 !important; }
  /* All three kinds of rows share the same six tracks over the whole width, so a column starts at the same place in every block; in the lower blocks the last field stops one icon column short and the add / delete icon stands in that column. */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .cases-registration-row > .date-field-label { white-space: nowrap !important; }
  /* The numbers and dates are exactly as wide as a field of the information block (one track of its grid: the list's width less the gaps, over the sum of the fractions); the instance takes the rest. */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel #retrievalRows { container-type: inline-size !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .cases-retrieval-row { --ret-field-w: calc((100cqw - 5 * 16px) / 7.9); grid-template-columns: minmax(0, 1fr) repeat(4, var(--ret-field-w)) !important; column-gap: 16px !important; }
  /* Retrievals: an entry is a line of five fields on the information block's tracks (the instance over two tracks, the two dates under that block's date columns); the entries stand one under another. */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .cases-retrieval-row > * { min-width: 0 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .cases-retrieval-row > :nth-child(1) { grid-column: 1 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .cases-retrieval-row > :nth-child(2) { grid-column: 2 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .cases-retrieval-row > :nth-child(3) { grid-column: 3 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .cases-retrieval-row > :nth-child(4) { grid-column: 4 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .cases-retrieval-row > :nth-child(5) { grid-column: 5 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .cases-retrieval-row > .date-field-label { white-space: nowrap !important; }
  /* The line of a date or a map-link field runs on under its icon (no gap between the input and the button), in the colour of the field's line, accent while the field has the focus. */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(.date-entry, .text-field-with-action) { column-gap: 0 !important; gap: 0 !important; }
    html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(.date-entry > .date-picker-button, .text-field-with-action > .ui-field-action) { border-bottom: 1px solid var(--ui-data-divider) !important; border-radius: 0 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(.date-entry, .text-field-with-action):has(> input.has-value:not(:focus)) > :is(.date-picker-button, .ui-field-action) { border-bottom-color: var(--case-field-filled-line, rgba(34, 197, 94, .85)) !important; box-shadow: inset 0 -1px 0 var(--case-field-filled-line, rgba(34, 197, 94, .85)) !important; }
  /* The button stands on the field's line: it never lifts (the line under it would break), only its icon moves. */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(.date-entry > .date-picker-button, .text-field-with-action > .ui-field-action):is(*, :hover, :focus, :focus-visible, :active) { transform: none !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(.date-entry, .text-field-with-action):has(> input:focus:not([readonly])) { --case-entry-line: var(--cases-accent); }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(.date-entry, .text-field-with-action):has(> input:focus:not([readonly])) > :is(.date-picker-button, .ui-field-action) { border-bottom-color: var(--case-entry-line) !important; box-shadow: inset 0 -1px 0 var(--case-entry-line) !important; }
}
/* Section headings: stronger than the field captions, with a coloured icon. */
html body.cases-visual-v2 .cases-main #pageRoot form#caseForm .editor-section-icon { display: inline-flex !important; width: 18px !important; height: 18px !important; color: var(--editor-section-accent) !important; }
html body.cases-visual-v2 .cases-main #pageRoot form#caseForm .editor-section-title.is-info { --editor-section-accent: #4f8fd8; }
html body.cases-visual-v2 .cases-main #pageRoot form#caseForm .editor-section-title.is-property { --editor-section-accent: #28a87b; }
html body.cases-visual-v2 .cases-main #pageRoot form#caseForm .editor-section-title.is-registration { --editor-section-accent: #8a67d5; }
html body.cases-visual-v2 .cases-main #pageRoot form#caseForm .editor-section-title.is-retrieval { --editor-section-accent: #4f46e5; }
html body.cases-visual-v2 .cases-main #pageRoot form#caseForm .editor-section-title.is-note { --editor-section-accent: #df7d39; }

/* Unsaved changes: blue save button with a 2px line under it, like an open tab. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot button#saveCase { position: relative !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot button#saveCase.is-dirty { color: var(--v2-blue) !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot button#saveCase.is-dirty::after {
  content: "" !important;
  position: absolute !important;
  top: auto !important;
  left: 4px !important;
  right: 4px !important;
  bottom: 0 !important;
  width: auto !important;
  height: 2px !important;
  border-radius: 0 !important;
  background: var(--v2-blue) !important;
  box-shadow: none !important;
}

/* Notes fill the room left down to the Exit line: a writing area, no underline. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > .notes-section {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  height: var(--editor-notes-height, auto) !important;
  min-height: 120px !important;
  max-height: none !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > .notes-section > textarea#note,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > .notes-section > textarea#note:is(:hover, :focus, :focus-visible, .has-value) {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 48px !important;
  max-height: none !important;
  padding: 4px 2px !important;
  border: 0 !important;
  box-shadow: none !important;
  line-height: 1.55 !important;
  white-space: pre-wrap !important;
  overflow: auto !important;
  resize: none !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > .notes-section > textarea#note::placeholder {
  color: var(--v2-muted) !important;
  -webkit-text-fill-color: var(--v2-muted) !important;
  opacity: .65 !important;
}
/* Title icon and text share one centre line, 10px apart. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel h3.editor-section-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  line-height: 18px !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel h3.editor-section-title > .editor-section-icon {
  flex: 0 0 18px !important;
  align-self: center !important;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
  transform: none !important;
  position: static !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel h3.editor-section-title > .editor-section-icon > svg.lucide {
  display: block !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  vertical-align: top !important;
}
/* Calendar buttons sit on their field's right edge, like the map pins, so
   the right-most one lines up with the add/delete buttons. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .date-entry > .date-picker-button,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .date-entry > .date-picker-button:is(:hover, :focus, :focus-visible, :active) {
  right: 0 !important;
  margin-right: 0 !important;
}

/* Section titles open their frames: a row as tall as the add button, level
   with it; the frames stand one sidebar gap apart. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel { row-gap: 0 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > section.cases-card > h3.editor-section-title {
  display: flex !important;
  justify-self: stretch !important;
  height: var(--ui-icon-button-size, 34px) !important;
  margin: -9px 0 12px !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > .notes-section > h3.editor-section-title { flex: 0 0 auto !important; margin-bottom: 2px !important; }

/* The add button needs no row of its own: it sits in the frame's top-right
   corner, in the delete-button column, above the first row's delete. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > section.cases-repeat-section {
  position: relative !important;
  min-height: calc(var(--ui-icon-button-size, 34px) + 38px) !important;
}

/* Roomier frames: equal 26px above the first captions and below the last
   fields in every section, and more air between the information rows. */
/* Registration rows scroll inside their frame (hidden scrollbar) once they
   would reach the fixed notes block. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(#objectRows, #retrievalRows, #registrationRows) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  overscroll-behavior: contain !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(#objectRows, #retrievalRows, #registrationRows)::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(#objectRows, #retrievalRows, #registrationRows) { scroll-snap-type: y mandatory !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(#objectRows, #retrievalRows, #registrationRows) > .line-row { scroll-snap-align: start !important; }
/* Room for glyph overhang at the clipped edges; columns stay where they were. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(#objectRows, #retrievalRows, #registrationRows) {
  padding-left: 3px !important;
  padding-right: 3px !important;
  margin-left: -3px !important;
  margin-right: -3px !important;
  width: calc(100% + 6px) !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
/* One-line notes: longer notes scroll inside the line (sizes: the card's lanes below). */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > .notes-section {
  justify-content: flex-start !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > .notes-section > textarea#note,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > .notes-section > textarea#note:is(:hover, :focus, :focus-visible, .has-value) {
  padding: 6px 2px !important;
  line-height: 22px !important;
  scrollbar-width: none !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > .notes-section > textarea#note::-webkit-scrollbar { display: none !important; }
/* Colour code field: paste (Ctrl+V) or type a code; the dot previews it. */





/* "Other colour" is a button that unfolds the in-app picker below it. */
html body.cases-visual-v2 .status-color-popover button.status-color-custom {
  box-sizing: border-box !important;
  width: 100% !important;
  background: transparent !important;
  font: inherit !important;
  font-size: var(--type-caption) !important;
  text-align: left !important;
}
html body.cases-visual-v2 .status-color-popover button.status-color-custom[aria-expanded="true"] { border-color: var(--ui-control-border) !important; }

html body.cases-visual-v2 .status-color-popover .status-color-picker {
  display: grid !important;
  gap: 10px !important;
  margin-top: 8px !important;
}
html body.cases-visual-v2 .status-color-popover .status-color-picker[hidden] { display: none !important; }
html body.cases-visual-v2 .status-color-popover .status-color-picker-area {
  position: relative !important;
  height: 140px !important;
  border-radius: 8px !important;
  background:
    linear-gradient(to top, #000000, rgba(0, 0, 0, 0)),
    linear-gradient(to right, #ffffff, var(--picker-hue, #ff0000)) !important;
  cursor: crosshair !important;
  touch-action: none !important;
}
html body.cases-visual-v2 .status-color-popover :is(.status-color-picker-area-thumb, .status-color-picker-hue-thumb) {
  position: absolute !important;
  width: 14px !important;
  height: 14px !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3) !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}
html body.cases-visual-v2 .status-color-popover .status-color-picker-controls {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
html body.cases-visual-v2 .status-color-popover .status-color-picker-eyedropper {
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--v2-muted) !important;
  cursor: pointer !important;
}
html body.cases-visual-v2 .status-color-popover .status-color-picker-eyedropper[hidden] { display: none !important; }
html body.cases-visual-v2 .status-color-popover .status-color-picker-eyedropper:is(:hover, :focus-visible) { background: var(--ui-row-hover) !important; color: var(--v2-blue) !important; outline: 0 !important; }
html body.cases-visual-v2 .status-color-popover .status-color-picker-eyedropper > svg { width: 18px !important; height: 18px !important; }
html body.cases-visual-v2 .status-color-popover .status-color-picker-preview {
  flex: 0 0 26px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: var(--status-swatch-color) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12) !important;
}
html body.cases-visual-v2 .status-color-popover .status-color-picker-hue {
  position: relative !important;
  flex: 1 1 auto !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) !important;
  cursor: pointer !important;
  touch-action: none !important;
}
html body.cases-visual-v2 .status-color-popover .status-color-picker-hue-thumb { top: 50% !important; }
html body.cases-visual-v2 .status-color-popover .status-color-picker-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
html body.cases-visual-v2 .status-color-popover input.status-color-picker-hex,
html body.cases-visual-v2 .status-color-popover input.status-color-picker-hex:is(:hover, :focus, :focus-visible) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 30px !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-data-divider) !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--v2-ink) !important;
  font-size: var(--type-caption) !important;
  letter-spacing: .04em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}
html body.cases-visual-v2 .status-color-popover input.status-color-picker-hex:focus { border-bottom-color: var(--v2-blue) !important; }
html body.cases-visual-v2 .status-color-popover input.status-color-picker-hex.is-invalid,
html body.cases-visual-v2 .status-color-popover input.status-color-picker-hex.is-invalid:is(:hover, :focus, :focus-visible) { border-bottom-color: #D62F45 !important; }
html body.cases-visual-v2 .status-color-popover .status-color-picker-apply {
  flex: 0 0 auto !important;
  height: 30px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--v2-blue) !important;
  color: #ffffff !important;
  font: inherit !important;
  font-size: var(--type-caption) !important;
  cursor: pointer !important;
}
html body.cases-visual-v2 .status-color-popover .status-color-picker-apply:is(:hover, :focus-visible) { filter: brightness(1.08) !important; outline: 0 !important; }
/* Dark chip text reads thinner than white on colour, so it takes the regular
   weight; white text keeps the light one. */
html body #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot :is(.cases-table, .report-preview-table) .status-pill[data-status-text="dark"],
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .editor-action-strip > .editor-status-chip[data-status-text="dark"] {
  font-weight: 400 !important;
}

/* Calendar buttons sit beside their field, outside its line, like the map pin. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .date-entry {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .date-entry > .date-text-input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding-right: 2px !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .date-entry > .date-picker-button,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .date-entry > .date-picker-button:is(:hover, :focus, :focus-visible, :active) {
  position: static !important;
  flex: 0 0 var(--ui-icon-button-size, 34px) !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
}
/* Sideways arrows at a table header's edges (report and case tables), shown
   while more columns lie that way; centred on the header's height. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .table-column-arrow {
  position: absolute !important;
  top: var(--table-arrow-top, 0px) !important;
  min-height: var(--table-arrow-height, 50px) !important;
  max-height: var(--table-arrow-height, 50px) !important;
  min-width: 24px !important;
  max-width: 24px !important;
  z-index: 4 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: var(--table-arrow-height, 50px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--v2-blue) !important;
  cursor: pointer !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .table-column-arrow.is-before { left: calc(var(--table-arrow-left, 0px) + 3px) !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .table-column-arrow.is-after { right: 3px !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot :is(.report-preview-pane, .cases-table-shell).has-columns-before > .table-column-arrow.is-before,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot :is(.report-preview-pane, .cases-table-shell).has-columns-after > .table-column-arrow.is-after { display: flex !important; }
html body.cases-visual-v2 .cases-main #pageRoot .table-column-arrow:is(:hover, :focus-visible) { background: var(--ui-row-hover) !important; outline: 0 !important; }

/* Case tables: the column window's widths replace the fixed CSS grid. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .cases-table.has-column-window :is(thead tr, tbody tr.virtual-case-row) {
  grid-template-columns: var(--case-grid-template) !important;
}

/* Save / Don't save / Stay: icon buttons, the name shows on hover. */
html body.cases-visual-v2 .app-choice-dialog .app-choice-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 16px !important;
}
html body.cases-visual-v2 .app-choice-dialog .app-choice-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 1px solid var(--ui-control-border) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--v2-muted) !important;
  cursor: pointer !important;
}
html body.cases-visual-v2 .app-choice-dialog .app-choice-button > svg { width: 18px !important; height: 18px !important; }
html body.cases-visual-v2 .app-choice-dialog .app-choice-button.is-primary { border-color: transparent !important; background: var(--v2-blue) !important; color: #ffffff !important; }
html body.cases-visual-v2 .app-choice-dialog .app-choice-button.is-danger { color: #D62F45 !important; }
html body.cases-visual-v2 .app-choice-dialog .app-choice-button:is(:hover, :focus-visible) { outline: 0 !important; filter: brightness(1.06) !important; box-shadow: 0 0 0 2px rgba(23, 105, 210, .25) !important; }

/* Status: the card's state, not an action — top-left of the header strip on
   the "Information" icon's line, far from Save; a label, not a button. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .editor-action-strip > .editor-status-chip {
  position: absolute !important;
  top: 50% !important;
  left: var(--editor-chip-left, 20px) !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-width: 118px !important;
  height: 24px !important;
  padding: 0 14px 1px !important;
  border-radius: 999px !important;
  background: var(--case-status-color) !important;
  box-shadow: none !important;
  color: var(--case-status-text, #ffffff) !important;
  font-size: var(--type-caption) !important;
  font-weight: 300 !important;
  white-space: nowrap !important;
  cursor: default !important;
  user-select: none !important;
  transform: translateY(-50%) !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .editor-action-strip > .editor-status-chip[hidden] { display: none !important; }

/* ==========================================================================
   Design tokens — the colours, surfaces and sizes the rules below use.
   Change a value here and every control, panel and window follows.
   ========================================================================== */
body.cases-visual-v2 {
  /* accents */
  --cases-accent: #2563EB;            /* confirm, add, selected tick, focus line */
  --cases-accent-edge: #4F8FD8;       /* edge stripe of a chosen row */
  --cases-danger: #B34F5D;            /* delete, discard */
  /* icon tints by meaning */
  --cases-tint-time: #D97706;         /* bell, calendar, deadlines */
  --cases-tint-place: #28A87B;        /* map, municipality */
  --cases-tint-group: #4F8FD8;        /* mobile group, employee */
  --cases-tint-filter: #5F79DC;       /* filters, dark theme */
  --cases-tint-history: #8A67D5;      /* history */
  --cases-tint-excel: #1D7A46;        /* Excel export */
  --cases-tint-folder: #D99A2B;       /* data folder */
  --cases-tint-backup: #557FD1;       /* create backup */
  --cases-tint-restore: #16A34A;      /* restore */
  --cases-tint-about: #3AA6A0;        /* diagnostics */
  /* fills */
  --cases-hover-fill: rgba(var(--cases-primary-rgb, 79, 127, 181), .10);
  --cases-selected-fill: var(--v2-blue-soft);
  /* text on windows */
  --cases-ink-strong: var(--v2-ink-strong);
  --cases-ink-muted: var(--v2-muted);
  /* windows */
  --cases-window-bg: rgb(248, 250, 253);
  --cases-window-border: var(--v2-line);
  --cases-window-shadow: 0 18px 44px rgba(38, 61, 79, .20), 0 2px 6px rgba(38, 61, 79, .08);
  --cases-window-radius: 14px;
  --cases-control-radius: 10px;
  --cases-icon-button: 34px;          /* every icon-only button */
  --cases-icon-size: 18px;            /* the icon inside it */
  --cases-window-dialog: 320px;       /* confirm, choice, password */
  --cases-window-list: 480px;         /* history */
  --cases-window-panel: 360px;        /* filters, deadline list */
  --cases-window-picker: 280px;       /* colour, employee */
  --cases-window-menu: 220px;         /* chart menus */
}
html[data-theme="dark"] body.cases-visual-v2 {
  --cases-accent: #5B8DEF;
  --cases-danger: #E07A86;
  --cases-tint-excel: #3FB27A;
  --cases-hover-fill: rgba(255, 255, 255, .07);
  --cases-selected-fill: rgba(95, 121, 220, .16);
  --cases-ink-strong: var(--v2-ink-strong);
  --cases-ink-muted: var(--v2-muted);
  --cases-window-bg: #1d2530;
  --cases-window-border: rgba(154, 175, 191, .20);
  --cases-window-shadow: 0 18px 44px rgba(0, 0, 0, .6);
}

/* Status: an icon in the status colour and the name in a deep shade of the
   same hue, like the section titles; no filled chip, so it never reads as a
   button and any colour stays legible. */
html body #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot :is(.cases-table, .report-preview-table) .status-pill[data-status-color],
html body #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot :is(.cases-table, .report-preview-table) .status-pill[data-status-color]:is(:hover, :focus, :active),
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .editor-action-strip > .editor-status-chip {
  --status-ink: color-mix(in srgb, var(--case-status-color) 58%, #000000);
  justify-content: flex-start !important;
  gap: 7px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--status-ink) !important;
  -webkit-text-fill-color: var(--status-ink) !important;
  font-weight: 400 !important;
}
html[data-theme="dark"] body #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot :is(.cases-table, .report-preview-table) .status-pill[data-status-color],
html[data-theme="dark"] body #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot :is(.cases-table, .report-preview-table) .status-pill[data-status-color]:is(:hover, :focus, :active),
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .editor-action-strip > .editor-status-chip {
  --status-ink: color-mix(in srgb, var(--case-status-color) 62%, #ffffff);
}
html body #pageRoot .status-pill > .status-marker-icon,
html body #pageRoot .editor-status-chip > .status-marker-icon {
  display: inline-flex !important;
  flex: none !important;
  color: var(--case-status-color) !important;
}
html body #pageRoot .status-pill > .status-marker-icon > svg,
html body #pageRoot .editor-status-chip > .status-marker-icon > svg {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
}
html body #pageRoot .status-pill > .status-marker-label {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* On the card the status stands on the "Information" title's line, so it takes
   the title's size: 13px text, 10px after an 18px icon; the status glyphs draw
   smaller inside their box than the info ring, so they get 20px to match its
   ink, centred on the same axis. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .editor-action-strip > .editor-status-chip {
  gap: 10px !important;
  font-size: var(--type-body) !important;
  letter-spacing: -0.01em !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .editor-action-strip > .editor-status-chip > .status-marker-icon {
  width: 18px !important;
  height: 18px !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: visible !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .editor-action-strip > .editor-status-chip > .status-marker-icon > svg {
  flex: none !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  stroke-width: 1.8 !important;
}
/* In the table the icon keeps its 18px box too. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot :is(.cases-table, .report-preview-table) .status-pill > .status-marker-icon > svg {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  max-height: 18px !important;
}
/* The progress ring's half fill survives the outline-only icon rules. */
html body.cases-visual-v2 #pageRoot#pageRoot#pageRoot#pageRoot svg path.status-progress-fill,
html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-icon > svg.current-source-icon path.status-progress-fill { fill: currentColor !important; stroke: none !important; }

/* Icon motion: one short move when the pointer reaches a control, never on a
   loop; one easing for all. Status markers in tables stay still. */
svg :is(.status-progress-fill, .icon-anim-scan, .icon-anim-ring, .icon-anim-pen, .icon-anim-paper, .icon-anim-folder-front, .icon-anim-layer-top, .icon-anim-layer-bottom, .icon-anim-pop, .icon-anim-plus, .icon-anim-bar, .icon-anim-exit, .icon-anim-rewind, .icon-anim-filter, .icon-anim-bell, .icon-anim-knob-left, .icon-anim-knob-right, .icon-anim-nudge, .icon-anim-ripple, .icon-anim-nod, .icon-anim-hand, .icon-anim-dot, .icon-anim-trace, .icon-anim-lid, .icon-anim-settle, .icon-anim-rays, .icon-anim-sheet, .icon-anim-shackle, .icon-anim-key, .icon-anim-key-bit, .icon-anim-tilt) {
  transform-box: view-box;
}
svg .status-progress-fill, svg .icon-anim-scan, svg .icon-anim-ring { transform-origin: 12px 12px; }
svg .icon-anim-pen { transform-origin: 5px 19px; }
svg :is(.icon-anim-line, .icon-anim-check) { stroke-dasharray: 1; stroke-dashoffset: 0; }
svg .icon-anim-ink { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .5s ease-out, opacity .2s ease; }
svg .icon-anim-paper { transform: translateY(5px); transition: transform .38s cubic-bezier(.34, 1.35, .64, 1); }
svg .icon-anim-folder-front { transform-origin: 12px 19px; transition: transform .38s cubic-bezier(.34, 1.35, .64, 1); }
svg :is(.icon-anim-layer-top, .icon-anim-layer-bottom) { transition: transform .38s cubic-bezier(.34, 1.35, .64, 1); }
html body.cases-visual-v2 #pageRoot#pageRoot#pageRoot#pageRoot svg mask rect.icon-mask-show { fill: #ffffff !important; stroke: none !important; }
html body.cases-visual-v2 #pageRoot#pageRoot#pageRoot#pageRoot svg mask rect.icon-mask-hide { fill: #000000 !important; stroke: none !important; }

:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .status-progress-fill { animation: cases-icon-turn 1s ease-in-out; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-scan { animation: cases-icon-scan .9s ease-in-out; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-line { animation: cases-icon-write .35s ease-out both; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-line-next { animation-delay: .3s; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-pen { animation: cases-icon-pen .5s ease-in-out; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-ink { stroke-dashoffset: 0; opacity: 1; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-ring { animation: cases-icon-pop .4s cubic-bezier(.34, 1.56, .64, 1); }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-check { animation: cases-icon-write .5s ease-out; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-paper { transform: translateY(0); }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-folder-front { transform: scaleY(.9); }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-layer-top { transform: translateY(-2.5px); }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-layer-bottom { transform: translateY(2.5px); }

svg :is(.icon-anim-plus, .icon-anim-rewind) { transform-origin: 12px 12px; }
svg :is(.icon-anim-knob-left, .icon-anim-knob-right){ transition: transform .38s cubic-bezier(.34, 1.35, .64, 1); }
svg .icon-anim-bar { transform-origin: 0 16px; }
svg .icon-anim-bell { transform-origin: 12px 3px; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-pop { animation: cases-icon-squeeze .4s cubic-bezier(.34, 1.56, .64, 1); }

:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-bar { animation: cases-icon-grow .45s ease-out; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-exit { animation: cases-icon-step .5s ease-in-out; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-rewind { animation: cases-icon-rewind .6s ease-in-out; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-filter { animation: cases-icon-narrow .45s ease-in-out; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-bell { animation: cases-icon-swing .6s ease-in-out; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-knob-left { transform: translateX(-3px); }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-knob-right { transform: translateX(3px); }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) :is(.icon-anim-pop, .icon-anim-bar, .icon-anim-filter).icon-anim-d1 { animation-delay: .07s; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) :is(.icon-anim-pop, .icon-anim-bar, .icon-anim-filter).icon-anim-d2 { animation-delay: .14s; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) :is(.icon-anim-pop, .icon-anim-bar, .icon-anim-filter).icon-anim-d3 { animation-delay: .21s; }

svg .icon-anim-ripple { opacity: 0; }
svg .icon-anim-nod { transform-origin: 12px 11px; }
svg .icon-anim-hand { transform-origin: 12px 12px; }
svg .icon-anim-dot { transform-origin: 12px 8px; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-nudge { animation: cases-icon-nudge .4s ease-in-out; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-ripple { animation: cases-icon-ripple .7s ease-out; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-nod { animation: cases-icon-nod .45s ease-in-out; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-hand { animation: cases-icon-sweep .7s ease-in-out; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-dot { animation: cases-icon-dot .5s ease-out .2s both; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) :is(.icon-anim-nudge, .icon-anim-nod).icon-anim-d1 { animation-delay: .1s; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) :is(.icon-anim-nudge, .icon-anim-nod).icon-anim-d2 { animation-delay: .2s; }

@keyframes cases-icon-nudge { 50% { transform: translateX(2.5px); } }
@keyframes cases-icon-ripple { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes cases-icon-nod { 50% { transform: translateY(-1.8px); } }
@keyframes cases-icon-sweep { to { transform: rotate(360deg); } }
@keyframes cases-icon-dot { 0% { transform: scale(0); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }
svg .icon-anim-trace { stroke-dasharray: 1; stroke-dashoffset: 0; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-trace { animation: cases-icon-write .5s ease-out; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-lid { animation: cases-icon-lid .5s ease-in-out; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-settle { animation: cases-icon-settle .5s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes cases-icon-lid { 50% { transform: translate(4px, -1px); } }
@keyframes cases-icon-settle { 40% { transform: translateY(2.5px); } }
svg .icon-anim-rays { transform-origin: 12px 12px; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-rays { animation: cases-icon-rays .5s cubic-bezier(.2, .8, .2, 1); }

@keyframes cases-icon-rays { from { opacity: 0; transform: scale(.35); } }
svg .icon-anim-sheet { transform-origin: 12px 10px; }
svg .icon-anim-sheet-next { opacity: 0; }
svg .icon-anim-key-bit { transform-origin: 12px 15px; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-sheet-top { animation: cases-icon-sheet-turn .6s ease-in forwards; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-sheet-next { animation: cases-icon-sheet-next .6s ease-in forwards; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-key { animation: cases-icon-key-in 1.1s ease-in-out forwards; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-key-bit { animation: cases-icon-key-turn 1.1s ease-in-out forwards; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-shackle { animation: cases-icon-shackle 1.1s ease-in-out forwards; }

@keyframes cases-icon-sheet-turn { to { opacity: 0; transform: rotateX(-110deg); } }
@keyframes cases-icon-sheet-next { 0%, 45% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cases-icon-key-in { 0% { opacity: 0; transform: translateX(9px); } 25% { opacity: 1; } 50%, 100% { opacity: 1; transform: none; } }
@keyframes cases-icon-key-turn { 0%, 50% { transform: none; } 75%, 100% { transform: rotate(90deg); } }
@keyframes cases-icon-shackle { 0%, 70% { transform: none; } 90%, 100% { transform: translateY(-3px); } }


@keyframes cases-icon-squeeze { 50% { transform: scale(.72); } }
@keyframes cases-icon-grow { from { transform: scaleY(.2); } }
@keyframes cases-icon-step { 50% { transform: translateX(3px); } }
@keyframes cases-icon-rewind { to { transform: rotate(-360deg); } }
@keyframes cases-icon-narrow { 50% { transform: scaleX(.6); } }
@keyframes cases-icon-swing { 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }
@keyframes cases-icon-turn { to { transform: rotate(360deg); } }

/* Hover: the icon's own move is the feedback, so buttons no longer lift and
   their icons no longer grow (the two together read as a jitter). The :not(#…)
   pairs only add ID weight, to outrank the older #pageRoot hover rules even in
   the sidebar. The settings add button keeps its centring translate. */
html body.cases-visual-v2 :is(.cases-sidebar .nav-item, .settings-sidebar .settings-nav-item, .cases-main :is(.icon-action, .row-icon-action, .settings-action-btn, .secondary-btn, .ui-icon-button, .ui-inline-action, .save-action, .report-excel-action, .base-action-button, .add-action, .delete-action, .home-chart-control-trigger), .window-controls button):not(.secondary-btn.icon-only):not(#cases-hover-a):not(#cases-hover-b):not(#cases-hover-c):is(:hover, :focus-visible) {
  transform: none !important;
}
html body.cases-visual-v2 :is(.cases-sidebar .nav-item, .settings-sidebar .settings-nav-item, .cases-main button, .window-controls button):not(#cases-hover-a):not(#cases-hover-b):not(#cases-hover-c):is(:hover, :focus-visible) :is(.nav-icon, .nav-icon > svg, .settings-nav-icon, .settings-nav-icon > svg, .button-icon, .button-icon > svg, button > svg) {
  transform: none !important;
}
@keyframes cases-icon-scan { 25% { transform: translate(-2.5px, -1px); } 50% { transform: translate(2px, -2px); } 75% { transform: translate(1px, 1.5px); } }
@keyframes cases-icon-write { from { stroke-dashoffset: 1; } }
@keyframes cases-icon-pen { 30% { transform: translate(-3px, 1px) rotate(-6deg); } 70% { transform: translate(3px, 0) rotate(4deg); } }
@keyframes cases-icon-pop { 50% { transform: scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
  svg :is(.status-progress-fill, .icon-anim-scan, .icon-anim-line, .icon-anim-pen, .icon-anim-ink, .icon-anim-ring, .icon-anim-check, .icon-anim-paper, .icon-anim-folder-front, .icon-anim-layer-top, .icon-anim-layer-bottom, .icon-anim-pop, .icon-anim-plus, .icon-anim-bar, .icon-anim-exit, .icon-anim-rewind, .icon-anim-filter, .icon-anim-bell, .icon-anim-knob-left, .icon-anim-knob-right, .icon-anim-nudge, .icon-anim-ripple, .icon-anim-nod, .icon-anim-hand, .icon-anim-dot, .icon-anim-trace, .icon-anim-lid, .icon-anim-settle, .icon-anim-rays, .icon-anim-sheet, .icon-anim-shackle, .icon-anim-key, .icon-anim-key-bit, .icon-anim-tilt) { animation: none !important; transition: none !important; }
}

/* Home summary cards open their table from anywhere on the card. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .home-summary-card[data-summary-key],
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .home-summary-card[data-summary-key] * { cursor: pointer !important; }


/* Every button icon carries a colour by what it does; a meaning keeps one
   colour everywhere (municipality green, group blue, time amber). Save stays
   grey on purpose: it turns blue only when the card has unsaved changes. */
html body.cases-visual-v2 :is(#deadlineNotificationButton, .home-chart-mode-button[data-home-chart-mode="performance"], .home-chart-control-trigger[data-home-chart-active-mode="performance"], .date-picker-button):not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-tint-time); }
html body.cases-visual-v2 :is(#caseFilterButton, .home-chart-control-trigger[data-home-chart-popover-trigger="secondary"]):not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-tint-filter); }
html body.cases-visual-v2 :is(.home-chart-mode-button[data-home-chart-mode="municipalities"], .home-chart-control-trigger[data-home-chart-active-mode="municipalities"], .map-link-button):not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-tint-place); }
html body.cases-visual-v2 :is(.home-chart-mode-button[data-home-chart-mode="mobileGroups"], .home-chart-control-trigger[data-home-chart-active-mode="mobileGroups"]):not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-tint-group); }
html body.cases-visual-v2 #exportReportExcel:not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-tint-excel); }
html body.cases-visual-v2 :is(.add-reference, #kancelariaCredentialsAdd):not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-accent); }
html body.cases-visual-v2 #backupOpenDataFolder:not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-tint-folder); }
html body.cases-visual-v2 #createBackup:not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-tint-backup); }
html body.cases-visual-v2 .restore-backup:not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-tint-restore); }
html body.cases-visual-v2 #exportDiagnostics:not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-tint-about); }
html[data-theme="dark"] body.cases-visual-v2 #exportReportExcel:not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-tint-excel); }
html body.cases-visual-v2 :is(#deadlineNotificationButton, .home-chart-mode-button, .home-chart-control-trigger, .date-picker-button, #caseFilterButton, .map-link-button, #exportReportExcel, .add-reference, #kancelariaCredentialsAdd, #backupOpenDataFolder, #createBackup, .restore-backup, #exportDiagnostics):is(*, :hover, :focus-visible, :active):not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg {
  color: var(--cases-icon-tint, currentColor) !important;
  stroke: currentColor !important;
}

/* Home summary cards: the count wears its icon's colour. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .home-summary-card.home-metric-card .home-count-button {
  color: var(--metric-color) !important;
}

/* Delete is red and add is blue in both themes (a dark-theme rule had greyed
   out delete everywhere but the backup list). */
html body.cases-visual-v2 :is(#deleteCase, .delete-action, .danger-action, .delete-reference, .delete-backup, .delete-kancelaria-credential):not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-danger); }
html[data-theme="dark"] body.cases-visual-v2 :is(#deleteCase, .delete-action, .danger-action, .delete-reference, .delete-backup, .delete-kancelaria-credential):not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-danger); }
html body.cases-visual-v2 :is(#addObjectRow, #addRegistration, .add-action):not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-accent); }
html[data-theme="dark"] body.cases-visual-v2 :is(#addObjectRow, #addRegistration, .add-action, .add-reference, #kancelariaCredentialsAdd):not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-accent); }
html body.cases-visual-v2 :is(#deleteCase, .delete-action, .danger-action, .delete-reference, .delete-backup, .delete-kancelaria-credential, #addObjectRow, #addRegistration, .add-action):is(*, :hover, :focus-visible, :active):not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg {
  color: var(--cases-icon-tint, currentColor) !important;
  stroke: currentColor !important;
}

/* Home group table: counts stay neutral and zeros step back; the number under
   the pointer takes its column's card colour. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .home-mobile-table .home-table-count.is-zero { opacity: .35 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .home-mobile-table td.home-count-column .home-table-count { transition: color .15s ease, opacity .15s ease !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .home-mobile-table td.home-count-column .home-table-count:is(:hover, :focus-visible) {
  color: var(--column-color) !important;
  text-decoration: none !important;
}

/* Appearance: three theme rows on the settings lanes. The chosen row gets the
   soft fill and blue edge of an active menu item plus a check; each icon keeps
   its own colour (sun amber, moon indigo, screen blue). */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content .appearance-settings-panel > .theme-choice {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 20px !important;
  align-items: center !important;
  justify-content: stretch !important;
  column-gap: 10px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 16px 0 12px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--v2-ink) !important;
  font: inherit !important;
  font-size: var(--type-body) !important;
  text-align: left !important;
  cursor: pointer !important;
  transform: none !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content .appearance-settings-panel > .theme-choice.is-selected:not(#cases-theme-a):not(#cases-theme-b):not(#cases-theme-c):is(*, :hover, :focus, :focus-visible, :active) {
  background: var(--v2-blue-soft) !important;
  box-shadow: none !important;
  color: var(--v2-ink-strong) !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content .theme-choice .theme-choice-check { display: inline-flex !important; align-items: center !important; justify-content: center !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content .theme-choice .theme-choice-check { color: var(--cases-accent) !important; opacity: 0 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content .theme-choice.is-selected .theme-choice-check { opacity: 1 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content .appearance-settings-panel > .theme-choice { transition: none !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content .theme-choice .theme-choice-check path { stroke-dasharray: 1; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content .theme-choice.is-selected .theme-choice-check path { animation: cases-icon-write .35s ease-out both; }
@media (prefers-reduced-motion: reduce) { html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content .theme-choice .theme-choice-check path { animation: none !important; } }
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content .appearance-settings-panel > .theme-choice { color: var(--v2-ink) !important; }
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content .appearance-settings-panel > .theme-choice.is-selected:not(#cases-theme-a):not(#cases-theme-b):not(#cases-theme-c):is(*, :hover, :focus, :focus-visible, :active) { background: var(--cases-selected-fill) !important; color: var(--cases-ink-strong) !important; }

/* Deadlines: each day count is a plain centred number (a blue line only while
   it is edited), flanked by its own − / +; no system spinner. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-content .deadline-settings-panel .deadline-setting-row { display: flex !important; align-items: center !important; justify-content: space-between !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-content :is(.deadline-settings-panel, .security-panel) .deadline-stepper { display: inline-flex !important; align-items: center !important; gap: 6px !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-content :is(.deadline-settings-panel, .security-panel) .deadline-number-line { display: inline-flex !important; align-items: center !important; height: 34px !important; box-shadow: none !important; transition: box-shadow .15s ease !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-content :is(.deadline-settings-panel, .security-panel) .deadline-number-line:focus-within { box-shadow: inset 0 -2px 0 var(--cases-accent) !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-content :is(.deadline-settings-panel, .security-panel) .deadline-number-line > input {
  box-sizing: border-box !important;
  width: 64px !important;
  min-width: 64px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: var(--v2-ink-strong) !important;
  font-size: var(--type-title) !important;
  font-variant-numeric: tabular-nums !important;
  text-align: center !important;
  -moz-appearance: textfield !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-content :is(.deadline-settings-panel, .security-panel) .deadline-number-line > input::-webkit-inner-spin-button,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-content :is(.deadline-settings-panel, .security-panel) .deadline-number-line > input::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-content :is(.deadline-settings-panel, .security-panel) .deadline-step {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cases-accent) !important;
  cursor: pointer !important;
  transform: none !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-content :is(.deadline-settings-panel, .security-panel) .deadline-step:is(:hover, :focus-visible) { background: rgba(37, 99, 235, .08) !important; }
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-content :is(.deadline-settings-panel, .security-panel) .deadline-number-line:focus-within { box-shadow: inset 0 -2px 0 var(--cases-accent) !important; }

/* Theme switch: one cross-fade of the whole window; element transitions are
   held during it so nothing recolours on its own schedule. */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after { transition: none !important; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .3s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content .appearance-settings-panel > .theme-choice:not(.is-selected):not(#cases-theme-a):not(#cases-theme-b):not(#cases-theme-c):is(*, :hover, :focus, :focus-visible, :active) { background: transparent !important; box-shadow: none !important; }

/* Confirm / choice dialogs: one surface language with the app — a dense panel
   (nothing shows through), centred title and message, a divider, then the icon
   buttons centred with equal gaps; plain coloured icons as everywhere else
   (confirm/save blue, danger red, stay neutral), a soft fill only on hover. */
html body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog:not(#cases-dialog-a):not(#cases-dialog-b) {
  border: 1px solid var(--v2-line) !important;
  border-radius: var(--cases-window-radius) !important;
  background: var(--cases-window-bg) !important;
  background-color: var(--cases-window-bg) !important;
  box-shadow: var(--cases-window-shadow) !important;
}
html[data-theme="dark"] body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog:not(#cases-dialog-a):not(#cases-dialog-b) {
  border-color: var(--cases-window-border) !important;
  background: var(--cases-window-bg) !important;
  background-color: var(--cases-window-bg) !important;
  box-shadow: var(--cases-window-shadow) !important;
}
html body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog:not(.app-prompt-dialog):not(#cases-dialog-a):not(#cases-dialog-b) {
  width: min(var(--cases-window-dialog), calc(100vw - 40px)) !important;
  gap: 0 !important;
  padding: 20px 22px 16px !important;
}
html body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog:not(.app-prompt-dialog):not(#cases-dialog-a):not(#cases-dialog-b) .app-confirm-copy {
  display: grid !important;
  gap: 6px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--v2-line) !important;
  text-align: center !important;
}
html body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog:not(.app-prompt-dialog):not(#cases-dialog-a):not(#cases-dialog-b) .app-confirm-copy h2 {
  margin: 0 !important;
  color: var(--v2-ink-strong) !important;
  font-size: var(--type-title) !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}
html body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog:not(.app-prompt-dialog):not(#cases-dialog-a):not(#cases-dialog-b) .app-confirm-copy p {
  margin: 0 !important;
  color: var(--v2-muted) !important;
  font-size: var(--type-body) !important;
  line-height: 1.45 !important;
}
html[data-theme="dark"] body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog:not(.app-prompt-dialog):not(#cases-dialog-a):not(#cases-dialog-b) .app-confirm-copy h2 { color: var(--cases-ink-strong) !important; }
html[data-theme="dark"] body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog:not(.app-prompt-dialog):not(#cases-dialog-a):not(#cases-dialog-b) .app-confirm-copy p { color: var(--cases-ink-muted) !important; }
html body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog:not(#cases-dialog-a):not(#cases-dialog-b) :is(.app-confirm-actions, .app-choice-actions) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 14px 0 0 !important;
}
html body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog:not(#cases-dialog-a):not(#cases-dialog-b) :is(.app-confirm-actions > button, .app-choice-actions > button):is(*, :hover, :focus, :focus-visible, :active) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: 0 !important;
  color: var(--v2-muted) !important;
  transform: none !important;
}
html body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog:not(#cases-dialog-a):not(#cases-dialog-b) :is(.app-confirm-actions > button, .app-choice-actions > button):is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; }
html body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog:not(#cases-dialog-a):not(#cases-dialog-b) :is(.app-confirm-actions > button, .app-choice-actions > button) svg { width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; stroke-width: 1.9 !important; }
html body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog:not(#cases-dialog-a):not(#cases-dialog-b) :is(.app-confirm-accept, .app-choice-button.is-primary):is(*, :hover, :focus, :focus-visible, :active) { color: var(--cases-accent) !important; }
html body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog[data-tone="danger"]:not(#cases-dialog-a):not(#cases-dialog-b) .app-confirm-accept:is(*, :hover, :focus, :focus-visible, :active),
html body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog:not(#cases-dialog-a):not(#cases-dialog-b) .app-choice-button.is-danger:is(*, :hover, :focus, :focus-visible, :active) { color: var(--cases-danger) !important; }
html[data-theme="dark"] body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog:not(#cases-dialog-a):not(#cases-dialog-b) :is(.app-confirm-accept, .app-choice-button.is-primary):is(*, :hover, :focus, :focus-visible, :active) { color: var(--cases-accent) !important; }
html[data-theme="dark"] body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog[data-tone="danger"]:not(#cases-dialog-a):not(#cases-dialog-b) .app-confirm-accept:is(*, :hover, :focus, :focus-visible, :active),
html[data-theme="dark"] body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog:not(#cases-dialog-a):not(#cases-dialog-b) .app-choice-button.is-danger:is(*, :hover, :focus, :focus-visible, :active) { color: var(--cases-danger) !important; }
html[data-theme="dark"] body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog:not(#cases-dialog-a):not(#cases-dialog-b) :is(.app-confirm-cancel, .app-choice-button:not(.is-primary):not(.is-danger)):is(*, :hover, :focus, :focus-visible, :active) { color: var(--cases-ink-muted) !important; }
html[data-theme="dark"] body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog:not(#cases-dialog-a):not(#cases-dialog-b) :is(.app-confirm-actions > button, .app-choice-actions > button):is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; }

/* Reference rows: names rename in place; a system status keeps an empty slot
   where delete would be, so the colour buttons stay in one column. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-list .settings-item-label.is-renameable { cursor: text !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-list .settings-action-spacer { display: inline-block !important; width: 34px !important; height: 34px !important; flex: none !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-list .settings-item-rename {
  box-sizing: border-box !important;
  width: min(420px, 100%) !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 var(--cases-accent) !important;
  outline: 0 !important;
  color: inherit !important;
  font: inherit !important;
}

/* Windows: every popover, panel and dialog shares one surface — dense (no
   page showing through), 14px corners, one border and shadow, 13px/500
   titles — and windows of one kind share one width: dialogs 320, list dialog
   480, titled panels 360, pickers 280, menus 220. */
html body.cases-visual-v2 :is(.case-filter-popover, .deadline-notification-popup, .home-chart-control-popover, .home-chart-detail-popup, .status-color-popover, .municipality-employee-popover, .report-scroll-bubble):not(#cases-win-a):not(#cases-win-b) {
  border: 1px solid var(--v2-line) !important;
  border-radius: var(--cases-window-radius) !important;
  background: var(--cases-window-bg) !important;
  background-color: var(--cases-window-bg) !important;
  box-shadow: var(--cases-window-shadow) !important;
  backdrop-filter: blur(24px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.1) !important;
  box-sizing: border-box !important;
}
html[data-theme="dark"] body.cases-visual-v2 :is(.case-filter-popover, .deadline-notification-popup, .home-chart-control-popover, .home-chart-detail-popup, .status-color-popover, .municipality-employee-popover, .report-scroll-bubble):not(#cases-win-a):not(#cases-win-b) {
  border-color: var(--cases-window-border) !important;
  background: var(--cases-window-bg) !important;
  background-color: var(--cases-window-bg) !important;
  box-shadow: var(--cases-window-shadow) !important;
}
html body.cases-visual-v2 .case-filter-popover:not(#cases-win-a):not(#cases-win-b) { width: var(--cases-window-panel) !important; min-width: var(--cases-window-panel) !important; max-width: min(var(--cases-window-panel), calc(100vw - 24px)) !important; }
html body.cases-visual-v2 .deadline-notification-popup:not(#cases-win-a):not(#cases-win-b) { width: var(--cases-window-panel) !important; min-width: var(--cases-window-panel) !important; max-width: min(var(--cases-window-panel), calc(100vw - 24px)) !important; }
html body.cases-visual-v2 :is(.status-color-popover, .municipality-employee-popover):not(#cases-win-a):not(#cases-win-b) { width: var(--cases-window-picker) !important; min-width: var(--cases-window-picker) !important; max-width: min(var(--cases-window-picker), calc(100vw - 24px)) !important; }
html body.cases-visual-v2 .home-chart-control-popover:not(#cases-win-a):not(#cases-win-b) { width: var(--cases-window-menu) !important; min-width: var(--cases-window-menu) !important; max-width: min(var(--cases-window-menu), calc(100vw - 24px)) !important; }
html body.cases-visual-v2 :is(.case-filter-header, .deadline-notification-popup-head, .status-color-popover-title, .home-chart-detail-heading):not(#cases-win-a):not(#cases-win-b) {
  color: var(--v2-ink-strong) !important;
  font-size: var(--type-body) !important;
  font-weight: 500 !important;
}
html[data-theme="dark"] body.cases-visual-v2 :is(.case-filter-header, .deadline-notification-popup-head, .status-color-popover-title, .home-chart-detail-heading):not(#cases-win-a):not(#cases-win-b) { color: var(--cases-ink-strong) !important; }

/* Filter panels: flat underlined fields like the card, a tick row instead of a
   switch, and clear / apply as centred icons like the dialogs. */
html body.cases-visual-v2 .case-filter-popover:not(#cases-win-a):not(#cases-win-b) :is(select, input.date-text-input, input[type="search"]):is(*, :hover, :focus) {
  box-sizing: border-box !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: inset 0 -1px 0 var(--ui-control-border) !important;
  outline: 0 !important;
}
html body.cases-visual-v2 .case-filter-popover:not(#cases-win-a):not(#cases-win-b) :is(select, input.date-text-input, input[type="search"]):focus { box-shadow: inset 0 -2px 0 var(--cases-accent) !important; }
html body.cases-visual-v2 .case-filter-popover:not(#cases-win-a):not(#cases-win-b) .case-filter-completed {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 20px !important;
  align-items: center !important;
  /* In the fields' column (same 12px side margins its width assumes) and at
     the fields' height. */
  min-height: var(--ui-control-height, 38px) !important;
  margin: 4px 12px 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
html body.cases-visual-v2 .case-filter-popover:not(#cases-win-a):not(#cases-win-b) .case-filter-completed > input { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; pointer-events: none !important; }
html body.cases-visual-v2 .case-filter-popover:not(#cases-win-a):not(#cases-win-b) .case-filter-completed:has(input:checked) { background: transparent !important; box-shadow: none !important; }
html body.cases-visual-v2 .case-filter-popover:not(#cases-win-a):not(#cases-win-b) .case-filter-completed:has(input:focus-visible) { outline: 2px solid var(--v2-focus) !important; outline-offset: 1px !important; }
html body.cases-visual-v2 .case-filter-popover:not(#cases-win-a):not(#cases-win-b) .case-filter-completed-mark { display: inline-flex !important; color: var(--cases-accent) !important; opacity: 0 !important; }
html body.cases-visual-v2 .case-filter-popover:not(#cases-win-a):not(#cases-win-b) .case-filter-completed-mark > svg { width: 18px !important; height: 18px !important; }
html body.cases-visual-v2 .case-filter-popover:not(#cases-win-a):not(#cases-win-b) .case-filter-completed:has(input:checked) .case-filter-completed-mark { opacity: 1 !important; }
html[data-theme="dark"] body.cases-visual-v2 .case-filter-popover:not(#cases-win-a):not(#cases-win-b) .case-filter-completed:has(input:checked) { background: var(--cases-selected-fill) !important; }
html body.cases-visual-v2 .case-filter-popover:not(#cases-win-a):not(#cases-win-b) .case-filter-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 12px 14px 0 !important;
  padding: 10px 0 0 !important;
  border-top: 1px solid var(--v2-line) !important;
  background: transparent !important;
}
html body.cases-visual-v2 .case-filter-popover:not(#cases-win-a):not(#cases-win-b) .case-filter-actions > button:is(*, :hover, :focus, :focus-visible, :active) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--v2-muted) !important;
  transform: none !important;
}
html body.cases-visual-v2 .case-filter-popover:not(#cases-win-a):not(#cases-win-b) .case-filter-actions > button:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; }
html body.cases-visual-v2 .case-filter-popover:not(#cases-win-a):not(#cases-win-b) .case-filter-actions > button.is-primary:is(*, :hover, :focus, :focus-visible, :active) { color: var(--cases-accent) !important; }
html body.cases-visual-v2 .case-filter-popover:not(#cases-win-a):not(#cases-win-b) .case-filter-actions > button > svg { width: 20px !important; height: 20px !important; }
html[data-theme="dark"] body.cases-visual-v2 .case-filter-popover:not(#cases-win-a):not(#cases-win-b) .case-filter-actions > button.is-primary:is(*, :hover, :focus, :focus-visible, :active) { color: var(--cases-accent) !important; }
html[data-theme="dark"] body.cases-visual-v2 .case-filter-popover:not(#cases-win-a):not(#cases-win-b) .case-filter-actions > button:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; }

/* Form dialogs (password prompt, credentials): the same flat underlined
   fields as the card and the filters. */
html body.cases-visual-v2 .app-confirm-backdrop .app-prompt-dialog:not(#cases-win-a):not(#cases-win-b) :is(input[type="text"], input[type="password"], input:not([type])):is(*, :hover, :focus) {
  box-sizing: border-box !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: inset 0 -1px 0 var(--ui-control-border) !important;
  outline: 0 !important;
}
html body.cases-visual-v2 .app-confirm-backdrop .app-prompt-dialog:not(#cases-win-a):not(#cases-win-b) :is(input[type="text"], input[type="password"], input:not([type])):focus { box-shadow: inset 0 -2px 0 var(--cases-accent) !important; }

/* Reference add row: as wide as the list rows, its + standing on the rows'
   action column; empty lists read the same everywhere (no leading dash). */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-content :is(.reference-add-row, .kancelaria-add-row) {
  width: 100% !important;
  max-width: 100% !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-content .settings-new-value-control > .add-reference:is(*, :hover, :focus, :focus-visible, :active) {
  right: 3px !important;
}
/* Toolbar fields (table search, report source): flat underlined fields with
   the text from the left, like every other field in the app. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot :is(.case-table-search, .report-source-select):not(#cases-bar-a):not(#cases-bar-b),
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot :is(.case-table-search, .report-source-select):not(#cases-bar-a):not(#cases-bar-b) :is(input, select, button, .styled-select-trigger) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: left !important;
  justify-content: flex-start !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot :is(.case-table-search, .report-source-select):not(#cases-bar-a):not(#cases-bar-b) {
  box-shadow: inset 0 -1px 0 var(--ui-control-border) !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot :is(.case-table-search, .report-source-select):not(#cases-bar-a):not(#cases-bar-b) :is(input, select, button, .styled-select-trigger) { box-shadow: none !important; padding-left: 2px !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot :is(.case-table-search, .report-source-select):not(#cases-bar-a):not(#cases-bar-b):focus-within { box-shadow: inset 0 -2px 0 var(--cases-accent) !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .case-table-search:not(#cases-bar-a):not(#cases-bar-b) input::placeholder { text-align: left !important; }

/* The bell is grey while deadline control is switched off. */
html body.cases-visual-v2 #deadlineNotificationButton[data-deadline-state="disabled"]:not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-ink-muted); }

/* Home chart fitted to end on the Exit line when the window is short. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot #homeChartPanel.is-fitted {
  height: var(--home-chart-fit-height) !important;
  min-height: var(--home-chart-fit-height) !important;
  max-height: var(--home-chart-fit-height) !important;
}

/* Password list rows: full width like every list, delete on the + column. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-content .kancelaria-credentials-panel .settings-list .settings-item {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

/* Quick search (Ctrl+K): a list window like history, near the top. */
html body.cases-visual-v2 .quick-search-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 30000 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding-top: 14vh !important;
  background: rgba(44, 62, 82, .12) !important;
  backdrop-filter: blur(3px) !important;
}
html body.cases-visual-v2 .quick-search-backdrop .quick-search-dialog {
  box-sizing: border-box !important;
  width: min(var(--cases-window-list), calc(100vw - 24px)) !important;
  padding: 14px 14px 10px !important;
  border: 1px solid var(--cases-window-border) !important;
  border-radius: var(--cases-window-radius) !important;
  background: var(--cases-window-bg) !important;
  box-shadow: var(--cases-window-shadow) !important;
  color: var(--cases-ink-strong) !important;
}
html body.cases-visual-v2 .quick-search-dialog .quick-search-field {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 40px !important;
  padding: 0 4px !important;
  box-shadow: inset 0 -2px 0 var(--cases-accent) !important;
}
html body.cases-visual-v2 .quick-search-dialog .quick-search-icon { display: inline-flex !important; color: var(--cases-tint-time) !important; }
html body.cases-visual-v2 .quick-search-dialog .quick-search-icon > svg { width: 20px !important; height: 20px !important; }
html body.cases-visual-v2 .quick-search-dialog .quick-search-field > input {
  flex: 1 1 auto !important;
  height: 38px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: inherit !important;
  font-size: var(--type-title) !important;
}
html body.cases-visual-v2 .quick-search-dialog .quick-search-results { display: grid !important; gap: 2px !important; max-height: 52vh !important; overflow-y: auto !important; margin-top: 8px !important; }
html body.cases-visual-v2 .quick-search-dialog .quick-search-row {
  display: grid !important;
  grid-template-columns: 150px 72px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: var(--cases-control-radius) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
  font-size: var(--type-body) !important;
  text-align: left !important;
  cursor: pointer !important;
  transform: none !important;
}
html body.cases-visual-v2 .quick-search-dialog .quick-search-row.is-active { background: var(--ui-row-hover) !important; box-shadow: none !important; }
html body.cases-visual-v2 .quick-search-dialog .quick-search-status { display: inline-flex !important; align-items: center !important; gap: 7px !important; min-width: 0 !important; color: color-mix(in srgb, var(--case-status-color) 58%, #000000) !important; }
html[data-theme="dark"] body.cases-visual-v2 .quick-search-dialog .quick-search-status { color: color-mix(in srgb, var(--case-status-color) 62%, #ffffff) !important; }
html body.cases-visual-v2 .quick-search-dialog .quick-search-status .status-marker-icon { display: inline-flex !important; color: var(--case-status-color) !important; }
html body.cases-visual-v2 .quick-search-dialog .quick-search-status svg { width: 16px !important; height: 16px !important; }
html body.cases-visual-v2 .quick-search-dialog :is(.quick-search-detail, .quick-search-date, .quick-search-empty) { color: var(--cases-ink-muted) !important; }
html body.cases-visual-v2 .quick-search-dialog .quick-search-detail { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
html body.cases-visual-v2 .quick-search-dialog .quick-search-number { color: var(--cases-accent) !important; font-variant-numeric: tabular-nums !important; }
html body.cases-visual-v2 .quick-search-dialog .quick-search-empty { margin: 14px 0 6px !important; font-size: var(--type-body) !important; text-align: center !important; }

/* Backup: latest backup, retention and second folder in one strip. */










html body.cases-visual-v2 :is(#backupChooseMirror, #backupClearMirror):is(*, :hover, :focus-visible, :active):not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { color: var(--cases-icon-tint, var(--cases-ink-muted)) !important; stroke: currentColor !important; }

/* Backup strip: the three labels on one line, the retention value flush left. */




/* Report templates: a titled panel like the filters (360px). */
html body.cases-visual-v2 .report-templates-popover {
  position: fixed !important;
  z-index: 20000 !important;
  box-sizing: border-box !important;
  width: min(var(--cases-window-panel), calc(100vw - 24px)) !important;
  padding: 0 0 12px !important;
  border: 1px solid var(--cases-window-border) !important;
  border-radius: var(--cases-window-radius) !important;
  background: var(--cases-window-bg) !important;
  box-shadow: var(--cases-window-shadow) !important;
  backdrop-filter: blur(24px) saturate(1.1) !important;
  color: var(--cases-ink-strong) !important;
}
html body.cases-visual-v2 .report-templates-popover .report-templates-head { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 10px 8px 16px !important; border-bottom: 1px solid var(--v2-line) !important; font-size: var(--type-body) !important; }
html body.cases-visual-v2 .report-templates-popover .report-templates-close { display: inline-flex !important; width: 30px !important; height: 30px !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: 0 !important; border-radius: var(--cases-control-radius) !important; background: transparent !important; color: var(--cases-ink-muted) !important; }
html body.cases-visual-v2 .report-templates-popover .report-templates-close > svg { width: 18px !important; height: 18px !important; }
html body.cases-visual-v2 .report-templates-popover .report-templates-list { display: grid !important; gap: 2px !important; max-height: 280px !important; overflow-y: auto !important; padding: 8px 8px 0 !important; }
html body.cases-visual-v2 .report-templates-popover .report-templates-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 6px !important; }
html body.cases-visual-v2 .report-templates-popover .report-templates-apply { min-height: 38px !important; padding: 0 10px !important; border: 0 !important; border-radius: var(--cases-control-radius) !important; background: transparent !important; color: inherit !important; font: inherit !important; font-size: var(--type-body) !important; text-align: left !important; cursor: pointer !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
html body.cases-visual-v2 .report-templates-popover .report-templates-apply:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; outline: 0 !important; }
html body.cases-visual-v2 .report-templates-popover .report-templates-empty { margin: 10px 8px !important; color: var(--cases-ink-muted) !important; font-size: var(--type-body) !important; text-align: center !important; }
html body.cases-visual-v2 .report-templates-popover .report-templates-save { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 8px !important; margin: 10px 16px 0 !important; padding-top: 10px !important; border-top: 1px solid var(--v2-line) !important; }
html body.cases-visual-v2 .report-templates-popover .report-templates-save > input { height: 34px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: inset 0 -1px 0 var(--ui-control-border) !important; outline: 0 !important; color: inherit !important; font: inherit !important; font-size: var(--type-body) !important; }
html body.cases-visual-v2 .report-templates-popover .report-templates-save > input:focus { box-shadow: inset 0 -2px 0 var(--cases-accent) !important; }
html body.cases-visual-v2 .report-templates-popover .report-templates-save-button { display: inline-flex !important; width: 34px !important; height: 34px !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: 0 !important; border-radius: var(--cases-control-radius) !important; background: transparent !important; color: var(--cases-accent) !important; cursor: pointer !important; }
html body.cases-visual-v2 .report-templates-popover .report-templates-save-button:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; }
html body.cases-visual-v2 .report-templates-popover .report-templates-save-button > svg { width: 20px !important; height: 20px !important; }
html body.cases-visual-v2 #reportTemplates:not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-tint-backup); }
html body.cases-visual-v2 #reportTemplates:is(*, :hover, :focus-visible, :active):not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { color: var(--cases-icon-tint) !important; stroke: currentColor !important; }
html body.cases-visual-v2 .report-templates-popover .report-templates-save > input::placeholder { color: var(--cases-ink-muted) !important; opacity: 1 !important; }

/* Card PDF button: the sheet slides out of the printer on hover. */
html body.cases-visual-v2 #casePrint:not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-tint-filter); }
html body.cases-visual-v2 #casePrint:is(*, :hover, :focus-visible, :active):not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { color: var(--cases-icon-tint) !important; stroke: currentColor !important; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-sheet-out { animation: cases-icon-sheet-out .6s ease-in-out; }
@keyframes cases-icon-sheet-out { 50% { transform: translateY(2.5px); } }
@media (prefers-reduced-motion: reduce) { svg .icon-anim-sheet-out { animation: none !important; } }

/* Home chart menus: every item starts on one left edge. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .home-chart-control-popover .home-incoming-select:not(#cases-menu-a) { padding-left: 12px !important; padding-right: 12px !important; text-indent: 0 !important; }
/* Home chart controls: plain icon buttons like the rest of the app (no frame);
   a soft fill only while hovered or open. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .home-chart-control-trigger:not(#cases-menu-a):is(*, :hover, :focus, :focus-visible, :active) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: var(--cases-control-radius) !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .home-chart-control-trigger:not(#cases-menu-a):is(:hover, :focus-visible, [aria-expanded="true"]) { background: var(--cases-hover-fill) !important; }
/* The bell takes a colour only when it has something to say: amber for
   upcoming deadlines, red for overdue ones; otherwise it stays neutral. */
html body.cases-visual-v2 #deadlineNotificationButton:is([data-deadline-state="empty"], [data-deadline-state="disabled"]):not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-ink-muted); }
html body.cases-visual-v2 #deadlineNotificationButton[data-deadline-state="overdue"]:not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-danger); }

/* Backup retention: a compact choice without an underline. */


/* The add row is one settings lane tall with its field centred in it, so its
   text shares the first menu item's line at every window height. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .settings-content .reference-add-row {
  display: flex !important;
  align-items: center !important;
  height: var(--settings-lane-height, var(--ui-sidebar-row-height, 54px)) !important;
  min-height: var(--settings-lane-height, var(--ui-sidebar-row-height, 54px)) !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .settings-content .reference-add-row > label { flex: 1 1 auto !important; margin: 0 !important; }

/* Backup rows: the text sat 3px low (6px top padding, none below). Full rows
   (66px) now hold it 1.5px above their middle and the trimmed last row (60px)
   in its middle, so the gap under the header line and the gap above the panel
   edge read the same whatever the number of rows. */



/* Card fields: the line under the field being edited turns blue (2px), as in
   the filters and dialogs — until now focus did not show at all. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot #caseForm :is(input:not(.native-date-picker), select, textarea):not(#cases-focus-a):focus {
  border-bottom-color: var(--cases-accent) !important;
  box-shadow: inset 0 -1px 0 var(--cases-accent) !important;
}

/* Icon-only buttons are one size everywhere (34px button, 18px icon): the
   dialog, filter, deadline −/+ and chart controls follow the app standard. */
html body.cases-visual-v2 :is(.app-confirm-actions > button, .app-choice-actions > button, .case-filter-actions > button, .deadline-step, .home-chart-control-trigger):not(#cases-size-a):not(#cases-size-b):not(#cases-size-c):not(#cases-size-d):is(*, :hover, :focus, :focus-visible, :active) {
  width: var(--cases-icon-button) !important;
  min-width: var(--cases-icon-button) !important;
  max-width: var(--cases-icon-button) !important;
  height: var(--cases-icon-button) !important;
  min-height: var(--cases-icon-button) !important;
  max-height: var(--cases-icon-button) !important;
}
html body.cases-visual-v2 :is(.app-confirm-actions > button, .app-choice-actions > button, .case-filter-actions > button, .deadline-step, .home-chart-control-trigger):not(#cases-size-a):not(#cases-size-b):not(#cases-size-c):not(#cases-size-d) svg {
  width: var(--cases-icon-size) !important;
  min-width: var(--cases-icon-size) !important;
  max-width: var(--cases-icon-size) !important;
  height: var(--cases-icon-size) !important;
  min-height: var(--cases-icon-size) !important;
  max-height: var(--cases-icon-size) !important;
}
/* Dropdowns (select, calendar, autofill) share the window surface too. */
html body.cases-visual-v2 :is(.styled-select-popup, .styled-calendar-popup, .styled-autofill-popup):not(#cases-win-a):not(#cases-win-b) {
  border: 1px solid var(--cases-window-border) !important;
  border-radius: var(--cases-window-radius) !important;
  background: var(--cases-window-bg) !important;
  background-color: var(--cases-window-bg) !important;
  box-shadow: var(--cases-window-shadow) !important;
  backdrop-filter: blur(24px) saturate(1.1) !important;
}

/* Backup: the toolbar icons sit on the first menu item's line (were 1px low). */


/* The card's PDF and the report's templates and fields buttons are flat like
   their neighbours (Save, History, Excel), without the old raised shadow. */
html body.cases-visual-v2 .cases-main #pageRoot :is(#casePrint, #reportTemplates, #reportFieldsToggle):not(#cases-flat-a):not(#cases-flat-b):is(*, :focus, :active) { border: 0 !important; box-shadow: none !important; background: transparent !important; }
html body.cases-visual-v2 .cases-main #pageRoot :is(#casePrint, #reportTemplates, #reportFieldsToggle):not(#cases-flat-a):not(#cases-flat-b):is(:hover, :focus-visible, [aria-expanded="true"]) { border: 0 !important; box-shadow: none !important; background: var(--cases-hover-fill) !important; }

/* ---- Services page: outside sites as tabs. The toolbar holds the tabs on the
   left and the browser buttons on the right; the site fills the frame below,
   down to the Exit line. The site itself lives in #servicesHost, laid exactly
   over the frame's inside (see renderer-services.js). */
html body.cases-visual-v2 .cases-main #pageRoot .services-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
html body.cases-visual-v2 .cases-main #pageRoot .services-nav { flex: 0 0 auto; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .services-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  height: var(--cases-icon-button, 34px);
  padding: 0 14px 0 12px;
  border: 0;
  border-radius: var(--cases-control-radius, 10px);
  background: transparent;
  box-shadow: none;
  color: var(--cases-ink-strong);
  font: inherit;
  font-size: var(--type-body);
  white-space: nowrap;
  cursor: pointer;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .services-tab:is(:hover, :focus-visible) { background: var(--cases-hover-fill); }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .services-tab.is-active,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .services-tab.is-active:is(:hover, :focus-visible) {
  background: var(--cases-selected-fill);
  box-shadow: none;
}
/* Too narrow for every name: the other tabs show only their icon. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .services-tabs.is-compact .services-tab:not(.is-active) { padding: 0; width: var(--cases-icon-button, 34px); justify-content: center; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .services-tabs.is-compact .services-tab:not(.is-active) > span { display: none; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .services-tab > svg {
  width: var(--cases-icon-size, 18px);
  height: var(--cases-icon-size, 18px);
  flex: 0 0 auto;
  color: var(--service-tint);
}
html body.cases-visual-v2 .services-tab[data-service="des"] { --service-tint: var(--cases-tint-backup); }
html body.cases-visual-v2 .services-tab[data-service="tabeli"] { --service-tint: var(--cases-tint-time); }
html body.cases-visual-v2 .services-tab[data-service="gps"] { --service-tint: var(--cases-tint-place); }
html body.cases-visual-v2 .services-tab[data-service="napr"] { --service-tint: var(--cases-tint-filter); }
html body.cases-visual-v2 .services-tab[data-service="maps"] { --service-tint: var(--cases-tint-about); }
html body.cases-visual-v2 .services-tab[data-service="atom"] { --service-tint: var(--cases-tint-history); }
html body.cases-visual-v2 .services-tab[data-service="auction"] { --service-tint: var(--cases-tint-folder); }
html body.cases-visual-v2 .services-tab[data-service="privatization"] { --service-tint: var(--cases-tint-place); }
html body.cases-visual-v2 .services-tab[data-service="enreg"] { --service-tint: var(--cases-tint-excel); }
html body.cases-visual-v2 .services-tab[data-service="bti"] { --service-tint: var(--cases-tint-group); }

html body.cases-visual-v2 .services-nav-button:not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-accent); }
html body.cases-visual-v2 .services-nav-button:is(*, :hover, :focus-visible, :active):not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg {
  color: var(--cases-icon-tint, currentColor) !important;
  stroke: currentColor !important;
}
html body.cases-visual-v2 .cases-main #pageRoot .services-nav-button:not(#cases-flat-a):not(#cases-flat-b):is(*, :focus, :active) { border: 0 !important; box-shadow: none !important; background: transparent !important; }
html body.cases-visual-v2 .cases-main #pageRoot .services-nav-button:not(#cases-flat-a):not(#cases-flat-b):not(:disabled):is(:hover, :focus-visible) { border: 0 !important; box-shadow: none !important; background: var(--cases-hover-fill) !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .services-nav-button:disabled { opacity: .35; cursor: default; }
html body.cases-visual-v2 .services-nav-button.is-loading svg > g { animation: cases-icon-sweep .9s linear infinite; transform-origin: 12px 12px; transform-box: view-box; }

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .services-frame {
  display: block;
  padding: 0 !important;
  overflow: hidden;
}
/* The site shows through the frame's own rounded corners (the frame's
   surface is the one every page frame shares; see the frame lists above). */
.services-host {
  position: fixed;
  z-index: 2;
  overflow: hidden;
  border-radius: var(--ui-frame-radius, 9px);
  visibility: hidden;
  pointer-events: none;
}
.services-host.is-shown { visibility: visible; pointer-events: auto; }
.services-host > .services-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  visibility: hidden;
}
.services-host.is-shown > .services-view.is-active { visibility: visible; }
.services-host.is-shown > .services-error.is-active:not([hidden]) {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background: var(--cases-window-bg);
  color: var(--cases-ink-muted);
  font-size: var(--type-body);
}

/* Their hover moves (the shared hover rule plays them). */
svg .icon-anim-globe { transform-origin: 12px 12px; }
svg .icon-anim-gavel { transform-origin: 10px 13px; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-globe { animation: cases-icon-globe .7s ease-in-out; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-gavel { animation: cases-icon-gavel .5s ease-in-out; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-lift { animation: cases-icon-nod .45s ease-in-out; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-nudge-back { animation: cases-icon-nudge-back .4s ease-in-out; }
@keyframes cases-icon-globe { 50% { transform: scaleX(.2); } }
@keyframes cases-icon-gavel { 45% { transform: rotate(-24deg); } 70% { transform: rotate(4deg); } }
@keyframes cases-icon-nudge-back { 50% { transform: translateX(-2.5px); } }
@media (prefers-reduced-motion: reduce) {
  svg :is(.icon-anim-globe, .icon-anim-gavel, .icon-anim-lift, .icon-anim-nudge-back), .services-nav-button.is-loading svg > g { animation: none !important; }
}

/* Password dialog: which service the login is for. */




/* Tab names read like the sidebar's: muted until chosen (or pointed at), then
   the sidebar's active ink. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .services-tab { color: var(--v2-muted, #506a80); }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .services-tab:is(.is-active, :hover, :focus-visible) { color: #1e5f8f; }
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot .services-tab { color: var(--v2-muted); }
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot .services-tab:is(.is-active, :hover, :focus-visible) { color: #d8e7f1; }
/* Tabs and the browser buttons wear the toolbar's own 9px rounding (older
   generic button rules had turned the tabs into pills). The chosen tab shows
   by the shared selected fill and its blue name alone — no rail. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .services-toolbar :is(.services-tab, .services-nav-button) { border-radius: var(--ui-frame-radius, 9px) !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .services-toolbar .services-tab.is-active,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .services-toolbar .services-tab.is-active:is(:hover, :focus-visible) {
  background: var(--cases-selected-fill) !important;
  box-shadow: none !important;
}
/* The sidebar's card item while the open card has unsaved changes: a small
   dot after its name, in the card item's own colour. */
html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-item.has-unsaved .nav-title::after {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--nav-accent, var(--cases-accent));
}
/* Every page runs its own frame exactly down to the page's bottom line (15px
   above the window's edge), so the page's own bottom padding would only add a
   scroll (Home, the card, Reports). */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot { padding-bottom: 0 !important; }
/* The card's notes frame ends on that line itself. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot > form#caseForm { padding-bottom: 0 !important; }
/* The chancellery's letter: its flap folds up about the envelope's top edge
   (its corners sit on that edge, so the open flap never crosses the body)
   and stays open while the pointer is on the item. */
svg .icon-anim-flap { transform-box: view-box; transform-origin: 12px 6px; transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-flap { transform: scaleY(-1); }
@media (prefers-reduced-motion: reduce) { svg .icon-anim-flap { transition: none !important; } }
/* The interface itself (logo, menu, titles, buttons) doesn't select as text
   on a double-click or a drag; what you'd copy still does: fields, table
   cells, the About details, messages. (Embedded sites are separate pages.) */
html body.cases-visual-v2 { -webkit-user-select: none; user-select: none; }
html body.cases-visual-v2 :is(input, textarea, [contenteditable="true"], td, dd, #toastStack, .app-prompt-error) { -webkit-user-select: text; user-select: text; }
/* A municipality's group popover: the group, the date it takes effect from,
   a one-line reminder, and Save. Flat window fields (as in the filter
   window); the native date picker stays hidden behind its button. */
html body.cases-visual-v2 .municipality-employee-popover:not(#cases-win-a):not(#cases-win-b) {
  display: grid !important;
  gap: 10px !important;
}
html body.cases-visual-v2 .municipality-employee-popover:not(#cases-win-a):not(#cases-win-b) :is(select, input.date-text-input):is(*, :hover, :focus) {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 34px !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: inset 0 -1px 0 var(--ui-control-border) !important;
  outline: 0 !important;
  color: var(--cases-ink-strong) !important;
  font: inherit !important;
  font-size: var(--type-body) !important;
}
html body.cases-visual-v2 .municipality-employee-popover:not(#cases-win-a):not(#cases-win-b) :is(select, input.date-text-input):focus { box-shadow: inset 0 -2px 0 var(--cases-accent) !important; }
.municipality-employee-popover .date-field-label { display: grid; gap: 4px; font-size: var(--type-caption); color: var(--cases-ink-muted); }
.municipality-employee-popover .date-entry { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--cases-icon-button, 34px); align-items: center; gap: 6px; }
.municipality-employee-popover .date-entry .native-date-picker { position: absolute !important; inset: auto 0 0 auto; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.municipality-employee-popover .date-picker-button { width: var(--cases-icon-button, 34px); height: var(--cases-icon-button, 34px); display: inline-grid; place-items: center; border: 0; border-radius: var(--ui-frame-radius, 9px); background: transparent; cursor: pointer; }
.municipality-employee-popover .date-picker-button:is(:hover, :focus-visible) { background: var(--cases-hover-fill); }
.municipality-employee-popover .date-picker-button svg { width: var(--cases-icon-size, 18px); height: var(--cases-icon-size, 18px); }
.municipality-employee-popover .municipality-group-hint { margin: 0; font-size: var(--type-caption); line-height: 1.45; color: var(--cases-ink-muted); }
.municipality-employee-popover .app-prompt-error:empty { display: none; }
.municipality-employee-popover .municipality-group-actions { display: flex; justify-content: center; }
html body.cases-visual-v2 .municipality-group-save:not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-accent); color: var(--cases-accent) !important; }/* Save is a flat icon button like every toolbar button. */
html body.cases-visual-v2 .municipality-employee-popover .municipality-group-save:not(#cases-flat-a):not(#cases-flat-b):is(*, :focus, :active) { border: 0 !important; box-shadow: none !important; background: transparent !important; }
html body.cases-visual-v2 .municipality-employee-popover .municipality-group-save:not(#cases-flat-a):not(#cases-flat-b):is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; }

/* A group's municipalities: the panel-width window, a scrolling list of tick
   rows (the filter's tick style), the owner of a municipality another group
   has shown faintly beside it. */
html body.cases-visual-v2 .municipality-employee-popover.group-municipalities-popover:not(#cases-win-a):not(#cases-win-b) {
  width: 460px !important;
  min-width: 460px !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - 24px) !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto !important;
}
.group-municipalities-popover .group-municipalities-title { margin: 0; font-size: var(--type-body); font-weight: 500; color: var(--cases-ink-strong); }
.group-municipalities-popover .group-municipalities-list {
  min-height: 0;
  max-height: min(420px, 50vh);
  overflow-y: auto;
  display: grid;
  gap: 2px;
  margin: 0 -6px;
  padding: 0 6px;
}
.group-municipalities-popover .group-municipality-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: var(--cases-control-radius, 10px);
  font-size: var(--type-body);
  color: var(--cases-ink-strong);
  cursor: pointer;
}
.group-municipalities-popover .group-municipality-row > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.group-municipalities-popover .group-municipality-row:hover { background: var(--cases-hover-fill); }
.group-municipalities-popover .group-municipality-row:has(input:checked) { background: transparent; }
.group-municipalities-popover .group-municipality-row:has(input:focus-visible) { background: var(--cases-hover-fill); outline: none; }
.group-municipalities-popover .group-municipality-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-municipalities-popover .group-municipality-owner { overflow: visible; white-space: nowrap; font-size: var(--type-caption); color: var(--cases-ink-muted); }
.group-municipalities-popover .group-municipality-mark { display: inline-flex; color: var(--cases-accent); opacity: 0; }
.group-municipalities-popover .group-municipality-mark svg { width: 18px; height: 18px; }
.group-municipalities-popover .group-municipality-row:has(input:checked) .group-municipality-mark { opacity: 1; }
.group-municipalities-popover .group-municipalities-summary { margin: 0; min-height: 1em; font-size: var(--type-caption); color: var(--cases-ink-muted); }
html body.cases-visual-v2 .cases-main #pageRoot .settings-content .municipality-group-name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-caption); color: var(--cases-ink-muted); }
html body.cases-visual-v2 .cases-main #pageRoot .settings-content .municipality-group-name.is-empty { font-style: italic; opacity: .7; }
html body.cases-visual-v2 .group-municipalities-trigger:not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-tint-place); }
html body.cases-visual-v2 .group-municipalities-trigger:is(*, :hover, :focus-visible, :active):not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { color: var(--cases-icon-tint, currentColor) !important; stroke: currentColor !important; }
/* Document tabs: a tab with its close ✕ right beside it, same height and
   rounding as the site tabs. The file card (a file that isn't a page) sits
   centred in the frame: the file, its size, Open and Save. */
html body.cases-visual-v2 .cases-main #pageRoot .services-doc-tab-wrap {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  height: var(--cases-icon-button, 34px);
  border-radius: var(--ui-frame-radius, 9px);
}
/* One pill: the wrap carries the tab's fill; the tab and its ✕ inside are clear. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .services-docs .services-doc-tab-wrap:is(:hover, :focus-within) { background: var(--cases-hover-fill); }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .services-docs .services-doc-tab-wrap.is-active { background: var(--cases-selected-fill); }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .services-docs .services-doc-tab-wrap .services-doc-tab:is(*, :hover, :focus-visible, .is-active) { padding-right: 4px !important; background: transparent !important; box-shadow: none !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .services-docs .services-doc-close {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; margin-right: 6px; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--cases-ink-muted); cursor: pointer;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .services-docs .services-doc-close svg { width: 13px; height: 13px; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .services-docs .services-doc-close:is(:hover, :focus-visible) { background: var(--cases-hover-fill); color: var(--cases-danger); }
/* At the page's edge the documents shrink together: the name is shortened (…), down to the icon and its ✕; a tab narrower than that keeps only its icon. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .services-docs .services-doc-tab-wrap { flex: 0 1 auto !important; min-width: 64px !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .services-docs .services-doc-tab-wrap > .services-doc-tab { flex: 1 1 auto !important; min-width: 0 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .services-docs .services-doc-tab-wrap > .services-doc-tab > span { min-width: 0 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .services-docs .services-doc-tab-wrap > .services-doc-close { flex: 0 0 auto !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .services-docs .services-doc-tab-wrap.is-narrow > .services-doc-tab > span { display: none !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .services-docs .services-doc-tab-wrap.is-narrow > .services-doc-tab:is(*, :hover, :focus-visible) { gap: 0 !important; }
html body.cases-visual-v2 .services-tab.services-doc-tab svg { --service-tint: var(--cases-tint-backup); }
html body.cases-visual-v2 .cases-main #pageRoot .services-nav-button[hidden] { display: none !important; }
html body.cases-visual-v2 .services-nav-button[data-service-action="save"]:not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-tint-backup); }

.services-host > .services-file-card {
  display: grid;
  place-items: center;
  background: var(--cases-window-bg);
}
.services-file-card .services-file-box { display: grid; justify-items: center; gap: 10px; max-width: 480px; padding: 24px; text-align: center; }
.services-file-card .services-file-icon svg { width: 56px; height: 56px; color: var(--cases-tint-backup); stroke-width: 1.4; }
.services-file-card .services-file-name { font-size: var(--type-title); font-weight: 500; color: var(--cases-ink-strong); overflow-wrap: anywhere; }
.services-file-card .services-file-meta { font-size: var(--type-caption); color: var(--cases-ink-muted); }
.services-file-card .services-file-actions { display: flex; gap: 10px; margin-top: 8px; }
.services-file-card .services-file-actions button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--cases-control-radius, 10px); font: inherit; font-size: var(--type-body); cursor: pointer; }
.services-file-card .services-file-actions button svg { width: 18px; height: 18px; color: var(--cases-accent); }html body.cases-visual-v2 .services-host > .services-file-card .services-file-icon svg { width: 56px !important; height: 56px !important; min-width: 56px !important; max-width: 56px !important; max-height: 56px !important; color: var(--cases-tint-backup) !important; stroke-width: 1.4 !important; }
html body.cases-visual-v2 .services-host > .services-file-card .services-file-actions button:is(*, :focus, :active) {
  border: 1px solid var(--cases-window-border) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cases-ink-strong) !important;
}
html body.cases-visual-v2 .services-host > .services-file-card .services-file-actions button:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; }
html body.cases-visual-v2 .services-host > .services-file-card .services-file-actions button svg { width: 18px !important; height: 18px !important; color: var(--cases-accent) !important; }/* Editing a saved login: its service is shown, fixed. */

/* Suggestions for a field in a dialog show above the dialog. */
html body.app-confirm-open .styled-autofill-popup { z-index: 30001 !important; }
/* A saved login opens for editing: the hand says it can be clicked. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-list .settings-item-label[data-edit-credential] { cursor: pointer !important; }
/* Saved logins: the title, then the user name in quieter ink. */
/* Titles in one column and user names in the next, aligned down the list. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-list .credential-label { display: grid !important; grid-template-columns: 150px minmax(0, 1fr) !important; align-items: baseline; column-gap: 12px !important; flex: 1 1 auto !important; min-width: 0; outline: none !important; box-shadow: none !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-list .credential-label .credential-user { color: var(--cases-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-list .credential-label:is(:hover, :focus-visible) .credential-title { color: var(--cases-accent); }
/* The password field's show/hide eye, inside the field on the right. */
.app-credential-dialog .app-credential-password-field { position: relative; }
html body .app-credential-dialog .app-credential-password-field input { padding-right: 34px !important; }
.app-credential-dialog .app-credential-reveal {
  position: absolute; right: 2px; bottom: 5px;
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--cases-ink-muted); cursor: pointer;
}
.app-credential-dialog .app-credential-reveal .icon-anim-blink { transform-box: fill-box; transform-origin: center; }
.app-credential-dialog .app-credential-reveal:is(:hover, :focus-visible) .icon-anim-blink { animation: cases-icon-blink .45s ease-in-out; }
@keyframes cases-icon-blink { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.12); } }
@media (prefers-reduced-motion: reduce) { .app-credential-dialog .app-credential-reveal .icon-anim-blink { animation: none !important; } }
.app-credential-dialog .app-credential-reveal:is(:hover, :focus-visible) { background: var(--cases-hover-fill); color: var(--cases-accent); }
/* ---- The top row: logo, the page's toolbar and the window buttons on one
   line (--ui-top-row-center, the emblem's middle, 15px + half the visible
   emblem below the top edge). The title bar no longer takes a band of its
   own: pages start 23px higher (their toolbar on the row), the window buttons
   sit on the row at the right, and the toolbar's right-hand buttons stop just
   left of them. */
html body.cases-visual-v2 {
  --ui-top-row-center: 38px;
  /* The toolbar stops a page gutter (24px) short of the window buttons. */
  --ui-window-controls-reserve: 110px;
  /* Pages start a page gutter (24px, twice the sidebar's button gap) below
     the emblem's visible bottom (60px) — so the logo reads apart from the
     menu — with the sidebar's first item. */
  --ui-logo-menu-gap: 24px;
  --v2-page-content-top: 63px;
  --ui-page-content-top: 63px;
}
html body.cases-visual-v2 .cases-main .titlebar {
  margin-bottom: -9px !important;
  pointer-events: none !important;
  -webkit-app-region: no-drag !important;
}
html body.cases-visual-v2 .cases-main .titlebar .drag-region { -webkit-app-region: no-drag !important; }
html body.cases-visual-v2 .cases-main .titlebar .window-controls {
  pointer-events: auto !important;
  transform: translateY(calc(var(--ui-top-row-center) - 16px)) !important;
}
/* The toolbar ends short of the window buttons (its box, not just its content:
   its drag area must never reach over them). */
html body.cases-visual-v2 .cases-main #pageRoot > .page-action-strip { margin-right: calc(var(--ui-window-controls-reserve) - 4px) !important; }
/* The card has no top padding: its toolbar-to-form gap puts the first frame on the page line. */
html body.cases-visual-v2 .cases-main .cases-page-root:has(.cases-editor-panel) { row-gap: calc(var(--ui-page-content-top) - var(--cases-icon-button, 34px)) !important; }
/* Starting 23px higher, a page is 23px taller: it still ends on the bottom line. */
html body.cases-visual-v2 .cases-main .cases-page-root { height: calc(100vh - 29px) !important; max-height: calc(100vh - 29px) !important; }
/* The row moves the window: the logo and the toolbar's empty space drag it,
   everything that can be clicked in them doesn't (nor while a dialog is open). */
html body.cases-visual-v2 .cases-sidebar .cases-brand,
html body.cases-visual-v2 .cases-main #pageRoot > .page-action-strip { -webkit-app-region: drag; }
html body.cases-visual-v2 .cases-main #pageRoot > .page-action-strip :is(button, a, input, select, textarea, label, [role="tab"], [tabindex], .services-doc-tab-wrap) { -webkit-app-region: no-drag; }
html body.app-confirm-open :is(.cases-sidebar .cases-brand, .cases-main #pageRoot > .page-action-strip) { -webkit-app-region: no-drag; }
/* ---- The card on the sidebar's lanes: every line of it — a block's title,
   a row of fields, the notes — is one sidebar button tall (a lane), lines and
   blocks one sidebar gap apart, so each line sits level with a sidebar
   button. A field's box is button-high (34px) and centred in its lane (its
   value on the button's name line); its caption rides above it. Blocks are
   whole lanes: Information 3 (title + two rows), Property and Registration
   2 each (title + a row, one lane more per added row), the notes 2 (level
   with Settings and Exit). */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel {
  --ui-control-height: var(--ui-icon-button-size, 34px);
  --card-lane: var(--ui-sidebar-row-height, 54px);
  --card-lane-gap: var(--ui-sidebar-row-gap, 12px);
  /* The room between the lines of fields inside one block (more than the sidebar lanes' gap: the card's lines no longer stand on the sidebar's lanes, so they have more room). */
  --card-row-gap: 26px;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > section.cases-card,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > section.cases-card:not(.notes-section) {
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: var(--card-lane-gap) !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > section.cases-card:first-of-type { margin-top: 0 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > section.cases-card > h3.editor-section-title {
  height: var(--card-lane) !important;
  margin: 0 0 var(--card-lane-gap) !important;
}
/* Field rows: a lane per line of fields (a row that wraps in a narrow window
   takes a lane per line), each field's box centred in its lane. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(.card-field-row, .line-row) {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-auto-rows: var(--card-lane) !important;
  row-gap: var(--card-lane-gap) !important;
  align-items: end !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > .card-main-section > .information-row-top { margin-bottom: var(--card-row-gap) !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(.card-field-row, .line-row) > :is(label, .row-icon-action, button) {
  align-self: end !important;
  margin-bottom: calc((var(--card-lane) - var(--ui-control-height)) / 2) !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(.card-field-row, .line-row) > label {
  justify-content: flex-end !important;
  height: var(--ui-control-height) !important;
  min-height: 0 !important;
  overflow: visible !important;
}
/* A short window's compact sidebar lanes (42px) can't hold a captioned field:
   there the card keeps its own standard lanes, and scrolls if it must. */
@media (max-height: 780px) {
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel {
    --card-lane: 54px;
    --card-lane-gap: 12px;
  }
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(#objectRows, #retrievalRows, #registrationRows) {
  row-gap: var(--card-row-gap) !important;
  gap: var(--card-row-gap) !important;
  padding-top: 20px !important;
  margin-top: -20px !important;
  scroll-padding-top: 20px !important;
}
/* The add button: in the title's lane, centred. */

/* Notes: the title's lane, then a lane of writing — a field's box, centred. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > .notes-section > textarea#note,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > .notes-section > textarea#note:is(:hover, :focus, :focus-visible, .has-value) {
  flex: 0 0 var(--ui-control-height) !important;
  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  max-height: var(--ui-control-height) !important;
  margin: calc((var(--card-lane) - var(--ui-control-height)) / 2) 0 !important;
}
/* The add button's holder is the button's height, so the button sits where it's placed. */

/* ---- The report looks like the case tables: the table has the frame's full
   width, and the field list opens over it (top right, under its toolbar
   button) as a floating panel, like the case tables' filter. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot #reportPanel.report-split {
  position: relative !important;
  grid-template-columns: minmax(0, 1fr) !important;
  overflow: visible !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot #reportPanel.report-split > .report-preview-pane {
  grid-column: 1 !important;
  border-radius: var(--ui-frame-radius) !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot #reportPanel.report-split > .report-fields-pane {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 20 !important;
  width: var(--cases-window-panel, 360px) !important;
  max-width: calc(100% - 16px) !important;
  height: auto !important;
  max-height: calc(100% - 16px) !important;
  border: 1px solid var(--ui-control-border) !important;
  border-radius: var(--ui-frame-radius) !important;
  background: var(--cases-window-bg) !important;
  box-shadow: var(--v2-shadow-float) !important;
  backdrop-filter: blur(24px) saturate(1.08) !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translateY(-4px) scale(.99) !important;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot #reportPanel.report-split.is-fields-open > .report-fields-pane {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  transition: opacity .16s ease, transform .16s ease !important;
}
/* In the floating panel the rows keep their own height (not the table's). */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot #reportPanel.report-split .report-unified-list > .report-unified-row {
  min-height: 44px !important;
  height: 44px !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot #reportPanel.report-split .report-field-catalog { padding-bottom: 8px !important; }
@media (prefers-reduced-motion: reduce) {
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot #reportPanel.report-split > .report-fields-pane { transition: none !important; }
}

/* The report's cells and headers as the case tables draw theirs (sizes read
   off the Active table): the same type, insets and line heights, the header
   buttons, the status marker and the number links. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot table.report-preview-table { font-size: var(--type-body) !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot table.report-preview-table td {
  padding: 6px 7px !important;
  line-height: 1.32 !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot table.report-preview-table td :is(.case-cadastral-code, .case-identifier-line) {
  height: auto !important;
  min-height: 0 !important;
  line-height: inherit !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot table.report-preview-table td :is(.case-identifier-line) { line-height: 15px !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot table.report-preview-table td :is(.case-identifier-cell, .case-registration-number-cell) { white-space: normal !important; }
/* Stacked values stay a table cell (its lines one under another). */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot table.report-preview-table td:is(.case-identifier-cell, .case-registration-number-cell) { display: table-cell !important; white-space: normal !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot table.report-preview-table td:is(.case-identifier-cell, .case-registration-number-cell) > * { display: block !important; margin-top: 1px !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot table.report-preview-table td:is(.case-identifier-cell, .case-registration-number-cell) > :first-child { margin-top: 0 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot table.report-preview-table .status-pill.case-status-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 28px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-weight: 400 !important;
  vertical-align: middle !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot table.report-preview-table th > .report-column-filter-trigger {
  display: grid !important;
  place-items: center !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 5px 6px !important;
  border-radius: 16px !important;
  line-height: 1.35 !important;
  white-space: balance !important;
  text-wrap: balance !important;
}
/* The filler column: no content, only the row lines. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot table.report-preview-table .report-filler { padding: 0 !important; }
/* The report's header: the case tables' 48px buttons over a 1px line. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot table.report-preview-table th { height: 48px !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot #reportPreviewHead { border-bottom: 1px solid var(--ui-data-divider) !important; }/* Every entry is the same ink; only what can be clicked (status, numbers,
   identifiers) carries its own colour — in the case tables and the report. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot :is(.cases-table, .report-preview-table) td:is(.case-department-cell, .case-executor-cell, .case-note-cell) > span,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot :is(.cases-table, .report-preview-table) td .case-identifier-line:not(:has(button)) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}
/* Report headers break between words only (never inside one), and entries
   may wrap rather than be cut. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot table.report-preview-table th > .report-column-filter-trigger { overflow-wrap: normal !important; word-break: normal !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot table.report-preview-table td { white-space: normal !important; }/* Case-table headers, too, break between words only. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .cases-table th > .case-column-filter-trigger { overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; }/* The backup summary is sized to its lane (renderer): its lines centred in it. */
/* Saved logins: the user name in quiet ink, not a link's colour (the whole row is what's clicked). */
/* The chart's caption beside its type switch: what it breaks down by, and when. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .home-chart-control-tier.is-primary { display: inline-flex !important; align-items: center !important; gap: 10px !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .home-chart-caption .home-chart-caption-total { color: var(--cases-ink-strong) !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .home-chart-caption { color: var(--cases-ink-muted) !important; font-size: var(--type-body) !important; font-weight: 400 !important; line-height: 18px !important; white-space: nowrap !important; }
/* Home table: a group's icon and name are centred on the row's line, level with its numbers. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .home-mobile-table .home-group-identity { display: flex !important; align-items: center !important; height: 100% !important; margin: 0 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .home-mobile-table .home-group-identity > * { margin: 0 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .home-mobile-table .home-group-name { display: block !important; height: auto !important; min-height: 0 !important; padding: 0 !important; line-height: 15px !important; }/* Window buttons: the page buttons' language (quiet icons, a hover fill; red
   only when closing), a size that sits with the 18px page icons. */
html body.cases-visual-v2 .titlebar .window-controls button,
html body.cases-visual-v2 .titlebar .window-controls button[type="button"] {
  width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; max-width: 24px !important; max-height: 24px !important;
  border: 0 !important; border-radius: 6px !important; background: transparent !important; box-shadow: none !important;
  color: var(--cases-ink-muted) !important;
}
html body.cases-visual-v2 .titlebar .window-controls button:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; }
/* ---- The top row, lowered: the window buttons stand in the corner on a band of their own (10px from the top edge), the whole row under them — the logo, the
   toolbar, the pages — starts --ui-top-shift lower. The toolbar's last button (the bell) and the close button stand on one vertical line (61px from the window's
   edge), the minimize button over the search (the buttons stand on the page buttons' 42px pitch: there is no maximize button, the top row's double click does it); a page keeps its bottom line (it is as much shorter as it starts lower). */
html body.cases-visual-v2 {
  --ui-top-shift: 12px;
  --ui-window-controls-reserve: 20px;
}
html body.cases-visual-v2 .cases-app-frame { box-sizing: border-box !important; padding-top: var(--ui-top-shift) !important; }
html body.cases-visual-v2 .cases-main .cases-page-root { height: calc(100vh - 29px - var(--ui-top-shift)) !important; max-height: calc(100vh - 29px - var(--ui-top-shift)) !important; }
html body.cases-visual-v2 .cases-main .titlebar .window-controls { position: fixed !important; top: 8px !important; right: 46px !important; z-index: 5 !important; transform: none !important; gap: 20px !important; height: 22px !important; }
html body.cases-visual-v2 .titlebar .window-controls button,
html body.cases-visual-v2 .titlebar .window-controls button[type="button"] { width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; max-width: 22px !important; max-height: 22px !important; border-radius: var(--ui-control-radius) !important; }
/* Home's top row: today's date on the logo's line (left), the card search
   beside the bell (right) — the same field as the case tables' search. */
/* Every page's context on the left of its top row: the page's name, then a
   quiet detail (a count, a section, today's date); the page's buttons stay
   on the right. The card's status chip follows its name. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip { display: flex !important; align-items: center !important; justify-content: flex-start !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip > .page-actions { margin-left: auto !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip > .page-context { display: inline-flex !important; align-items: baseline !important; gap: 8px !important; min-width: 0 !important; padding-left: var(--ui-panel-inset, 20px) !important; font-size: var(--type-body) !important; line-height: 18px !important; white-space: nowrap !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip > .page-context > .page-context-title { color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; font-weight: 500 !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip > .page-context > .page-context-detail { color: var(--cases-ink-muted) !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .editor-action-strip > .editor-status-chip { position: static !important; top: auto !important; left: auto !important; transform: none !important; margin-left: 14px !important; }
/* ---- Lock screen: the app's own backdrop, the emblem assembling tile by
   tile, the wordmark, one password line with its eye and an arrow. A wrong
   password shakes the card; the right one lifts the tiles away and the
   screen dissolves into the app. */
html.app-lock-pending .cases-app-frame { visibility: hidden !important; }
.app-lock {
  position: fixed; inset: 0; z-index: 40000;
  display: grid; place-items: center;
  background:
    radial-gradient(1200px 700px at 30% 20%, color-mix(in srgb, var(--cases-accent, #1769d2) 16%, transparent), transparent 60%),
    radial-gradient(900px 600px at 80% 90%, color-mix(in srgb, #8a6ddb 14%, transparent), transparent 60%),
    #eef3f8;
  opacity: 0;
  transition: opacity .28s ease;
  -webkit-app-region: drag;
}
html[data-theme="dark"] .app-lock { background:
    radial-gradient(1200px 700px at 30% 20%, rgba(79, 127, 216, .16), transparent 60%),
    radial-gradient(900px 600px at 80% 90%, rgba(138, 109, 219, .14), transparent 60%),
    #12171d; }
.app-lock.is-shown { opacity: 1; }
.app-lock-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 420px at 50% 42%, rgba(255, 255, 255, .06), transparent 70%); animation: app-lock-breathe 6s ease-in-out infinite; }
.app-lock-card { position: relative; display: grid; justify-items: center; gap: 18px; width: min(340px, calc(100vw - 48px)); -webkit-app-region: no-drag; }
.app-lock-emblem { width: 96px; height: 96px; overflow: visible; }
.app-lock-tile { transform-box: fill-box; transform-origin: center; opacity: 0; animation: app-lock-tile-in .85s cubic-bezier(.34, 1.56, .64, 1) forwards; animation-delay: calc(.2s + var(--tile-index) * .13s); }
/* The CASES wordmark exactly as in the sidebar (font, size, weight, spacing, colour);
   its font must beat the app-wide text font, which is set !important. */
.app-lock-wordmark { margin-top: -4px; color: #4d5680; font-family: "Cases Aquire Embedded", "Cases Inter Embedded", sans-serif !important; font-size: 23px; font-style: normal; font-weight: 400; line-height: 1; letter-spacing: .16em; opacity: 0; animation: app-lock-rise .8s ease forwards 1.25s; }
.app-lock-form { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; opacity: 0; animation: app-lock-rise .8s ease forwards 1.55s; }
.app-lock-field { position: relative; flex: 1 1 auto; }
.app-lock-field input {
  box-sizing: border-box; width: 100%; height: 42px; padding: 0 38px 0 4px;
  border: 0; border-bottom: 1px solid var(--ui-control-border, rgba(111, 148, 177, .45)); border-radius: 0;
  background: transparent; color: var(--cases-ink-strong, #1d2b3a); font: inherit; font-size: var(--type-title); letter-spacing: .08em; outline: none;
  transition: border-color .2s ease;
}
.app-lock-field input::placeholder { color: var(--cases-ink-muted); letter-spacing: 0; }
.app-lock-field input:focus { border-bottom-color: var(--cases-accent, #1769d2); }
.app-lock-reveal { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--cases-ink-muted); cursor: pointer; }
.app-lock-reveal:is(:hover, :focus-visible) { background: var(--cases-hover-fill); color: var(--cases-accent); }
.app-lock-reveal svg { width: 16px; height: 16px; }
.app-lock-enter { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--cases-accent, #1769d2); color: #fff; cursor: pointer; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--cases-accent, #1769d2) 70%, transparent); transition: transform .15s ease, filter .15s ease; }
.app-lock-enter:is(:hover, :focus-visible) { transform: translateX(2px); filter: brightness(1.08); outline: none; }
.app-lock-enter svg { width: 20px; height: 20px; }
.app-lock-message { min-height: 18px; margin: 0; color: #d9434f; font-size: var(--type-body); text-align: center; }
.app-lock-card.is-wrong { animation: app-lock-shake .42s ease; }
.app-lock-card.is-wrong .app-lock-field input { border-bottom-color: #d9434f; }
.app-lock.is-unlocking { animation: app-lock-dissolve .9s ease .5s forwards; }
.app-lock.is-unlocking .app-lock-tile { animation: app-lock-tile-out .75s cubic-bezier(.5, 0, .75, 0) forwards; animation-delay: calc(var(--tile-index) * .06s); }
.app-lock.is-unlocking :is(.app-lock-wordmark, .app-lock-form, .app-lock-message) { animation: app-lock-fade-out .4s ease forwards; }
@keyframes app-lock-tile-in { from { opacity: 0; transform: scale(.2) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes app-lock-tile-out { to { opacity: 0; transform: scale(1.6); } }
@keyframes app-lock-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes app-lock-fade-out { to { opacity: 0; } }
@keyframes app-lock-dissolve { to { opacity: 0; } }
@keyframes app-lock-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes app-lock-breathe { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .app-lock, .app-lock * { animation-duration: .01ms !important; animation-delay: 0s !important; transition: none !important; }
}

/* ---- Security settings: the tabs (the settings' own pill style) and the
   auto-lock choices. */

html body.cases-visual-v2 .cases-main #pageRoot .settings-content .security-panel :is(.security-tab, .security-choice) {
  height: 32px; padding: 0 16px; border: 0; border-radius: 999px;
  background: transparent; color: var(--cases-ink-muted); font: inherit; font-size: var(--type-body); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
html body.cases-visual-v2 .cases-main #pageRoot .settings-content .security-panel :is(.security-tab, .security-choice):is(:hover, :focus-visible):not(:disabled) { background: var(--cases-hover-fill); color: var(--cases-ink-strong, var(--v2-ink-strong)); outline: none; }
html body.cases-visual-v2 .cases-main #pageRoot .settings-content .security-panel :is(.security-tab, .security-choice).is-active { background: var(--cases-selected-fill); color: var(--cases-accent); font-weight: 500; }




html body.cases-visual-v2 .cases-main #pageRoot .settings-content .security-panel .security-row.is-disabled > span:first-child { opacity: .55; }
html body.cases-visual-v2 .cases-main #pageRoot .settings-content .security-panel :is(.security-choice, button):disabled { opacity: .45; cursor: default; }
/* The lock screen's password line: the app's fields are boxed by default here it's a bare line. */
html body .app-lock .app-lock-field input,
html body .app-lock .app-lock-field input:is(:hover, :focus, :focus-visible) {
  height: 42px !important; padding: 0 38px 0 4px !important; border: 0 !important; border-bottom: 1px solid var(--ui-control-border, rgba(111, 148, 177, .45)) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; outline: none !important; font-size: var(--type-title) !important;
}
html body .app-lock .app-lock-field input:focus { border-bottom-color: var(--cases-accent, #1769d2) !important; }
html body .app-lock .app-lock-card.is-wrong .app-lock-field input { border-bottom-color: #d9434f !important; }
/* Security tabs: compact pills on the left, not a stretched bar. */

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .settings-content .security-panel :is(.security-tab, .security-choice) { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; box-shadow: none !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .settings-content .security-panel .security-tab { height: 32px !important; padding: 0 18px !important; border: 0 !important; border-radius: 999px !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .settings-content .security-panel .security-tab:not(.is-active) { background: transparent !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .settings-content .security-panel .security-tab.is-active { background: var(--cases-selected-fill) !important; color: var(--cases-accent) !important; }

html body .app-lock .app-lock-message { color: #d9434f !important; }/* Security's tab row and sign-out row are the panel's plain lines (like "New password"): no frame of their own. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .settings-content > .security-panel > .kancelaria-add-row { border: 0 !important; border-bottom: 1px solid var(--ui-data-divider) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 12px !important; font-weight: 400 !important; }
/* Security: the tabs' and choices' highlight changes softly, as the app's other tabs do. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content .security-panel :is(.security-tab, .security-choice) { transition: background-color .22s ease, color .22s ease !important; }
@media (prefers-reduced-motion: reduce) { html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content .security-panel :is(.security-tab, .security-choice) { transition: none !important; } }/* The lock screen at start-up: whole from its first frame, no fade over the app. */
.app-lock.is-instant { transition: none !important; }
/* The lock screen's window buttons: where the title bar has them, drawn alike. */
html body .app-lock .app-lock-window-controls {
  position: absolute; top: 26px; right: 22px; z-index: 2;
  display: flex; align-items: center; gap: 6px; height: 24px;
  -webkit-app-region: no-drag;
}
html body .app-lock .app-lock-window-controls button {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--cases-ink-muted); cursor: pointer;
  -webkit-app-region: no-drag;
}
html body .app-lock .app-lock-window-controls button svg { width: 14px; height: 14px; stroke: currentColor; }
html body .app-lock .app-lock-window-controls button:is(:hover, :focus-visible) { background: var(--cases-hover-fill); color: var(--cases-ink-strong, #1d2b3a); outline: none; }
/* Security's tabs and auto-lock choices, drawn like the services' tabs: the
   frame radius, and the chosen one in strong ink on the selected fill. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content .security-panel :is(.security-tab, .security-choice) { border-radius: var(--ui-frame-radius, 9px) !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content .security-panel .security-tab { height: var(--cases-icon-button, 34px) !important; padding: 0 16px !important; }

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content .security-panel :is(.security-tab, .security-choice).is-active { background: var(--cases-selected-fill) !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; -webkit-text-fill-color: currentColor !important; font-weight: 500 !important; }/* Security's icon buttons: the settings' 9px buttons in their own colours —
   change (key) and lock in the action blue, sign-out red like the sidebar's Exit. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content .security-panel .settings-action-btn { border-radius: var(--ui-frame-radius, 9px) !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content .security-panel :is(#securityPasswordChange, #securityLockNow) :is(svg, .button-icon) { color: rgb(85, 127, 209) !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content .security-panel #securitySignOutAll :is(svg, .button-icon) { color: #d9434f !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content .security-panel #securityLockNow:disabled :is(svg, .button-icon) { color: var(--cases-ink-muted) !important; }
/* Lock screen: its window buttons as the title bar's (24px, 6px), its enter
   arrow and eye on the app's 9px radius. */
html body .app-lock .app-lock-window-controls button,
html body .app-lock .app-lock-window-controls button[type="button"] { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; max-width: 24px !important; max-height: 24px !important; border: 0 !important; border-radius: 6px !important; }
html body .app-lock .app-lock-enter { border-radius: var(--ui-frame-radius, 9px) !important; }
html body .app-lock .app-lock-reveal { border-radius: var(--ui-frame-radius, 9px) !important; }/* Lock screen: the copyright and the maker's mark (its own colours, its word
   the copyright's size) along the bottom — the last thing to appear. */
.app-lock-footer { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--cases-ink-muted); font-size: var(--type-caption); opacity: 0; animation: app-lock-rise .8s ease forwards 1.9s; -webkit-app-region: no-drag; }
.app-lock-maker { height: 28px; width: auto; transform: none; } /* the lockup is cut to its artwork; its lettering sits a little below the middle of its canvas: lifted onto the line of the copyright */
.app-lock-maker.maker-on-dark { display: none; }
html[data-theme="dark"] .app-lock-maker.maker-on-light { display: none; }
html[data-theme="dark"] .app-lock-maker.maker-on-dark { display: block; }
.app-lock.is-unlocking .app-lock-footer { animation: app-lock-fade-out .4s ease forwards; }
/* Security's rows: the stepper row lays out like the others (label left, stepper right). */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .settings-content .security-panel .deadline-setting-row { display: flex !important; align-items: center !important; justify-content: space-between !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .settings-content .security-panel .is-disabled .deadline-stepper { opacity: .45 !important; }html body .app-lock .app-lock-window-controls button svg,
html body .app-lock .app-lock-window-controls button svg.traffic-icon { display: block !important; width: 14px !important; height: 14px !important; min-width: 14px !important; min-height: 14px !important; max-width: 14px !important; max-height: 14px !important; color: var(--cases-ink-muted) !important; stroke: currentColor !important; opacity: 1 !important; }
html body .app-lock .app-lock-window-controls button:is(:hover, :focus-visible) svg { color: var(--cases-ink-strong, #1d2b3a) !important; }
/* The auto-lock stepper ends in the row icons' column (its + under the bin and the lock). */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content .security-panel .deadline-setting-row { padding-right: 3px !important; }
/* Home's table is the interface, not text: nothing in it is selected. */
html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table, html body.cases-visual-v2 .cases-main #pageRoot .home-mobile-table * { user-select: none !important; -webkit-user-select: none !important; }
/* Group popover: a kept municipality's start date, clicked to move it to the date above. */
.group-municipalities-popover .group-municipality-since { padding: 2px 8px; border: 0; border-radius: var(--ui-frame-radius, 9px); background: transparent; color: var(--cases-ink-muted); font: inherit; font-size: var(--type-caption); cursor: pointer; transition: background-color .18s ease, color .18s ease; }
.group-municipalities-popover .group-municipality-since:is(:hover, :focus-visible) { background: var(--cases-hover-fill); color: var(--cases-ink-strong, var(--v2-ink-strong)); outline: none; }
.group-municipalities-popover .group-municipality-since[aria-pressed="true"] { background: var(--cases-selected-fill); color: var(--cases-accent); text-decoration: line-through; }/* Group popover: the app's 18px icons, and the start date in the owners' 11px. */
html body.cases-visual-v2 .group-municipalities-popover :is(.group-municipality-mark, [data-picker-target], .municipality-group-save) svg { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; }
html body.cases-visual-v2 .group-municipalities-popover .group-municipality-since { height: 20px !important; min-height: 0 !important; padding: 0 6px !important; font-size: var(--type-caption) !important; font-weight: 400 !important; line-height: 20px !important; box-shadow: none !important; }/* The lock screen's and password dialogs' eyes blink too (as the site-password dialog's). */
:is(.app-lock-reveal, .app-password-dialog .app-credential-reveal) .icon-anim-blink { transform-box: fill-box; transform-origin: center; }
:is(.app-lock-reveal, .app-password-dialog .app-credential-reveal):is(:hover, :focus-visible) .icon-anim-blink { animation: cases-icon-blink .45s ease-in-out; }/* The extract-or-map choice: the loader's card and moving grid, the code,
   and two choices in the sidebar buttons' style (their icons' own motion). */
html body .code-chooser .code-chooser-card { gap: 14px !important; padding: 24px 24px 20px !important; min-width: 280px; }
html body .code-chooser .code-chooser-code { margin: 0 !important; font-size: var(--type-body) !important; font-weight: 500 !important; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
html body .code-chooser .code-chooser-options { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; width: 100%; }
html body .code-chooser .code-chooser-option {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 16px 12px; border: 1px solid transparent; border-radius: var(--ui-frame-radius, 9px);
  background: var(--cases-hover-fill, rgba(95, 121, 220, .08)); color: inherit; font: inherit; font-size: var(--type-body); cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
html body .code-chooser .code-chooser-option svg { width: 22px; height: 22px; color: var(--cases-accent, #5b8def); }
html body .code-chooser .code-chooser-option[data-code-target="maps"] svg { color: #2f9e88; }
html body .code-chooser .code-chooser-option[data-code-target="napr"] svg { color: #4f86c6; }
html body .code-chooser .code-chooser-option[data-code-target="atom"] svg { color: #8a67d5; }
html body .code-chooser .code-chooser-option:is(:hover, :focus-visible) { background: var(--cases-selected-fill, rgba(95, 121, 220, .16)); border-color: color-mix(in srgb, var(--cases-accent, #5b8def) 35%, transparent); outline: none; transform: translateY(-1px); }
html body .code-chooser .kancelaria-loader-card { transform: scale(.96); transition: transform .22s cubic-bezier(.34, 1.56, .64, 1) !important; }
html body .code-chooser.visible .kancelaria-loader-card { transform: none; }
@media (prefers-reduced-motion: reduce) { html body .code-chooser :is(.code-chooser-option, .kancelaria-loader-card) { transition: none !important; transform: none !important; } }/* The way back: a quiet chip at the start of the top row naming the page
   you came from; its arrow nudges back on hover. It slides in with the page. */
/* The way back: the top row's own button language — no frame, no fill at rest;
   the accent arrow and the page's name (muted), the toolbar's hover fill and
   strong ink when pointed at. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip > .return-chip {
  display: inline-flex !important; align-items: center !important; gap: 6px !important; flex: 0 1 auto !important;
  max-width: 340px !important; height: var(--cases-icon-button, 34px) !important; margin: 0 0 0 12px !important; padding: 0 12px 0 8px !important;
  border: 0 !important; border-radius: var(--ui-frame-radius, 9px) !important;
  background: transparent !important; box-shadow: none !important;
  color: var(--cases-ink-muted, var(--v2-muted)) !important; font: inherit !important; font-size: var(--type-body) !important; line-height: 18px !important;
  white-space: nowrap !important; cursor: pointer !important; -webkit-app-region: no-drag;
  transition: background-color .14s ease, color .14s ease !important; animation: return-chip-in .32s cubic-bezier(.2, .8, .2, 1) both;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip > .return-chip > span { overflow: hidden !important; text-overflow: ellipsis !important; line-height: 18px !important; padding: 1px 0 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip > .return-chip > svg { flex: 0 0 18px !important; width: var(--cases-icon-size, 18px) !important; height: var(--cases-icon-size, 18px) !important; color: var(--cases-accent, #5b8def) !important; }
(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; outline: none !important; }html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip > .return-chip + .page-context { padding-left: 10px !important; }
@keyframes return-chip-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
/* Back in a table: the row you left from lights up for a moment. */
html body.cases-visual-v2 .cases-main #pageRoot .cases-table tr.is-return-focus > td { animation: return-row-flash 1.6s ease-out; }
@keyframes return-row-flash { 0%, 35% { background-color: color-mix(in srgb, var(--cases-accent, #5b8def) 16%, transparent); } 100% { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { html body.cases-visual-v2 .cases-main #pageRoot :is(.return-chip, .cases-table tr.is-return-focus > td) { animation: none !important; } }html body.cases-visual-v2 .services-tab[data-service="evaluation"] { --service-tint: var(--cases-tint-folder); }
html body.cases-visual-v2 .services-tab[data-service="mail"] { --service-tint: var(--cases-tint-filter); }
/* A site's page sits on white while it loads, as in a browser. */
.services-host > webview.services-view, .services-host > iframe.services-view:not(.services-djvu) { background: #fff; }

/* ---- Administration › Cameras: office tabs (the services' tab style), the
   cameras in a 16:9 grid that fills the frame, a camera full-size on click. */
.services-host > .camera-view { display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; padding: 12px; background: transparent; }
:is(.camera-view, .camera-row) .camera-bar { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; min-height: 34px; }
:is(.camera-view, .camera-row) .camera-offices { display: flex; gap: 6px; }
:is(.camera-view, .camera-row) :is(.camera-office, .camera-edit-toggle) {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 0; border-radius: var(--ui-frame-radius, 9px);
  background: transparent; color: var(--cases-ink-muted); font: inherit; font-size: var(--type-body); cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
:is(.camera-view, .camera-row) :is(.camera-office, .camera-edit-toggle) svg { width: 18px; height: 18px; color: var(--cases-accent, #5b8def); }
:is(.camera-view, .camera-row) :is(.camera-office, .camera-edit-toggle):is(:hover, :focus-visible) { background: var(--cases-hover-fill); color: var(--cases-ink-strong, var(--v2-ink-strong)); outline: none; }
:is(.camera-view, .camera-row) :is(.camera-office, .camera-edit-toggle).is-active { background: var(--cases-selected-fill); color: var(--cases-ink-strong, var(--v2-ink-strong)); font-weight: 500; }
:is(.camera-view, .camera-row) .camera-edit-toggle { margin-left: auto; }
:is(.camera-view, .camera-row) .camera-note { min-width: 0; overflow: hidden; color: var(--cases-ink-muted); font-size: var(--type-body); white-space: nowrap; text-overflow: ellipsis; }
.camera-view .camera-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(var(--camera-columns, 3), minmax(0, 1fr)); gap: 8px; align-content: center; overflow: auto; scrollbar-width: thin; }
.camera-view .camera-tile { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--ui-frame-radius, 9px); background: #0b0f14; cursor: zoom-in; transition: box-shadow .2s ease; }
.camera-view .camera-tile:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--cases-accent, #5b8def) 55%, transparent); }
.camera-view :is(.camera-tile, .camera-focus) video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0b0f14; }
.camera-view :is(.camera-tile, .camera-focus) .camera-label { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 2px 8px; border-radius: 6px; background: rgba(8, 12, 18, .6); color: #e8eef4; font-size: var(--type-caption); line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.camera-view :is(.camera-tile, .camera-focus) .camera-offline { position: absolute; inset: 0; display: none; place-items: center; color: #9fb0c0; font-size: var(--type-body); pointer-events: none; }
.camera-view :is(.camera-tile, .camera-focus).is-offline .camera-offline { display: grid; }
.camera-view :is(.camera-tile, .camera-focus).is-offline video { opacity: .15; }
.camera-view .camera-focus { position: absolute; inset: 0; z-index: 3; background: #000; animation: camera-focus-in .22s ease both; }
.camera-view .camera-focus-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--ui-frame-radius, 9px); background: rgba(8, 12, 18, .55); color: #e8eef4; cursor: pointer; }
.camera-view .camera-focus-close:is(:hover, :focus-visible) { background: rgba(8, 12, 18, .85); outline: none; }
.camera-view .camera-focus-close svg { width: 18px; height: 18px; }
@keyframes camera-focus-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .camera-view .camera-focus { animation: none; } }.camera-view [hidden] { display: none !important; }
/* Cameras' edit mode: columns choice in the bar; on each tile a grip (drag
   to reorder) and an eye (hide/show); hidden cameras faded; a reconnecting
   stream says so quietly. */
:is(.camera-view, .camera-row) .camera-columns { display: inline-flex; gap: 4px; margin-left: auto; }
:is(.camera-view, .camera-row) .camera-columns + .camera-edit-toggle { margin-left: 0; }
:is(.camera-view, .camera-row) .camera-column-choice { height: 30px; min-width: 34px; padding: 0 10px; border: 0; border-radius: var(--ui-frame-radius, 9px); background: transparent; color: var(--cases-ink-muted); font: inherit; font-size: var(--type-body); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
:is(.camera-view, .camera-row) .camera-column-choice:is(:hover, :focus-visible) { background: var(--cases-hover-fill); color: var(--cases-ink-strong, var(--v2-ink-strong)); outline: none; }
:is(.camera-view, .camera-row) .camera-column-choice.is-active { background: var(--cases-selected-fill); color: var(--cases-ink-strong, var(--v2-ink-strong)); font-weight: 500; }
.camera-view .camera-grid.is-editing .camera-tile { cursor: grab; }
.camera-view .camera-grid.is-editing .camera-tile:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--cases-accent, #5b8def) 40%, transparent); }
.camera-view .camera-tile.is-dragging { opacity: .45; }
.camera-view .camera-tile.is-hidden video { opacity: .15; }
.camera-view .camera-tile.is-hidden .camera-label { opacity: .6; }
.camera-view .camera-edit-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.camera-view :is(.camera-grip, .camera-visibility) { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--ui-frame-radius, 9px); background: rgba(8, 12, 18, .6); color: #e8eef4; }
.camera-view .camera-grip { cursor: grab; }
.camera-view .camera-visibility { cursor: pointer; transition: background-color .18s ease; }
.camera-view .camera-visibility:is(:hover, :focus-visible) { background: rgba(8, 12, 18, .85); outline: none; }
.camera-view .camera-visibility[aria-pressed="false"] { color: #f0a0a8; }
.camera-view :is(.camera-grip, .camera-visibility) svg { width: 16px; height: 16px; }
.camera-view .camera-visibility .icon-anim-blink { transform-box: fill-box; transform-origin: center; }
.camera-view .camera-visibility:is(:hover, :focus-visible) .icon-anim-blink { animation: cases-icon-blink .45s ease-in-out; }
.camera-view :is(.camera-tile, .camera-focus) .camera-reconnecting { position: absolute; top: 8px; left: 8px; display: none; padding: 2px 8px; border-radius: 6px; background: rgba(8, 12, 18, .6); color: #f3c969; font-size: var(--type-caption); line-height: 18px; pointer-events: none; }
.camera-view :is(.camera-tile, .camera-focus).is-reconnecting .camera-reconnecting { display: block; }
/* Every field's hint is the same faint grey (the note's): the fields' own
   text fill would otherwise paint it as dark as typed text. */
html body.cases-visual-v2 :is(input, textarea):not(.date-text-input)::placeholder {
  color: var(--cases-ink-muted) !important;
  -webkit-text-fill-color: var(--cases-ink-muted) !important;
  opacity: .65 !important;
}

/* The report's source chooser reads like the search field beside the other
   pages' toolbars: text from the left, and its default ("all cards") in the
   same faint grey as a search hint. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .report-source-select:not(#cases-bar-a):not(#cases-bar-b) {
  text-align: left !important;
  text-align-last: left !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .report-source-select:not(#cases-bar-a):not(#cases-bar-b):has(option[value="all"]:checked) {
  color: color-mix(in srgb, var(--cases-ink-muted) 65%, transparent) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--cases-ink-muted) 65%, transparent) !important;
}

/* The app's print dialog (renderer-print.js): the preview on the left (the
   document as it will print, on a quiet grey desk), the settings on the
   right — label and field on one line, Chrome's order — and the usual icon
   actions at the foot. */
html body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog.print-dialog:not(#cases-dialog-a):not(#cases-dialog-b) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 372px !important;
  width: min(1180px, calc(100vw - 48px)) !important;
  height: min(820px, calc(100vh - 48px)) !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}
.print-dialog .print-preview { position: relative; min-width: 0; min-height: 0; background: #525659; }
.print-dialog .print-preview-frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; transition: filter .25s ease, opacity .25s ease; }
.print-dialog .print-preview-frame.is-mono { filter: grayscale(1); }
.print-backdrop.is-previewing .print-preview-frame { opacity: .45; }
.print-dialog .print-preview-status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; color: #e8edf2; font-size: var(--type-body); text-align: center; background: #525659; }
.print-dialog .print-preview-status[hidden] { display: none; }
.print-dialog .print-preview-loader { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity .2s ease; animation: print-spin .9s linear infinite; }
.print-backdrop.is-previewing .print-preview-loader { opacity: 1; }
@keyframes print-spin { to { transform: rotate(360deg); } }
.print-dialog .print-settings { display: flex; flex-direction: column; min-height: 0; padding: 20px 20px 16px; border-left: 1px solid var(--v2-line); overflow-y: auto; }
.print-dialog .print-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.print-dialog .print-head h2 { margin: 0; color: var(--cases-ink-strong, var(--v2-ink-strong)); font-size: var(--type-title); font-weight: 600; line-height: 22px; }
.print-dialog .print-sheets { color: var(--cases-ink-muted); font-size: var(--type-body); white-space: nowrap; }
.print-dialog .print-doc-name { margin: 0 0 16px; color: var(--cases-ink-muted); font-size: var(--type-body); line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.print-dialog .print-rows { display: grid; gap: 8px; }
.print-dialog .print-rows[hidden] { display: none; }
.print-dialog .print-row { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 38px; }
.print-dialog .print-row[hidden] { display: none; }
.print-dialog .print-row > span:first-child { color: var(--cases-ink-muted); font-size: var(--type-body); line-height: 18px; white-space: nowrap; }
.print-dialog .print-row :is(select, input[type="text"], input[type="number"]) {
  box-sizing: border-box; width: 100%; height: 34px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--ui-control-border);
  border-radius: 0; background: transparent; color: var(--cases-ink-strong, var(--v2-ink-strong)); font: inherit; font-size: var(--type-body); outline: none;
  transition: border-color .18s ease;
}
/* The fields read like the toolbars' search: a line, no fill, in both themes. */
html body.cases-visual-v2 .app-confirm-backdrop .print-dialog .print-row :is(select, input[type="text"], input[type="number"]):not(#cases-print-a):not(#cases-print-b) {
  height: 34px !important; min-height: 34px !important; padding: 0 2px !important; border: 0 !important; border-bottom: 1px solid var(--ui-control-border) !important;
  border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; -webkit-text-fill-color: var(--cases-ink-strong, var(--v2-ink-strong)) !important;
  font-size: var(--type-body) !important; font-weight: 400 !important; line-height: 34px !important;
}
html body.cases-visual-v2 .app-confirm-backdrop .print-dialog .print-row :is(select, input):not(#cases-print-a):not(#cases-print-b):focus { border-bottom-color: var(--cases-accent) !important; }
html body.cases-visual-v2 .app-confirm-backdrop .print-dialog .print-row input.is-invalid:not(#cases-print-a):not(#cases-print-b) { border-bottom-color: var(--cases-danger, #dc2626) !important; }
.print-dialog .print-row input.is-invalid { border-bottom-color: var(--cases-danger, #dc2626); }
.print-dialog .print-row select option { background: var(--cases-window-bg); color: var(--cases-ink-strong, var(--v2-ink-strong)); }
/* A number's own − / + (the deadline settings' stepper): the number plain and centred (a blue line only while it is edited), flanked by the two. */
html body.cases-visual-v2 .app-confirm-backdrop .print-dialog .print-row .print-stepper { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; width: 100% !important; box-sizing: border-box !important; height: 34px !important; padding: 0 2px !important; border-bottom: 1px solid var(--ui-control-border) !important; transition: border-color .18s ease !important; }
html body.cases-visual-v2 .app-confirm-backdrop .print-dialog .print-row .print-stepper:focus-within { border-bottom-color: var(--cases-accent) !important; }
html body.cases-visual-v2 .app-confirm-backdrop .print-dialog .print-row .print-stepper .deadline-number-line { display: inline-flex !important; align-items: center !important; height: 34px !important; box-shadow: none !important; transition: box-shadow .15s ease !important; }
html body.cases-visual-v2 .app-confirm-backdrop .print-dialog .print-row .print-stepper .deadline-number-line > input:not(#cases-print-a):not(#cases-print-b):not(#cases-print-c) { box-sizing: border-box !important; width: 64px !important; min-width: 64px !important; height: 34px !important; margin: 0 !important; padding: 0 4px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; color: var(--cases-ink-strong) !important; -webkit-text-fill-color: var(--cases-ink-strong) !important; font-size: var(--type-title) !important; font-variant-numeric: tabular-nums !important; text-align: center !important; line-height: 34px !important; }
html body.cases-visual-v2 .app-confirm-backdrop .print-dialog .print-row .print-stepper .deadline-step { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color: var(--cases-accent) !important; cursor: pointer !important; transform: none !important; }
html body.cases-visual-v2 .app-confirm-backdrop .print-dialog .print-row .print-stepper .deadline-step:is(:hover, :focus-visible) { background: rgba(37, 99, 235, .08) !important; }
html body.cases-visual-v2 .app-confirm-backdrop .print-dialog .print-row .print-stepper .deadline-step > svg { width: 18px !important; height: 18px !important; color: inherit !important; }
.print-dialog .print-check { display: inline-flex; align-items: center; gap: 8px; color: var(--cases-ink-strong, var(--v2-ink-strong)); font-size: var(--type-body); cursor: pointer; }
.print-dialog .print-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--cases-accent); cursor: pointer; }
.print-dialog .print-more { display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; margin: 12px 0 4px; padding: 0; border: 0; border-top: 1px solid var(--v2-line); background: transparent; color: var(--cases-ink-muted); font: inherit; font-size: var(--type-body); cursor: pointer; }
.print-dialog .print-more:hover { color: var(--cases-accent); }
.print-dialog .print-more-rows:not([hidden]) { animation: print-rows-in .22s ease; }
@keyframes print-rows-in { from { opacity: 0; transform: translateY(-4px); } }
html body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog.print-dialog:not(#cases-dialog-a):not(#cases-dialog-b) .print-actions { margin-top: auto !important; padding-top: 16px !important; }
.print-backdrop.is-printing .print-actions { opacity: .5; pointer-events: none; }
@media (max-width: 820px) {
  html body.cases-visual-v2 .app-confirm-backdrop .app-confirm-dialog.print-dialog:not(#cases-dialog-a):not(#cases-dialog-b) { grid-template-columns: 1fr !important; grid-template-rows: minmax(220px, 1fr) auto !important; }
  .print-dialog .print-settings { border-left: 0; border-top: 1px solid var(--v2-line); }
}

/* Cameras' edit bar: quality, then columns — each with its small caption. */
:is(.camera-view, .camera-row) .camera-quality + .camera-columns { margin-left: 16px; }
:is(.camera-view, .camera-row) .camera-columns[data-caption]::before { content: attr(data-caption); align-self: center; margin-right: 6px; color: var(--cases-ink-muted); font-size: var(--type-body); }

/* A page's context on its top row reads the same on every page: its title
   in strong ink, a dot centred between equal spaces, its detail in quiet ink,
   all one size (Home's general 12.5px text rule must not shrink it). */

/* Dragging a table (case tables and the report): the hand shows it. */
html body.cases-visual-v2 .cases-main #pageRoot :is(#caseRows, #reportPreview).is-panning { cursor: grabbing !important; user-select: none !important; }

/* The card: its title and status chip are parted by the same dot, with the
   same spaces, as a page's title and detail. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .editor-action-strip > .page-context:has(+ .editor-status-chip:not([hidden]))::after { content: "·"; display: inline-block; width: .5em; color: var(--cases-ink-muted); text-align: center; transform: scale(1.6); }
/* (The row's own 16px gap before the chip, less 8px: 8px after the dot.) */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .editor-action-strip > .editor-status-chip { margin-left: -8px !important; }
/* An empty detail takes no room (and adds no gap). */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip > .page-context > .page-context-detail:empty { display: none !important; }

/* Settings rows, one standard on every page: the name starts 30px in from
   the frame, the last control is a 34px button 23px in from the right edge
   (its 18px icon 31px in) — lists, − / + rows, the theme choices alike. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content .deadline-settings-panel .deadline-setting-row { padding-left: 10px !important; padding-right: 3px !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content > .reference-block > .kancelaria-add-row { padding-left: 10px !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content .appearance-settings-panel > .theme-choice { grid-template-columns: minmax(0, 1fr) 34px !important; padding-left: 10px !important; padding-right: 3px !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content .appearance-settings-panel > .theme-choice > .theme-choice-check { width: 34px !important; height: 34px !important; }
/* A − / + row's name in ordinary ink, like every settings row. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content .deadline-setting-row > span:first-child { color: var(--v2-ink) !important; -webkit-text-fill-color: var(--v2-ink) !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content .appearance-settings-panel > .theme-choice > .theme-choice-check > svg { width: 18px !important; min-width: 18px !important; max-width: 18px !important; height: 18px !important; min-height: 18px !important; max-height: 18px !important; }

/* Every settings list looks alike: rows parted by a line (none under the
   last), no fill, still under the pointer. The − / + rows and the theme
   choices follow it; a chosen theme shows only by its tick. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content :is(.deadline-settings-panel .deadline-setting-row, .appearance-settings-panel > .theme-choice) {
  border: 0 !important;
  border-bottom: 1px solid var(--ui-data-divider) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background-color 140ms ease !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content :is(.deadline-settings-panel .deadline-setting-row, .appearance-settings-panel > .theme-choice):last-child { border-bottom-color: transparent !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot /* Rows stay still under the pointer (no hover fill), as every settings row. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content :is(.deadline-settings-panel .deadline-setting-row, .appearance-settings-panel > .theme-choice):is(:hover, :focus-within, :focus-visible) { background: transparent !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content .appearance-settings-panel > .theme-choice :is(.theme-choice-label) { color: var(--v2-ink) !important; -webkit-text-fill-color: var(--v2-ink) !important; font-weight: 400 !important; }

/* About: its entries on the same guides — the name 30px in, a value's end
   31px in from the right (a button 23px in, as elsewhere); the name in
   ordinary ink, the value quiet. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .cases-about-page .about-tech-card dl > div, html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .cases-about-page > .about-footer { padding-left: 10px !important; padding-right: 11px !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .cases-about-page .about-tech-card dd:has(button) { margin-right: -8px !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .cases-about-page .about-tech-card dt { color: var(--v2-ink) !important; -webkit-text-fill-color: var(--v2-ink) !important; }

/* Settings rows, every page: the line between two rows sits in the middle of
   the gap between them (as About's always did), so the rows between two lines
   are all one height. The card keeps to the sidebar's edges (its first button's
   top, the Exit button's bottom), so the first and last rows reach the card's
   edge half a gap short of the others. */

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content :is(.reference-block > .reference-add-row, .reference-block > .kancelaria-add-row, .reference-block .settings-list > .settings-item, .deadline-settings-panel .deadline-setting-row, .appearance-settings-panel > .theme-choice) {
  position: relative !important;
  border-bottom-color: transparent !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content :is(.reference-block > .reference-add-row, .reference-block > .kancelaria-add-row, .reference-block .settings-list > .settings-item, .deadline-settings-panel .deadline-setting-row, .appearance-settings-panel > .theme-choice)::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: calc(var(--settings-lane-gap, 12px) / -2 - 0.5px) !important;
  width: auto !important;
  height: 1px !important;
  background: var(--ui-data-divider) !important;
  pointer-events: none !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content :is(.reference-block .settings-list > .settings-item, .deadline-settings-panel .deadline-setting-row, .appearance-settings-panel > .theme-choice):last-child::after { content: none !important; display: none !important; }

/* Security's two tabs read as the app's fields do: plain text, no fill or
   frame; the open one in ordinary ink over the accent line, the other quiet. */

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content .security-panel .security-tab,
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content .security-panel .security-tab:is(:hover, :focus-visible, .is-active) {
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 transparent !important;
  color: var(--cases-ink-muted) !important;
  -webkit-text-fill-color: var(--cases-ink-muted) !important;
  font-size: var(--type-body) !important;
  font-weight: 400 !important;
  transition: color .18s ease, box-shadow .18s ease !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content .security-panel .security-tab:is(:hover, :focus-visible) { color: var(--v2-ink) !important; -webkit-text-fill-color: var(--v2-ink) !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content .security-panel .security-tab.is-active { color: var(--v2-ink) !important; -webkit-text-fill-color: var(--v2-ink) !important; box-shadow: inset 0 -2px 0 var(--cases-accent) !important; }

/* The report's header line is one 1px line, as the case tables' (no second,
   shadowed line over it). */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot #reportPreviewHead { box-shadow: none !important; }

/* Cameras: the camera icon is red (its tab, and the offices' tabs on its page). */
html body.cases-visual-v2 .services-tab[data-service="cameras"] { --service-tint: #d9434f; }
html body.cases-visual-v2 :is(.camera-view, .camera-row) .camera-office svg { color: #d9434f !important; }

/* The cameras fit the page: tiles sized by the renderer (layoutCameraGrid),
   centred, no scrollbar. */
html body.cases-visual-v2 .camera-view .camera-grid { grid-template-columns: repeat(var(--camera-columns, 3), var(--camera-tile-width, minmax(0, 1fr))); justify-content: center; align-content: center; overflow: hidden; }

/* Edit mode: a camera's name can be clicked to rename it. */
.camera-view .camera-grid.is-editing .camera-label[data-camera-rename] { pointer-events: auto; cursor: text; }
.camera-view .camera-grid.is-editing .camera-label[data-camera-rename]:is(:hover, :focus-visible) { background: rgba(8, 12, 18, .85); outline: 1px solid color-mix(in srgb, var(--cases-accent, #5b8def) 60%, transparent); }
.camera-view .camera-name-input { width: 180px; max-width: 100%; height: 18px; padding: 0; border: 0; border-bottom: 1px solid var(--cases-accent, #5b8def); background: transparent; color: #e8eef4; font: inherit; outline: none; }

/* The app's camera name sits over the camera's own (placed by the renderer):
   an opaque plate, the name centred in it. */
html body.cases-visual-v2 .camera-view :is(.camera-tile, .camera-focus) .camera-label { right: auto !important; bottom: auto !important; box-sizing: border-box; display: flex; align-items: center; justify-content: center; max-width: none !important; padding: 0 4px !important; border-radius: 4px !important; background: #0b0f14 !important; line-height: 1 !important; }

/* A camera full size: the picture above, the recordings' panel (when open)
   below; the tools — still, recordings, close — top right over the picture. */
html body.cases-visual-v2 .camera-view .camera-focus { display: flex; flex-direction: column; }
.camera-view .camera-focus-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.camera-view .camera-focus-stage video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.camera-view .camera-focus-tools { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; gap: 6px; }
html body.cases-visual-v2 .camera-view .camera-focus-tools .camera-focus-close { position: static; }
.camera-view .camera-focus-tools > button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--ui-frame-radius, 9px); background: rgba(8, 12, 18, .6); color: #e8eef4; cursor: pointer; transition: background-color .18s ease, color .18s ease; }
.camera-view .camera-focus-tools > button:is(:hover, :focus-visible) { background: rgba(8, 12, 18, .85); outline: none; }
.camera-view .camera-focus-tools > button[aria-pressed="true"] { color: #7fb0ff; background: rgba(8, 12, 18, .85); }
.camera-view .camera-focus-tools svg { width: 18px; height: 18px; }

.camera-view .camera-playback { flex: 0 0 auto; display: grid; gap: 8px; padding: 10px 14px 12px; background: #0e141c; color: #e8eef4; font-size: var(--type-body); animation: camera-playback-in .22s ease both; }
@keyframes camera-playback-in { from { opacity: 0; transform: translateY(6px); } }
.camera-view .camera-playback-bar, .camera-view .camera-clip { display: flex; align-items: center; gap: 8px; min-width: 0; }
.camera-view .camera-playback-spacer { flex: 1 1 auto; }
.camera-view .camera-playback button { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--ui-frame-radius, 9px); background: transparent; color: #cbd7e1; font: inherit; cursor: pointer; transition: background-color .18s ease, color .18s ease; }
.camera-view .camera-playback button.camera-pb-text { padding: 0 10px; }
.camera-view .camera-playback button:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .08); color: #fff; outline: none; }
.camera-view .camera-playback button:disabled { opacity: .35; cursor: default; background: transparent; }
.camera-view .camera-playback button svg { width: 18px; height: 18px; }
.camera-view .camera-playback .camera-pb-live { color: #ff8a93; }
.camera-view .camera-playback-day { min-width: 86px; text-align: center; color: #cbd7e1; }
.camera-view .camera-playback-time { min-width: 76px; margin-left: 10px; color: #fff; font-variant-numeric: tabular-nums; font-size: 15px; }
.camera-view .camera-timeline { position: relative; height: 34px; border-radius: 6px; background: rgba(255, 255, 255, .05); cursor: pointer; overflow: hidden; }
.camera-view .camera-playback.is-loading .camera-timeline { opacity: .5; }
.camera-view .camera-timeline-spans > span { position: absolute; top: 6px; bottom: 14px; background: rgba(91, 141, 239, .55); border-radius: 2px; }
.camera-view .camera-timeline-ticks > span { position: absolute; bottom: 1px; transform: translateX(-50%); color: #9fb2c2; font-size: var(--type-micro); pointer-events: none; }
.camera-view .camera-timeline-ticks > span:first-child { transform: none; padding-left: 3px; }
.camera-view .camera-timeline-cursor { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ff5a67; pointer-events: none; transition: left .25s linear; }
.camera-view .camera-clip input { width: 84px; height: 30px; padding: 0 4px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; font: inherit; font-variant-numeric: tabular-nums; outline: none; }
.camera-view .camera-clip input:focus { border-bottom-color: #7fb0ff; }
.camera-view .camera-clip-progress { color: #9fb2c2; font-variant-numeric: tabular-nums; }

/* The cameras' name and clock plates, in the app's design: the window's dark
   surface (solid, so the camera's own print never shows through), a fine
   frame, the app's type; both placed by the renderer over the camera's own. */
html body.cases-visual-v2 .camera-view :is(.camera-tile, .camera-focus) :is(.camera-label, .camera-clock) {
  position: absolute !important;
  right: auto !important;
  bottom: auto !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: none !important;
  padding: 0 .5em !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 6px !important;
  background: #151c26 !important;
  color: #e6eef4 !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}
html body.cases-visual-v2 .camera-view :is(.camera-tile, .camera-focus) .camera-clock { font-variant-numeric: tabular-nums; color: #cbd7e1 !important; }
html body.cases-visual-v2 .camera-view .camera-grid.is-editing .camera-label[data-camera-rename] { pointer-events: auto !important; }

/* "Reconnecting…" in the middle of the picture (the clock plate holds the corner). */
html body.cases-visual-v2 .camera-view :is(.camera-tile, .camera-focus) .camera-reconnecting { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); }

/* The sign-in gate: the app's own password-style dialog over a site that has no
   saved login. It covers the site's frame only (the sidebar stays usable). */
html body.cases-visual-v2 .services-host > .services-auth.app-confirm-backdrop {
  position: absolute !important;
  z-index: 5 !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Home's search button: the app's search tint (as in Pactum). */

/* Tabs (site tabs, security tabs, camera offices, column and quality choices):
   no frame, no fill — the name, and a 2px accent line under the chosen one
   (as in Pactum). A layer: its !important outranks the older unlayered rules. */
@layer cases-tabs {
  html body.cases-visual-v2 :is(.services-tab, .services-doc-tab-wrap, .security-tab, .security-choice, .camera-office, .camera-column-choice),
  html body.cases-visual-v2 :is(.services-tab, .services-doc-tab-wrap, .security-tab, .security-choice, .camera-office, .camera-column-choice):is(:hover, :focus-visible, .is-active) {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: inset 0 -2px 0 transparent !important;
  }
  html body.cases-visual-v2 :is(.services-tab, .security-tab, .security-choice, .camera-office, .camera-column-choice):not(.is-active):is(:hover, :focus-visible) {
    color: var(--cases-ink-strong, var(--v2-ink-strong)) !important;
  }
  html body.cases-visual-v2 :is(.services-tab, .security-tab, .security-choice, .camera-office, .camera-column-choice).is-active,
  html body.cases-visual-v2 .services-doc-tab-wrap.is-active {
    color: var(--cases-ink-strong, var(--v2-ink-strong)) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: inset 0 -2px 0 var(--cases-accent) !important;
  }
  html body.cases-visual-v2 .services-doc-tab-wrap.is-active > .services-tab.is-active { box-shadow: none !important; }
  /* The open tab's line runs from the pictogram's start to the name's end (as the open menu item's), not over the tab's padding (12px before, 14px after). */
  html body.cases-visual-v2 .services-tab.is-active {
    box-shadow: none !important;
    background-image: linear-gradient(var(--cases-accent), var(--cases-accent)) !important;
    background-repeat: no-repeat !important;
    background-size: calc(100% - 26px) 2px !important;
    background-position: 12px 100% !important;
  }
  html body.cases-visual-v2 .services-doc-tab-wrap.is-active { box-shadow: none !important; }
  html body.cases-visual-v2 :is(.camera-office, .camera-column-choice).is-active {
    box-shadow: none !important;
    background-image: linear-gradient(var(--cases-accent), var(--cases-accent)) !important;
    background-repeat: no-repeat !important;
    background-position: var(--tab-line-start) 100% !important;
    background-size: calc(100% - 2 * var(--tab-line-start)) 2px !important;
  }
  html body.cases-visual-v2 .camera-office.is-active { --tab-line-start: 14px; }
  html body.cases-visual-v2 .camera-column-choice.is-active { --tab-line-start: 10px; }
}

/* The report's source choice ("ყველა ბარათი") is narrower than the search
   field: as wide as its longest choice needs (as in Pactum). */
@layer cases-tabs {
  html body.cases-visual-v2 .cases-main #pageRoot .report-action-strip .report-source-select.ui-toolbar-control {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }
}

/* Home's chart heading: the period (the year, or "სულ") in the middle; the
   left switch's icon on the vertical line of the mobile groups' icons in the
   block above (7px in), and the right switch as far in from the right edge. */
@layer cases-tabs {
  html body.cases-visual-v2 .home-chart-card .home-chart-controls { position: relative !important; }
  html body.cases-visual-v2 .home-chart-card .home-chart-control-tier.is-primary { position: static !important; margin-left: 7px !important; }
  html body.cases-visual-v2 .home-chart-card .home-chart-control-tier.is-secondary { margin-right: 7px !important; }
  html body.cases-visual-v2 .home-chart-card .home-chart-caption {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}

/* The registry's sidebar item: its own hue; and its tabs sit right after the
   shared title, before the page's own actions. */
@layer cases-tabs {
  html body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item[data-route="registry"] { --nav-accent: #cf6a32; }
  html body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item[data-route="registry"] .nav-icon { color: var(--nav-accent) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot > .page-action-strip > .registry-tabs .registry-tab > svg { width: var(--cases-icon-size, 18px) !important; height: var(--cases-icon-size, 18px) !important; flex: 0 0 auto !important; color: var(--service-tint) !important; }
}

/* The situational sheet (renderer-situational.js): the sheet's own page in the
   frame, scaled to fit; the code field and the scale in the top row. */
@layer cases-tabs {
  html body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item[data-route="cadastre"] { --nav-accent: #2f9e88; }
  html[data-theme="dark"] body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item[data-route="cadastre"] { --nav-accent: #3fb8a0; }
  html body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item[data-route="cadastre"] .nav-icon { color: var(--nav-accent) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot > .sketch-frame {
    position: relative !important; flex: 1 1 auto !important; min-height: 0 !important; height: calc(100vh - 84px - var(--ui-top-shift, 0px) - 15px) !important;
    overflow: hidden !important; padding: 0 !important;
  }
  html body.cases-visual-v2 .cases-main #pageRoot > .sketch-frame > .sketch-sheet {
    position: absolute !important; width: 297mm !important; height: 210mm !important; border: 0 !important; background: #fff !important;
    transform-origin: 0 0 !important; box-shadow: 0 6px 24px rgba(20, 30, 45, .18) !important; border-radius: 2px !important;
  }
  html body.cases-visual-v2 .cases-main #pageRoot .sketch-action-strip .sketch-code.ui-toolbar-control { width: 200px !important; min-width: 200px !important; max-width: 200px !important; }
  html body.cases-visual-v2 .cases-main #pageRoot .sketch-action-strip .sketch-scale.ui-toolbar-control { width: 84px !important; min-width: 84px !important; max-width: 84px !important; }
  html body .code-chooser .code-chooser-option[data-code-target="sketch"] svg { color: #6b5a96; }
  html[data-theme="dark"] body .code-chooser .code-chooser-option[data-code-target="sketch"] svg { color: #9d8cd0; }
}

/* The sketch's layers: a panel under its button, in the app's window style;
   its rows are the app's choice rows (a dot for the base map, a check for an
   overlay). A layer, so the global field and button rules stay out of it. */
@layer cases-tabs {
  .sketch-layers-popover {
    position: fixed !important; z-index: 2000 !important; width: 340px !important; max-height: min(640px, calc(100vh - 120px)) !important; overflow: auto !important;
    padding: 8px 6px 10px !important; border: 1px solid var(--cases-window-border, var(--v2-line)) !important; border-radius: var(--cases-window-radius, 14px) !important;
    background: var(--cases-window-bg, #f8fafd) !important; box-shadow: var(--cases-window-shadow, 0 18px 44px rgba(38, 61, 79, .2)) !important;
    color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; font-size: var(--type-body, 13px) !important;
  }
  .sketch-layers-popover h3 { margin: 8px 10px 4px !important; font-size: var(--type-body, 13px) !important; font-weight: 600 !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; }
  .sketch-layers-popover .sketch-layer-group { margin: 10px 10px 2px !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; font-size: var(--type-caption, 11.5px) !important; }
  .sketch-layers-popover .sketch-layer-row {
    display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; min-height: 30px !important; height: auto !important;
    padding: 4px 10px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important;
    color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; font: inherit !important; font-size: var(--type-body, 13px) !important; text-align: left !important; cursor: pointer !important; transform: none !important;
  }
  .sketch-layers-popover .sketch-layer-row:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; outline: none !important; }
  .sketch-layers-popover .sketch-layer-row > i {
    flex: 0 0 14px !important; width: 14px !important; height: 14px !important; box-sizing: border-box !important;
    border: 1.5px solid var(--cases-ink-muted, var(--v2-muted)) !important; border-radius: 50% !important; background: transparent !important;
  }
  .sketch-layers-popover .sketch-layer-row.is-check > i { border-radius: 4px !important; }
  .sketch-layers-popover .sketch-layer-row[aria-checked="true"] > i { border-color: var(--cases-accent, #1769d2) !important; background: radial-gradient(circle, var(--cases-accent, #1769d2) 0 3.5px, transparent 4px) !important; }
  .sketch-layers-popover .sketch-layer-row.is-check[aria-checked="true"] > i {
    background: var(--cases-accent, #1769d2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 11px no-repeat !important;
  }
  .sketch-layers-popover .sketch-layer-row span { flex: 1 1 auto !important; min-width: 0 !important; }
  .sketch-layers-popover .sketch-layer-row em { flex: 0 1 auto !important; font-style: normal !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; font-size: var(--type-caption, 11.5px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 150px !important; }
}

/* The sketch's drawing tools: a floating palette card beside the sheet, in the
   app's window style (it stands out on the frame in both themes); a colour
   button (its palette opens beside it), a width button that steps through
   three widths, dash and fill toggles, the legend name, undo and redo. */
@layer cases-tabs {
  html body.cases-visual-v2 .cases-main #pageRoot .sketch-frame > .sketch-tools {
    position: absolute !important; left: 16px !important; top: 0 !important; bottom: 0 !important; margin: auto 0 !important; height: fit-content !important; z-index: 2 !important;
    width: 56px !important; max-height: calc(100% - 32px) !important; box-sizing: border-box !important; padding: 8px 0 !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; overflow-y: auto !important; scrollbar-width: none !important;
    border: 1px solid var(--cases-window-border, var(--v2-line)) !important; border-radius: 14px !important;
    background: var(--cases-window-bg, #f8fafd) !important; box-shadow: var(--cases-window-shadow, 0 18px 44px rgba(38, 61, 79, .2)) !important;
  }
  html body.cases-visual-v2 .cases-main #pageRoot .sketch-tools .sketch-tool {
    position: relative !important; display: inline-grid !important; place-items: center !important; flex: 0 0 auto !important; width: 36px !important; height: 34px !important; padding: 0 !important;
    border: 0 !important; border-radius: 9px !important; background: transparent !important; box-shadow: none !important;
    color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; cursor: pointer !important; transform: none !important; transition: background-color .14s ease, color .14s ease !important;
  }
  html body.cases-visual-v2 .cases-main #pageRoot .sketch-tools .sketch-tool:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; outline: none !important; }
  html body.cases-visual-v2 .cases-main #pageRoot .sketch-tools .sketch-tools-gap { flex: 0 0 1px !important; width: 26px !important; height: 1px !important; margin: 2px 0 !important; background: var(--cases-window-border, var(--v2-line)) !important; border: 0 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot .sketch-tools :is(.sketch-outline-button, .sketch-fill-button) i { position: absolute !important; left: 9px !important; right: 9px !important; bottom: 4px !important; height: 3px !important; border-radius: 2px !important; background: var(--swatch) !important; box-shadow: 0 0 0 1px rgba(128, 138, 150, .55) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot .sketch-tools .sketch-fill-button i.is-none { background: transparent !important; box-shadow: 0 0 0 1px var(--cases-ink-muted, #7d8aa0) !important; }
  .sketch-catalogue .sketch-sign-search { display: block !important; margin: 4px 8px 8px !important; }
  .sketch-catalogue .sketch-sign-search input { width: 100% !important; height: 32px !important; padding: 0 2px !important; border: 0 !important; border-bottom: 1px solid var(--cases-window-border, var(--v2-line)) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; font: inherit !important; outline: 0 !important; }
  .sketch-catalogue .sketch-sign-search input:is(:focus, :focus-visible) { border: 0 !important; border-bottom: 1px solid var(--cases-accent) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; }
  .sketch-catalogue .sketch-sign-row .sw { flex: 0 0 auto !important; width: 27px !important; height: 12px !important; background: #fff !important; border-radius: 2px !important; }
}

/* The desk under the sheet: a quiet surface in each theme (the sheet itself is paper). */
@layer cases-tabs {
}

/* The sketch's frame has no outline of its own: on the dark desk a light edge read as a stray white line. */
@layer cases-tabs {
  html body.cases-visual-v2 .cases-main #pageRoot > .sketch-frame { border: 0 !important; box-shadow: none !important; outline: 0 !important; }
}

/* Shapefile attributes: the chosen field's chips under each imported layer, and
   a selected shape's attribute card beside the sheet. */
@layer cases-tabs {
  /* Layers panel: categories that fold away, the number of what is on beside each. */
  .sketch-layers-popover .sketch-layer-toggle { display: flex !important; align-items: center !important; gap: 6px !important; width: calc(100% - 12px) !important; min-height: 32px !important; margin: 2px 6px !important; padding: 0 8px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; font: inherit !important; font-weight: 600 !important; text-align: left !important; cursor: pointer !important; transform: none !important; }
  .sketch-layers-popover .sketch-layer-toggle:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; outline: none !important; }
  .sketch-layers-popover .sketch-layer-toggle svg { flex: 0 0 16px !important; width: 16px !important; height: 16px !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; transition: transform .16s ease !important; }
  .sketch-layers-popover .sketch-layer-category.is-open > .sketch-layer-toggle svg { transform: rotate(90deg) !important; }
  .sketch-layers-popover .sketch-layer-toggle span { flex: 1 1 auto !important; min-width: 0 !important; }
  .sketch-layers-popover .sketch-layer-toggle em { flex: 0 0 auto !important; min-width: 20px !important; padding: 0 6px !important; border-radius: 9px !important; font-style: normal !important; font-weight: 600 !important; font-size: var(--type-caption, 11.5px) !important; line-height: 18px !important; text-align: center !important; color: var(--cases-accent, #1769d2) !important; background: var(--cases-selected-fill) !important; }
  .sketch-layers-popover .sketch-layer-toggle em:empty { display: none !important; }
  .sketch-layers-popover .sketch-layer-items { padding: 0 0 4px 14px !important; }
  .sketch-layers-popover .sketch-layer-items[hidden] { display: none !important; }

  /* The legend and layers editor: a card beside the legend. */
  .sketch-style-panel { position: fixed !important; z-index: 2000 !important; display: flex !important; flex-direction: column !important; width: 332px !important; max-height: min(660px, calc(100vh - 110px)) !important; border: 1px solid var(--cases-window-border, var(--v2-line)) !important; border-radius: var(--cases-window-radius, 14px) !important; background: var(--cases-window-bg, #f8fafd) !important; box-shadow: var(--cases-window-shadow, 0 18px 44px rgba(38, 61, 79, .2)) !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; overflow: hidden !important; }
  :is(.sketch-style-panel, .sketch-sources-panel) .ssp-head { display: flex !important; align-items: center !important; gap: 6px !important; padding: 8px 8px 8px 12px !important; border-bottom: 1px solid var(--cases-window-border, var(--v2-line)) !important; }
  :is(.sketch-style-panel, .sketch-sources-panel) .ssp-head h3 { flex: 1 1 auto !important; margin: 0 !important; font-size: var(--type-body, 13px) !important; font-weight: 600 !important; }
  :is(.sketch-style-panel, .sketch-sources-panel) .ssp-icon { flex: 0 0 28px !important; display: inline-grid !important; place-items: center !important; width: 28px !important; height: 28px !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; cursor: pointer !important; transform: none !important; }
  :is(.sketch-style-panel, .sketch-sources-panel) .ssp-icon:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; outline: none !important; }
  :is(.sketch-style-panel, .sketch-sources-panel) svg { width: 16px !important; height: 16px !important; }
  .sketch-style-panel .ssp-name { flex: 1 1 auto !important; min-width: 0 !important; height: 30px !important; padding: 0 8px !important; border: 1px solid transparent !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color: inherit !important; font: inherit !important; font-weight: 600 !important; outline: 0 !important; }
  .sketch-style-panel .ssp-name:is(:hover, :focus) { border-color: var(--cases-window-border, var(--v2-line)) !important; }
  .sketch-style-panel .ssp-name:focus { border-color: var(--cases-accent, #1769d2) !important; }
  :is(.sketch-style-panel, .sketch-sources-panel) .ssp-scroll { flex: 1 1 auto !important; overflow: auto !important; padding: 6px 6px 10px !important; }
  .sketch-style-panel .ssp-group { margin: 10px 8px 2px !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; font-size: var(--type-caption, 11.5px) !important; }
  :is(.sketch-style-panel, .sketch-sources-panel) .ssp-empty { margin: 14px 10px !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; }
  .sketch-style-panel .ssp-row { display: flex !important; align-items: center !important; gap: 2px !important; }
  .sketch-style-panel .ssp-row.is-hidden .ssp-open { opacity: .5 !important; }
  .sketch-style-panel .ssp-open { flex: 1 1 auto !important; display: flex !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; min-height: 36px !important; padding: 0 8px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color: inherit !important; font: inherit !important; text-align: left !important; cursor: pointer !important; transform: none !important; }
  .sketch-style-panel .ssp-open:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; outline: none !important; }
  .sketch-style-panel .ssp-open .sw { flex: 0 0 32px !important; width: 32px !important; height: 16px !important; background: #fff !important; border-radius: 3px !important; }
  .sketch-style-panel .ssp-open span { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  .sketch-style-panel .ssp-open span.is-empty { color: var(--cases-ink-muted, var(--v2-muted)) !important; font-style: italic !important; }
  .sketch-style-panel .ssp-eye { flex: 0 0 28px !important; display: inline-grid !important; place-items: center !important; width: 28px !important; height: 28px !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; cursor: pointer !important; transform: none !important; }
  .sketch-style-panel .ssp-eye:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; outline: none !important; }
  :is(.sketch-style-panel, .sketch-sources-panel) .ssp-foot { padding: 8px !important; border-top: 1px solid var(--cases-window-border, var(--v2-line)) !important; }
  :is(.sketch-style-panel, .sketch-sources-panel) .ssp-action { display: inline-flex !important; align-items: center !important; gap: 8px !important; min-height: 32px !important; padding: 0 12px !important; border: 1px solid var(--cases-window-border, var(--v2-line)) !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color: inherit !important; font: inherit !important; cursor: pointer !important; transform: none !important; }
  :is(.sketch-style-panel, .sketch-sources-panel) .ssp-action:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; outline: none !important; }
  :is(.sketch-style-panel, .sketch-sources-panel) .ssp-action.is-danger { color: #d1342f !important; }
  .sketch-style-panel .ssp-section { display: grid !important; gap: 6px !important; margin: 0 4px 10px !important; padding: 10px 10px 12px !important; border: 1px solid var(--cases-window-border, var(--v2-line)) !important; border-radius: 10px !important; }
  .sketch-style-panel .ssp-section h4 { margin: 0 0 2px !important; font-size: var(--type-body, 13px) !important; font-weight: 600 !important; }
  .sketch-style-panel .ssp-section label { color: var(--cases-ink-muted, var(--v2-muted)) !important; font-size: var(--type-caption, 11.5px) !important; }
  .sketch-style-panel .ssp-range { display: flex !important; align-items: center !important; gap: 10px !important; }
  .sketch-style-panel .ssp-range input { flex: 1 1 auto !important; min-width: 0 !important; accent-color: var(--cases-accent, #1769d2) !important; }
  .sketch-style-panel .ssp-range output { flex: 0 0 56px !important; text-align: right !important; font-size: var(--type-caption, 11.5px) !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; }
  .sketch-style-panel .sketch-field-chip { height: 24px !important; padding: 0 9px !important; border: 1px solid var(--cases-window-border, var(--v2-line)) !important; border-radius: 12px !important; background: transparent !important; box-shadow: none !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; font: inherit !important; font-size: var(--type-caption, 11.5px) !important; cursor: pointer !important; transform: none !important; }
  .sketch-style-panel .sketch-field-chip:hover { background: var(--cases-hover-fill) !important; }
  .sketch-style-panel .sketch-field-chip[aria-pressed="true"] { border-color: var(--cases-accent, #1769d2) !important; background: var(--cases-selected-fill) !important; color: var(--cases-accent, #1769d2) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot .sketch-frame > .sketch-attrs {
    position: absolute !important; right: 16px !important; bottom: 72px !important; z-index: 3 !important; width: 260px !important; max-height: calc(100% - 160px) !important; overflow: auto !important;
    padding: 10px 12px !important; border: 1px solid var(--cases-window-border, var(--v2-line)) !important; border-radius: 12px !important;
    background: var(--cases-window-bg, #f8fafd) !important; box-shadow: var(--cases-window-shadow, 0 18px 44px rgba(38, 61, 79, .2)) !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important;
  }
  html body.cases-visual-v2 .cases-main #pageRoot .sketch-attrs h3 { margin: 0 0 8px !important; font-size: var(--type-body, 13px) !important; font-weight: 600 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot .sketch-attrs dl { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; gap: 4px 10px !important; margin: 0 !important; font-size: var(--type-caption, 11.5px) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot .sketch-attrs dt { color: var(--cases-ink-muted, var(--v2-muted)) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot .sketch-attrs dd { margin: 0 !important; overflow-wrap: anywhere !important; }
}

/* The cadastre's tabs (extract, map, sketch): after its title, as the registry's are. */
@layer cases-tabs {
  html body.cases-visual-v2 .cases-main #pageRoot .cadastre-tab { padding: 0 14px 0 12px !important; }
  html body.cases-visual-v2 .cases-main #pageRoot .cadastre-tab > svg { width: var(--cases-icon-size, 18px) !important; height: var(--cases-icon-size, 18px) !important; flex: 0 0 auto !important; color: var(--service-tint) !important; }
}

/* The sketch's Office-style controls: the colour palette, the shapes gallery, the text bar. */
@layer cases-tabs {
  .sketch-colors-popover, .sketch-shapes-popover, .sketch-textbar {
    position: fixed !important; z-index: 2100 !important; box-sizing: border-box !important;
    border: 1px solid var(--cases-window-border, var(--v2-line)) !important; border-radius: var(--cases-window-radius, 14px) !important;
    background: var(--cases-window-bg, #f8fafd) !important; box-shadow: var(--cases-window-shadow, 0 18px 44px rgba(38, 61, 79, .2)) !important;
    color: var(--cases-ink-strong, var(--v2-ink-strong)) !important;
  }
  .sketch-colors-popover h4, .sketch-shapes-popover h4 { margin: 10px 0 6px !important; font-size: var(--type-caption, 11.5px) !important; font-weight: 600 !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; }
  .sketch-colors-popover h4:first-child, .sketch-shapes-popover h4:first-child { margin-top: 0 !important; }

  /* Colours: ten theme colours over their five tints, ten standard colours, recent ones, any other. */
  .sketch-colors-popover { width: 264px !important; padding: 12px !important; }
  .sketch-colors-popover .scp-grid { display: grid !important; grid-template-columns: repeat(10, 1fr) !important; gap: 4px !important; }
  .sketch-colors-popover .scp-shades { margin-top: 4px !important; }
  .sketch-colors-popover .scp-sw { position: relative !important; width: 100% !important; aspect-ratio: 1 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 3px !important; background: var(--swatch) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18) !important; cursor: pointer !important; transform: none !important; }
  .sketch-colors-popover .scp-sw:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 0 0 2px var(--cases-accent, #1769d2) !important; z-index: 1 !important; }
  .sketch-colors-popover .scp-sw[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 0 0 2px var(--cases-window-bg, #fff), 0 0 0 4px var(--cases-accent, #1769d2) !important; z-index: 1 !important; }
  .sketch-colors-popover .scp-foot { display: grid !important; gap: 2px !important; margin-top: 10px !important; padding-top: 8px !important; border-top: 1px solid var(--cases-window-border, var(--v2-line)) !important; }
  .sketch-colors-popover .scp-action { position: relative !important; display: flex !important; align-items: center !important; gap: 10px !important; min-height: 32px !important; padding: 0 8px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color: inherit !important; font: inherit !important; text-align: left !important; cursor: pointer !important; transform: none !important; }
  .sketch-colors-popover .scp-action:is(:hover, :focus-within) { background: var(--cases-hover-fill) !important; outline: none !important; }
  .sketch-colors-popover .scp-action svg { width: 16px !important; height: 16px !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; }
  .sketch-colors-popover .scp-more input { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; cursor: pointer !important; }

  /* The colour a style panel row shows. */
  .sketch-style-panel .ssp-color-button { display: inline-flex !important; align-items: center !important; gap: 8px !important; width: fit-content !important; min-height: 32px !important; padding: 0 10px 0 6px !important; border: 1px solid var(--cases-window-border, var(--v2-line)) !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color: inherit !important; font: inherit !important; font-size: var(--type-caption, 11.5px) !important; cursor: pointer !important; transform: none !important; }
  .sketch-style-panel .ssp-color-button:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; outline: none !important; }
  .sketch-style-panel .ssp-color-button i { width: 20px !important; height: 20px !important; border-radius: 5px !important; background: var(--swatch) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22) !important; }
  .sketch-style-panel .ssp-color-button svg { width: 14px !important; height: 14px !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; }

  /* Shapes: Office's categories, each a grid of outlines. */
  .sketch-shapes-popover { width: 342px !important; max-height: min(640px, calc(100vh - 40px)) !important; overflow: auto !important; padding: 12px !important; }
  .sketch-shapes-popover .ssh-grid { display: grid !important; grid-template-columns: repeat(9, 1fr) !important; gap: 2px !important; }
  .sketch-shapes-popover .ssh-shape { display: grid !important; place-items: center !important; aspect-ratio: 1 !important; min-height: 0 !important; padding: 0 !important; border: 1px solid transparent !important; border-radius: 6px !important; background: transparent !important; box-shadow: none !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; cursor: pointer !important; transform: none !important; }
  .sketch-shapes-popover .ssh-shape:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; border-color: var(--cases-window-border, var(--v2-line)) !important; outline: none !important; }
  .sketch-shapes-popover .ssh-shape[aria-pressed="true"] { background: var(--cases-selected-fill) !important; border-color: var(--cases-accent, #1769d2) !important; color: var(--cases-accent, #1769d2) !important; }
  .sketch-shapes-popover .ssh-shape svg, .sketch-tools .shape-icon { width: 20px !important; height: 20px !important; }

  /* The text bar: over the selected callout or text. */
  .sketch-textbar { display: flex !important; align-items: center !important; gap: 2px !important; padding: 5px 6px !important; z-index: 2050 !important; border-radius: 12px !important; }
  .sketch-textbar .stb-gap { flex: 0 0 1px !important; align-self: stretch !important; margin: 3px 5px !important; background: var(--cases-window-border, var(--v2-line)) !important; }
  .sketch-textbar select { height: 30px !important; padding: 0 6px !important; border: 1px solid var(--cases-window-border, var(--v2-line)) !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color: inherit !important; font: inherit !important; font-size: 13px !important; cursor: pointer !important; }
  .sketch-textbar .stb-font { width: 118px !important; }
  .sketch-textbar .stb-size { width: 58px !important; margin-left: 2px !important; }
  .sketch-textbar .stb-btn { display: inline-grid !important; place-items: center !important; width: 30px !important; height: 30px !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color: inherit !important; font: inherit !important; font-size: 13px !important; line-height: 1 !important; cursor: pointer !important; transform: none !important; }
  .sketch-textbar .stb-btn:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; outline: none !important; }
  .sketch-textbar .stb-btn[aria-pressed="true"] { background: var(--cases-selected-fill) !important; color: var(--cases-accent, #1769d2) !important; }
  .sketch-textbar .stb-btn svg { width: 16px !important; height: 16px !important; }
  .sketch-textbar .stb-bold { font-weight: 800 !important; }
  .sketch-textbar .stb-italic { font-style: italic !important; font-family: Georgia, serif !important; }
  .sketch-textbar .stb-underline { text-decoration: underline !important; text-underline-offset: 2px !important; }
  .sketch-textbar :is(.stb-color, .stb-frame) { position: relative !important; }
  .sketch-textbar .stb-color b { font-size: 13px !important; line-height: 1 !important; font-weight: 700 !important; margin-top: 0 !important; }
  .sketch-textbar :is(.stb-color, .stb-frame) i { position: absolute !important; left: 7px !important; right: 7px !important; bottom: 5px !important; height: 3px !important; border-radius: 2px !important; background: var(--swatch) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18) !important; }
}

/* The outline popover and the fill palette's transparency. */
@layer cases-tabs {
  .sketch-line-popover { position: fixed !important; z-index: 2100 !important; box-sizing: border-box !important; width: 300px !important; padding: 12px !important; border: 1px solid var(--cases-window-border, var(--v2-line)) !important; border-radius: var(--cases-window-radius, 14px) !important; background: var(--cases-window-bg, #f8fafd) !important; box-shadow: var(--cases-window-shadow, 0 18px 44px rgba(38, 61, 79, .2)) !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; }
  .sketch-line-popover h4 { margin: 0 0 8px !important; font-size: var(--type-body, 13px) !important; font-weight: 600 !important; }
  .sketch-line-popover .slp-row { display: grid !important; grid-template-columns: 52px 1fr !important; align-items: center !important; gap: 8px !important; margin-bottom: 10px !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; font-size: var(--type-caption, 11.5px) !important; }
  .sketch-line-popover .slp-row:last-child { margin-bottom: 0 !important; }
  .sketch-line-popover .ssp-color-button { display: inline-flex !important; align-items: center !important; gap: 8px !important; width: fit-content !important; min-height: 32px !important; padding: 0 10px 0 6px !important; border: 1px solid var(--cases-window-border, var(--v2-line)) !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; font: inherit !important; font-size: var(--type-caption, 11.5px) !important; cursor: pointer !important; transform: none !important; }
  .sketch-line-popover .ssp-color-button:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; outline: none !important; }
  .sketch-line-popover .ssp-color-button i { width: 20px !important; height: 20px !important; border-radius: 5px !important; background: var(--swatch) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22) !important; }
  .sketch-line-popover .ssp-color-button svg { width: 14px !important; height: 14px !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; }
  .sketch-line-popover .ssp-chips { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; }
  .sketch-line-popover .ssp-range, .sketch-colors-popover .scp-opacity { display: flex !important; align-items: center !important; gap: 10px !important; }
  .sketch-line-popover .ssp-range input, .sketch-colors-popover .scp-opacity input { flex: 1 1 auto !important; min-width: 0 !important; accent-color: var(--cases-accent, #1769d2) !important; }
  .sketch-line-popover .ssp-range output, .sketch-colors-popover .scp-opacity output { flex: 0 0 52px !important; text-align: right !important; font-size: var(--type-caption, 11.5px) !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; }
  .sketch-colors-popover .scp-opacity { margin-top: 10px !important; padding-top: 8px !important; border-top: 1px solid var(--cases-window-border, var(--v2-line)) !important; }
  .sketch-colors-popover .scp-opacity label { flex: 0 0 auto !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; font-size: var(--type-caption, 11.5px) !important; }
  .sketch-line-popover .sketch-field-chip { height: 24px !important; padding: 0 9px !important; border: 1px solid var(--cases-window-border, var(--v2-line)) !important; border-radius: 12px !important; background: transparent !important; box-shadow: none !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; font: inherit !important; font-size: var(--type-caption, 11.5px) !important; cursor: pointer !important; transform: none !important; }
  .sketch-line-popover .sketch-field-chip:hover { background: var(--cases-hover-fill) !important; }
  .sketch-line-popover .sketch-field-chip[aria-pressed="true"] { border-color: var(--cases-accent, #1769d2) !important; background: var(--cases-selected-fill) !important; color: var(--cases-accent, #1769d2) !important; }
}

/* Linked databases: their section of the layers panel and the manager. */
@layer cases-tabs {
  .sketch-layers-popover .sketch-links-head { display: flex !important; align-items: center !important; justify-content: space-between !important; padding-right: 10px !important; }
  .sketch-layers-popover .sketch-links-manage { height: 24px !important; padding: 0 10px !important; border: 1px solid var(--cases-window-border, var(--v2-line)) !important; border-radius: 12px !important; background: transparent !important; box-shadow: none !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; font: inherit !important; font-size: var(--type-caption, 11.5px) !important; cursor: pointer !important; transform: none !important; }
  .sketch-layers-popover .sketch-links-manage:hover { background: var(--cases-hover-fill) !important; }
  .sketch-layers-popover .sketch-links-empty { margin: 4px 12px 8px !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; font-size: var(--type-caption, 11.5px) !important; }
  .sketch-layers-popover .sketch-link-missing { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin: 4px 8px !important; padding: 6px 10px !important; border-radius: 8px !important; background: rgba(209, 52, 47, .1) !important; color: #d1342f !important; font-size: var(--type-caption, 11.5px) !important; }
  .sketch-layers-popover .sketch-link-missing button { height: 24px !important; padding: 0 10px !important; border: 1px solid currentColor !important; border-radius: 12px !important; background: transparent !important; color: inherit !important; font: inherit !important; cursor: pointer !important; }
  .sketch-layers-popover .sketch-link-row { display: flex !important; align-items: center !important; }
  .sketch-layers-popover .sketch-link-row .sketch-layer-toggle { width: auto !important; flex: 1 1 auto !important; margin-left: 0 !important; }
  .sketch-layers-popover .sketch-category-check { flex: 0 0 18px !important; display: inline-grid !important; place-items: center !important; width: 18px !important; height: 18px !important; margin: 0 0 0 10px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; cursor: pointer !important; transform: none !important; }
  .sketch-layers-popover .sketch-category-check i { width: 14px !important; height: 14px !important; box-sizing: border-box !important; border: 1.5px solid var(--cases-ink-muted, var(--v2-muted)) !important; border-radius: 4px !important; background: transparent !important; }
  .sketch-layers-popover .sketch-category-check[aria-checked="true"] i { border-color: var(--cases-accent, #1769d2) !important; background: var(--cases-accent, #1769d2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 11px no-repeat !important; }
  .sketch-layers-popover .sketch-category-check[aria-checked="mixed"] i { border-color: var(--cases-accent, #1769d2) !important; background: var(--cases-accent, #1769d2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center / 11px no-repeat !important; }
  .sketch-layers-popover .sketch-category-check:is(:hover, :focus-visible) i { border-color: var(--cases-accent, #1769d2) !important; }
  .sketch-sources-panel { position: fixed !important; z-index: 2100 !important; display: flex !important; flex-direction: column !important; width: 420px !important; max-height: min(620px, calc(100vh - 90px)) !important; border: 1px solid var(--cases-window-border, var(--v2-line)) !important; border-radius: var(--cases-window-radius, 14px) !important; background: var(--cases-window-bg, #f8fafd) !important; box-shadow: var(--cases-window-shadow, 0 18px 44px rgba(38, 61, 79, .2)) !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; overflow: hidden !important; }
  .sketch-sources-panel .sks-source { margin: 4px 4px 8px !important; padding: 10px 12px !important; border: 1px solid var(--cases-window-border, var(--v2-line)) !important; border-radius: 10px !important; }
  .sketch-sources-panel .sks-source.is-missing { border-color: #d1342f !important; background: rgba(209, 52, 47, .06) !important; }
  .sketch-sources-panel .sks-title { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 8px !important; }
  .sketch-sources-panel .sks-status { color: var(--cases-ink-muted, var(--v2-muted)) !important; font-size: var(--type-caption, 11.5px) !important; }
  .sketch-sources-panel .sks-source.is-missing .sks-status { color: #d1342f !important; font-weight: 600 !important; }
  .sketch-sources-panel .sks-path { margin: 4px 0 6px !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; font-size: var(--type-caption, 11.5px) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; direction: rtl !important; text-align: left !important; }
  .sketch-sources-panel .sks-note { margin-bottom: 6px !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; font-size: var(--type-caption, 11.5px) !important; }
  .sketch-sources-panel .sks-progress { height: 4px !important; margin: 4px 0 8px !important; border-radius: 2px !important; background: var(--cases-hover-fill) !important; overflow: hidden !important; }
  .sketch-sources-panel .sks-progress[hidden] { display: none !important; }
  .sketch-sources-panel .sks-progress i { display: block !important; height: 100% !important; background: var(--cases-accent, #1769d2) !important; transition: width .2s ease !important; }
  .sketch-sources-panel .sks-actions { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  .sketch-sources-panel .ssp-action.is-primary { border-color: var(--cases-accent, #1769d2) !important; color: var(--cases-accent, #1769d2) !important; }
  .sketch-sources-panel .ssp-action[disabled] { opacity: .5 !important; cursor: default !important; }
}

/* The sheet's head choice: the layers panel's window and choice rows, plus the two text fields of the plain head. */
@layer cases-tabs {
  :is(.sketch-header-popover, .sketch-menu-popover) {
    position: fixed !important; z-index: 2000 !important; width: 250px !important; box-sizing: border-box !important;
    padding: 8px 6px 10px !important; border: 1px solid var(--cases-window-border, var(--v2-line)) !important; border-radius: var(--cases-window-radius, 14px) !important;
    background: var(--cases-window-bg, #f8fafd) !important; box-shadow: var(--cases-window-shadow, 0 18px 44px rgba(38, 61, 79, .2)) !important;
    color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; font-size: var(--type-body, 13px) !important;
  }
  :is(.sketch-header-popover, .sketch-menu-popover) h3 { margin: 8px 10px 4px !important; font-size: var(--type-body, 13px) !important; font-weight: 600 !important; }
  :is(.sketch-header-popover, .sketch-menu-popover) .sketch-layer-row {
    display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; min-height: 30px !important; height: auto !important;
    padding: 4px 10px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important;
    color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; font: inherit !important; text-align: left !important; cursor: pointer !important; transform: none !important;
  }
  :is(.sketch-header-popover, .sketch-menu-popover) .sketch-layer-row:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; outline: none !important; }
  :is(.sketch-header-popover, .sketch-menu-popover) .sketch-layer-row > i { flex: 0 0 14px !important; width: 14px !important; height: 14px !important; box-sizing: border-box !important; border: 1.5px solid var(--cases-ink-muted, var(--v2-muted)) !important; border-radius: 50% !important; background: transparent !important; }
  :is(.sketch-header-popover, .sketch-menu-popover) .sketch-layer-row[aria-checked="true"] > i { border-color: var(--cases-accent, #1769d2) !important; background: radial-gradient(circle, var(--cases-accent, #1769d2) 0 3.5px, transparent 4px) !important; }
  :is(.sketch-header-popover, .sketch-menu-popover) .sketch-layer-row span { flex: 1 1 auto !important; min-width: 0 !important; }
  :is(.sketch-header-popover, .sketch-menu-popover) .sketch-layer-row em { flex: 0 1 auto !important; font-style: normal !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; font-size: var(--type-caption, 11.5px) !important; white-space: nowrap !important; }
  :is(.sketch-header-popover, .sketch-menu-popover) .sketch-header-fields { display: grid !important; gap: 8px !important; padding: 8px 10px 2px !important; }
  :is(.sketch-header-popover, .sketch-menu-popover) .sketch-header-fields[hidden] { display: none !important; }
  :is(.sketch-header-popover, .sketch-menu-popover) label { display: grid !important; gap: 3px !important; font-size: var(--type-caption, 11.5px) !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; }
  :is(.sketch-header-popover, .sketch-menu-popover) input { height: 32px !important; box-sizing: border-box !important; padding: 0 10px !important; border: 1px solid var(--cases-window-border, var(--v2-line)) !important; border-radius: 8px !important; background: var(--cases-field-bg, #fff) !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; font: inherit !important; font-size: var(--type-body, 13px) !important; }
  .sketch-menu-popover { width: 280px !important; }
  .sketch-menu-popover hr { margin: 4px 8px !important; border: 0 !important; border-top: 1px solid var(--cases-window-border, var(--v2-line)) !important; }
}

/* The save/export menu: three icon buttons side by side. */
@layer cases-tabs {
  .sketch-menu-popover.is-icons { display: flex !important; gap: 2px !important; width: auto !important; padding: 4px !important; border-radius: 12px !important; }
  .sketch-menu-popover .sketch-menu-icon {
    display: grid !important; place-items: center !important; width: var(--ui-icon-button-size, 34px) !important; height: var(--ui-icon-button-size, 34px) !important; padding: 0 !important; border: 0 !important; border-radius: 9px !important;
    background: transparent !important; box-shadow: none !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; cursor: pointer !important; transform: none !important;
  }
  .sketch-menu-popover .sketch-menu-icon:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; outline: none !important; }
  html body.cases-visual-v2 .sketch-menu-popover .sketch-menu-icon svg { width: var(--ui-icon-size, 18px) !important; min-width: var(--ui-icon-size, 18px) !important; max-width: var(--ui-icon-size, 18px) !important; height: var(--ui-icon-size, 18px) !important; min-height: var(--ui-icon-size, 18px) !important; max-height: var(--ui-icon-size, 18px) !important; }
}

/* Each sketch icon in its own colour (the Cases mark's palette), in the strip and in the save menu. */
@layer cases-tabs {
  .sketch-menu-icon[data-tone="pdf"] svg, button.sketch-action[data-sketch-action="pdf"] svg { color: #E5645F !important; }
  .sketch-menu-icon[data-tone="jpg"] svg, button.sketch-action[data-sketch-action="jpg"] svg { color: #59B5A7 !important; }
  .sketch-menu-icon[data-tone="shp"] svg { color: #7FB15A !important; }
  .sketch-menu-icon[data-tone="open"] svg { color: #E2AC45 !important; }
  .sketch-menu-icon[data-tone="save"] svg { color: #5C8FD8 !important; }
  .sketch-menu-icon[data-tone="new"] svg { color: #8A6DDB !important; }
  button.sketch-action[data-sketch-action="shape"] svg { color: #8A6DDB !important; }
  button.sketch-action[data-sketch-action="layers"] svg { color: #5FA7DB !important; }
  button.sketch-action[data-sketch-action="fresh"] svg { color: #59B5A7 !important; }
  button.sketch-action[data-sketch-action="file"] svg { color: #6F74D8 !important; }
}

/* The gallery's point-by-point tools, named, above the grid of outlines. */
@layer cases-tabs {
  .sketch-shapes-popover .ssh-modes { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4px !important; }
  .sketch-shapes-popover .ssh-mode {
    display: flex !important; align-items: center !important; gap: 8px !important; min-height: 32px !important; height: auto !important; padding: 4px 8px !important;
    border: 1px solid transparent !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important;
    color: inherit !important; font: inherit !important; font-size: var(--type-caption, 12px) !important; text-align: left !important; cursor: pointer !important; transform: none !important;
  }
  .sketch-shapes-popover .ssh-mode:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; border-color: var(--cases-window-border, var(--v2-line)) !important; outline: none !important; }
  .sketch-shapes-popover .ssh-mode[aria-pressed="true"] { background: var(--cases-selected-fill) !important; border-color: var(--cases-accent, #1769d2) !important; color: var(--cases-accent, #1769d2) !important; }
  .sketch-shapes-popover .ssh-mode svg { flex: 0 0 20px !important; width: 20px !important; height: 20px !important; }
}

/* The sketch's floating palettes show nothing of the sheet through them (the window colour alone is see-through);
   a long gallery scrolls up and down only, with a thin bar. */
@layer cases-tabs {
  .sketch-colors-popover, .sketch-shapes-popover, .sketch-textbar, .sketch-line-popover {
    background: linear-gradient(var(--cases-window-bg, #f8fafd), var(--cases-window-bg, #f8fafd)), Canvas !important;
    -webkit-backdrop-filter: blur(18px) !important; backdrop-filter: blur(18px) !important;
  }
  .sketch-shapes-popover { overflow-x: hidden !important; scrollbar-width: thin !important; }
}

/* The copies' rows (the one outside the app, and the list): a name, the date, the size, in the same columns. */
@layer cases-tabs {
  html body.cases-visual-v2 .cases-main #pageRoot .backup-panel .credential-label { display: flex !important; align-items: center !important; align-self: center !important; gap: 0 !important; min-width: 0 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot .backup-panel .credential-name { flex: 0 0 150px !important; width: 150px !important; white-space: nowrap !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot .backup-panel .credential-title { flex: 0 0 170px !important; width: 170px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  html body.cases-visual-v2 .cases-main #pageRoot .backup-panel .credential-user { flex: 0 0 auto !important; white-space: nowrap !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; }
}

/* An empty slot the size of an icon button: the first row's two buttons stand over the next row's first two. */
@layer cases-tabs {
  html body.cases-visual-v2 .cases-main #pageRoot .backup-panel .settings-action-spacer { flex: 0 0 auto !important; width: var(--ui-icon-button-size, 34px) !important; height: 1px !important; }
}



/* The legend editor's sliders and option rows in the app's own look: a thin track filled up to the thumb, a round
   thumb; the options as one segmented control (a grid of equal buttons on a soft base). */
@layer cases-tabs {
  .sketch-style-panel .ssp-range input[type="range"] {
    -webkit-appearance: none !important; appearance: none !important; flex: 1 1 auto !important; min-width: 0 !important; height: 22px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; cursor: pointer !important;
  }
  .sketch-style-panel .ssp-range input[type="range"]::-webkit-slider-runnable-track {
    height: 4px !important; border-radius: 2px !important;
    background: linear-gradient(to right, var(--cases-accent, #1769d2) var(--fill, 0%), var(--cases-window-border, rgba(128, 138, 150, .4)) var(--fill, 0%)) !important;
  }
  .sketch-style-panel .ssp-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important; width: 16px !important; height: 16px !important; margin-top: -6px !important; border: 2px solid var(--cases-window-bg, #fff) !important; border-radius: 50% !important;
    background: var(--cases-accent, #1769d2) !important; box-shadow: 0 0 0 1px var(--cases-accent, #1769d2), 0 1px 3px rgba(0, 0, 0, .35) !important; cursor: grab !important;
  }
  .sketch-style-panel .ssp-range input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing !important; }
  .sketch-style-panel .ssp-range input[type="range"]:focus-visible { outline: none !important; }
  .sketch-style-panel .ssp-range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--cases-accent, #1769d2), 0 0 0 4px var(--cases-selected-fill, rgba(23, 105, 210, .25)) !important; }

  .sketch-style-panel .ssp-chips { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 2px !important; padding: 3px !important; border-radius: 10px !important; background: var(--cases-hover-fill) !important; }
  .sketch-style-panel .ssp-chips .sketch-field-chip {
    height: 30px !important; padding: 0 8px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important;
    color: var(--cases-ink-muted, var(--v2-muted)) !important; font: inherit !important; font-size: var(--type-caption, 11.5px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; cursor: pointer !important; transform: none !important;
  }
  .sketch-style-panel .ssp-chips .sketch-field-chip:hover { color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; background: transparent !important; }
  .sketch-style-panel .ssp-chips .sketch-field-chip[aria-pressed="true"] {
    background: var(--cases-window-bg, #fff) !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; font-weight: 600 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 1px var(--cases-accent, #1769d2) !important;
  }
  .sketch-style-panel .ssp-icon[data-style-eye][aria-pressed="true"] { color: var(--cases-accent, #1769d2) !important; }
}

/* The legend editor's sliders carry no frame: the app's field frame is for text fields, not for a track. */
@layer cases-tabs {
  html body.cases-visual-v2 .sketch-style-panel .ssp-range input[type="range"] {
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; background-color: transparent !important; background-image: none !important;
    height: 22px !important; min-height: 22px !important; padding: 0 !important;
  }
}

/* The legend editor's options: no grey base; each option a plain outlined button, the chosen one in the app's blue. */
@layer cases-tabs {
  .sketch-style-panel .ssp-chips { padding: 0 !important; background: transparent !important; gap: 6px !important; border-radius: 0 !important; }
  .sketch-style-panel .ssp-chips .sketch-field-chip { border: 1px solid var(--cases-window-border, var(--v2-line)) !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; }
  .sketch-style-panel .ssp-chips .sketch-field-chip:hover { background: var(--cases-hover-fill) !important; }
  .sketch-style-panel .ssp-chips .sketch-field-chip[aria-pressed="true"] {
    border-color: var(--cases-accent, #1769d2) !important; background: var(--cases-accent, #1769d2) !important; color: #fff !important; font-weight: 600 !important; box-shadow: none !important;
  }
}

/* Compact: the style's preview is a slim strip with a small swatch, and a colour is only its swatch and a chevron. */
@layer cases-tabs {
  :is(.sketch-style-panel, .sketch-line-popover) .ssp-color-button { min-height: 30px !important; gap: 6px !important; padding: 0 8px 0 6px !important; }
}

/* The style's look is a small swatch beside its name in the editor's header (no framed strip). */

/* Line styles as one row of four small tiles, each the line itself (the name on hover). */
@layer cases-tabs {
  :is(.sketch-style-panel, .sketch-line-popover) .ssp-chips.ssp-dashes { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
  :is(.sketch-style-panel, .sketch-line-popover) .ssp-dashes .sketch-field-chip { display: grid !important; place-items: center !important; height: 30px !important; padding: 0 !important; }
  :is(.sketch-style-panel, .sketch-line-popover) .ssp-dashes .sketch-field-chip svg { width: 34px !important; height: 6px !important; }
}

/* A colour is its swatch alone, pressed directly (no chevron); the style name field is as slim as the other fields. */
@layer cases-tabs {
  :is(.sketch-style-panel, .sketch-line-popover) .ssp-color-button { min-height: 0 !important; width: 34px !important; height: 26px !important; padding: 0 !important; justify-content: center !important; border-radius: 8px !important; }
  :is(.sketch-style-panel, .sketch-line-popover) .ssp-color-button i { width: 22px !important; height: 14px !important; border-radius: 4px !important; }
  :is(.sketch-style-panel, .sketch-line-popover) .ssp-color-button svg { display: none !important; }
  .sketch-style-panel .ssp-name { height: 26px !important; padding: 0 8px !important; font-size: var(--type-caption, 12px) !important; font-weight: 600 !important; }
}

/* The parcel's public data: a slim card beside the sheet on one plain, opaque background; no grey blocks, only
   hairlines between the lines. The code and the area on top, the details, the owners, the documents by group. */
@layer cases-tabs {
  html body.cases-visual-v2 .cases-main #pageRoot .sketch-frame > .sketch-parcel {
    position: absolute !important; right: 16px !important; bottom: 72px !important; z-index: 3 !important; width: 292px !important; max-height: calc(100% - 120px) !important; overflow: auto !important; box-sizing: border-box !important;
    padding: 10px 14px 12px !important; border: 1px solid var(--cases-window-border, var(--v2-line)) !important; border-radius: 14px !important;
    background: linear-gradient(var(--cases-window-bg, #f8fafd), var(--cases-window-bg, #f8fafd)), Canvas !important; box-shadow: var(--cases-window-shadow, 0 18px 44px rgba(38, 61, 79, .2)) !important;
    color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; font-size: var(--type-caption, 11.5px) !important; scrollbar-width: thin !important;
  }
  .sketch-parcel .sp-head { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 10px !important; padding-bottom: 8px !important; border-bottom: 1px solid var(--cases-window-border, var(--v2-line)) !important; }
  .sketch-parcel .sp-head h3 { margin: 0 !important; font-size: var(--type-body, 13px) !important; font-weight: 600 !important; }
  .sketch-parcel .sp-code { padding: 0 !important; min-height: 0 !important; height: auto !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: inherit !important; font: inherit !important; font-size: var(--type-body, 13px) !important; font-weight: 600 !important; cursor: pointer !important; transform: none !important; }
  .sketch-parcel .sp-area { color: var(--cases-ink-muted, var(--v2-muted)) !important; white-space: nowrap !important; }
  .sketch-parcel .sp-note { margin: 10px 0 0 !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; }
  .sketch-parcel .sp-row { display: grid !important; grid-template-columns: 100px minmax(0, 1fr) !important; gap: 8px !important; padding: 6px 0 !important; border-bottom: 1px solid var(--cases-window-border, var(--v2-line)) !important; }
  .sketch-parcel .sp-row > span { color: var(--cases-ink-muted, var(--v2-muted)) !important; }
  .sketch-parcel .sp-row > b { font-weight: 500 !important; overflow-wrap: anywhere !important; }
  .sketch-parcel .sp-owners { display: grid !important; gap: 2px !important; }
  .sketch-parcel h4 { margin: 10px 0 2px !important; font-size: var(--type-caption, 11.5px) !important; font-weight: 600 !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; }
  .sketch-parcel .sp-group { margin-top: 6px !important; }
  .sketch-parcel .sp-group p { display: flex !important; justify-content: space-between !important; margin: 0 0 2px !important; font-weight: 600 !important; }
  .sketch-parcel .sp-group p em { font-style: normal !important; font-weight: 400 !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; }
  .sketch-parcel .sp-group ul { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid !important; gap: 1px !important; }
  .sketch-parcel .sp-group li { display: grid !important; grid-template-columns: 1fr auto !important; align-items: center !important; gap: 10px !important; min-height: 20px !important; font-variant-numeric: tabular-nums !important; }
  .sketch-parcel .sp-group li span { color: var(--cases-ink-muted, var(--v2-muted)) !important; }
  .sketch-parcel .sp-link { justify-self: start !important; padding: 0 !important; min-height: 0 !important; height: auto !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: inherit !important; font: inherit !important; font-size: var(--type-caption, 11.5px) !important; line-height: 1.4 !important; cursor: pointer !important; transform: none !important; text-align: left !important; }
  .sketch-parcel :is(.sp-link, .sp-code):is(:hover, :focus-visible) { color: var(--cases-accent, #1769d2) !important; text-decoration: underline !important; outline: none !important; }
}

/* The editor header's three buttons (back, eye, close) are the toolbar's icon buttons: the same 34 px button and 18 px icon. */
@layer cases-tabs {
  :is(.sketch-style-panel, .sketch-sources-panel) .ssp-icon { flex: 0 0 var(--ui-icon-button-size, 34px) !important; width: var(--ui-icon-button-size, 34px) !important; height: var(--ui-icon-button-size, 34px) !important; }
  :is(.sketch-style-panel, .sketch-sources-panel) .ssp-icon svg { width: var(--ui-icon-size, 18px) !important; height: var(--ui-icon-size, 18px) !important; }
  :is(.sketch-style-panel, .sketch-sources-panel) .ssp-head { padding: 6px 6px 6px 8px !important; }
}

/* (Stronger selectors: the app's field and icon rules are more specific than the ones above.) */
@layer cases-tabs {
  html body.cases-visual-v2 :is(.sketch-style-panel, .sketch-sources-panel) .ssp-icon svg {
    width: var(--ui-icon-size, 18px) !important; min-width: var(--ui-icon-size, 18px) !important; max-width: var(--ui-icon-size, 18px) !important;
    height: var(--ui-icon-size, 18px) !important; min-height: var(--ui-icon-size, 18px) !important; max-height: var(--ui-icon-size, 18px) !important;
  }
  html body.cases-visual-v2 .sketch-style-panel .ssp-head .ssp-name { height: 30px !important; min-height: 30px !important; max-height: 30px !important; font-size: var(--type-body, 13px) !important; }
}


/* The legend editor as a slim property sheet: every property one row (its name, then its control), the sections only
   hairlines apart (no cards), the outline's two actions side by side. */
@layer cases-tabs {
  html body.cases-visual-v2 .sketch-style-panel { width: 296px !important; background: linear-gradient(var(--cases-window-bg, #f8fafd), var(--cases-window-bg, #f8fafd)), Canvas !important; }
  html body.cases-visual-v2 .sketch-style-panel .ssp-scroll { padding: 2px 0 6px !important; }
  html body.cases-visual-v2 .sketch-style-panel .ssp-section { display: grid !important; gap: 8px !important; margin: 0 !important; padding: 10px 14px 12px !important; border: 0 !important; border-radius: 0 !important; border-top: 1px solid var(--cases-window-border, var(--v2-line)) !important; }
  html body.cases-visual-v2 .sketch-style-panel .ssp-section:first-child { border-top: 0 !important; }
  html body.cases-visual-v2 .sketch-style-panel .ssp-section h4 { margin: 0 0 2px !important; font-size: var(--type-caption, 11.5px) !important; font-weight: 600 !important; letter-spacing: .04em !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; }
  html body.cases-visual-v2 .sketch-style-panel .ssp-field { display: grid !important; grid-template-columns: 96px minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; min-height: 28px !important; }
  html body.cases-visual-v2 .sketch-style-panel .ssp-field.is-wide { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; }
  html body.cases-visual-v2 .sketch-style-panel .ssp-field > label { margin: 0 !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; font-size: var(--type-caption, 11.5px) !important; }
  html body.cases-visual-v2 .sketch-style-panel .ssp-field > .ssp-color-button { justify-self: start !important; }
  html body.cases-visual-v2 .sketch-style-panel .ssp-range { gap: 8px !important; }
  html body.cases-visual-v2 .sketch-style-panel .ssp-range output { flex: 0 0 46px !important; }
  html body.cases-visual-v2 .sketch-style-panel .ssp-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  html body.cases-visual-v2 .sketch-style-panel .ssp-actions .ssp-action { flex: 1 1 auto !important; min-height: 30px !important; height: 30px !important; justify-content: center !important; padding: 0 12px !important; white-space: nowrap !important; }
}

/* Every icon of the legend panel is the toolbar's size (18 px), the list's eyes among them. */
@layer cases-tabs {
  html body.cases-visual-v2 .sketch-style-panel .ssp-eye svg {
    width: var(--ui-icon-size, 18px) !important; min-width: var(--ui-icon-size, 18px) !important; max-width: var(--ui-icon-size, 18px) !important;
    height: var(--ui-icon-size, 18px) !important; min-height: var(--ui-icon-size, 18px) !important; max-height: var(--ui-icon-size, 18px) !important;
  }
}

/* The sketch's windows and tool strip on one standard: a chosen option is the app's soft selection (the selection fill,
   the accent for its text and edge) as in the sidebar, never a solid blue; every field and text input is 30 px high with
   the body's 13 px; the sliders, in the line popover too, are the thin track and round thumb. */
@layer cases-tabs {
  html body.cases-visual-v2 .cases-main #pageRoot .sketch-tools .sketch-tool.is-active {
    background: var(--cases-selected-fill, rgba(23, 105, 210, .14)) !important; color: var(--cases-accent, #1769d2) !important; box-shadow: inset 0 0 0 1px var(--cases-accent, #1769d2) !important;
  }
  html body.cases-visual-v2 :is(.sketch-style-panel, .sketch-line-popover) .ssp-chips .sketch-field-chip[aria-pressed="true"] {
    border-color: var(--cases-accent, #1769d2) !important; background: var(--cases-selected-fill, rgba(23, 105, 210, .14)) !important; color: var(--cases-accent, #1769d2) !important; font-weight: 600 !important; box-shadow: none !important;
  }
  html body.cases-visual-v2 :is(.sketch-style-panel, .sketch-line-popover, .sketch-catalogue, .sketch-header-popover, .sketch-layers-popover, .sketch-sources-panel) :is(input[type="text"], input[type="search"], input:not([type])) {
    height: 30px !important; min-height: 30px !important; max-height: 30px !important; padding: 0 10px !important; font-size: var(--type-body, 13px) !important; border-radius: 8px !important;
  }
  html body.cases-visual-v2 :is(.sketch-style-panel, .sketch-line-popover) .ssp-color-button { height: 30px !important; width: 38px !important; }
  html body.cases-visual-v2 :is(.sketch-style-panel, .sketch-line-popover) .ssp-chips .sketch-field-chip { font-size: var(--type-body, 13px) !important; }
  html body.cases-visual-v2 :is(.sketch-line-popover .ssp-range, .sketch-colors-popover .scp-opacity) input[type="range"] {
    -webkit-appearance: none !important; appearance: none !important; flex: 1 1 auto !important; min-width: 0 !important; height: 22px !important; min-height: 22px !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; background: transparent !important; cursor: pointer !important;
  }
  :is(.sketch-line-popover .ssp-range, .sketch-colors-popover .scp-opacity) input[type="range"]::-webkit-slider-runnable-track {
    height: 4px !important; border-radius: 2px !important;
    background: linear-gradient(to right, var(--cases-accent, #1769d2) var(--fill, 0%), var(--cases-window-border, rgba(128, 138, 150, .4)) var(--fill, 0%)) !important;
  }
  :is(.sketch-line-popover .ssp-range, .sketch-colors-popover .scp-opacity) input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important; width: 16px !important; height: 16px !important; margin-top: -6px !important; border: 2px solid var(--cases-window-bg, #fff) !important; border-radius: 50% !important;
    background: var(--cases-accent, #1769d2) !important; box-shadow: 0 0 0 1px var(--cases-accent, #1769d2), 0 1px 3px rgba(0, 0, 0, .35) !important; cursor: grab !important;
  }
}

/* (The same standard, the rest: one-line shape modes, 30 px buttons, the list's eyes the size of the header's buttons.) */
@layer cases-tabs {
  html body.cases-visual-v2 .sketch-shapes-popover .ssh-mode { height: 32px !important; min-height: 32px !important; gap: 6px !important; padding: 0 8px 0 6px !important; font-size: 12px !important; white-space: nowrap !important; }
  html body.cases-visual-v2 .sketch-shapes-popover .ssh-mode span { height: auto !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: inherit !important; }
  html body.cases-visual-v2 .sketch-layers-popover .sketch-links-manage { height: 30px !important; min-height: 30px !important; padding: 0 10px !important; font-size: var(--type-body, 13px) !important; }
  html body.cases-visual-v2 :is(.sketch-layers-popover .sketch-layer-toggle, .sketch-style-panel .ssp-action) { height: 30px !important; min-height: 30px !important; }
  html body.cases-visual-v2 .sketch-style-panel .ssp-eye { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; }
}

/* The sketch's windows, one chrome: every one opaque (the sheet never shows through), the same radius and edge; a group's
   heading is the small muted line everywhere; the shape gallery's point-by-point tools one to a line (nothing cut). */
@layer cases-tabs {
  html body.cases-visual-v2 :is(.sketch-layers-popover, .sketch-catalogue, .sketch-header-popover, .sketch-menu-popover, .sketch-sources-panel, .sketch-style-panel, .sketch-line-popover, .sketch-colors-popover, .sketch-shapes-popover, .sketch-textbar) {
    background: linear-gradient(var(--cases-window-bg, #f8fafd), var(--cases-window-bg, #f8fafd)), Canvas !important;
    border-radius: var(--cases-window-radius, 14px) !important;
  }
  html body.cases-visual-v2 .sketch-layers-popover h3 { margin: 10px 10px 2px !important; font-size: var(--type-caption, 11.5px) !important; font-weight: 600 !important; letter-spacing: .04em !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; }
  .sketch-shapes-popover .ssh-modes { grid-template-columns: 1fr !important; gap: 2px !important; }
}

/* The line styles are plain samples, no frames: the chosen one is only the soft selection. */
@layer cases-tabs {
  html body.cases-visual-v2 :is(.sketch-style-panel, .sketch-line-popover) .ssp-dashes .sketch-field-chip { border: 0 !important; box-shadow: none !important; background: transparent !important; }
  html body.cases-visual-v2 :is(.sketch-style-panel, .sketch-line-popover) .ssp-dashes .sketch-field-chip:hover { background: var(--cases-hover-fill) !important; }
  html body.cases-visual-v2 :is(.sketch-style-panel, .sketch-line-popover) .ssp-dashes .sketch-field-chip[aria-pressed="true"] { border: 0 !important; box-shadow: none !important; background: var(--cases-selected-fill, rgba(23, 105, 210, .14)) !important; color: var(--cases-accent, #1769d2) !important; }
}

/* A colour is only its swatch, as in the palette: no frame around it. */
@layer cases-tabs {
  html body.cases-visual-v2 :is(.sketch-style-panel, .sketch-line-popover) .ssp-color-button {
    width: 34px !important; height: 30px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 8px !important;
  }
  html body.cases-visual-v2 :is(.sketch-style-panel, .sketch-line-popover) .ssp-color-button:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; outline: none !important; }
  html body.cases-visual-v2 :is(.sketch-style-panel, .sketch-line-popover) .ssp-color-button i { width: 24px !important; height: 18px !important; border-radius: 4px !important; }
}

/* The colour swatch is a square. */
@layer cases-tabs {
  html body.cases-visual-v2 :is(.sketch-style-panel, .sketch-line-popover) .ssp-color-button i { width: 20px !important; height: 20px !important; }
}

/* A slightly smaller thumb on every slider of the sketch's windows. */
@layer cases-tabs {
  :is(.sketch-style-panel .ssp-range, .sketch-line-popover .ssp-range, .sketch-colors-popover .scp-opacity) input[type="range"]::-webkit-slider-thumb { width: 13px !important; height: 13px !important; margin-top: -4.5px !important; }
}

/* Reference tabs: each carries its page's old animated icon. */
@layer cases-tabs {
  /* The tab row is the page's first lane: as tall as a menu item, so its tabs sit on the menu's first line. */
  
  /* The same tab as the services' bar: 34px high, 12 / 14px padding, 8px between icon and name, 6px between tabs. */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-content .security-panel .security-tab:has(.security-tab-icon) { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 0 14px 0 12px !important; }
  
  
  
  
}
/* One header for every page: the page's name first, in a column of one width
   wherever tabs follow, so the tabs start at the same place on every page
   (and do not move with a count or a file name that changes under them). */
@layer cases-tabs {
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip > .page-context:has(+ .services-tabs) { flex: 0 0 200px !important; width: 200px !important; overflow: hidden !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip > .page-context:has(+ .services-tabs) > .page-context-detail { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip > .services-tabs { margin-left: var(--page-tabs-shift, 81px) !important; gap: 6px !important; }
  /* The registry's count sits with the search, not in the title's column: a long title (a filter's name) is cut with "..." and shows whole on hover, and the count is never cut. */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip .page-actions > .case-table-count { color: var(--cases-ink-muted) !important; font-size: var(--type-body) !important; line-height: 18px !important; white-space: nowrap !important; margin-right: 12px !important; }
}
/* The sign catalogue: the search stays put, the list scrolls under it, showing whole rows only (see trimSketchScroll); the search line is straight (no rounded ends). */
@layer cases-tabs {
  html body.cases-visual-v2 .sketch-catalogue.sketch-layers-popover { display: flex !important; flex-direction: column !important; overflow: hidden !important; padding-bottom: 0 !important; }
  html body.cases-visual-v2 .sketch-catalogue .sketch-sign-list { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; padding: 0 0 14px !important; }
  html body.cases-visual-v2 .sketch-catalogue .sketch-sign-search input,
  html body.cases-visual-v2 .sketch-catalogue .sketch-sign-search input:is(:focus, :focus-visible) { border-radius: 0 !important; }
}
/* The layers panel scrolls the same way: whole rows only (see trimSketchScroll). */
@layer cases-tabs {
  html body.cases-visual-v2 .sketch-layers-popover:not(.sketch-catalogue) { display: flex !important; flex-direction: column !important; overflow: hidden !important; padding: 8px 6px 0 !important; }
  html body.cases-visual-v2 .sketch-layers-popover:not(.sketch-catalogue) > .sketch-layers-scroll { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; padding: 0 0 14px !important; }
}
/* The documents the sites opened: a row of their own under the toolbar, there only while one is open; each wears its
   site's colour. The page is a grid with a 16px gap and a taller toolbar cell, so the margins pull the row to 10px from the
   tabs above and 10px from the frame below. */
@layer cases-tabs {
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .services-docs { display: flex !important; align-items: center !important; gap: 6px !important; height: var(--cases-icon-button, 34px) !important; margin: -19px 0 -13px !important; padding: 0 var(--ui-panel-inset, 20px) !important; overflow-x: auto !important; scrollbar-width: none !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .services-docs[hidden] { display: none !important; }
  html body.cases-visual-v2 .services-docs::-webkit-scrollbar { display: none; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .services-docs .services-doc-tab > span { max-width: 260px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  html body.cases-visual-v2 .services-docs .services-doc-tab[data-site="des"] svg { --service-tint: var(--cases-tint-backup) !important; }
  html body.cases-visual-v2 .services-docs .services-doc-tab[data-site="tabeli"] svg { --service-tint: var(--cases-tint-time) !important; }
  html body.cases-visual-v2 .services-docs .services-doc-tab[data-site="gps"] svg { --service-tint: var(--cases-tint-place) !important; }
  html body.cases-visual-v2 .services-docs .services-doc-tab[data-site="napr"] svg { --service-tint: var(--cases-tint-filter) !important; }
  html body.cases-visual-v2 .services-docs .services-doc-tab[data-site="maps"] svg { --service-tint: var(--cases-tint-about) !important; }
  html body.cases-visual-v2 .services-docs .services-doc-tab[data-site="atom"] svg { --service-tint: var(--cases-tint-history) !important; }
  html body.cases-visual-v2 .services-docs .services-doc-tab[data-site="auction"] svg { --service-tint: var(--cases-tint-folder) !important; }
  html body.cases-visual-v2 .services-docs .services-doc-tab[data-site="privatization"] svg { --service-tint: var(--cases-tint-place) !important; }
  html body.cases-visual-v2 .services-docs .services-doc-tab[data-site="enreg"] svg { --service-tint: var(--cases-tint-excel) !important; }
  html body.cases-visual-v2 .services-docs .services-doc-tab[data-site="bti"] svg { --service-tint: var(--cases-tint-group) !important; }
  html body.cases-visual-v2 .services-docs .services-doc-tab[data-site="evaluation"] svg { --service-tint: var(--cases-tint-folder) !important; }
  html body.cases-visual-v2 .services-docs .services-doc-tab[data-site="mail"] svg { --service-tint: var(--cases-tint-filter) !important; }
  html body.cases-visual-v2 .services-docs .services-doc-tab[data-site="cameras"] svg { --service-tint: #d9434f !important; }
  html body.cases-visual-v2 .services-docs .services-doc-tab[data-site="facebook"] svg { --service-tint: #4a8bf0 !important; }
  html body.cases-visual-v2 .services-docs .services-doc-tab[data-site="youtube"] svg { --service-tint: #e5483f !important; }
  html body.cases-visual-v2 .services-docs .services-doc-tab[data-site="instagram"] svg { --service-tint: #d6409f !important; }
  html body.cases-visual-v2 .services-docs .services-doc-tab[data-site="tiktok"] svg { --service-tint: #2fbfc4 !important; }
  html body.cases-visual-v2 .services-docs .services-doc-tab[data-site="telegram"] svg { --service-tint: #2aabee !important; }
}
/* The site is cut to the frame's rounded corners by the host itself (a clip, not only an overflow), and so is each view. */
@layer cases-tabs {
  html body.cases-visual-v2 .services-host { clip-path: inset(0 round var(--ui-frame-radius, 9px)) !important; }
  html body.cases-visual-v2 .services-host > .services-view { border-radius: var(--ui-frame-radius, 9px) !important; clip-path: inset(0 round var(--ui-frame-radius, 9px)) !important; }
}
/* "To be agreed": the hourglass lets its sand fall from the top, then turns over. */
svg .icon-anim-flip { transform-origin: 12px 12px; }
svg .icon-anim-sand-pile { opacity: 0; }
svg .icon-anim-sand-stream { opacity: 0; stroke-dasharray: .22 .14; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-flip { animation: cases-hourglass-flip 1.5s ease-in-out; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-sand-top { animation: cases-hourglass-top 1.5s ease-in-out; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-sand-top-2 { animation-name: cases-hourglass-top-2; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-sand-stream { animation: cases-hourglass-stream 1.5s linear; }
:is(.home-summary-card, button:not(.status-pill)):is(:hover, :focus-visible) .icon-anim-sand-pile { animation: cases-hourglass-pile 1.5s ease-in-out; }
@keyframes cases-hourglass-flip { 0%, 62% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } }
@keyframes cases-hourglass-top { 0%, 8% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes cases-hourglass-top-2 { 0%, 24% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes cases-hourglass-stream { 0% { opacity: 0; stroke-dashoffset: 0; } 6%, 54% { opacity: 1; } 60%, 100% { opacity: 0; stroke-dashoffset: -.9; } }
@keyframes cases-hourglass-pile { 0%, 34% { opacity: 0; } 58%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { svg :is(.icon-anim-flip, .icon-anim-sand-top, .icon-anim-sand-stream, .icon-anim-sand-pile) { animation: none !important; } }
/* The social networks' tabs wear their networks' colours. */
@layer cases-tabs {
  html body.cases-visual-v2 .services-tab[data-service="facebook"] { --service-tint: #4a8bf0; }
  html body.cases-visual-v2 .services-tab[data-service="youtube"] { --service-tint: #e5483f; }
  html body.cases-visual-v2 .services-tab[data-service="instagram"] { --service-tint: #d6409f; }
  html body.cases-visual-v2 .services-tab[data-service="tiktok"] { --service-tint: #2fbfc4; }
  html body.cases-visual-v2 .services-tab[data-service="telegram"] { --service-tint: #2aabee; }
}

/* The camera set aside: a small window in the corner over every page; its tools are the arrows (back to full size) and the cross. */
@layer cases-tabs {
  html body .camera-mini { position: fixed !important; right: 20px !important; bottom: 20px !important; z-index: 70 !important; width: 360px !important; aspect-ratio: 16 / 9; overflow: hidden !important; border-radius: var(--ui-frame-radius, 9px) !important; background: #000 !important; box-shadow: 0 10px 28px rgba(0, 0, 0, .45) !important; cursor: grab; touch-action: none; }
  html body .camera-mini:active { cursor: grabbing; }
  html body .camera-mini .camera-mini-grip { position: absolute !important; z-index: 3 !important; touch-action: none; }
  html body .camera-mini .camera-mini-grip[data-edge="n"] { top: 0 !important; left: 14px !important; right: 14px !important; height: 6px !important; cursor: ns-resize !important; }
  html body .camera-mini .camera-mini-grip[data-edge="s"] { bottom: 0 !important; left: 14px !important; right: 14px !important; height: 6px !important; cursor: ns-resize !important; }
  html body .camera-mini .camera-mini-grip[data-edge="w"] { left: 0 !important; top: 14px !important; bottom: 14px !important; width: 6px !important; cursor: ew-resize !important; }
  html body .camera-mini .camera-mini-grip[data-edge="e"] { right: 0 !important; top: 14px !important; bottom: 14px !important; width: 6px !important; cursor: ew-resize !important; }
  html body .camera-mini .camera-mini-grip:is([data-edge="nw"], [data-edge="ne"], [data-edge="sw"], [data-edge="se"]) { width: 14px !important; height: 14px !important; }
  html body .camera-mini .camera-mini-grip[data-edge="nw"] { top: 0 !important; left: 0 !important; cursor: nwse-resize !important; }
  html body .camera-mini .camera-mini-grip[data-edge="se"] { bottom: 0 !important; right: 0 !important; cursor: nwse-resize !important; }
  html body .camera-mini .camera-mini-grip[data-edge="ne"] { top: 0 !important; right: 0 !important; cursor: nesw-resize !important; }
  html body .camera-mini .camera-mini-grip[data-edge="sw"] { bottom: 0 !important; left: 0 !important; cursor: nesw-resize !important; }
  html body .camera-mini .camera-focus { animation: none !important; }
  html body .camera-mini .camera-focus-tools { top: 6px !important; right: 6px !important; gap: 4px !important; }
  html body .camera-mini .camera-focus-tools > button { width: 20px !important; height: 20px !important; }
  html body .camera-mini .camera-focus-tools svg { width: 13px !important; height: 13px !important; }
  html body .camera-view .camera-focus-tools > button[data-camera-expand] { display: none !important; }
  html body .camera-mini .camera-focus-tools > button[data-camera-expand] { display: grid !important; }
  html body .camera-mini .camera-focus-tools > :is(button[data-camera-snapshot], button[data-camera-playback], button[data-camera-dock]) { display: none !important; }
}


/* A page's name in the top row: its icon, as large as the sidebar's own (set one by one), then the word; a filtered table's title is names, and icons with their words. */
@layer cases-tabs {
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .page-context-title .page-title-icon { display: inline-block !important; flex: 0 0 auto !important; width: var(--title-icon-size, 18px) !important; height: var(--title-icon-size, 18px) !important; min-width: var(--title-icon-size, 18px) !important; max-width: var(--title-icon-size, 18px) !important; min-height: var(--title-icon-size, 18px) !important; max-height: var(--title-icon-size, 18px) !important; color: var(--title-icon-color, inherit) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .page-context-title .page-title-icon > svg { display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; max-height: none !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .page-context-title:has(.page-title-icon) { display: inline-flex !important; align-items: center !important; align-self: center !important; height: 18px !important; overflow: visible !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .page-context-title .page-title-icon + .page-title-name { margin-left: 8px !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .page-context-title .page-title-sep { margin: 0 8px !important; color: var(--cases-ink-muted, var(--v2-muted)); opacity: .7; }
}

/* A page of one site has no tab (its title says it). */
@layer cases-tabs {
  html body .page-action-strip > .services-tabs.is-single { display: none !important; }
}

/* The tabs of a settings page start on the edge of its frame (the shift is measured in renderer.js). */
@layer cases-tabs {
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip > .services-tabs.settings-tabs { margin-left: var(--settings-tabs-shift, 0px) !important; }
}

/* The settings' menu rows read like the main menu's: the same line height. */
@layer cases-tabs {
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-sidebar > .settings-nav-item, html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-sidebar > .settings-nav-item > span { line-height: 1.3 !important; }
}

/* Home: the date stands where the other pages' tabs start (the shift is the tabs'), not beside the title. */
@layer cases-tabs {
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip > .page-context:has(> .home-today) { position: relative !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip > .page-context > .page-context-title + .home-today:not(:empty)::before { content: none !important; display: none !important; }
}

/* The day's holiday after Home's date: a day off in the accent colour, the others the quieter one. */
@layer cases-tabs {
  html body .home-today .home-holiday-sep { margin: 0 8px; opacity: .6; }
  html body .home-today .home-date.is-dayoff { color: var(--home-dayoff, #B45309) !important; }
  html body .home-today .home-dayoff { color: var(--home-dayoff, #B45309) !important; font-weight: 500; }
  html[data-theme="dark"] body .home-today { --home-dayoff: #E2AC45; }
}

/* Home's events: the nearest two in the top row (flat, as the row's other buttons), and the window — a head, the events as a list (a tile with the
   icon, the name and dates, the time left as a soft pill), and under it the button of a new event or its form. */
@layer cases-tabs {
  .home-events { display: inline-flex; align-items: center; gap: 2px; flex: 1 1 auto; justify-content: flex-end; min-width: 0; margin-left: auto; overflow: hidden; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-event-chip { display: inline-flex !important; align-items: center !important; gap: 8px !important; height: 34px !important; max-width: 300px !important; padding: 0 12px !important; border: 0 !important; border-radius: var(--ui-control-radius, 10px) !important; background: transparent !important; box-shadow: none !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; font-size: var(--type-body, 13px) !important; font-weight: 400 !important; transition: background-color 140ms ease !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-event-chip:hover { background: var(--ui-row-hover) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-event-chip .home-event-icon, html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-event-chip .home-event-icon svg { width: 18px !important; height: 18px !important; min-width: 18px !important; max-width: 18px !important; min-height: 18px !important; max-height: 18px !important; }
  .home-event-icon { display: inline-grid; place-items: center; flex: 0 0 auto; color: var(--cases-accent, #1769d2); }
  .home-event-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .home-event-count { flex: 0 0 auto; color: var(--cases-accent, #1769d2); }
  .home-event-chip.is-now .home-event-count { color: var(--agenda-joy, #1F9D6B); }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-event-chip .home-event-count { color: var(--cases-accent, #1769d2) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-event-chip.is-now .home-event-count { color: var(--agenda-joy, #1F9D6B) !important; }

  html body.cases-visual-v2 .case-filter-popover.agenda-popover { --ui-control-height: 32px; width: 420px !important; max-width: calc(100vw - 24px) !important; padding: 0 !important; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .case-filter-header { min-height: 48px !important; padding: 0 10px 0 18px !important; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-heading { display: inline-flex; align-items: center; gap: 10px; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-heading-icon { display: inline-grid; place-items: center; color: var(--agenda-part-tint, var(--cases-accent, #1769d2)); }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-list { list-style: none; margin: 0; padding: 6px 8px; max-height: 300px; overflow-y: auto; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 6px 0 10px; border-radius: var(--ui-control-radius, 10px); font-size: var(--type-body, 13px); color: var(--cases-ink-strong, var(--v2-ink-strong)); transition: background-color 140ms ease; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-row:hover { background: var(--ui-row-hover); }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-event-icon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; color: var(--cases-accent, #1769d2); }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-main { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-date { white-space: nowrap; color: var(--cases-ink-muted, var(--v2-muted)); font-size: var(--type-caption, 12px); font-variant-numeric: tabular-nums; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-count { flex: 0 0 auto; display: inline-flex; align-items: center; height: 24px; padding: 0; color: var(--cases-accent, #1769d2); font-size: var(--type-caption, 12px); white-space: nowrap; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-row.is-now .agenda-count { color: var(--agenda-joy, #1F9D6B); }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 0 22px; color: var(--cases-ink-muted, var(--v2-muted)); font-size: var(--type-body, 13px); }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-empty span { display: inline-grid; place-items: center; opacity: .7; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-empty svg { width: 28px !important; height: 28px !important; min-width: 28px !important; max-width: 28px !important; min-height: 28px !important; max-height: 28px !important; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-remove { display: inline-grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--ui-control-radius, 10px); background: transparent; box-shadow: none; color: var(--cases-ink-muted, var(--v2-muted)); opacity: 0; cursor: pointer; transition: opacity .15s ease, background-color 140ms ease, color 140ms ease; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-row:is(:hover, :focus-within) .agenda-remove { opacity: 1; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-remove:hover { background: var(--ui-row-hover); color: #d1342f; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-foot { padding: 6px 8px 8px; border-top: 1px solid var(--cases-window-border, var(--v2-line)); }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-new { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; padding: 0; border: 0; border-radius: var(--ui-control-radius, 10px); background: transparent; box-shadow: none; color: var(--cases-accent, #1769d2); font: inherit; font-size: var(--type-body, 13px); cursor: pointer; transition: background-color 140ms ease; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-new:hover { background: var(--ui-row-hover); }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-form { padding: 2px 4px 0; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .case-filter-grid { gap: 8px 20px !important; padding: 4px 8px 0 !important; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .case-filter-field { gap: 4px !important; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-wide { grid-column: 1 / -1; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-title-input { width: 100%; height: 32px !important; box-sizing: border-box; padding: 0 10px !important; border: 0 !important; border-bottom: 1px solid var(--cases-window-border, var(--v2-line)) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; font: inherit; outline: 0 !important; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-title-input:focus { border-bottom-color: var(--cases-accent, #1769d2) !important; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 6px 0; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-icon-choices { display: flex; gap: 2px; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-actions { display: flex; justify-content: flex-end; gap: 2px; padding: 8px 2px 0; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover :is(.agenda-icon-choice, .agenda-act) { display: inline-grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--ui-control-radius, 10px); background: transparent; box-shadow: none; color: var(--cases-ink-muted, var(--v2-muted)); cursor: pointer; transition: background-color 140ms ease, color 140ms ease; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover :is(.agenda-icon-choice, .agenda-act):hover { background: var(--ui-row-hover); color: var(--cases-ink-strong, var(--v2-ink-strong)); }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-icon-choice.is-chosen { background: var(--cases-selected-fill); color: var(--cases-accent, #1769d2); }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-act.is-primary { color: var(--cases-accent, #1769d2); }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-work { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 0 8px !important; border: 0 !important; font-size: var(--type-caption, 12px) !important; font-weight: 400 !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; cursor: pointer; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-work input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-work i { display: inline-grid; place-items: center; flex: 0 0 auto; width: 14px; height: 14px; box-sizing: border-box; border: 1.5px solid var(--cases-ink-muted, var(--v2-muted)); border-radius: 4px; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-work i svg { opacity: 0; color: #fff; stroke-width: 3.2; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-work input:checked + i { border-color: var(--cases-accent, #1769d2); background: var(--cases-accent, #1769d2); }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-work input:checked + i svg { opacity: 1; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-work input:focus-visible + i { box-shadow: 0 0 0 2px var(--cases-selected-fill); }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover svg { width: 18px !important; height: 18px !important; min-width: 18px !important; max-width: 18px !important; min-height: 18px !important; max-height: 18px !important; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-work i svg { width: 11px !important; height: 11px !important; min-width: 11px !important; max-width: 11px !important; min-height: 11px !important; max-height: 11px !important; }
  html[data-theme="dark"] body :is(.home-events, .agenda-popover) { --agenda-joy: #4CC9A0; }
  html[data-theme="dark"] body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-row.is-now .agenda-count { color: var(--agenda-joy, #1F9D6B); }
}

@layer cases-tabs {
  html body .services-toolbar .page-context-title.is-link { cursor: pointer !important; }
  html body .services-toolbar .page-context-title.is-link:hover { color: var(--cases-accent, var(--v2-accent)) !important; }
}

/* The tools over a camera's picture are the app's own icon buttons (the control radius, not circles): no fill of their own, a dark halo keeps each one legible on the picture, each pictogram
   has a colour by its meaning and moves when pointed at. */
@layer cases-tabs {
  html body.cases-visual-v2 .camera-view .camera-focus-tools > button { border-radius: var(--ui-control-radius) !important; background: transparent !important; box-shadow: none !important; }
  html body.cases-visual-v2 .camera-view .camera-focus-tools > button:is(:hover, :focus-visible) { background: var(--ui-row-hover) !important; }
  html body.cases-visual-v2 .camera-view .camera-focus-tools > button svg { stroke: currentColor !important; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .75)) drop-shadow(0 0 1px rgba(0, 0, 0, .6)); }
  html body.cases-visual-v2 .camera-mini .camera-focus-tools > button { width: 20px !important; height: 20px !important; }
  html body.cases-visual-v2 .camera-mini .camera-focus-tools > button svg { width: 13px !important; height: 13px !important; min-width: 13px !important; max-width: 13px !important; min-height: 13px !important; max-height: 13px !important; }
  html body.cases-visual-v2 .camera-view .camera-focus-tools > button[data-camera-snapshot] svg { color: var(--cases-tint-about) !important; }
  html body.cases-visual-v2 .camera-view .camera-focus-tools > button[data-camera-playback] svg { color: var(--cases-tint-history) !important; }
  html body.cases-visual-v2 .camera-view .camera-focus-tools > button[data-camera-dock] svg { color: var(--cases-tint-folder) !important; }
  html body.cases-visual-v2 .camera-view .camera-focus-tools > button[data-camera-expand] svg { color: var(--cases-tint-group) !important; }
  html body.cases-visual-v2 .camera-view .camera-focus-tools > button.camera-focus-close svg { color: var(--cases-danger) !important; }
  html body.cases-visual-v2 .camera-view .camera-focus-tools > button[aria-pressed="true"] svg { color: var(--cases-accent) !important; }
}

/* Home's holidays are a block of their own beside the date, in the look of the event chip (its own pictogram and tint; a day off in the accent colour, the
   others quieter). The block shrinks before the events do; its name is cut with dots and runs along under the pointer. */
@layer cases-tabs {
  .home-holidays { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 96px; overflow: hidden; }
  .home-holidays:empty { display: none; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-holiday-chip { min-width: 0 !important; flex: 0 1 auto !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-holiday-chip .home-event-icon { color: var(--holiday-tint) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-holiday-chip.is-off .home-event-title { color: var(--cases-accent) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-holiday-chip:not(.is-off) .home-event-title { color: var(--cases-ink-muted, var(--v2-muted)) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-holiday-chip .home-event-title.is-running { text-overflow: clip !important; animation: cases-holiday-run var(--marquee-time, 3s) linear forwards; }
  /* The date is one button: its two pictograms move together when it is pointed at, focused or open. */
  html body.cases-visual-v2 .home-notification-action-strip .home-today:is(:hover, :focus-visible, [aria-expanded="true"]) .home-weekday-icon .icon-anim-nod { animation: cases-icon-nod .45s ease-in-out; }
  html body.cases-visual-v2 .home-holiday-chip:hover .icon-anim-nod, html body.cases-visual-v2 .home-holiday-chip .home-event-icon:is(:hover, :focus-visible) .icon-anim-nod { animation: cases-icon-nod .45s ease-in-out; }
}

/* Home's date is the way into the events' window: it is pressed like a flat icon button (the row-hover fill, beyond its own box, so nothing moves). */
@layer cases-tabs {
  /* (the pill is the event chip's: 34 px high, 12 px beside its content; the negative vertical margin keeps the row's height) */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .page-context > .home-today { box-sizing: border-box !important; height: 34px !important; margin: -8px auto !important; padding: 0 12px !important; cursor: pointer; border-radius: var(--ui-control-radius, 10px) !important; transition: background-color 140ms ease; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .page-context > .home-today:is(:hover, :focus-visible, [aria-expanded="true"]) { background: var(--ui-row-hover) !important; outline: 0; }
        html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-holiday-list { list-style: none; margin: 0; padding: 4px 8px 6px; max-height: 250px; overflow-y: auto; scrollbar-width: none; scroll-snap-type: y mandatory; scroll-padding: 4px 0; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-holiday-list::-webkit-scrollbar { display: none; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-holiday { display: flex; align-items: center; gap: 12px; height: 48px; box-sizing: border-box; padding: 0 6px 0 10px; scroll-snap-align: start; font-size: var(--type-body, 13px); color: var(--cases-ink-strong, var(--v2-ink-strong)); }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-holiday-icon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; color: var(--holiday-tint, var(--cases-accent)); }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-holiday.is-off .agenda-text { color: var(--cases-accent); }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-holiday .agenda-count { color: var(--cases-ink-muted, var(--v2-muted)); }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-holiday.is-now .agenda-count { color: var(--agenda-joy, #1F9D6B); }
}

@layer cases-tabs {
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-row { cursor: pointer; touch-action: none; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-list.is-sorting { user-select: none; cursor: grabbing; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-list.is-sorting .agenda-row { cursor: grabbing; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-row.is-dragging { background: var(--ui-row-hover); }
  /* "New event" is pressed like the event chip: its fill hugs the content (34 px high, 12 px beside it), the button stands in the middle. */
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-new { width: fit-content; height: 34px; margin: 3px auto; padding: 0 12px; border-radius: var(--ui-control-radius) !important; }
}

@layer cases-tabs {
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-checks { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-date { display: inline-flex; align-items: center; gap: 6px; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-repeat { display: inline-grid; place-items: center; color: var(--cases-ink-muted, var(--v2-muted)); }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-repeat svg { width: 12px !important; height: 12px !important; min-width: 12px !important; min-height: 12px !important; }
}

@layer cases-tabs {
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-checks { align-items: flex-start; }
}

@layer cases-tabs {
  :root { --tone-birthday: #D6459B; --tone-vacation: #E39A12; --tone-trip: #0F9FB0; --tone-star: #7B61D9; }
  html[data-theme="dark"] { --tone-birthday: #F06BB5; --tone-vacation: #F5B83D; --tone-trip: #3CC4D6; --tone-star: #A18BF0; }
  :is(.home-event-icon, .agenda-event-icon, .agenda-icon-choice)[data-tone="birthday"] { color: var(--tone-birthday) !important; }
  :is(.home-event-icon, .agenda-event-icon, .agenda-icon-choice)[data-tone="vacation"] { color: var(--tone-vacation) !important; }
  :is(.home-event-icon, .agenda-event-icon, .agenda-icon-choice)[data-tone="trip"] { color: var(--tone-trip) !important; }
  :is(.home-event-icon, .agenda-event-icon, .agenda-icon-choice)[data-tone="star"] { color: var(--tone-star) !important; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-icon-choice:not(.is-chosen):not(:hover) { opacity: .72; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .case-filter-header { min-height: 56px !important; box-sizing: border-box; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-list { padding: 8px; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-foot { padding: 8px 8px 10px; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-form.is-day :is(.agenda-to, .agenda-work) { display: none !important; }
}

@layer cases-tabs {
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-title-wrap { position: relative; display: block; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-title-input { padding-right: 34px !important; box-sizing: border-box; width: 100%; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-emoji-button { position: absolute; right: 0; top: 0; bottom: 0; margin: auto 0; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--ui-control-radius, 10px); background: transparent; box-shadow: none; color: var(--cases-ink-muted, var(--v2-muted)); cursor: pointer; transition: background-color 140ms ease, color 140ms ease; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-emoji-button:hover, html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-emoji-button[aria-expanded="true"] { background: var(--ui-row-hover); color: var(--cases-accent, #1769d2); }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-emoji-button svg { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; }
  html body.cases-visual-v2 .case-filter-popover.emoji-picker { width: 340px; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; }
  html body.cases-visual-v2 .case-filter-popover.emoji-picker .emoji-search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--cases-window-border, var(--v2-line)); color: var(--cases-ink-muted, var(--v2-muted)); }
  html body.cases-visual-v2 .case-filter-popover.emoji-picker .emoji-search svg { width: 18px; height: 18px; display: block; }
  html body.cases-visual-v2 .case-filter-popover.emoji-picker .emoji-search input { flex: 1; min-width: 0; height: 32px; padding: 0; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; color: var(--cases-ink-strong, var(--v2-ink-strong)); font-size: var(--type-body, 13px); }
  html body.cases-visual-v2 .case-filter-popover.emoji-picker .emoji-tabs { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--cases-window-border, var(--v2-line)); }
  html body.cases-visual-v2 .case-filter-popover.emoji-picker .emoji-tab { flex: 1 1 0; height: 30px; padding: 0; border: 0; border-radius: var(--ui-control-radius, 10px); background: transparent; font-size: 16px; line-height: 1; cursor: pointer; opacity: .62; font-family: var(--cases-emoji-stack), "Segoe UI Emoji", sans-serif !important; transition: background-color 140ms ease, opacity 140ms ease; }
  html body.cases-visual-v2 .case-filter-popover.emoji-picker .emoji-tab:hover { background: var(--ui-row-hover); opacity: 1; }
  html body.cases-visual-v2 .case-filter-popover.emoji-picker .emoji-tab.is-active { background: var(--cases-selected-fill); opacity: 1; }
  html body.cases-visual-v2 .case-filter-popover.emoji-picker .emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; align-content: start; height: 236px; padding: 8px; overflow-y: auto; }
  html body.cases-visual-v2 .case-filter-popover.emoji-picker .emoji-cell { display: grid; place-items: center; height: 34px; padding: 0; border: 0; border-radius: var(--ui-control-radius, 10px); background: transparent; font-size: 20px; line-height: 1; cursor: pointer; font-family: var(--cases-emoji-stack), "Segoe UI Emoji", sans-serif !important; transition: background-color 120ms ease; }
  html body.cases-visual-v2 .case-filter-popover.emoji-picker .emoji-cell:hover { background: var(--ui-row-hover); }
  html body.cases-visual-v2 .case-filter-popover.emoji-picker .emoji-empty { grid-column: 1 / -1; margin: 28px 0 0; text-align: center; color: var(--cases-ink-muted, var(--v2-muted)); font-size: var(--type-body, 13px); }
  html body.cases-visual-v2 .case-filter-popover.emoji-picker .emoji-foot { display: flex; align-items: center; height: 34px; padding: 0 16px; border-top: 1px solid var(--cases-window-border, var(--v2-line)); }
  html body.cases-visual-v2 .case-filter-popover.emoji-picker .emoji-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cases-ink-muted, var(--v2-muted)); font-size: var(--type-caption, 12px); }
}



@layer cases-tabs {
  html body.cases-visual-v2 .case-filter-popover.emoji-picker .emoji-foot { justify-content: space-between; gap: 8px; }
}


@layer cases-tabs {
  html body.cases-visual-v2 .case-filter-popover.font-picker { box-sizing: border-box; padding: 0; display: flex; flex-direction: column; }
  html body.cases-visual-v2 .case-filter-popover.font-picker .font-picker-search { display: flex; align-items: center; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--cases-window-border, var(--v2-line)); }
  html body.cases-visual-v2 .case-filter-popover.font-picker .font-picker-search input { flex: 1; min-width: 0; height: 32px; padding: 0; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; color: var(--cases-ink-strong, var(--v2-ink-strong)); font-size: var(--type-body, 13px); }
  html body.cases-visual-v2 .case-filter-popover.font-picker .font-picker-list { height: 300px; overflow-y: auto; padding: 6px 8px; }
  html body.cases-visual-v2 .case-filter-popover.font-picker .font-picker-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--ui-control-radius, 10px); background: transparent; color: var(--cases-ink-strong, var(--v2-ink-strong)); font-size: var(--type-body, 13px); text-align: left; cursor: pointer; transition: background-color 140ms ease; }
  html body.cases-visual-v2 .case-filter-popover.font-picker .font-picker-row:hover { background: var(--ui-row-hover); }
  html body.cases-visual-v2 .case-filter-popover.font-picker .font-picker-row.is-selected { background: var(--cases-selected-fill); }
  html body.cases-visual-v2 .case-filter-popover.font-picker .font-picker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body.cases-visual-v2 .case-filter-popover.font-picker .font-picker-sample { flex: 0 0 auto; color: var(--cases-ink-muted, var(--v2-muted)); font-size: 14px; }
  html body.cases-visual-v2 .case-filter-popover.font-picker .font-picker-empty { margin: 28px 0 0; text-align: center; color: var(--cases-ink-muted, var(--v2-muted)); font-size: var(--type-body, 13px); }
  html body.cases-visual-v2 .case-filter-popover.font-picker .font-picker-foot { display: flex; align-items: center; height: 34px; padding: 0 16px; border-top: 1px solid var(--cases-window-border, var(--v2-line)); color: var(--cases-ink-muted, var(--v2-muted)); font-size: var(--type-caption, 12px); }
}


@layer cases-tabs {
  html body.cases-visual-v2 .case-filter-popover.font-picker .font-picker-check { flex: 0 0 18px; display: inline-grid; place-items: center; height: 18px; color: var(--cases-accent, #1769d2); }
  html body.cases-visual-v2 .case-filter-popover.font-picker .font-picker-check svg { width: 18px; height: 18px; display: block; }
  /* The window that chooses the font, and the Appearance page, stay in the program's own font whatever is chosen, so a poor choice can always be undone. */
}


@layer cases-tabs {
  /* About fourteen hundred rows, each with a sample in its own font: the rows out of sight are not laid out, so their fonts are not loaded until they are scrolled to. */
  html body.cases-visual-v2 .case-filter-popover.font-picker .font-picker-row { content-visibility: auto; contain-intrinsic-size: auto 36px; }
}

@layer cases-tabs {
  /* Centred by its margins, not a transform: the buttons' pressed and hover states move by transform, and the button would jump out of its place. */
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-emoji-button:is(:hover, :active, :focus, :focus-visible, [aria-expanded]) { transform: none !important; translate: none !important; top: 0 !important; bottom: 0 !important; margin: auto 0 !important; }
}

@layer cases-tabs {
  html body.cases-visual-v2 .setting-swatch { display: inline-block; flex: 0 0 auto; width: 12px; height: 12px; margin-right: 2px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
  html body.cases-visual-v2 .case-filter-popover.font-picker .font-picker-name { display: inline-flex; align-items: center; gap: 8px; }
}

/* ---- Appearance choices: accent, density, menu, motion ---- */
@layer cases-tabs {
    html[data-accent="teal"] body.cases-visual-v2 { --atmos-regatta: #3E9AA3 !important; --cases-primary: #3E9AA3 !important; --cases-primary-rgb: 62, 154, 163 !important; --cases-accent: #0E8A96 !important; --cases-accent-edge: #3E9AA3 !important; --cases-selected-fill: rgba(62, 154, 163, .10) !important; --v2-blue-soft: rgba(62, 154, 163, .10) !important; --v2-focus-ring: rgba(62, 154, 163, .17) !important; --v2-line-strong: rgba(62, 154, 163, .42) !important; --v2-control-border: rgba(62, 154, 163, .30) !important; --ui-control-border: rgba(62, 154, 163, .30) !important; --ui-control-border-hover: rgba(62, 154, 163, .62) !important; }
  html[data-theme="dark"][data-accent="teal"] body.cases-visual-v2 { --atmos-regatta: #5FC0C9 !important; --cases-primary: #5FC0C9 !important; --cases-primary-rgb: 95, 192, 201 !important; --cases-accent: #3CC4D0 !important; --cases-accent-edge: #5FC0C9 !important; --cases-selected-fill: rgba(95, 192, 201, .16) !important; --v2-blue: #5FC0C9 !important; --v2-blue-soft: rgba(95, 192, 201, .14) !important; --v2-focus: #5FC0C9 !important; --v2-focus-ring: rgba(95, 192, 201, .22) !important; --v2-control-border: rgba(95, 192, 201, .34) !important; --ui-control-border: rgba(95, 192, 201, .34) !important; --ui-control-border-hover: rgba(95, 192, 201, .60) !important; --ui-interaction-tint: rgba(95, 192, 201, .11) !important; --ui-row-hover: rgba(95, 192, 201, .10) !important; --v2-table-hover: rgba(95, 192, 201, .10) !important; }
  html[data-accent="green"] body.cases-visual-v2 { --atmos-regatta: #4A9B78 !important; --cases-primary: #4A9B78 !important; --cases-primary-rgb: 74, 155, 120 !important; --cases-accent: #1E8E5A !important; --cases-accent-edge: #4A9B78 !important; --cases-selected-fill: rgba(74, 155, 120, .10) !important; --v2-blue-soft: rgba(74, 155, 120, .10) !important; --v2-focus-ring: rgba(74, 155, 120, .17) !important; --v2-line-strong: rgba(74, 155, 120, .42) !important; --v2-control-border: rgba(74, 155, 120, .30) !important; --ui-control-border: rgba(74, 155, 120, .30) !important; --ui-control-border-hover: rgba(74, 155, 120, .62) !important; }
  html[data-theme="dark"][data-accent="green"] body.cases-visual-v2 { --atmos-regatta: #6FBF9B !important; --cases-primary: #6FBF9B !important; --cases-primary-rgb: 111, 191, 155 !important; --cases-accent: #4CC28A !important; --cases-accent-edge: #6FBF9B !important; --cases-selected-fill: rgba(111, 191, 155, .16) !important; --v2-blue: #6FBF9B !important; --v2-blue-soft: rgba(111, 191, 155, .14) !important; --v2-focus: #6FBF9B !important; --v2-focus-ring: rgba(111, 191, 155, .22) !important; --v2-control-border: rgba(111, 191, 155, .34) !important; --ui-control-border: rgba(111, 191, 155, .34) !important; --ui-control-border-hover: rgba(111, 191, 155, .60) !important; --ui-interaction-tint: rgba(111, 191, 155, .11) !important; --ui-row-hover: rgba(111, 191, 155, .10) !important; --v2-table-hover: rgba(111, 191, 155, .10) !important; }
  html[data-accent="violet"] body.cases-visual-v2 { --atmos-regatta: #7A66C6 !important; --cases-primary: #7A66C6 !important; --cases-primary-rgb: 122, 102, 198 !important; --cases-accent: #6D4FD0 !important; --cases-accent-edge: #7A66C6 !important; --cases-selected-fill: rgba(122, 102, 198, .10) !important; --v2-blue-soft: rgba(122, 102, 198, .10) !important; --v2-focus-ring: rgba(122, 102, 198, .17) !important; --v2-line-strong: rgba(122, 102, 198, .42) !important; --v2-control-border: rgba(122, 102, 198, .30) !important; --ui-control-border: rgba(122, 102, 198, .30) !important; --ui-control-border-hover: rgba(122, 102, 198, .62) !important; }
  html[data-theme="dark"][data-accent="violet"] body.cases-visual-v2 { --atmos-regatta: #A794EC !important; --cases-primary: #A794EC !important; --cases-primary-rgb: 167, 148, 236 !important; --cases-accent: #A18BF0 !important; --cases-accent-edge: #A794EC !important; --cases-selected-fill: rgba(167, 148, 236, .16) !important; --v2-blue: #A794EC !important; --v2-blue-soft: rgba(167, 148, 236, .14) !important; --v2-focus: #A794EC !important; --v2-focus-ring: rgba(167, 148, 236, .22) !important; --v2-control-border: rgba(167, 148, 236, .34) !important; --ui-control-border: rgba(167, 148, 236, .34) !important; --ui-control-border-hover: rgba(167, 148, 236, .60) !important; --ui-interaction-tint: rgba(167, 148, 236, .11) !important; --ui-row-hover: rgba(167, 148, 236, .10) !important; --v2-table-hover: rgba(167, 148, 236, .10) !important; }
  html[data-accent="amber"] body.cases-visual-v2 { --atmos-regatta: #C08A4C !important; --cases-primary: #C08A4C !important; --cases-primary-rgb: 192, 138, 76 !important; --cases-accent: #C26A12 !important; --cases-accent-edge: #C08A4C !important; --cases-selected-fill: rgba(192, 138, 76, .10) !important; --v2-blue-soft: rgba(192, 138, 76, .10) !important; --v2-focus-ring: rgba(192, 138, 76, .17) !important; --v2-line-strong: rgba(192, 138, 76, .42) !important; --v2-control-border: rgba(192, 138, 76, .30) !important; --ui-control-border: rgba(192, 138, 76, .30) !important; --ui-control-border-hover: rgba(192, 138, 76, .62) !important; }
  html[data-theme="dark"][data-accent="amber"] body.cases-visual-v2 { --atmos-regatta: #E0A863 !important; --cases-primary: #E0A863 !important; --cases-primary-rgb: 224, 168, 99 !important; --cases-accent: #F0A54D !important; --cases-accent-edge: #E0A863 !important; --cases-selected-fill: rgba(224, 168, 99, .16) !important; --v2-blue: #E0A863 !important; --v2-blue-soft: rgba(224, 168, 99, .14) !important; --v2-focus: #E0A863 !important; --v2-focus-ring: rgba(224, 168, 99, .22) !important; --v2-control-border: rgba(224, 168, 99, .34) !important; --ui-control-border: rgba(224, 168, 99, .34) !important; --ui-control-border-hover: rgba(224, 168, 99, .60) !important; --ui-interaction-tint: rgba(224, 168, 99, .11) !important; --ui-row-hover: rgba(224, 168, 99, .10) !important; --v2-table-hover: rgba(224, 168, 99, .10) !important; }
  /* Density: compact takes the sidebar rows to the height the short window already uses; the settings' rows are the sidebar's row and gap, so they follow. (The case tables' rows are
     fitted to their longest identifier list, so they stay as they are.) */
  html[data-density="compact"] body.cases-visual-v2 { --ui-sidebar-row-height: 42px !important; --ui-sidebar-row-gap: 8px !important; }
  /* Motion off: nothing of the program's own animates (a spinner that shows work in progress keeps turning). */
  html[data-motion="off"] *:not(.is-loading):not(.is-loading *), html[data-motion="off"] *:not(.is-loading):not(.is-loading *)::before, html[data-motion="off"] *:not(.is-loading):not(.is-loading *)::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  /* The menu as icons only: a narrow column, the tiles square, the names left to the tooltips. */
  html[data-sidebar="compact"] body.cases-visual-v2 { --cases-sidebar-w: 96px; }
  html[data-sidebar="compact"] body.cases-visual-v2 .cases-app-frame { grid-template-columns: var(--cases-sidebar-w) minmax(0, 1fr) !important; }
  html[data-sidebar="compact"] body.cases-visual-v2 .cases-sidebar #navList#navList > :is(.nav-main-group, .nav-bottom-group) { width: 56px !important; min-width: 56px !important; max-width: 56px !important; }
  html[data-sidebar="compact"] body.cases-visual-v2 .cases-sidebar #navList#navList > :is(.nav-main-group, .nav-bottom-group) > .nav-item:not(.sidebar-cloud-status) { width: 56px !important; min-width: 56px !important; max-width: 56px !important; padding: 0 !important; display: grid !important; grid-template-columns: 1fr !important; place-items: center !important; }
  html[data-sidebar="compact"] body.cases-visual-v2 .cases-sidebar #navList#navList > :is(.nav-main-group, .nav-bottom-group) > .nav-item .nav-title { display: none !important; }
  html[data-sidebar="compact"] body.cases-visual-v2 .cases-sidebar .cases-brand .sidebar-brand-title { display: none !important; }
  html[data-sidebar="compact"] body.cases-visual-v2 .cases-sidebar .logo-only-brand.cases-brand { justify-content: center !important; padding-inline: 0 !important; }
}


@layer cases-tabs {
  /* The choice in use is marked by its tick, not by a framed fill. */
  html body.cases-visual-v2 .case-filter-popover.font-picker .font-picker-row.is-selected, html body.cases-visual-v2 .case-filter-popover.font-picker .font-picker-row.is-selected:hover { background: transparent; }
  html body.cases-visual-v2 .case-filter-popover.font-picker .font-picker-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body.cases-visual-v2 .cases-main #pageRoot .settings-content .theme-choice-label .setting-swatch { margin-right: 12px; vertical-align: middle; }
  html body.cases-visual-v2 .cases-main #pageRoot .settings-content .theme-choice-label .setting-sample { margin-left: 14px; color: var(--v2-muted); }
  html body.cases-visual-v2 .case-filter-popover.emoji-picker .emoji-tab { position: relative; }
  html body.cases-visual-v2 .case-filter-popover.emoji-picker .emoji-tab.is-active { background: transparent; }
  html body.cases-visual-v2 .case-filter-popover.emoji-picker .emoji-tab.is-active::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--cases-accent, #1769d2); }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-icon-choice { position: relative; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-icon-choice.is-chosen { background: transparent; }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-icon-choice.is-chosen::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 1px; height: 2px; border-radius: 2px; background: var(--cases-accent, #1769d2); }
}

@layer cases-tabs {
  /* The window that chooses the font, and the Appearance page, stay in the program's own font whatever is chosen, so a poor choice can always be undone. */
}

@layer cases-tabs {
  /* The window that chooses the font, and the Appearance page, stay in the program's own font whatever is chosen, so a poor choice can always be undone. */
}

@layer cases-tabs {
  /* The chosen tile's icon is set to the start in the full menu; with icons only it stands in the middle like the others'. */
  html[data-sidebar="compact"] body.cases-visual-v2 .cases-sidebar #navList#navList > :is(.nav-main-group, .nav-bottom-group) > .nav-item .nav-icon { justify-self: center !important; margin: 0 !important; }
}


@layer cases-tabs {
  /* The tiles are spaced evenly in both directions: the gap between two and the margin at the edge are the same. */
  html body.cases-visual-v2 .camera-view .camera-grid { gap: 0 !important; justify-content: space-evenly !important; align-content: space-evenly !important; }
}

@layer cases-tabs {
  .camera-row [hidden] { display: none !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .camera-row > .camera-bar { flex: 1 1 auto; min-width: 0; min-height: 0; gap: 12px; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .services-docs:not([hidden]) + .camera-row:not([hidden]) { margin-top: 6px !important; }
}

@layer cases-tabs {
  /* The grid takes the whole frame: the margin at its edge is the gap between the tiles, measured from the frame itself (no padding of the view besides). */
  html body.cases-visual-v2 .services-host > .camera-view { padding: 0 !important; gap: 0 !important; }
}

@layer cases-tabs {
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .camera-row > .camera-bar { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .camera-row > .camera-bar > .camera-edit-toggle { margin-left: auto !important; }
}

@layer cases-tabs {
  /* While editing, the row also holds the quality and columns choices: the edit button keeps only its icon (its name stays as the tooltip) so the row never overflows. */
  html body.cases-visual-v2 .camera-row .camera-edit-toggle.is-active > span { display: none !important; }
}

@layer cases-tabs {
  /* A place found by the quick search: its name stands in the first column with its icon, cut short rather than run into what follows. */
  html body.cases-visual-v2 .quick-search-dialog .quick-search-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@layer cases-tabs {
  /* A card of rows (shortcuts, journal): no line under the last row (it met the card's own edge); a long one ends on the Exit line (15px above the window's bottom, as the settings' page ends) and its rows scroll inside it. */
  html body.cases-visual-v2 .cases-main #pageRoot .about-list { display: flex !important; flex-direction: column; box-sizing: border-box; max-height: calc(100vh - 99px); overflow: hidden; }
  html body.cases-visual-v2 .cases-main #pageRoot .about-list > .about-info-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
}

@layer cases-tabs {
  /* Rows of these cards are parted by a line above each (not below): a row cut by the card's edge while the list scrolls never leaves a line on the frame. */
  html body.cases-visual-v2 .cases-main #pageRoot .about-list .about-tech-card dl > div { border-bottom: 0 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot .about-list .about-tech-card dl > div + div { border-top: 1px solid var(--ui-data-divider) !important; }
}

@layer cases-tabs {
  /* About: the name and version are the first row (so the page's first row stands on the same line as every settings page's); a row's value may carry a button at its end. */
  html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page .about-tech-card dd { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
  html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page .about-tech-card dd .about-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* The small window of a long list under an About row (errors, changes, licences): a window of the program's own look. */
  html body.cases-visual-v2 .case-filter-popover.info-window { width: 460px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 0 0 12px !important; display: flex; flex-direction: column; }
  html body.cases-visual-v2 .case-filter-popover.info-window .case-filter-header { min-height: 56px !important; padding: 0 10px 0 18px !important; }
  html body.cases-visual-v2 .case-filter-popover.info-window .info-window-title { color: var(--cases-ink-strong, var(--v2-ink-strong)); font-weight: 500; }
  html body.cases-visual-v2 .case-filter-popover.info-window .info-window-body { overflow-y: auto; scrollbar-width: thin; padding: 2px 0 0; }
  html body.cases-visual-v2 .case-filter-popover.info-window .info-window-row { display: grid; gap: 4px; padding: 10px 18px; }
  html body.cases-visual-v2 .case-filter-popover.info-window .info-window-row { border-bottom: 1px solid var(--ui-data-divider); }
  html body.cases-visual-v2 .case-filter-popover.info-window .info-window-row:last-child { border-bottom: 0; }
  html body.cases-visual-v2 .case-filter-popover.info-window .info-window-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cases-ink-strong, var(--v2-ink-strong)); font-size: var(--type-body, 13px); }
  html body.cases-visual-v2 .case-filter-popover.info-window .info-window-main small { color: var(--cases-ink-muted, var(--v2-muted)); font-size: var(--type-caption, 12px); font-weight: 400; }
  html body.cases-visual-v2 .case-filter-popover.info-window .info-window-notes { margin: 0; padding-left: 18px; color: var(--cases-ink-muted, var(--v2-muted)); font-size: var(--type-caption, 12px); line-height: 1.5; }
}

@layer cases-tabs {
  html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page > .about-identity { display: flex; align-items: center; gap: 16px; padding: 22px 30px 20px; border-bottom: 1px solid var(--ui-data-divider); }
  html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page .about-identity-logo { width: 40px; height: 40px; flex: 0 0 auto; }
  html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page .about-identity-name { color: var(--cases-ink-strong, var(--v2-ink-strong)); font-family: "Cases Aquire Embedded", "Cases Inter Embedded", sans-serif !important; font-size: 26px; letter-spacing: .24em; line-height: 1; }
  html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page .about-identity-version { margin-left: auto; color: var(--cases-ink-muted, var(--v2-muted)); font-size: var(--type-body, 13px); }
  /* The maker's mark stands in the middle of the page, a space below the last line (not at its bottom edge). */
  html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page > .about-maker { display: flex; justify-content: center; margin: 0; }
}

@layer cases-tabs {
}

@layer cases-tabs {
  /* The sign-in button is a flat icon button like the program's other confirmations: the accent arrow, a quiet fill under the pointer. */
  html body .app-lock .app-lock-enter { background: transparent !important; box-shadow: none !important; color: var(--cases-accent, #1769d2) !important; filter: none !important; transform: none !important; transition: background-color 140ms ease !important; }
  html body .app-lock .app-lock-enter:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; filter: none !important; transform: none !important; }
  html body .app-lock .app-lock-enter svg { width: 18px; height: 18px; }
}

@layer cases-tabs {
  /* The event being changed is shown by its title in the accent colour (no frame, no bar, no fill); the spaces typed in a title are kept in what is shown. */
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-row.is-editing .agenda-text { color: var(--cases-accent, #1769d2); }
  html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-text, html body.cases-visual-v2 .cases-main #pageRoot .home-event-title { white-space: pre; }
}

@layer cases-tabs {
/* The menus (main and settings) have no tile: the pictograms and names stand free on the page. The open one is told by the accent edge and its name in ink; the pointer by a quiet fill. */
  html body.cases-visual-v2 .cases-sidebar .nav-item:not(#a):not(#b):not(#c), html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-sidebar .settings-nav-item:not(#a):not(#b):not(#c) { background: transparent !important; background-image: none !important; box-shadow: none !important; border-color: transparent !important; transition: background-color 140ms ease, color 140ms ease !important; }
  html body.cases-visual-v2 .cases-sidebar .nav-item:not(#a):not(#b):not(#c):hover, html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-sidebar .settings-nav-item:not(#a):not(#b):not(#c):hover { background: var(--ui-row-hover) !important; box-shadow: none !important; }
  html body.cases-visual-v2 .cases-sidebar .nav-item.active:not(#a):not(#b):not(#c), html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-sidebar .settings-nav-item.active:not(#a):not(#b):not(#c) { background: var(--cases-selected-fill) !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; }
}

@layer cases-tabs {
/* The settings' menu as icons only: a narrow column like the main one, the names left to the tooltips; the page's columns and divider follow it. */
html[data-sidebar="compact"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-layout { grid-template-columns: 56px 1px minmax(0, 1fr) !important; }
html[data-sidebar="compact"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-layout > .settings-sidebar.ui-frame { width: 56px !important; min-width: 56px !important; max-width: 56px !important; }
html[data-sidebar="compact"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-layout > .settings-sidebar > .settings-nav-item { width: 56px !important; min-width: 56px !important; max-width: 56px !important; padding: 0 !important; display: grid !important; grid-template-columns: 1fr !important; place-items: center !important; }
html[data-sidebar="compact"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-layout > .settings-sidebar > .settings-nav-item > span:last-child { display: none !important; }
html[data-sidebar="compact"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-layout > .settings-sidebar > .settings-nav-item .settings-nav-icon { justify-self: center !important; margin: 0 !important; }
html[data-sidebar="compact"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-layout > .settings-vertical-divider { left: calc(var(--cases-sidebar-w, calc(var(--cases-nav-w, 176px) + 2 * var(--ui-divider-frame-gap, 24px))) + var(--ui-divider-frame-gap) + 56px + var(--ui-divider-frame-gap)) !important; }
}

@layer cases-tabs {
/* The pages' blocks have no frame: no outline, no fill, no shadow — the content stands on the page. (Windows, popups and fields keep theirs.) */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot :is(.ui-frame, .ui-table-frame, .cases-card, .home-overview-frame, .home-single-chart-panel, .report-builder-page) { border-color: transparent !important; background: transparent !important; background-image: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* The lock screen's eye is a notch smaller than the arrow beside it (its drawing fills more of its box). */
html body .app-lock .app-lock-reveal svg { width: 14px !important; height: 14px !important; }

@layer cases-tabs {
  /* The notes' line is drawn like every field's line in the other blocks. */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > .notes-section > textarea#note,
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > .notes-section > textarea#note:is(:hover, :focus, :focus-visible, .has-value) { border-bottom: 1px solid var(--ui-data-divider) !important; border-radius: 0 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > .notes-section > textarea#note:is(:focus, :focus-visible) { border-bottom-color: var(--cases-accent) !important; }
  /* The writing line stands under the notes' title as close as a caption does in the other blocks (one text line, then its line). */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > .notes-section > h3.editor-section-title { margin-bottom: -2px !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > .notes-section > textarea#note,
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel > .notes-section > textarea#note:is(:hover, :focus, :focus-visible, .has-value) { flex: 0 0 28px !important; height: 28px !important; min-height: 28px !important; max-height: 28px !important; margin: 0 !important; padding: 0 2px 5px !important; }
}

@layer cases-tabs {
  /* "შესრულება" chart: each column is the finished part under the open part, always drawn; the two numbers above it carry the same colours as the legend. */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-single-chart-panel[data-chart-mode="workload"] {
    --home-chart-color: var(--cases-accent) !important;
    --home-chart-color-strong: var(--cases-accent) !important;
    --home-chart-color-text: var(--cases-accent) !important;
  }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-chart-mode-button[data-home-chart-mode="workload"] { --chart-mode-action-color: var(--cases-accent) !important; --chart-mode-action-bg: var(--cases-hover-fill) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-single-chart-panel[data-chart-mode="workload"] .home-chart-bar-fill { background: transparent !important; box-shadow: none !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-single-chart-panel[data-chart-mode="workload"] .home-chart-year-segments { visibility: visible !important; opacity: 1 !important; transform: none !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-single-chart-panel[data-chart-mode="workload"] .home-chart-year-segment { box-shadow: none !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-single-chart-panel[data-chart-mode="workload"] .home-chart-value { display: flex !important; justify-content: center !important; gap: 6px !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-work-number { color: var(--legend-color) !important; font-weight: 600 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-work-legend { display: flex !important; justify-content: center !important; gap: 20px !important; padding: 8px 0 0 !important; color: var(--cases-ink-muted) !important; font-size: var(--type-caption) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-work-legend > span { display: inline-flex !important; align-items: center !important; gap: 6px !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-work-legend > span::before { content: "" !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: var(--legend-color) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-work-divider { height: 0 !important; margin: 6px 4px !important; border: 0 !important; border-top: 1px solid var(--ui-data-divider) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-work-popover { max-height: min(360px, calc(100vh - 240px)) !important; overflow-y: auto !important; overscroll-behavior: contain !important; }
}

@layer cases-tabs {
}
/* The workload mode's icon carries its own tint (the statistics teal), like every other mode's. */
html body.cases-visual-v2 :is(.home-chart-mode-button[data-home-chart-mode="workload"], .home-chart-control-trigger[data-home-chart-active-mode="workload"]):not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-tint-about); }

@layer cases-tabs {
  /* Workload columns: a slightly slimmer bar, and a name never breaks inside a word (it wraps between words only). */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-single-chart-panel[data-chart-mode="workload"] .home-chart-bar-fill { width: 20px !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-single-chart-panel[data-chart-mode="workload"] .home-chart-label { display: block !important; max-height: none !important; overflow: visible !important; white-space: nowrap !important; overflow-wrap: normal !important; word-break: keep-all !important; hyphens: none !important; -webkit-line-clamp: unset !important; }
}

@layer cases-tabs {
}

@layer cases-tabs {
  /* The workload column's popup: a small card (name, total, the two parts) and nothing that restyles the column under the pointer. */
  html body.cases-visual-v2 .home-chart-detail-popup.is-compact { width: 240px !important; padding: 8px 10px !important; }
  html body.cases-visual-v2 .home-chart-detail-popup.is-compact .home-chart-detail-donut { display: none !important; }
  html body.cases-visual-v2 .home-chart-detail-popup.is-compact .home-chart-detail-body { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
  html body.cases-visual-v2 .home-chart-detail-popup.is-compact .home-chart-detail-heading { padding-bottom: 4px !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-single-chart-panel[data-chart-mode="workload"] .home-chart-column:is(:hover, :focus-visible, :active) :is(.home-chart-bar-track, .home-chart-bar-fill, .home-chart-year-segments, .home-chart-year-segment) { transform: none !important; filter: none !important; opacity: 1 !important; box-shadow: none !important; transition: none !important; animation: none !important; background-image: none !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-single-chart-panel[data-chart-mode="workload"] .home-chart-column:is(:hover, :focus-visible, :active) :is(.home-chart-bar-track, .home-chart-bar-fill)::before, html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-single-chart-panel[data-chart-mode="workload"] .home-chart-column:is(:hover, :focus-visible, :active) :is(.home-chart-bar-track, .home-chart-bar-fill)::after { content: none !important; display: none !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-single-chart-panel[data-chart-mode="workload"] .home-chart-column:is(:hover, :focus-visible, :active) { background: transparent !important; box-shadow: none !important; }
}

@layer cases-tabs {
  /* The column popup's "show the cards" action: a flat line under the parts, in the accent colour, the list rows' hover. */
  html body.cases-visual-v2 .home-chart-detail-popup .home-chart-detail-open { display: block !important; width: 100% !important; margin: 8px 0 0 !important; padding: 8px 4px 2px !important; border: 0 !important; border-top: 1px solid var(--ui-data-divider) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--cases-accent) !important; font: inherit !important; font-size: var(--type-caption) !important; text-align: left !important; cursor: pointer !important; }
  html body.cases-visual-v2 .home-chart-detail-popup .home-chart-detail-open:is(:hover, :focus-visible) { background: var(--ui-row-hover) !important; outline: 0 !important; }
}

@layer cases-tabs {
  /* A person who is on no working group any more: only the surname turns red (the danger tone). */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-chart-label.is-gone { color: var(--cases-danger) !important; }
}

@layer cases-tabs {
  /* The About page stands on the settings menu's lanes: the logo row is centred on the first button and ends 6px under it, so every row after it is centred on the next button (66px apart). */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .cases-about-page > .about-identity { padding: 13px 10px 12px !important; }
  /* Every settings page starts the way the menu does: its first record is centred on the first menu button and each next row on the next one (the panel's own top stays on the menu's top line; its content rises 6px). */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .settings-content > section:not(.deadline-settings-panel) { contain: layout !important; padding-top: 0 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .settings-content > section:not(.deadline-settings-panel) > :first-child { margin-top: var(--settings-lane-lead, -6px) !important; min-height: var(--settings-lane-height, 66px) !important; }
}

@layer cases-tabs {
  /* The database's size is green while the file is whole and red when its check fails. */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .cases-about-page .about-value.is-good { color: var(--cases-tint-restore) !important; -webkit-text-fill-color: currentColor !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .cases-about-page .about-value.is-bad { color: var(--cases-danger) !important; -webkit-text-fill-color: currentColor !important; }
}
html body.cases-visual-v2 #aboutOpenDataFolder:not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-tint-folder); }
html body.cases-visual-v2 .cases-about-page [data-info-window="changes"]:not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-tint-history); }
html body.cases-visual-v2 #aboutWriteSupport:not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-tint-group); }
html body.cases-visual-v2 .cases-about-page #exportDiagnostics:not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-tint-about); }
html body.cases-visual-v2 .cases-about-page :is(#aboutOpenDataFolder, [data-info-window="changes"], #aboutWriteSupport, #exportDiagnostics):is(*, :hover, :focus-visible, :active):not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { color: var(--cases-icon-tint) !important; stroke: currentColor !important; }

@layer cases-tabs {
  /* Windows and waiting cards stand in the middle of the inner page (beside the sidebar), in both menu modes; the blur still covers the whole window. */
  html body > :is(.app-confirm-backdrop, .quick-search-backdrop) { box-sizing: border-box !important; padding-left: var(--page-frame-left, 324px) !important; }
}

@layer cases-tabs {
  /* A settings page's own title (no tabs) reads as a page's title: the ink of the strip's first title. */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-title-only .page-title-name { color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; -webkit-text-fill-color: currentColor !important; }
}

@layer cases-tabs {
  /* The title is a plain label that only plays its pictogram's movement on hover (a button element, so the icons' hover motion applies); it looks and acts like text. */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-title-only .settings-title-button { display: inline-flex !important; align-items: center !important; gap: inherit; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: inherit !important; font: inherit !important; cursor: default !important; outline: 0 !important; }
}

@layer cases-tabs {
  /* Home's date, one line: the weekday with its own pictogram (quieter), then the day number in the season's tint, the month and the year. */
  html body .home-today .home-date { display: inline-flex !important; align-items: center !important; gap: 16px !important; --month-tint: var(--cases-tint-group); --weekday-tint: var(--cases-tint-group); }
  html body .home-today .home-date[data-season="spring"] { --month-tint: var(--cases-tint-place); }
  html body .home-today .home-date[data-season="summer"] { --month-tint: var(--cases-tint-time); }
  html body .home-today .home-date[data-season="autumn"] { --month-tint: var(--cases-tint-folder); }
  html body .home-today .home-date[data-weekday-tint="group"] { --weekday-tint: var(--cases-tint-group); }
  html body .home-today .home-date[data-weekday-tint="filter"] { --weekday-tint: var(--cases-tint-filter); }
  html body .home-today .home-date[data-weekday-tint="place"] { --weekday-tint: var(--cases-tint-place); }
  html body .home-today .home-date[data-weekday-tint="about"] { --weekday-tint: var(--cases-tint-about); }
  html body .home-today .home-date[data-weekday-tint="time"] { --weekday-tint: var(--cases-tint-time); }
  html body .home-today .home-date[data-weekday-tint="history"] { --weekday-tint: var(--cases-tint-history); }
  html body .home-today .home-date[data-weekday-tint="folder"] { --weekday-tint: var(--cases-tint-folder); }
  html body .home-today .home-weekday-icon { display: grid !important; place-items: center !important; margin: 0 !important; padding: 0 !important; cursor: default !important; }
  html body .home-today .home-weekday-icon:is(:hover, :focus-visible) .icon-anim-nod { animation: cases-icon-nod .45s ease-in-out; }
  html body .home-today .home-weekday-icon { width: 16px !important; height: 16px !important; color: var(--weekday-tint) !important; }
  html body .home-today .home-weekday { display: inline-flex !important; align-items: center !important; gap: 8px !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; }
  html body .home-today .home-day-month .home-year { color: var(--cases-ink-muted, var(--v2-muted)) !important; font-variant-numeric: tabular-nums; }
  html body .home-today .home-day-month { display: inline-flex !important; align-items: center !important; gap: 8px !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; }
  /* (the date stands on the strip's one line: its box is the title's high and starts where the title does, so its middle is the title's and the buttons') */
  html body .home-today { display: inline-flex !important; align-items: center !important; height: 18px !important; }
  html body .home-today .home-day-number { color: var(--month-tint) !important; font-weight: 500 !important; }
}
@keyframes cases-month-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-1.5px) rotate(5deg); } }
@keyframes cases-month-spin { to { transform: rotate(360deg); } }
html[data-motion="off"] .home-weather .home-weather-icon svg { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .home-weather .home-weather-icon svg { animation: none !important; } }

@layer cases-tabs {
  /* Sizes of Home's date: the pictogram is 18 px like every icon. (Between the blocks of the row's middle — the weekday, the date, the weather, the bell —
     16px each; inside a block — a pictogram and its text, the number, the month, the year — 8px.) */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-today .home-weekday-icon { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-today .home-weekday-icon > svg.lucide { stroke-width: 2 !important; width: 18px !important; height: 18px !important; min-width: 18px !important; max-width: 18px !important; min-height: 18px !important; max-height: 18px !important; }
}

@layer cases-tabs {
  /* Home's top row is the one exception: its blocks (the title, the date, the events, the buttons) are spread evenly, the same gap between neighbours, the first and the last on the row's two edges. */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .page-context { display: contents !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .page-context > .page-context-title { margin-left: var(--ui-panel-inset, 20px) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .page-context > .home-today { position: static !important; left: auto !important; top: auto !important; margin: 0 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .home-events:empty { display: none !important; }
  /* The first holiday's pictogram: 18 px like the date's, its own tint, the same 8 px gap, a nod on hover. */
}

@layer cases-tabs {
  /* Too many words for one row (a long holiday, two events, a narrow window): the blocks never touch (16 px at least), the buttons and the title keep their size, and the events, then the date's last name, give way. */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .page-context > .page-context-title, html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .page-actions { flex: 0 0 auto !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .page-context > .home-today { flex: 0 1 auto !important; min-width: 0 !important; overflow: hidden !important; }
}

@layer cases-tabs {
  /* The event chips keep the same 16 px between each other as the row's blocks keep (they never stick together). */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .home-events { gap: 16px !important; }
}

@layer cases-tabs {
  /* Home's row: the title on the left, the date between, and on the right one group (the events beside the buttons they belong to). The free room is shared equally by the two gaps (title to date, date to group); between blocks there are always 16 px at least. */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip { justify-content: flex-start !important; gap: 16px !important; }
  /* The free room is shared equally by the two gaps: the title's own and the left of the right group (its first block: the events, or the buttons when there are none). */
  /* The title stands on the left with the holiday beside it, the date in the middle of what is left (its free room is its own two sides), the events on the right beside the buttons. */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip.home-notification-action-strip > .page-context > .page-context-title { order: 1 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip.home-notification-action-strip > .home-holidays { order: 2 !important; margin: 0 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip.home-notification-action-strip > .page-context > .home-today { order: 3 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip.home-notification-action-strip > :is(.home-weather, .deadline-notification-button) { order: 3 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip.home-notification-action-strip > .home-events { order: 4 !important; margin-left: 0 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip.home-notification-action-strip > .page-actions { order: 5 !important; margin-left: 0 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .home-events { flex: 0 0 auto !important; margin: 0 !important; justify-content: flex-end !important; overflow: visible !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .home-events .home-event-chip[hidden] { display: none !important; }
  /* A holiday name too long for the room: dots, and under the pointer it runs along once to its end. */
}
@keyframes cases-holiday-run { from { text-indent: 0; } to { text-indent: calc(-1 * var(--marquee-shift, 0px)); } }
@media (prefers-reduced-motion: reduce) { .home-today .is-running { animation: none !important; text-overflow: ellipsis !important; } }
html[data-motion="off"] .home-today .is-running { animation: none !important; text-overflow: ellipsis !important; }

@layer cases-tabs {
  /* In the date, only the last holiday's name gives way (cut with dots); the weekday, the number, the month and the other names keep their size. */
}

/* Number fields have no native up/down arrows (a grey box that is nothing of the app's look): the value is typed, or stepped with the keyboard's arrows. */
html body.cases-visual-v2 input[type="number"] { -moz-appearance: textfield !important; appearance: textfield !important; }
html body.cases-visual-v2 input[type="number"]::-webkit-inner-spin-button,
html body.cases-visual-v2 input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none !important; appearance: none !important; margin: 0 !important; display: none !important; }

/* About: the maker's mark stands in the middle of the page, a space below the last row, with the copyright under it as plain text (not a row of its own). */
@layer cases-tabs {
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .cases-about-page > .about-footer { display: flex !important; justify-content: center !important; align-items: center !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 0 4px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .cases-about-page > .about-footer > span { margin: 0 !important; text-align: center !important; }
  html body.cases-visual-v2 .cases-main #pageRoot .cases-about-page > .about-maker { padding: 36px 0 12px; }
}

/* Settings: every page and tab is one card of the same width, next to the menu (the same distance from it as the menus are from each other; a row's label and its value stay near each other on a wide
   screen); the page's tabs (or its title) start on the card's left edge and go no further than its right one (a bar too wide for it shows only the icons). The rows keep the
   menu's lanes: only the width changes. */
html body.cases-visual-v2 { --ui-settings-card-width: 1000px; --ui-settings-card-inset: 12px; }
@layer cases-tabs {
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-content > :is(.form-section, .cases-about-page) { box-sizing: border-box !important; width: 100% !important; max-width: var(--ui-settings-card-width) !important; margin-left: 0 !important; margin-right: auto !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip > .services-tabs.settings-tabs { max-width: calc(var(--ui-settings-card-width) + 1px) !important; }
  /* The first pictogram of every page stands in one place, 12px inside the card (where a tab's own padding puts it): a title takes the same inset as the tabs. */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip > .services-tabs.settings-tabs > .settings-title-button { padding-left: var(--ui-settings-card-inset, 12px) !important; }
}

/* The open menu item (the main menu's and the settings') is drawn like an open tab: no fill, no side rail, a 2px line under it in its own colour, its name and
   pictogram brighter. The line is as long as an open tab's: from 12px before the pictogram to 14px after the name (the item is as wide as its content while it is
   open); in the icons-only menu, as wide as an icon-only tab. */
@layer cases-tabs {
  html body.cases-visual-v2 :is(.cases-sidebar .sidebar-nav .nav-item.active, .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-sidebar .settings-nav-item.active) { position: relative !important; background: transparent !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; color: var(--cases-ink-strong, #edf3f8) !important; }
  html:not([data-sidebar="compact"]) body.cases-visual-v2 :is(.cases-sidebar .sidebar-nav .nav-item.active, .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-sidebar .settings-nav-item.active) { width: max-content !important; min-width: 0 !important; max-width: 100% !important; justify-self: start !important; align-self: flex-start !important; grid-template-columns: max-content max-content !important; }
  html:not([data-sidebar="compact"]) body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-item.active > :last-child, html:not([data-sidebar="compact"]) body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-sidebar .settings-nav-item.active > :last-child { width: auto !important; min-width: 0 !important; justify-self: start !important; }
  html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-item.active::before, html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-sidebar .settings-nav-item.active::before { content: none !important; display: none !important; }
  html body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-item.active::after, html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-sidebar .settings-nav-item.active::after { content: "" !important; display: block !important; position: absolute !important; left: 30px !important; right: 24px !important; bottom: 0 !important; height: 2px !important; border-radius: 0 !important; background: var(--nav-accent, var(--cases-accent)) !important; pointer-events: none !important; }
  html[data-sidebar="compact"] body.cases-visual-v2 .cases-sidebar .sidebar-nav .nav-item.active::after, html[data-sidebar="compact"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .settings-sidebar .settings-nav-item.active::after { left: 6px !important; right: 6px !important; }
}

/* The dot between the people of one group: a small round dot in the accent colour (the settings list, the home table, the card's group field). */
html body.cases-visual-v2 :is(.settings-item-label, .home-group-name, .mobile-group-dots, .group-municipality-owner) .group-name-dot {
  display: inline-block !important;
  flex: none !important;
  width: 7px !important;
  height: 7px !important;
  margin: 0 9px !important;
  border-radius: 50% !important;
  background: var(--cases-accent) !important;
  vertical-align: middle !important;
}

/* The card's group field: its own text is hidden and the layer on top draws the same text with the coloured dots. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .field-mobile-group input#mobileGroup#mobileGroup:is(*, .has-value, [readonly]),
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .field-mobile-group input#mobileGroup#mobileGroup:is(*, .has-value, [readonly]) {
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
html body.cases-visual-v2 .cases-main #pageRoot form#caseForm.cases-editor-panel .field-mobile-group .mobile-group-dots {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  padding-right: 12px !important;
  overflow: hidden !important;
  color: var(--cases-ink-strong, var(--v2-ink-strong)) !important;
  font: inherit !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* Home table: a group's people stand side by side (a third wraps under the first), each with a person's icon in the group's colour; every group shares the same two columns, so icons and names have vertical lines of their own. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .home-mobile-table .home-group-identity { justify-content: center !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .home-mobile-table .home-group-name {
  display: grid !important;
  grid-template-columns: var(--people-template, auto auto) !important;
  justify-content: center !important;
  align-content: center !important;
  align-items: center !important;
  column-gap: 14px !important;
  row-gap: 1px !important;
  flex: none !important;
  width: min(var(--people-width, 100%), 100%) !important;
  padding: 2px 5px !important;
  overflow: visible !important;
  text-align: left !important;
  line-height: 15px !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .home-mobile-table .home-group-person {
  display: grid !important;
  grid-template-columns: 13px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 15px !important;
  min-height: 0 !important;
  margin: 0 !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .home-mobile-table .home-group-icon {
  display: inline-flex !important;
  width: 13px !important;
  height: 13px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  color: var(--group-icon-color) !important;
}
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .home-mobile-table .home-group-icon > svg { width: 13px !important; height: 13px !important; min-width: 13px !important; max-width: 13px !important; min-height: 0 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot .home-mobile-table .home-group-person-name { min-width: 0 !important; margin: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

/* In the group's municipalities window the dot between the owners' people is small, like the 11px text beside it. */
html body.cases-visual-v2 .group-municipalities-popover .group-municipality-owner .group-name-dot { width: 5px !important; height: 5px !important; margin: 0 6px !important; }

/* The font list: a font's sample starts on one vertical line in every row (names on the left, samples in a column of their own). */
html body.cases-visual-v2 .case-filter-popover.font-picker .font-picker-row { display: grid !important; grid-template-columns: minmax(0, 1fr) 140px auto !important; justify-content: stretch !important; }
html body.cases-visual-v2 .case-filter-popover.font-picker .font-picker-sample { text-align: left !important; white-space: nowrap !important; }

/* The return chip: a flat button like its neighbours, a hover fill and no frame (its old hover rule was broken and never applied). */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip > .return-chip:is(:hover, :focus-visible) { background: var(--cases-hover-fill) !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; outline: none !important; box-shadow: none !important; }

/* A group's people outside the home table (the settings lists and the card's group field): each person with a person's icon in the group's colour, side by side; in the lists every row shares the same two columns, so icons and names stand on vertical lines. */
html body.cases-visual-v2 .group-people { display: inline-flex !important; align-items: center !important; gap: 14px !important; white-space: nowrap !important; }
html body.cases-visual-v2 .group-person { display: inline-grid !important; grid-template-columns: 13px auto !important; align-items: center !important; column-gap: 7px !important; }
html body.cases-visual-v2 .group-person-icon { display: inline-flex !important; width: 13px !important; height: 13px !important; color: var(--group-icon-color) !important; }
html body.cases-visual-v2 .group-person-icon > svg { width: 13px !important; height: 13px !important; min-width: 13px !important; max-width: 13px !important; }
html body.cases-visual-v2 .settings-list .group-people { display: grid !important; grid-template-columns: var(--people-template, auto auto auto) !important; width: var(--people-width, auto) !important; gap: 2px 14px !important; justify-content: start !important; }
html body.cases-visual-v2 .settings-list .group-person { display: grid !important; grid-template-columns: 13px minmax(0, 1fr) !important; }
html body.cases-visual-v2 .settings-list .municipality-group-name .group-people { justify-content: end !important; }
html body.cases-visual-v2 .mobile-group-dots .group-people + .group-people { margin-left: 18px !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-list .group-person { align-items: center !important; line-height: 16px !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-list .group-person-icon { align-self: center !important; width: 13px !important; height: 13px !important; margin: 0 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .settings-list .group-person-icon > svg { display: block !important; width: 13px !important; height: 13px !important; min-width: 13px !important; max-width: 13px !important; min-height: 13px !important; max-height: 13px !important; }

/* The people's icons sit on the line of the Georgian letters (whose visual centre is a little above the line box's centre). */
html body.cases-visual-v2 :is(.group-person-icon, .home-group-icon) { position: relative !important; top: 1px !important; }
html body.cases-visual-v2 .mobile-group-dots .group-person-icon { top: -4.5px !important; }

/* The group field holds the layer that draws its people (the field used to sit in the second row, where it was positioned already). */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .field-mobile-group { position: relative !important; }


/* In a narrower window the mobile group's column takes a little more of the row (it must hold three people on one line) and the gaps are smaller. */
@media (min-width: 1281px) and (max-width: 1599px) {
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(.information-row, .cases-object-row) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.9fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 16px !important;
  }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .cases-registration-row { --reg-date-w: calc((100cqw - 5 * 16px) / 7.9); column-gap: 16px !important; }
}
@media (min-width: 1281px) and (max-width: 1399px) {
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .cases-registration-row { --reg-date-w: calc((100cqw - 5 * 16px) / 8.4); }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel :is(.information-row, .cases-object-row) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important; }
}

/* Every line, the notes' too, ends 6px before the buttons' column (the add and delete buttons stand outside the fields, at the card's right edge). */
@media (min-width: 1281px) {
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot form#caseForm.cases-editor-panel .notes-section > textarea#note { box-sizing: border-box !important; width: 100% !important; }
}

/* Dark theme: the CASES wordmark (sidebar and lock screen, one style) is lighter, so it holds its own beside the emblem. */
html[data-theme="dark"] body.cases-visual-v2 .cases-sidebar .logo-only-brand .sidebar-brand-title,
html[data-theme="dark"] body.cases-visual-v2 .app-lock-wordmark { color: #9ca7d6 !important; }

/* A figure of 0 in the home's top row is quiet, like the table's zeros. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-summary-card.home-metric-card.is-zero .home-summary-value-row { opacity: .4 !important; }

/* The chart's figures stand right above their bars (the bar's own height plus the figure's row; the figure sits in the plot's row, anchored to its bottom). */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-single-chart-panel:not([data-chart-mode="workload"]) .home-chart-column[style*="--bar"] > .home-chart-value { grid-row: 2 !important; grid-column: 1 !important; align-self: end !important; height: calc(var(--bar) * 1% + 18px) !important; max-height: none !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; pointer-events: none !important; z-index: 2 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-single-chart-panel:not([data-chart-mode="workload"]) .home-chart-column[style*="--bar"] > .home-chart-bar-track { grid-row: 2 !important; grid-column: 1 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-single-chart-panel:not([data-chart-mode="workload"]) .home-chart-column[style*="--bar"] > .home-chart-label { grid-row: 3 !important; grid-column: 1 !important; }

/* The two chart buttons (the place and the filter) stand on the lines the chart's frame starts and ends its lines on. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-chart-heading .home-chart-controls { padding-inline: 0 !important; margin-inline: 0 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-chart-heading .home-chart-controls > .home-chart-control-tier.is-primary .home-chart-control-trigger { position: relative !important; left: -11px !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-chart-heading .home-chart-controls > .home-chart-control-tier.is-secondary .home-chart-control-trigger { position: relative !important; left: 7px !important; }

/* The groups' names start on the line the table's lines and the chart's place button start on: the pictograms of the names, the lines and the button stand on one vertical. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .home-mobile-table tbody > tr > td:first-child { padding-left: 8px !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .home-mobile-table tbody > tr > td:first-child .home-group-identity { justify-content: flex-start !important; padding-left: 0 !important; margin-left: -6px !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot .home-mobile-table tbody > tr > td:first-child .home-group-name { justify-content: start !important; padding-left: 0 !important; margin-left: 0 !important; margin-right: auto !important; }

/* The emoji of an event title (a flag): larger than the letters, on their line. */
html body.cases-visual-v2 .home-event-chip .home-event-title .home-event-emoji { font-size: 1.55em !important; line-height: 0 !important; vertical-align: -.12em !important; margin-inline: .12em !important; }

/* The chart's axis: each horizontal line names its value above its left end, the numbers starting on the line of the place button's pictogram (12px in); the columns stand clear of the numbers. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .home-chart-grid > i[data-tick] { position: relative !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .home-chart-grid > i[data-tick]::before { content: attr(data-tick) !important; position: absolute !important; left: 12px !important; bottom: 3px !important; color: var(--cases-ink-muted, var(--v2-muted)) !important; font-size: var(--type-micro) !important; font-style: normal !important; line-height: 1 !important; font-variant-numeric: tabular-nums !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .home-chart-plot .home-chart-columns { padding-inline: 40px !important; }

/* The home toolbar: the date, the weather and the bell stand in the middle of the page together, whatever stands on their sides (the page's name on the
   left; the event chip and the buttons on the right). */
@layer cases-tabs {
@media (min-width: 1281px) {
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr) !important; align-items: center !important; column-gap: 16px !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip.home-notification-action-strip > .page-context > .page-context-title { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip.home-notification-action-strip > .home-holidays { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; margin-left: 120px !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip.home-notification-action-strip > .page-context > .home-today { grid-column: 2 !important; grid-row: 1 !important; justify-self: center !important; margin: 0 0 0 12px !important; }
  /* (12px on the date's left: the strip stands 16px off the page's centre, less the date's and the bell's own unequal padding. The weather and the bell
     come 16px after the text before them, as the weekday and the date do: the cells' 16px gaps and the pills' padding are taken back by their margins.) */
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .home-weather { grid-column: 3 !important; grid-row: 1 !important; justify-self: start !important; margin: 0 0 0 -22px !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .deadline-notification-button { grid-column: 4 !important; justify-self: start !important; margin: 0 0 0 -18px !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .home-weather[hidden] + .deadline-notification-button { margin-left: -36px !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip.home-notification-action-strip.home-notification-action-strip.home-notification-action-strip > .home-events { grid-column: 5 !important; grid-row: 1 !important; justify-self: end !important; margin: 0 -1px 0 0 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip.home-notification-action-strip > .page-actions { grid-column: 5 !important; grid-row: 1 !important; justify-self: end !important; }
}
}

/* The month labels' row stands on the lane of the Exit button (the chart's frame already ends on its line): the labels' centre is the button's centre. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot > .home-single-chart-panel.ui-frame .home-chart-body { padding-bottom: calc(var(--home-chart-edge-space) - 8.8px) !important; }
/* (The employees chart's legend row is the chart's last row: it stands on the Exit button's lane too.) */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot > .home-single-chart-panel.ui-frame .home-work-legend { position: relative !important; top: -1.6px !important; }

/* The deadlines' window opens under its button, from the button's left edge. */
html body .deadline-notification-popup { left: var(--deadline-popup-left, 240px) !important; right: auto !important; }

html body.cases-visual-v2 .cases-main #pageRoot#pageRoot > .home-overview-frame { position: relative !important; }
/* The deadline notifications bell stands in the top row, right after the date: the date keeps the middle of the row (the bell hangs out of its cell). */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .deadline-notification-button { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; margin: 0 -44px 0 0 !important; position: relative !important; z-index: 2 !important; box-sizing: border-box !important; display: inline-grid !important; place-items: center !important; width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; opacity: 1 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .home-notification-action-strip > .deadline-notification-button[data-deadline-state="empty"] { color: #7f8b96 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .home-notification-action-strip > .deadline-notification-button[data-deadline-state="upcoming"] { color: var(--v2-amber) !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .home-notification-action-strip > .deadline-notification-button[data-deadline-state="overdue"] { color: var(--v2-red) !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .home-notification-action-strip > .deadline-notification-button.is-ringing > svg { transform-origin: 50% 18% !important; animation: deadline-bell-ring 1s ease-in-out 5 !important; }

/* The cards' pictograms stand on the line of the menu's first button (Home), their figures on the second's . */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .home-summary-card.home-metric-card .home-summary-icon { position: relative !important; top: -24px !important; }
/* The axis numbers read clearly. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .home-chart-grid > i[data-tick]::before { color: var(--cases-ink-strong, var(--v2-ink)) !important; opacity: .72 !important; }

/* The columns' room ends where the widest figure of the last column ends (the close button's pictogram's line), so every gap, the last one too, is one gap. */
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-mobile-table tr { padding-right: 18px !important; }
html body.cases-visual-v2 .cases-main #pageRoot .home-overview-frame .home-summary-grid { padding-right: 31px !important; }

/* Home's weather: beside the date, the weather's pictogram (its own tint; the sun turns slowly, the rest float, a nod on hover) and the degrees now, in
   the date's pill look (the same height, hover fill, radius). Pressed, it opens the ten days. */
@layer cases-tabs {
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .home-weather { display: inline-flex !important; align-items: center !important; gap: 8px !important; box-sizing: border-box !important; height: 34px !important; padding: 0 10px !important; border: 0 !important; border-radius: var(--ui-control-radius, 10px) !important; background: transparent !important; box-shadow: none !important; color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; font: inherit !important; font-variant-numeric: tabular-nums !important; white-space: nowrap !important; cursor: pointer; transition: background-color 140ms ease; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .home-weather:is(:hover, :focus-visible) { background: var(--ui-row-hover) !important; outline: 0 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .home-weather[hidden] { display: none !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .home-weather .home-weather-icon { display: grid !important; place-items: center !important; flex: 0 0 18px !important; width: 18px !important; height: 18px !important; color: var(--weather-tint) !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .home-weather .home-weather-icon > svg.lucide { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; stroke-width: 2 !important; color: var(--weather-tint) !important; transform-origin: 50% 50%; animation: cases-month-float 5s ease-in-out infinite; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .home-weather .home-weather-icon[data-motion="spin"] > svg.lucide { animation: cases-month-spin 28s linear infinite; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .home-weather:is(:hover, :focus-visible) .icon-anim-nod { animation: cases-icon-nod .45s ease-in-out; }
}

/* The date's window: its three parts as the top strip's tabs (text and pictogram, the accent line under the chosen one); each part also opens alone
   with its own head. */
@layer cases-tabs { html body.cases-visual-v2 .case-filter-popover.agenda-popover[data-mode="all"] { width: 460px !important; } }
html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-tabs-head { padding-left: 6px !important; }
html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-tabs { display: flex; align-items: center; gap: 0; min-width: 0; }
html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-tab { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; height: var(--cases-icon-button, 34px); padding: 0 14px 0 12px; color: var(--cases-ink-muted, var(--v2-muted)); font: inherit; font-size: var(--type-body); white-space: nowrap; cursor: pointer; }
html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-tab > svg { flex: 0 0 auto; color: var(--service-tint); }
html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-tab:is(:hover, :focus-visible) .icon-anim-nod { animation: cases-icon-nod .45s ease-in-out; }
html body.cases-visual-v2 .case-filter-popover.agenda-popover .agenda-panel[hidden] { display: none !important; }

/* The weather's part: the place (its name opens the places' list) and the weather now, a hairline, then the ten days as the holidays' rows (whole rows:
   the list's height is cut to them). The degrees: the day's highest, then its lowest quieter. */
html body.cases-visual-v2 .case-filter-popover.agenda-popover .weather-now { height: 56px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--cases-window-border, var(--v2-line)); }
html body.cases-visual-v2 .case-filter-popover.agenda-popover .weather-day-icon { color: var(--weather-tint); }
html body.cases-visual-v2 .case-filter-popover.agenda-popover .weather-day:hover .icon-anim-nod { animation: cases-icon-nod .45s ease-in-out; }
html body.cases-visual-v2 .case-filter-popover.agenda-popover .weather-days { max-height: none; }
html body.cases-visual-v2 .case-filter-popover.agenda-popover .weather-place { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--cases-ink-strong, var(--v2-ink-strong)); font: inherit; cursor: pointer; }
html body.cases-visual-v2 .case-filter-popover.agenda-popover .weather-place > svg { flex: 0 0 auto; color: var(--cases-tint-place); }
html body.cases-visual-v2 .case-filter-popover.agenda-popover .weather-place:is(:hover, :focus-visible, [aria-expanded="true"]) { color: var(--cases-accent); outline: 0; }
html body.cases-visual-v2 .case-filter-popover.agenda-popover .weather-place:is(:hover, :focus-visible) .icon-anim-nod { animation: cases-icon-nod .45s ease-in-out; }
html body.cases-visual-v2 .case-filter-popover.agenda-popover .weather-range { gap: 10px; font-size: var(--type-body, 13px); font-variant-numeric: tabular-nums; }
html body.cases-visual-v2 .case-filter-popover.agenda-popover .weather-range > b { min-width: 3ch; text-align: right; color: var(--cases-ink-strong, var(--v2-ink-strong)); font-weight: 500; }
html body.cases-visual-v2 .case-filter-popover.agenda-popover .weather-range > span { min-width: 3ch; text-align: right; color: var(--cases-ink-muted, var(--v2-muted)); }

/* The places' list (the fonts' window): each place with its weather now; "my location" first. */
html body.cases-visual-v2 .case-filter-popover.font-picker.weather-places { z-index: 10001; }
html body.cases-visual-v2 .case-filter-popover.font-picker.weather-places .weather-place-now { display: inline-flex; align-items: center; gap: 8px; color: var(--cases-ink-strong, var(--v2-ink-strong)); font-size: var(--type-body, 13px); font-variant-numeric: tabular-nums; }
html body.cases-visual-v2 .case-filter-popover.font-picker.weather-places :is(.weather-place-icon, .weather-place-locate) { display: inline-grid; place-items: center; flex: 0 0 18px; }
html body.cases-visual-v2 .case-filter-popover.font-picker.weather-places .weather-place-icon { color: var(--weather-tint); }
html body.cases-visual-v2 .case-filter-popover.font-picker.weather-places .weather-place-locate { color: var(--cases-tint-place); }
html body.cases-visual-v2 .case-filter-popover.font-picker.weather-places :is(.weather-place-icon, .weather-place-locate) svg { width: 18px; height: 18px; display: block; }
html body.cases-visual-v2 .case-filter-popover.font-picker.weather-places .font-picker-row:hover .icon-anim-nod { animation: cases-icon-nod .45s ease-in-out; }
html body.cases-visual-v2 .case-filter-popover.font-picker.weather-places .font-picker-row { grid-template-columns: minmax(0, 1fr) auto 18px !important; }
/* The kept sheets (the web's archive): the name takes the row, the time it was kept stands at its end in the caption size. */
html body.cases-visual-v2 .case-filter-popover.font-picker.sketch-archive-picker .font-picker-row { grid-template-columns: minmax(0, 1fr) auto 18px !important; gap: 8px; }
html body.cases-visual-v2 .case-filter-popover.font-picker.sketch-archive-picker .font-picker-sample { font-size: var(--type-caption, 11.5px); }
/* A narrow window (the row's blocks in a line): the weather and the bell follow the date at the same 16px, the three in the middle of the free room together. */
@layer cases-tabs {
@media (max-width: 1280px) {
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .page-context > .home-today { margin-right: 0 !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .home-weather { margin: 0 0 0 -22px !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .deadline-notification-button { margin: 0 auto 0 -18px !important; }
  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot#pageRoot > .page-action-strip.home-notification-action-strip > .home-weather[hidden] + .deadline-notification-button { margin-left: -20px !important; }
}
}

/* Home's board (renderer-home-board.js). The closed columns (archive, all cards) step back behind the open work: quieter figures, a hairline
   before them; zeros step back further. A cell's deadline figure is small and raised after its count: red past the deadline, the time tint close to it. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-mobile-table .home-table-count.is-zero { opacity: .22 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-mobile-table td.home-count-column:is([data-count-key="archive"], [data-count-key="all"]) .home-table-count:not(:hover):not(:focus-visible) { color: var(--cases-ink-muted, var(--v2-muted)) !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-overview-frame .home-summary-card:is([data-summary-key="archive"], [data-summary-key="all"]) .home-count-button { opacity: .62 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-mobile-table td.home-count-column[data-count-key="archive"] { position: relative !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-mobile-table td.home-count-column[data-count-key="archive"]::before { content: "" !important; position: absolute !important; top: 8px !important; bottom: 8px !important; left: -14px !important; width: 1px !important; background: var(--ui-data-divider) !important; pointer-events: none !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-mobile-table .home-table-count .home-cell-flag { position: absolute !important; left: calc(100% + 2px) !important; top: -4px !important; font-size: var(--type-micro, 10px) !important; font-weight: 600 !important; line-height: 1 !important; vertical-align: super !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-mobile-table .home-table-count .home-cell-flag.is-overdue { color: var(--cases-danger) !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-mobile-table .home-table-count .home-cell-flag.is-upcoming { color: var(--cases-tint-time) !important; }
/* A summary card brings its column forward: the other columns and cards fade; the column's figures take its colour. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-overview-frame :is(td.home-count-column, .home-summary-card) { transition: opacity .18s ease !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-overview-frame :is(td.home-count-column.is-dimmed, .home-summary-card.is-dimmed) { opacity: .28 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-overview-frame td.home-count-column.is-focused .home-table-count:not(.is-zero) { color: var(--column-color) !important; }
/* The group's name opens its panel: the names' hover, the keyboard's ring. */
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-mobile-table [data-home-group-panel] { cursor: pointer !important; border-radius: var(--ui-control-radius) !important; outline: 0 !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-mobile-table [data-home-group-panel]:is(:hover, :focus-visible) .home-group-person-name { color: var(--cases-accent) !important; }
html body.cases-visual-v2 .cases-main #pageRoot#pageRoot#pageRoot .home-mobile-table .home-table-count[data-home-cell] .home-cell-number { position: relative !important; display: inline-block !important; font: inherit !important; color: inherit !important; }
/* The board's windows: the deadline window itself (the cards' one as wide as the agenda's, for the address); the address is cut with an ellipsis, a figure row is not a link. */
html body.cases-visual-v2 .deadline-notification-popup.home-cell-popup:not(#cases-win-a):not(#cases-win-b):not(#cases-win-c) { width: 460px !important; min-width: 460px !important; max-width: min(460px, calc(100vw - 24px)) !important; }
html body.cases-visual-v2 .home-board-popup .deadline-notification-popup-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; }
html body.cases-visual-v2 .home-board-popup .deadline-notification-popup-head > span:first-child { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
html body.cases-visual-v2 .home-board-popup .home-board-head-actions { display: inline-flex !important; align-items: center !important; gap: 4px !important; flex: 0 0 auto !important; }
html body.cases-visual-v2 .home-board-popup .deadline-notification-list .deadline-notification-row > span:nth-child(2) { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html body.cases-visual-v2 .home-board-popup .deadline-notification-list .deadline-notification-row.is-static { cursor: default !important; background: transparent !important; }
html body.cases-visual-v2 .home-board-popup .deadline-notification-list .home-board-figure > span:last-child { color: var(--cases-ink-strong, var(--v2-ink-strong)) !important; font-size: var(--type-body) !important; font-variant-numeric: tabular-nums !important; }
html body.cases-visual-v2 .home-board-popup .deadline-notification-list .home-board-municipality > span:first-child { color: var(--v2-ink) !important; }
html body.cases-visual-v2 .home-board-popup .deadline-notification-list .home-board-municipality > span:last-child { color: var(--v2-muted) !important; }
html body.cases-visual-v2 .home-board-popup .home-board-table:not(#cases-tint-a):not(#cases-tint-b):not(#cases-tint-c) svg { --cases-icon-tint: var(--cases-accent); color: var(--cases-icon-tint) !important; }