/* Pictogram family --------------------------------------------------------- */
html body.cases-visual-v2 svg.cases-family-converted {
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Appearance setting ------------------------------------------------------ */
html body.cases-visual-v2 .cases-main #pageRoot .appearance-settings-panel {
  display: grid !important;
  align-content: start !important;
  gap: 18px !important;
  padding: 20px !important;
}

html body.cases-visual-v2 .appearance-setting-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  padding: 0 12px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.cases-visual-v2 .deadline-setting-row > span {
  color: var(--v2-ink-strong) !important;
  font-size: var(--type-body) !important;
  font-weight: 500 !important;
}

@media (max-height: 780px) {
  html body.cases-visual-v2 {
    --ui-sidebar-row-height: 42px;
    --ui-sidebar-row-gap: 8px;
  }

  html body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-layout > .settings-sidebar.ui-frame {
    min-height: calc((9 * var(--ui-sidebar-row-height)) + (8 * var(--ui-sidebar-row-gap)) + 2px) !important;
  }

}

/* True dark theme --------------------------------------------------------- */
html[data-theme="dark"] body.cases-visual-v2 {
  color-scheme: dark;
  --v2-surface: rgba(23,29,37,.92) !important;
  --v2-surface-strong: rgba(29,37,48,.97) !important;
  --v2-ink: #cbd7e1 !important;
  --v2-ink-strong: #edf3f8 !important;
  --v2-muted: #9fb2c2 !important;
  --about-text-color: var(--v2-muted);
  --v2-blue: #78b9e8 !important;
  --v2-blue-soft: rgba(93,164,214,.14) !important;
  --v2-focus: #76bee9 !important;
  --v2-focus-ring: rgba(105,188,235,.22) !important;
  --v2-line: rgba(130,164,188,.22) !important;
  --v2-line-strong: rgba(139,178,205,.36) !important;
  --v2-control-border: rgba(118,157,184,.34) !important;
  --ui-control-border: rgba(118,157,184,.34) !important;
  --ui-control-border-hover: rgba(119,187,229,.62) !important;
  --ui-frame-border: rgba(118,157,184,.24) !important;
  /* Filled-field surface — a touch more present than an empty field, never a
     pale light box. */
  --v2-control-bg: rgba(30,41,51,.62) !important;
  --v2-control-bg-hover: rgba(36,48,58,.72) !important;
  --ui-control-bg: rgba(30,41,51,.62) !important;
  --ui-control-bg-hover: rgba(36,48,58,.72) !important;
  /* Semantic accents readable on the dark canvas. */
  --v2-amber: #d99a3a !important;
  --v2-red: #e07a86 !important;
  --ui-data-divider: rgba(126,158,181,.17) !important;
  --ui-interaction-tint: rgba(101,175,222,.11) !important;
  --ui-row-hover: rgba(101,175,222,.10) !important;
  --v2-table-hover: rgba(101,175,222,.10) !important;
  --home-text-color: #cbd7e1 !important;
  --home-rule-color: rgba(126,158,181,.17) !important;
  --atmos-canvas-image:
    linear-gradient(171deg, transparent 0 7%, rgba(116,169,205,.06) 7.06%, rgba(116,169,205,.06) 7.13%, transparent 7.2%),
    linear-gradient(158deg, transparent 0 31%, rgba(143,132,179,.055) 31.06%, rgba(143,132,179,.055) 31.13%, transparent 31.2%),
    linear-gradient(135deg, #141a21 0%, #12171d 48%, #0f1419 100%) !important;
  background: var(--atmos-canvas-image) !important;
  background-attachment: fixed !important;
}

html[data-theme="dark"] body.cases-visual-v2 :is(.cases-sidebar,.cases-main,.titlebar) {
  background: transparent !important;
}

html[data-theme="dark"] body.cases-visual-v2 :where(h1,h2,h3,h4,th,dt,strong,label,.nav-title,.settings-nav-item > span:last-child) {
  color: var(--v2-ink-strong) !important;
}

html[data-theme="dark"] body.cases-visual-v2 :where(p,small,dd,.muted,.empty-state,.report-note,.deadline-settings-note) {
  color: var(--v2-muted) !important;
}

html[data-theme="dark"] 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,
  .settings-content > .appearance-settings-panel.ui-frame,
  .backup-list-panel .backup-table-shell.ui-table-frame
) {
  border-color: transparent !important;
  background: linear-gradient(145deg, rgba(50,62,73,.92), rgba(41,52,62,.94)) !important;
  box-shadow:
    -3px -3px 7px -3px rgba(101,130,151,.16),
    3px -3px 7px -3px rgba(65,91,109,.12),
    3px 6px 11px -5px rgba(0,0,0,.72) !important;
}

html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot :is(
  input:not([type="checkbox"]):not([type="radio"]),select,textarea,
  .ui-toolbar-control,.report-unified-row
) {
  color: var(--v2-ink) !important;
  -webkit-text-fill-color: var(--v2-ink) !important;
  caret-color: #9bd3f3 !important;
  border-color: var(--ui-control-border) !important;
  background: rgba(12,21,28,.38) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.36), 0 3px 7px rgba(0,0,0,.16) !important;
}

/* The search input sits inside its own .ui-toolbar-control wrapper, which
   already got the field border/shadow/background above — giving the input
   the same treatment again draws a second, nested frame around it. */
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot .case-table-search > input {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot :is(input,select,textarea,.ui-toolbar-control):is(:hover,:focus,:focus-visible) {
  border-color: var(--ui-control-border-hover) !important;
  background: rgba(15,26,35,.56) !important;
}

html[data-theme="dark"] body.cases-visual-v2 :is(input,textarea)::placeholder {
  color: var(--cases-ink-muted) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] body.cases-visual-v2 select option {
  color: var(--v2-ink) !important;
  background: #29333d !important;
}

html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot :is(
  .ui-icon-button,.ui-inline-action,.ui-field-action,.secondary-btn,.case-filter-trigger
) {
  color: var(--v2-muted) !important;
  border-color: transparent !important;
  background: rgba(24,37,47,.30) !important;
  box-shadow:
    -3px -3px 7px -3px rgba(98,128,149,.18),
    3px -3px 7px -3px rgba(64,88,105,.13),
    3px 5px 9px -5px rgba(0,0,0,.78) !important;
}

html[data-theme="dark"] 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) {
  color: #86c7ee !important;
  background: rgba(75,135,174,.13) !important;
  box-shadow:
    -4px -4px 8px -4px rgba(105,140,163,.22),
    4px -4px 8px -4px rgba(66,92,110,.15),
    4px 6px 10px -5px rgba(0,0,0,.82) !important;
}

html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot :is(#saveCase,#deadlineNotificationButton,#caseFilterButton),
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot :is(#saveCase,#deadlineNotificationButton,#caseFilterButton):is(:hover,:focus,:focus-visible,:active) {
  border: 0 !important;
  background: rgba(24,37,47,.30) !important;
  box-shadow:
    -3px -3px 7px -3px rgba(98,128,149,.18),
    3px -3px 7px -3px rgba(64,88,105,.13),
    3px 5px 9px -5px rgba(0,0,0,.78) !important;
  transform: none !important;
}

html[data-theme="dark"] body.cases-visual-v2 :is(.cases-table,.home-mobile-table,.backup-table-scroll table) {
  color: var(--v2-ink) !important;
  background: transparent !important;
}

html[data-theme="dark"] body.cases-visual-v2 :is(.cases-table,.home-mobile-table,.backup-table-scroll table) :is(thead,thead tr,thead th) {
  color: var(--v2-ink) !important;
  background: rgba(9,17,23,.30) !important;
}

html[data-theme="dark"] body.cases-visual-v2 :is(.cases-table,.home-mobile-table,.backup-table-scroll table) td {
  color: var(--v2-ink) !important;
  border-color: var(--ui-data-divider) !important;
  background: transparent !important;
}

/* A legacy "td span { color: var(--muted) }" rule (styles.css) is scoped to
   every table cell in the app, not just the ones it was written for — its
   light-mode-appropriate gray reads too dim against this dark background.
   Restore the same bright row-text color for the cells that wrap their
   content in a span. */
html[data-theme="dark"] body.cases-visual-v2 .cases-table :is(.case-department-cell, .case-executor-cell, .case-note-cell) > span,
html[data-theme="dark"] body.cases-visual-v2 :is(.cases-table, .report-preview-table) .case-identifier-line {
  color: var(--v2-ink) !important;
}

html[data-theme="dark"] body.cases-visual-v2 :is(.cases-table,.home-mobile-table,.backup-table-scroll table) tbody tr:hover > td {
  background: var(--ui-row-hover) !important;
}

html[data-theme="dark"] body.cases-visual-v2 .home-summary-card .home-count-button {
  color: #edf4f8 !important;
}

html[data-theme="dark"] body.cases-visual-v2 .home-single-chart-panel :is(canvas,svg) {
  filter: brightness(.93) saturate(.90) contrast(1.04);
}

html[data-theme="dark"] body.cases-visual-v2 :is(
  .styled-select-popup,.styled-calendar-popup,.styled-autofill-popup,
  .case-filter-popover,.case-history-dialog,.deadline-notification-popup,
  .app-confirm-dialog,.app-prompt-dialog,.municipality-employee-popover,
  .status-color-popover,.home-chart-detail-popover,.home-chart-detail-popup,.home-performance-tooltip
) {
  color: var(--v2-ink) !important;
  border-color: rgba(124,164,192,.30) !important;
  background: linear-gradient(145deg, rgba(48,60,71,.98), rgba(40,51,61,.99)) !important;
  box-shadow: 0 22px 52px rgba(0,0,0,.58), inset 0 1px 0 rgba(139,174,198,.10) !important;
}

html[data-theme="dark"] body.cases-visual-v2 :is(
  .styled-select-option,.styled-autofill-option,.styled-calendar-day,
  .case-history-entry,.deadline-notification-item
) {
  color: var(--v2-ink) !important;
  border-color: var(--ui-data-divider) !important;
  background: transparent !important;
}

html[data-theme="dark"] body.cases-visual-v2 :is(
  .styled-select-option,.styled-autofill-option,.styled-calendar-day
):is(:hover,.is-active,.is-selected) {
  color: #edf5fa !important;
  background: rgba(92,169,218,.16) !important;
}

/* Dark calendar — light-style: no per-cell frames, crisper text, one clean
   surface. */
html[data-theme="dark"] body.cases-visual-v2 .styled-calendar-popup :is(
  .styled-calendar-day,
  .styled-calendar-days,
  .styled-calendar-weekdays,
  .styled-calendar-header,
  .styled-calendar-footer
) {
  border-color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;
}

html[data-theme="dark"] body.cases-visual-v2 .styled-calendar-popup .styled-calendar-day {
  color: #dce7f1 !important;
}

html[data-theme="dark"] body.cases-visual-v2 .styled-calendar-popup :is(.styled-calendar-weekdays, .styled-calendar-title) {
  color: var(--v2-muted) !important;
}

/* The weekday names, the arrows and "today / clear" are their own elements with the light theme's dark blue: legible here. */
html[data-theme="dark"] body.cases-visual-v2 .styled-calendar-popup .styled-calendar-weekdays > span {
  color: var(--v2-muted) !important;
}
html[data-theme="dark"] body.cases-visual-v2 .styled-calendar-popup :is(.styled-calendar-nav, .styled-calendar-footer-action) {
  color: #9ccaf0 !important;
}
html[data-theme="dark"] body.cases-visual-v2 .styled-calendar-popup :is(.styled-calendar-nav, .styled-calendar-footer-action):is(:hover, :focus-visible) {
  color: #edf5fa !important;
  background: rgba(92,169,218,.16) !important;
}

html[data-theme="dark"] body.cases-visual-v2 .styled-calendar-popup .styled-calendar-day.today {
  color: #eaf4fc !important;
  box-shadow: inset 0 0 0 1px rgba(120,185,232,.45) !important;
}

html[data-theme="dark"] body.cases-visual-v2 .styled-calendar-popup .styled-calendar-day[aria-current="date"] {
  color: #0f1a22 !important;
  background: rgba(120,185,232,.85) !important;
}

html[data-theme="dark"] body.cases-visual-v2 :is(
  .styled-select-popup,.styled-calendar-popup,.styled-autofill-popup,
  .case-filter-popover,.app-confirm-dialog,.app-prompt-dialog,
  .municipality-employee-popover,.status-color-popover
) :is(input,select,textarea) {
  color: var(--v2-ink) !important;
  -webkit-text-fill-color: var(--v2-ink) !important;
  caret-color: #9bd3f3 !important;
  border-color: var(--ui-control-border) !important;
  background: rgba(9,17,23,.58) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.38) !important;
}

html[data-theme="dark"] body.cases-visual-v2 :is(.app-modal-backdrop,.app-confirm-backdrop,.case-tool-backdrop,.case-history-backdrop,.styled-popup-backdrop) {
  background: rgba(3,8,12,.64) !important;
  backdrop-filter: blur(4px) !important;
}

html[data-theme="dark"] body.cases-visual-v2 :is(.toast,.toast-item) {
  color: #e8f0f5 !important;
  border-color: rgba(126,170,199,.30) !important;
  background: rgba(46,58,69,.97) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.48) !important;
}

html[data-theme="dark"] body.cases-visual-v2 :is(.styled-hover-tooltip,[role="tooltip"]) {
  color: #edf4f8 !important;
  border-color: rgba(139,178,205,.26) !important;
  background: #2c3843 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.44) !important;
}

html[data-theme="dark"] body.cases-visual-v2 .cases-sidebar #navList#navList :is(.nav-item,.sidebar-cloud-status),
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-sidebar .settings-nav-item {
  color: var(--v2-muted) !important;
  background: linear-gradient(145deg, rgba(52,64,75,.88), rgba(42,53,63,.90)) !important;
  box-shadow:
    -3px -3px 7px -3px rgba(94,124,145,.16),
    3px -3px 7px -3px rgba(59,83,100,.12),
    3px 5px 9px -5px rgba(0,0,0,.76) !important;
}

html[data-theme="dark"] body.cases-visual-v2 .cases-sidebar #navList#navList .nav-item:is(:hover,.active),
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-sidebar .settings-nav-item:is(:hover,.active) {
  color: #d8e7f1 !important;
  background: linear-gradient(145deg, rgba(64,86,102,.94), rgba(48,60,71,.94)) !important;
}

html[data-theme="dark"] body.cases-visual-v2 ::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  background: rgba(116,153,180,.34) !important;
  background-clip: padding-box !important;
}

html[data-theme="dark"] body.cases-visual-v2 ::-webkit-scrollbar-track {
  background: rgba(5,11,15,.18) !important;
}

/* 2026-08-17 — final pictogram/control consistency pass ------------------- */
/* Field-embedded icon buttons must visually belong to the field: no second
   framed surface inside the existing input/control shell. */
html body.cases-visual-v2 .cases-main #pageRoot button.ui-field-action,
html body.cases-visual-v2 .cases-main #pageRoot button.ui-field-action:is(:hover,:focus,:focus-visible,:active),
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot button.ui-field-action,
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot button.ui-field-action:is(:hover,:focus,:focus-visible,:active) {
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Backup delete is destructive red at every nesting level; older Settings
   rules used a grey .button-icon color with higher specificity. */
html body.cases-visual-v2 .cases-main #pageRoot .settings-content button.delete-backup,
html body.cases-visual-v2 .cases-main #pageRoot .settings-content button.delete-backup:is(:hover,:focus,:focus-visible,:active),
html body.cases-visual-v2 .cases-main #pageRoot .settings-content button.delete-backup :is(.button-icon,svg,path,rect,circle,line,polyline,polygon,ellipse) {
  color: var(--v2-red) !important;
  stroke: currentColor !important;
}

/* One interaction grammar for the icon family. Frames never jump, rotate,
   slide or use per-action motion. Every pictogram gets the same small optical
   scale on hover/focus and returns to neutral on active. */
html body.cases-visual-v2 :is(
  .cases-sidebar .nav-item,
  .settings-sidebar .settings-nav-item,
  .cases-main #pageRoot button.ui-icon-button,
  .cases-main #pageRoot button.ui-inline-action,
  .cases-main #pageRoot button.ui-field-action,
  .cases-main #pageRoot button.icon-action,
  .cases-main #pageRoot button.row-icon-action,
  .cases-main #pageRoot button.add-action,
  .cases-main #pageRoot button.delete-action,
  .cases-main #pageRoot button.save-action,
  .cases-main #pageRoot button.report-excel-action,
  .cases-main #pageRoot button.base-action-button
) {
  transform: none !important;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease !important;
}

html body.cases-visual-v2 :is(
  .cases-sidebar .nav-item .nav-icon,
  .cases-sidebar .nav-item .nav-icon svg,
  .settings-sidebar .settings-nav-item svg,
  .cases-main #pageRoot button.ui-icon-button svg,
  .cases-main #pageRoot button.ui-inline-action svg,
  .cases-main #pageRoot button.ui-field-action svg,
  .cases-main #pageRoot button.icon-action svg,
  .cases-main #pageRoot button.row-icon-action svg,
  .cases-main #pageRoot button.add-action svg,
  .cases-main #pageRoot button.delete-action svg,
  .cases-main #pageRoot button.save-action svg,
  .cases-main #pageRoot button.report-excel-action svg,
  .cases-main #pageRoot button.base-action-button svg
) {
  transform: none !important;
  transform-origin: center !important;
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), color 160ms ease, stroke 160ms ease !important;
}

@media (prefers-reduced-motion: no-preference) {
  html body.cases-visual-v2 :is(
    .cases-sidebar .nav-item,
    .settings-sidebar .settings-nav-item,
    .cases-main #pageRoot button.ui-icon-button,
    .cases-main #pageRoot button.ui-inline-action,
    .cases-main #pageRoot button.ui-field-action,
    .cases-main #pageRoot button.icon-action,
    .cases-main #pageRoot button.row-icon-action,
    .cases-main #pageRoot button.add-action,
    .cases-main #pageRoot button.delete-action,
    .cases-main #pageRoot button.save-action,
    .cases-main #pageRoot button.report-excel-action,
    .cases-main #pageRoot button.base-action-button
  ):is(:hover,:focus-visible) :is(.nav-icon,svg) {
    transform: scale(1.045) !important;
  }

  html body.cases-visual-v2 :is(
    .cases-sidebar .nav-item,
    .settings-sidebar .settings-nav-item,
    .cases-main #pageRoot button.ui-icon-button,
    .cases-main #pageRoot button.ui-inline-action,
    .cases-main #pageRoot button.ui-field-action,
    .cases-main #pageRoot button.icon-action,
    .cases-main #pageRoot button.row-icon-action,
    .cases-main #pageRoot button.add-action,
    .cases-main #pageRoot button.delete-action,
    .cases-main #pageRoot button.save-action,
    .cases-main #pageRoot button.report-excel-action,
    .cases-main #pageRoot button.base-action-button
  ):active :is(.nav-icon,svg) {
    transform: scale(.985) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.cases-visual-v2 :is(
    .cases-sidebar .nav-item .nav-icon,
    .cases-sidebar .nav-item .nav-icon svg,
    .settings-sidebar .settings-nav-item svg,
    .cases-main #pageRoot button.ui-icon-button svg,
    .cases-main #pageRoot button.ui-inline-action svg,
    .cases-main #pageRoot button.ui-field-action svg,
    .cases-main #pageRoot button.icon-action svg,
    .cases-main #pageRoot button.row-icon-action svg,
    .cases-main #pageRoot button.add-action svg,
    .cases-main #pageRoot button.delete-action svg,
    .cases-main #pageRoot button.save-action svg,
    .cases-main #pageRoot button.report-excel-action svg,
    .cases-main #pageRoot button.base-action-button svg
  ) {
    transition: none !important;
    transform: none !important;
  }
}

/* Calendar is field-embedded: preserve its exact centering while still using
   the same scale-only family feedback. */
html body.cases-visual-v2 .cases-main #pageRoot .date-entry .date-picker-button,
html body.cases-visual-v2 .cases-main #pageRoot .date-entry .date-picker-button:is(:hover,:focus,:focus-visible,:active) {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Dark case cards: keep date fields visually clean when empty. */
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot .cases-editor-panel > .cases-card .date-text-input::placeholder {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 0 !important;
}

/* 2026-08-17 — Settings embedded actions: the surrounding field/row owns the
   visible frame. Embedded pictogram buttons themselves are surface-less in
   every state and theme so no frame-on-frame treatment can reappear. */
html body.cases-visual-v2 .cases-main #pageRoot .settings-content :is(
  .settings-new-value-control,
  .reference-add-row,
  .settings-item-actions
) > button.settings-action-btn,
html body.cases-visual-v2 .cases-main #pageRoot .settings-content :is(
  .settings-new-value-control,
  .reference-add-row,
  .settings-item-actions
) > button.settings-action-btn:is(:hover,:focus,:focus-visible,:active),
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot .settings-content :is(
  .settings-new-value-control,
  .reference-add-row,
  .settings-item-actions
) > button.settings-action-btn,
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot .settings-content :is(
  .settings-new-value-control,
  .reference-add-row,
  .settings-item-actions
) > button.settings-action-btn:is(:hover,:focus,:focus-visible,:active) {
  border: 0 !important;
  border-color: transparent !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body.cases-visual-v2 .cases-main #pageRoot .settings-content :is(
  .settings-new-value-control,
  .reference-add-row,
  .settings-item-actions
) > button.settings-action-btn::before,
html body.cases-visual-v2 .cases-main #pageRoot .settings-content :is(
  .settings-new-value-control,
  .reference-add-row,
  .settings-item-actions
) > button.settings-action-btn::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2026-08-17 — sidebar palette, report dark-frame cleanup, appearance switch */
/* Dark report page must not show a bright hairline above the report block. */
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot > #reportPanel#reportPanel.report-builder-page.ui-frame,
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot > #reportPanel#reportPanel.report-builder-page.ui-frame:is(:hover,:focus-within) {
  border-top: 0 !important;
  border-top-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Main navigation: semantic, non-grey wayfinding colors. Each button carries
   its hue as --nav-accent, shared by the glyph and the active left rail. */
html body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item[data-route="home"] { --nav-accent: #4f8fd8; }
html body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item[data-route="new"] { --nav-accent: #B83280; }
html body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item[data-route="active"] { --nav-accent: var(--route-icon-color, #D62F45); }
html body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item[data-route="archive"] { --nav-accent: var(--route-icon-color, #007F43); }
html body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item[data-route="reports"] { --nav-accent: #8a67d5; }
html body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item[data-route="kancelaria"] { --nav-accent: #557fd1; }
html body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item[data-route="services"] { --nav-accent: #3aa6a0; }
html body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item[data-route="admin"] { --nav-accent: #d79a2f; }
html body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item[data-route="social"] { --nav-accent: #d4537e; }
html body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item[data-route="napr"] { --nav-accent: #4f86c6; }
html body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item[data-route="maps"] { --nav-accent: #2f9e88; }
html body.cases-visual-v2 .cases-sidebar .nav-bottom-group .nav-item[data-route="settings"] { --nav-accent: #5f79dc; }
html body.cases-visual-v2 .cases-sidebar .nav-main-group .nav-item:is([data-route="home"], [data-route="new"], [data-route="active"], [data-route="archive"], [data-route="reports"], [data-route="services"], [data-route="napr"], [data-route="maps"], [data-route="admin"], [data-route="social"], [data-route="kancelaria"]) .nav-icon,
html body.cases-visual-v2 .cases-sidebar .nav-bottom-group .nav-item[data-route="settings"] .nav-icon { color: var(--nav-accent) !important; }
html body.cases-visual-v2 .cases-sidebar .nav-bottom-group .nav-item[data-route="exit"] .nav-icon { color: var(--v2-red) !important; }

/* Settings navigation: every destination has a distinct semantic hue; no grey glyphs. */
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item[data-settings-section="references"] { --nav-accent: #4f8fd8; }
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item[data-settings-section="backup"] { --nav-accent: #557fd1; }
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item[data-settings-section="kancelaria"] { --nav-accent: #8988a8; }
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item[data-settings-section="appearance"] { --nav-accent: #a25cc6; }
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item[data-settings-section="about"] { --nav-accent: #3aa6a0; }
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item[data-settings-section="notifications"] { --nav-accent: #df7d39; }
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item[data-settings-section="shortcuts"] { --nav-accent: #5f79dc; }
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item[data-settings-section] .settings-nav-icon { color: var(--nav-accent) !important; }

/* 2026-08-17 — measured optical normalization for sidebar and dashboard pictograms.
   Every SVG keeps the same physical canvas; the independent CSS `scale` property
   compensates for the actual painted bounds. Hover/focus can therefore keep using
   the shared `transform` animation without destroying optical normalization. */
html body.cases-visual-v2 .cases-sidebar .nav-icon,
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-icon {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  display: inline-grid !important;
  place-items: center !important;
}
html body.cases-visual-v2 .cases-sidebar .nav-icon > svg,
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-icon > svg {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  transform-origin: 50% 50% !important;
  transform-box: view-box !important;
}

/* Main sidebar: painted bounds normalized to ~17.6px. */
html body.cases-visual-v2 .cases-sidebar .nav-item[data-route="home"] .nav-icon > svg { scale: .889 !important; }
html body.cases-visual-v2 .cases-sidebar .nav-item[data-route="new"] .nav-icon > svg { scale: 1.011 !important; }
html body.cases-visual-v2 .cases-sidebar .nav-item[data-route="active"] .nav-icon > svg { scale: 1.128 !important; }
html body.cases-visual-v2 .cases-sidebar .nav-item[data-route="archive"] .nav-icon > svg { scale: 1.100 !important; }
html body.cases-visual-v2 .cases-sidebar .nav-item[data-route="reports"] .nav-icon > svg { scale: 1.011 !important; }
html body.cases-visual-v2 .cases-sidebar .nav-item[data-route="services"] .nav-icon > svg { scale: .936 !important; }
html body.cases-visual-v2 .cases-sidebar .nav-item[data-route="kancelaria"] .nav-icon > svg { scale: .936 !important; }
html body.cases-visual-v2 .cases-sidebar .nav-item[data-route="admin"] .nav-icon > svg { scale: .936 !important; }
/* Gear is visually denser than simple line glyphs, so its optical target is slightly smaller. */
html body.cases-visual-v2 .cases-sidebar .nav-item[data-route="settings"] .nav-icon > svg { scale: .789 !important; }
html body.cases-visual-v2 .cases-sidebar .nav-item[data-exit="true"] .nav-icon > svg { scale: .889 !important; }

/* Exit must read as an unmistakable, vivid destructive action. */
html body.cases-visual-v2 .cases-sidebar .nav-item[data-exit="true"] .nav-icon,
html body.cases-visual-v2 .cases-sidebar .nav-item[data-exit="true"]:is(:hover,:focus,:focus-visible,:active) .nav-icon {
  color: #ff2d55 !important;
}

/* Settings sidebar: measured painted bounds normalized to the same optical lane. */
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item[data-settings-section="references"] .settings-nav-icon > svg { scale: .9 !important; }
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item[data-settings-section="backup"] .settings-nav-icon > svg { scale: .889 !important; }
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item[data-settings-section="appearance"] .settings-nav-icon > svg { scale: .884 !important; }
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item[data-settings-section="about"] .settings-nav-icon > svg { scale: .807 !important; }
/* (the bell's painted bounds are 18 x 21, the keyboard's 20 x 16, the journal's 20 x 18: each to the same ~17.6px lane) */
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item[data-settings-section="notifications"] .settings-nav-icon > svg { scale: .84 !important; }
html body.cases-visual-v2 .cases-main #pageRoot .settings-sidebar .settings-nav-item[data-settings-section="shortcuts"] .settings-nav-icon > svg { scale: .88 !important; }

/* Dashboard cards: identical 30px canvas, painted bounds normalized to ~18px. */
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) {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
}
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card.home-metric-card .home-summary-icon > svg.cases-family-icon {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  transform-origin: 50% 50% !important;
  transform-box: view-box !important;
}
/* Optical sizing: each glyph's ink comes out at the same visual size in the
   30px box (rings and the magnifier ~21px, clipboard 22px tall, folder 22.5px
   wide, pen 22px on its diagonal). */
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card[data-summary-key="active"] .home-summary-icon > svg.cases-family-icon { scale: 1 !important; }
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card[data-summary-key="current"] .home-summary-icon > svg.cases-family-icon { scale: 1.084 !important; }
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card[data-summary-key="investigation"] .home-summary-icon > svg.cases-family-icon { scale: 1.13 !important; }
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card[data-summary-key="registration"] .home-summary-icon > svg.cases-family-icon { scale: 1 !important; }
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card[data-summary-key="signing"] .home-summary-icon > svg.cases-family-icon { scale: 1.06 !important; }
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card[data-summary-key="archive"] .home-summary-icon > svg.cases-family-icon { scale: 1.084 !important; }
html body.cases-visual-v2 .cases-main #pageRoot .home-summary-card[data-summary-key="all"] .home-summary-icon > svg.cases-family-icon { scale: .98 !important; }

/* 2026-08-17 — FINAL report dark-mode outer-frame removal.
   Later permanent-surface rules can reintroduce a bright top contour via
   negative-Y box-shadow and rounded top corners. The report page wrapper is
   intentionally frameless; only its inner field rows remain framed. */
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot > #reportPanel#reportPanel.report-builder-page.ui-frame,
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot > #reportPanel#reportPanel.report-builder-page.ui-frame:is(:hover,:focus,:focus-within) {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot > #reportPanel#reportPanel.report-builder-page.ui-frame::before,
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot > #reportPanel#reportPanel.report-builder-page.ui-frame::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2026-08-17 — definitive Report top-hairline fix.
   The visible contour in dark mode is painted by the inner report field card,
   not the outer #reportPanel. Keep field rows framed; make only this wrapper
   completely frameless. */
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot #reportPanel
  .report-field-card.report-unified-field-card,
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot #reportPanel
  .report-field-card.report-unified-field-card:is(:hover,:focus,:focus-within) {
  border: 0 !important;
  border-color: transparent !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot #reportPanel
  .report-field-card.report-unified-field-card::before,
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot #reportPanel
  .report-field-card.report-unified-field-card::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2026-08-17 — Report dark surface parity.
   The Report page is no longer a frameless exception: its outer frame uses
   exactly the same dark surface recipe as the other primary page blocks. */
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot > #reportPanel#reportPanel.report-builder-page.ui-frame,
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot > #reportPanel#reportPanel.report-builder-page.ui-frame:is(:hover,:focus,:focus-within) {
  box-sizing: border-box !important;
  border: 1px solid transparent !important;
  border-color: transparent !important;
  border-radius: var(--ui-frame-radius) !important;
  outline: 0 !important;
  background: linear-gradient(145deg, rgba(50,62,73,.92), rgba(41,52,62,.94)) !important;
  background-color: rgba(41,52,62,.94) !important;
  background-image: linear-gradient(145deg, rgba(50,62,73,.92), rgba(41,52,62,.94)) !important;
  box-shadow:
    -3px -3px 7px -3px rgba(101,130,151,.16),
    3px -3px 7px -3px rgba(65,91,109,.12),
    3px 6px 11px -5px rgba(0,0,0,.72) !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ===========================================================================
   Dark mode — same "content floats on the canvas" language as light. Every
   surface that light made frameless (page blocks, both sidebars' nav tiles,
   settings blocks, chart controls, table shells) drops its
   filled panel here too and carries a soft dark-appropriate shadow instead:
   a faint light top edge + a low dark drop. Mirrors the light append in
   visual-system.css.
   =========================================================================== */
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot > :is(
  .home-overview-frame,
  .home-single-chart-panel.ui-frame
),
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot .cases-editor-panel > .cases-card,
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot .case-list-page > .cases-table-shell.ui-table-frame,
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot > #servicesFrame.services-frame.ui-frame,
html[data-theme="dark"] 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
),
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot > #reportPanel#reportPanel.report-builder-page.ui-frame,
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot #reportPanel .report-field-card.report-unified-field-card,
html[data-theme="dark"] body.cases-visual-v2 .cases-sidebar #navList#navList > :is(.nav-main-group, .nav-bottom-group) > .nav-item:not(.active):not(.sidebar-cloud-status),
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot .settings-sidebar .settings-nav-item:not(.active) {
  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, .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;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot .case-list-page > .cases-table-shell.ui-table-frame::after,
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot > #reportPanel#reportPanel.report-builder-page.ui-frame::before,
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot > #reportPanel#reportPanel.report-builder-page.ui-frame::after {
  border: 0 !important;
  box-shadow: none !important;
}

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

html[data-theme="dark"] body.cases-visual-v2 .home-chart-controls {
  --chart-control-text: var(--v2-muted);
  --chart-control-fill: rgba(24,37,47,.30);
  --chart-control-hover: rgba(75,135,174,.13);
  --chart-control-selected: rgba(92,169,218,.22);
  --chart-control-edge: rgba(120,185,232,.55);
  --chart-control-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.3);
}

/* Dark: filled ("has-value") editor fields. Light uses a mint-green "data
   present" fill; in dark that reads as a jarring pale box, so use a neutral
   raised-dark surface with only a faint green edge to keep the cue. Also
   restores the embedded calendar button's visibility. */
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#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[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#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),
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot form#caseForm.cases-editor-panel .date-entry .date-text-input.has-value,
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot form#caseForm.cases-editor-panel .field-mobile-group #mobileGroup.has-value[readonly] {
  color: var(--v2-ink-strong) !important;
  -webkit-text-fill-color: var(--v2-ink-strong) !important;
  border-color: var(--case-field-border, rgba(75, 184, 154, .42)) !important;
  background: rgba(32, 44, 54, .66) !important;
  background-color: rgba(32, 44, 54, .66) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot form#caseForm.cases-editor-panel .date-entry:has(.date-text-input.has-value) .date-picker-button svg {
  color: #9db3c4 !important;
}

/* Notification bell keeps its semantic state colour in dark too (the grey
   icon-button rule above otherwise swallows it). Save / add stay neutral in
   both themes — same as every other toolbar icon. */
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot .deadline-notification-button.has-notifications {
  color: var(--v2-amber) !important;
}
html[data-theme="dark"] body.cases-visual-v2 .cases-main #pageRoot#pageRoot .deadline-notification-button.has-overdue {
  color: var(--v2-red) !important;
}

/* The program in a browser (cloud/build-web.js marks the page): the browser has its own window buttons. */
html.is-web .window-controls {
  display: none !important;
}