:root {
  --navy: #0f2136;
  --navy-2: #172c45;
  --blue: #1f4e79;
  --blue-soft: rgba(31, 78, 121, 0.1);
  --action-dark: #1f4e79;
  --action-hover: rgba(31, 78, 121, 0.86);
  --action-soft: rgba(31, 78, 121, 0.1);
  --action-border: rgba(31, 78, 121, 0.28);
  --action-shadow: rgba(31, 78, 121, 0.2);
  --green: #1b9b69;
  --red: #d64545;
  --amber: #b7791f;
  --violet: #6d5bd0;
  --semantic-red: #dc2626;
  --semantic-red-soft: #feecec;
  --semantic-red-border: #f6c6c6;
  --semantic-amber: #b7791f;
  --semantic-amber-soft: #fff4db;
  --semantic-amber-border: #f4d89b;
  --semantic-green: #15925a;
  --semantic-green-soft: #e8f7ef;
  --semantic-green-border: #c8ead8;
  --semantic-blue: #1f4e79;
  --semantic-blue-soft: rgba(31, 78, 121, 0.1);
  --semantic-blue-border: rgba(31, 78, 121, 0.24);
  --semantic-violet: #6d5bd0;
  --semantic-violet-soft: #efecff;
  --semantic-violet-border: #d8d1ff;
  --line: #e7ebf1;
  --text: #152033;
  --muted: #68758a;
  --bg: #f6f8fb;
  --panel: #ffffff;
  --shadow: 0 14px 36px rgba(18, 33, 56, 0.08);
  --font-sans: var(--font-family-sans);
  --text-2xs: var(--font-size-caption-xs);
  --text-xs: var(--font-size-caption);
  --text-sm: var(--font-size-body-sm);
  --text-base: var(--font-size-body);
  --text-md: var(--font-size-body);
  --text-lg: var(--font-size-card-title);
  --text-xl: var(--font-size-section-title);
  --text-2xl: var(--font-size-page-title);
  --text-3xl: var(--font-size-display);
  /* Global CRM typography scale. Change frontend/design-tokens.css to tune every screen at once. */
  --crm-page-title-size: var(--font-size-page-title);
  --crm-section-title-size: var(--font-size-section-title);
  --crm-card-title-size: var(--font-size-card-title);
  --crm-description-size: var(--font-size-body);
  --crm-meta-size: var(--font-size-caption);
  --crm-kpi-value-size: var(--font-size-kpi-value);
  --crm-control-size: var(--font-size-control);
  --crm-table-size: var(--font-size-table-cell);
  --crm-panel-padding: var(--space-3);
  --crm-card-gap: var(--space-2);
  --leading-tight: var(--line-height-tight);
  --leading-normal: var(--line-height-normal);
  --weight-medium: var(--font-weight-medium);
  --weight-semibold: var(--font-weight-semibold);
  --weight-bold: var(--font-weight-bold);
  --weight-black: var(--font-weight-black);
  --main-side-grid: minmax(0, 4fr) minmax(280px, 1fr);
}

[hidden] {
  display: none !important;
}

.row-action-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.row-action-menu-wrap > .row-action-trigger {
  width: 26px;
  height: 26px;
  min-height: 26px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  color: var(--action-dark);
  padding: 0;
  font-size: 18px;
  font-weight: var(--weight-bold);
  line-height: 1;
  cursor: pointer;
}

.row-action-menu-wrap > .row-action-trigger:hover,
.row-action-menu-wrap > .row-action-trigger[aria-expanded="true"] {
  border-color: var(--action-dark);
  background: var(--action-dark);
  color: white;
}

.row-action-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  width: max-content;
  min-width: 168px;
  max-width: min(220px, calc(100vw - 16px));
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 6px;
  box-shadow: var(--shadow);
}

.row-action-menu[hidden] {
  display: none;
}

.row-action-menu button {
  width: 100%;
  height: auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  padding: 0 9px;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.row-action-menu button:hover {
  background: var(--action-hover);
  color: white;
}

.row-action-menu button.danger {
  color: var(--semantic-red);
}

.row-action-menu button.danger:hover {
  background: var(--semantic-red);
  color: white;
}

.row-action-menu .ui-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: currentColor;
}

.documents-row-actions .row-action-menu-wrap,
.case-row-actions .row-action-menu-wrap,
.folder-actions .row-action-menu-wrap,
.hover-row-actions .row-action-menu-wrap,
.procedural-actions .row-action-menu-wrap,
.folder-row-actions .row-action-menu-wrap,
.mailing-row-actions .row-action-menu-wrap,
.task-list-actions .row-action-menu-wrap {
  opacity: 1;
  pointer-events: auto;
}

.documents-row-actions,
.case-row-actions,
.folder-actions,
.hover-row-actions,
.procedural-actions,
.folder-row-actions,
.mailing-row-actions,
.task-list-actions {
  opacity: 1;
  pointer-events: auto;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 901px) {
  .sidebar {
    width: 240px;
    padding: 20px 10px 18px;
  }

  .app {
    margin-left: 240px;
  }

  .brand {
    gap: 10px;
    padding: 0 8px 22px;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
  }

  .nav {
    gap: 6px;
  }

  .nav-item {
    min-height: 39px;
    grid-template-columns: 30px 1fr auto;
    padding: 0 10px;
  }

  .nav-icon {
    width: 22px;
    height: 22px;
  }

  .nav-icon svg {
    width: 19px;
    height: 19px;
  }

  .nav-badge {
    min-width: 22px;
    height: 22px;
  }

  .topbar {
    height: 68px;
    padding: 0 22px;
  }

  .notification-button {
    width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .admin-avatar {
    width: 38px;
    height: 38px;
  }

  .admin-profile {
    min-width: 170px;
  }

  .view {
    padding: 20px 22px 36px;
  }

  #tasks.view {
    padding-top: 8px;
  }

  #cases.view {
    padding: 14px;
  }

  .panel,
  .card,
  .metric {
    padding: 14px;
  }

  h1 {
    font-size: var(--text-3xl);
  }

  h2,
  .case-title-line h2,
  .tasks-page-head h2 {
    font-size: var(--text-2xl);
  }

  h3,
  .case-card h3,
  .case-card-title,
  .task-side-card h3,
  .task-sync-card h2,
  .task-priority-card h2,
  .task-plan-card h2 {
    font-size: var(--text-lg);
  }

  .case-card p,
  .case-card strong,
  .case-inner-table,
  .tasks-table,
  .task-side-card p,
  .task-detail-info strong {
    font-size: var(--text-base);
  }

  .case-inner-table th,
  .tasks-table th,
  .task-detail-info span,
  .case-card span,
  .tasks-table td span:not(.badge) {
    font-size: var(--text-sm);
  }

  .tasks-tabs button {
    padding: 8px 0 10px;
  }

  .tasks-screen {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
    align-items: end;
    margin-top: 0;
  }

  .tasks-page-head {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
    padding: 0;
  }

  .tasks-tabs {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    min-height: 38px;
  }

  .tasks-workspace,
  .tasks-bottom-grid {
    grid-column: 1 / -1;
  }

  .tasks-head-actions {
    gap: 8px;
    padding-top: 0;
  }

  .tasks-kpi-grid article {
    min-height: 78px;
    padding: 10px 12px;
  }

  .tasks-kpi-grid strong {
    margin: 6px 0 5px;
  }

  .tasks-kpi-grid i {
    width: 30px;
    height: 30px;
  }

  .tasks-kpi-grid .ui-icon {
    width: 17px;
    height: 17px;
  }

  .tasks-toolbar input,
  .tasks-toolbar select,
  .tasks-toolbar button,
  .tasks-head-actions button {
    min-height: 38px;
  }

  .tasks-workspace.has-task-detail {
    grid-template-columns: var(--main-side-grid);
    grid-template-rows: 86px 38px 540px;
  }

  .tasks-list-card {
    min-height: 0;
    height: 540px;
    padding: 12px;
  }

  .tasks-workspace .tasks-list-card {
    min-height: 0;
    height: 540px;
  }

  .tasks-table {
    min-width: 1040px;
  }

  .tasks-table th,
  .tasks-table td {
    padding: 12px 9px;
  }

  .task-title-cell strong {
    font-size: var(--text-base);
  }

  .task-side-card {
    min-height: 600px;
    height: 600px;
    padding: 14px;
  }
}

body.sidebar-collapsed .sidebar {
  transform: translateX(-100%);
  pointer-events: none;
}

body.sidebar-collapsed .app {
  margin-left: 0;
}

body.sidebar-collapsed .sidebar-restore {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 248px;
  background: linear-gradient(180deg, #102338 0%, #10253c 52%, #0d2035 100%);
  color: white;
  display: flex;
  flex-direction: column;
  padding: 24px 12px 22px;
  transition: transform 0.22s ease;
  z-index: 60;
}

.sidebar-restore {
  position: fixed;
  left: 12px;
  bottom: 20px;
  z-index: 70;
  width: 39px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(15, 33, 54, 0.5);
  color: white;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.sidebar-restore:hover {
  background: var(--action-hover);
  box-shadow: 0 12px 28px var(--action-shadow);
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 0 10px 28px;
}

.brand-mark {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(221, 196, 137, 0.46);
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  font-weight: var(--weight-bold);
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 3px;
}

.brand span,
.sidebar-user span {
  display: block;
  color: #b9c8db;
  font-size: var(--text-base);
  margin-top: 2px;
}

.nav {
  display: grid;
  gap: 7px;
  overflow-y: auto;
  padding-right: 2px;
}

.nav-item {
  position: relative;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #dbe6f4;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  text-align: left;
  padding: 0 12px;
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.nav-icon {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  font-weight: var(--weight-semibold);
  font-size: 15px;
  color: #d2dfef;
}

.nav-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-item:hover,
.nav-item.active {
  background: var(--navy-2);
  color: #fff;
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: -12px;
  width: 4px;
  height: 36px;
  border-radius: 0 4px 4px 0;
  background: var(--blue);
}

.nav-badge {
  min-width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #f13b3b;
  color: white;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.nav-new {
  min-height: 21px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #8b5cf6, #6d4de0);
  color: white;
  padding: 2px 7px;
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  box-shadow: 0 4px 10px rgba(109, 77, 224, 0.32);
}

.collapse-menu {
  margin-top: auto;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: #c7d5e7;
  font-size: var(--text-base);
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}

.collapse-menu:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.demo-data-toggle {
  width: calc(100% - 8px);
  min-height: 52px;
  margin: auto 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #e7f0fb;
  display: grid;
  grid-template-columns: 1fr 42px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.demo-data-toggle[hidden] {
  display: none;
}

.demo-data-toggle:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.1);
}

.demo-data-toggle.is-on {
  border-color: rgba(82, 210, 153, 0.42);
  background: linear-gradient(135deg, rgba(20, 146, 91, 0.22), rgba(255, 255, 255, 0.06));
  box-shadow: inset 3px 0 0 rgba(82, 210, 153, 0.95);
}

.demo-data-toggle.is-off {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

.demo-data-toggle.is-on:hover {
  border-color: rgba(100, 230, 170, 0.62);
  background: linear-gradient(135deg, rgba(20, 146, 91, 0.28), rgba(255, 255, 255, 0.08));
}

.demo-data-toggle.is-on .demo-data-copy small {
  color: #8ff0c1;
}

.demo-data-toggle.is-off .demo-data-copy small {
  color: #b9c8db;
}

.demo-data-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.demo-data-copy strong {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.demo-data-copy small {
  color: #b9c8db;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-data-switch {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.demo-data-switch::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d7e2ef;
  transition: transform 0.18s ease, background 0.18s ease;
}

.demo-data-toggle.is-on .demo-data-switch {
  background: rgba(27, 155, 105, 0.56);
  box-shadow: inset 0 0 0 1px rgba(82, 210, 153, 0.72);
}

.demo-data-toggle.is-on .demo-data-switch::before {
  left: 20px;
  transform: none;
  background: #dfffea;
}

.demo-data-toggle.is-off .demo-data-switch::before {
  left: 4px;
  transform: none;
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f0f5ff;
  color: var(--navy);
  display: grid;
  place-items: center;
  font-weight: var(--weight-bold);
}

.app {
  margin-left: 248px;
  min-height: 100vh;
  transition: margin-left 0.22s ease;
}

.topbar {
  height: 80px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  gap: 18px;
}

.topbar-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.topbar-title-wrap > div {
  min-width: 0;
  max-width: 100%;
}

.topbar-back {
  width: 0;
  min-width: 0;
  flex: 0 0 0;
  height: 38px;
  min-height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0 solid transparent;
  border-radius: 8px;
  background: white;
  color: #536176;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-8px);
  transition: width 0.18s ease, opacity 0.18s ease, transform 0.18s ease, color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.topbar-back.visible {
  width: 38px;
  min-width: 38px;
  flex-basis: 38px;
  border-width: 1px;
  border-color: var(--line);
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.topbar-back:hover {
  border-color: var(--action-border);
  background: var(--action-soft);
  color: var(--action-dark);
}

.topbar-back svg {
  display: block;
  width: 20px;
  height: 20px;
  pointer-events: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.eyebrow {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  font-weight: var(--weight-black);
  letter-spacing: 0;
}

h2 {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
}

h3 {
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-actions {
  align-self: stretch;
  border-left: 1px solid var(--line);
  padding-left: 24px;
}

.topbar-clock {
  min-width: 128px;
  height: 44px;
  display: grid;
  align-content: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 10px;
  border: 1px solid #d6e6f6;
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f8fd 100%);
  box-shadow: 0 8px 20px rgba(15, 78, 132, 0.06);
  color: var(--navy);
  line-height: 1.1;
  white-space: nowrap;
}

.topbar-clock-row {
  display: grid;
  grid-template-columns: 15px auto;
  align-items: center;
  justify-content: end;
  gap: 6px;
}

.topbar-clock svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar-clock-date {
  color: #66758b;
  font-size: 11px;
  font-weight: var(--weight-bold);
}

.topbar-clock-time {
  color: var(--action-dark);
}

.topbar-clock strong {
  font-size: var(--text-md);
  font-weight: var(--weight-black);
  letter-spacing: 0;
}

.topbar-menu-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.notification-button {
  position: relative;
  width: 42px;
  height: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  background: white;
  color: #526176;
  cursor: pointer;
  border-radius: 8px;
}

.notification-button:hover,
.notification-button.active {
  border-color: var(--action-border);
  background: var(--action-soft);
  color: var(--action-dark);
}

.bell-shape {
  width: 22px;
  height: 22px;
  display: inline-flex;
}

.bell-shape svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ef3e3e;
  color: white;
  font-size: 10px;
  line-height: 1;
  font-weight: var(--weight-black);
  border: 2px solid white;
  box-shadow: 0 2px 5px rgba(190, 18, 18, 0.4);
}

.notification-badge.empty {
  display: none;
}

.admin-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 6px 8px;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.admin-profile:hover,
.admin-profile.active {
  background: #f7f9fc;
}

.admin-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--navy);
  font-weight: var(--weight-black);
  border: 2px solid #eef2f7;
}

.admin-profile strong {
  display: block;
  font-size: var(--text-md);
}

.admin-profile span {
  color: var(--muted);
  font-size: var(--text-sm);
}

.admin-chevron {
  margin-left: auto;
}

.topbar-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: -8px;
  z-index: 80;
  min-width: 330px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.16);
  padding: 10px;
}

.topbar-panel::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 20px;
  width: 12px;
  height: 12px;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  background: white;
  transform: rotate(45deg);
}

.topbar-panel[hidden] {
  display: none;
}

.topbar-panel.open {
  display: block;
}

.topbar-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}

.topbar-panel-head strong {
  color: #172033;
  font-size: 14px;
}

.topbar-panel-head button,
.profile-panel button,
.notification-row {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.topbar-panel-head button {
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}

.notification-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border-radius: 8px;
  padding: 10px 8px;
  text-align: left;
}

.notification-row[hidden] {
  display: none;
}

.notification-row:hover,
.profile-panel button:hover {
  background: #f7f9fc;
}

.notification-row strong,
.notification-row em,
.notification-row small {
  display: block;
}

.notification-row strong {
  color: #172033;
  font-size: 13px;
}

.notification-row em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.notification-row small {
  margin-top: 7px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
}

.notifications-empty {
  margin: 4px 0 0;
  border-radius: 8px;
  background: #f7f9fc;
  color: var(--muted);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  padding: 12px;
  text-align: center;
}

.notifications-empty[hidden] {
  display: none;
}

.event-dot.danger {
  background: var(--red);
}

.profile-panel {
  min-width: 250px;
}

.profile-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 6px;
  padding: 4px 4px 12px;
}

.profile-panel-head strong,
.profile-panel-head span {
  display: block;
}

.profile-panel-head strong {
  color: #172033;
  font-size: 14px;
}

.profile-panel-head span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.demo-share-box {
  display: grid;
  gap: 7px;
  border: 1px solid var(--action-border);
  border-radius: 8px;
  background: #f8fbff;
  margin: 0 0 8px;
  padding: 9px;
}

.demo-share-box span {
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.demo-share-box strong {
  color: #172033;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.demo-share-box div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.demo-share-box button {
  min-width: 0;
}

.profile-panel button {
  width: 100%;
  border-radius: 8px;
  color: #334155;
  padding: 10px 12px;
  text-align: left;
  font-size: 13px;
  font-weight: 800;
}

.profile-panel .demo-share-box button {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d6e2ef;
  border-radius: 7px;
  background: white;
  color: var(--action-dark);
  padding: 6px 8px;
  text-align: center;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-panel .demo-share-box button:hover {
  border-color: var(--action-dark);
  background: var(--action-dark);
  color: white;
}

.logout-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  /* Opaque branded backdrop fully hides the app behind the login screen. */
  background:
    radial-gradient(1200px 680px at 12% -12%, rgba(74, 134, 214, 0.55), transparent 58%),
    radial-gradient(1000px 680px at 112% 118%, rgba(28, 70, 132, 0.6), transparent 55%),
    linear-gradient(140deg, #0b1f3a 0%, #102a4c 48%, #0a1730 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.logout-overlay[hidden] {
  display: none;
}

/* Soft vignette so the card reads as the focal point. */
.logout-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(720px 520px at 50% 42%, transparent 38%, rgba(4, 12, 26, 0.45) 100%);
}

.logout-card {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 44px 120px rgba(2, 10, 26, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  padding: 36px 34px 30px;
  text-align: center;
  animation: crm-login-card-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes crm-login-card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.logout-mark {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(140deg, #3a78cf 0%, #1b2c4d 100%);
  color: white;
  font-size: 18px;
  letter-spacing: 0.06em;
  font-weight: var(--weight-black);
  box-shadow: 0 14px 30px rgba(22, 58, 120, 0.45);
  margin: 0 auto 18px;
}

.logout-card h2 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 22px;
  font-weight: var(--weight-black);
  letter-spacing: -0.01em;
}

.logout-card p {
  margin: 0 auto 22px;
  max-width: 340px;
  color: var(--muted);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1.55;
}

.logout-card .primary {
  min-width: 210px;
}

.password-change-overlay {
  z-index: 230;
}

.password-change-card {
  text-align: center;
}

.password-change-card .login-form {
  margin-top: 4px;
}

.demo-data-overlay {
  position: fixed;
  inset: 0;
  z-index: 205;
  display: grid;
  place-items: center;
  background: rgba(10, 29, 49, 0.64);
  padding: 20px;
}

.demo-data-overlay[hidden] {
  display: none;
}

.demo-data-card {
  width: min(540px, 100%);
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  background: white;
  box-shadow: 0 26px 70px rgba(2, 12, 27, 0.24);
  padding: 28px;
  text-align: center;
}

.demo-data-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: white;
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.demo-data-close:hover {
  border-color: var(--action-border);
  background: var(--action-soft);
  color: var(--action-dark);
}

.demo-data-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--semantic-red-soft);
  color: var(--semantic-red);
  margin: 0 auto 14px;
}

.demo-data-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.demo-data-card h2 {
  margin: 0 34px 8px;
  color: var(--text);
  font-size: var(--text-2xl);
}

.demo-data-card p {
  max-width: 430px;
  margin: 0 auto 18px;
  color: var(--muted);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: 1.55;
}

.demo-data-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}

.demo-data-counts span {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fbfdff;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
}

.demo-data-counts strong {
  color: var(--action-dark);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
}

.demo-data-counts em {
  color: var(--muted);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: var(--weight-bold);
}

.demo-data-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.demo-data-actions button {
  min-width: 132px;
}

.danger-soft {
  min-height: 40px;
  border: 1px solid var(--semantic-red-border);
  border-radius: 8px;
  background: var(--semantic-red-soft);
  color: var(--semantic-red);
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.danger-soft:hover {
  background: var(--semantic-red);
  border-color: var(--semantic-red);
  color: white;
}

.login-form {
  display: grid;
  gap: 12px;
  text-align: left;
}

.login-form label {
  display: grid;
  gap: 6px;
  color: #5a6b84;
  font-size: 11px;
  font-weight: var(--weight-black);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.login-form input {
  min-height: 46px;
  border: 1px solid #d8e2ef;
  border-radius: 10px;
  padding: 0 14px;
  background: #f8fbff;
  color: var(--text);
  font: inherit;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.login-form input:focus {
  outline: none;
  border-color: var(--action-dark);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(47, 111, 199, 0.16);
}

.login-form small {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid #eef2f8;
  color: #8492a6;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}

.login-form .primary,
.login-form .secondary {
  width: 100%;
  min-height: 46px;
  justify-content: center;
  border-radius: 10px;
  font-weight: var(--weight-bold);
}

.login-form .primary {
  margin-top: 2px;
  box-shadow: 0 10px 24px rgba(31, 76, 138, 0.28);
}

.login-form .secondary {
  background: transparent;
}

.login-error {
  margin: 0;
  border: 1px solid #f0b9bd;
  border-radius: 8px;
  background: #fff0f1;
  color: #d63042;
  padding: 8px 10px;
  text-align: center;
  font-size: 12px;
  font-weight: var(--weight-bold);
}

.login-error[hidden] {
  display: none;
}

.settings-screen {
  display: grid;
  grid-template-columns: var(--main-side-grid);
  gap: 18px;
}

.settings-summary-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.settings-summary-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 92px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.settings-summary-card:hover {
  border-color: #c8d8eb;
  background: #fbfdff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.settings-summary-card.active {
  border-color: #b8d3f4;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: inset 3px 0 0 var(--action-dark);
}

.settings-summary-card:active {
  transform: translateY(1px);
}

.settings-summary-card > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--action-dark);
}

.settings-summary-card strong,
.settings-summary-card em {
  display: block;
}

.settings-summary-card strong {
  color: var(--text);
  font-size: var(--text-xl);
  line-height: 1.1;
}

.settings-summary-card em {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.settings-summary-readiness strong {
  color: var(--action-dark);
}

.settings-summary-readiness {
  grid-template-columns: 42px minmax(0, 1fr) 10px;
}

.settings-summary-readiness.tone-green > span {
  background: #eafaf1;
  color: #059669;
}

.settings-summary-readiness.tone-green strong {
  color: #047857;
}

.settings-summary-readiness.tone-amber > span {
  background: #fff7e6;
  color: #d97706;
}

.settings-summary-readiness.tone-amber strong {
  color: #b45309;
}

.settings-summary-readiness.tone-red > span {
  background: #fff1f2;
  color: #dc2626;
}

.settings-summary-readiness.tone-red strong {
  color: #b91c1c;
}

.settings-summary-readiness::after {
  content: "";
  justify-self: end;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--action-dark);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.settings-summary-readiness[aria-expanded="true"]::after {
  transform: rotate(225deg);
}

@media (min-width: 1024px) {
  body #settings .settings-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
  }

  body #settings .settings-summary-card {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 74px;
    gap: 8px;
    padding: 10px;
  }

  body #settings .settings-summary-readiness {
    grid-template-columns: 34px minmax(0, 1fr) 8px;
  }

  body #settings .settings-summary-card > span {
    width: 34px;
    height: 34px;
  }

  body #settings .settings-summary-card strong {
    overflow: hidden;
    font-size: 20px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body #settings .settings-summary-card em {
    overflow: hidden;
    margin-top: 3px;
    font-size: 10.5px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.settings-readiness-card,
.settings-profile-card,
.settings-users-card,
.settings-integrations-card,
.settings-notifications-card,
.settings-audit-card {
  min-width: 0;
}

.settings-readiness-card,
.settings-profile-card {
  grid-column: 1 / -1;
}

.settings-readiness-details {
  min-width: 0;
}

.settings-readiness-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: pointer;
}

.settings-readiness-summary::-webkit-details-marker {
  display: none;
}

.settings-readiness-summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--action-dark);
  border-bottom: 2px solid var(--action-dark);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.settings-readiness-details[open] .settings-readiness-summary::after {
  transform: rotate(225deg);
}

.settings-readiness-summary h2 {
  margin: 0 0 5px;
}

.settings-readiness-summary p {
  margin: 0;
  max-width: 640px;
  line-height: 1.45;
}

.settings-readiness-body {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.settings-readiness-total {
  min-width: 150px;
  border: 1px solid #dce8f5;
  border-radius: 10px;
  background: #f8fbff;
  padding: 12px 14px;
  text-align: center;
}

.settings-readiness-total strong,
.settings-readiness-total span {
  display: block;
}

.settings-readiness-total strong {
  color: var(--action-dark);
  font-size: 28px;
  line-height: 1;
}

.settings-readiness-total span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.settings-readiness-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.settings-readiness-item {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfe;
  padding: 14px;
}

.settings-readiness-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.settings-readiness-item-head strong {
  color: var(--text);
  font-size: var(--text-base);
}

.settings-readiness-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9eef6;
}

.settings-readiness-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--action-dark);
}

.settings-readiness-item.tone-green .settings-readiness-bar span {
  background: #059669;
}

.settings-readiness-item.tone-amber .settings-readiness-bar span {
  background: #d97706;
}

.settings-readiness-item.tone-red .settings-readiness-bar span {
  background: #dc2626;
}

.settings-readiness-item em,
.settings-readiness-item p,
.settings-readiness-item small {
  margin: 0;
}

.settings-readiness-item em {
  color: var(--action-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.settings-readiness-item p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.settings-readiness-item small {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.settings-readiness-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #fde68a;
  border-radius: 10px;
  background: #fffbeb;
  padding: 12px 14px;
}

.settings-readiness-next strong {
  color: #92400e;
}

.settings-readiness-next span {
  color: #78350f;
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

.settings-pilot-checklist {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #f8fbff;
  padding: 14px;
}

.settings-pilot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-pilot-head strong {
  color: var(--text);
  font-size: var(--text-base);
}

.settings-pilot-head span {
  color: var(--action-dark);
  font-size: 12px;
  font-weight: 900;
}

.settings-pilot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-pilot-grid article {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.settings-pilot-grid article.is-done {
  border-color: #bbf7d0;
  background: #f7fef9;
}

.settings-pilot-grid article.needs-work {
  border-color: #fde68a;
  background: #fffdf4;
}

.settings-pilot-grid article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.settings-pilot-grid strong {
  color: var(--text);
  font-size: 14px;
}

.settings-pilot-grid em,
.settings-pilot-grid p,
.settings-pilot-grid small {
  margin: 0;
}

.settings-pilot-grid em {
  color: var(--action-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.settings-pilot-grid p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.settings-pilot-grid small {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

[data-settings-section] {
  scroll-margin-top: 18px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

[data-settings-section].is-focused {
  border-color: rgba(37, 99, 235, 0.35);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08), var(--shadow);
}

.settings-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.settings-section-head h2 {
  margin: 0 0 5px;
}

.settings-section-head p {
  margin: 0;
  max-width: 640px;
  line-height: 1.45;
}

.settings-section-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.settings-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.settings-form-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.settings-profile-save {
  border-color: #dbe6f2;
  background: #ffffff;
  color: var(--action-dark);
  font-weight: 900;
}

.settings-profile-save:hover {
  border-color: #bfd2e8;
  background: #eef6ff;
}

.settings-profile-layout {
  display: grid;
  grid-template-columns: minmax(180px, 216px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.settings-bureau-logo-card {
  display: grid;
  grid-template-rows: minmax(148px, 1fr) auto;
  gap: 10px;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  background: #fbfdff;
  padding: 10px;
}

.settings-bureau-logo-preview {
  min-height: 148px;
  display: grid;
  place-items: center;
  border: 1px solid #dbe8f6;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
  color: var(--action-dark);
  overflow: hidden;
}

.settings-bureau-logo-preview span {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--action-dark);
  color: #ffffff;
  font-size: 24px;
  font-weight: 950;
}

.settings-bureau-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.settings-logo-source,
.settings-social-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.settings-profile-fields {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.settings-bureau-main-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.settings-profile-card input {
  height: 34px;
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.25;
}

.settings-profile-card .settings-form-grid label,
.settings-profile-card .settings-logo-source,
.settings-profile-card .settings-social-grid label {
  gap: 5px;
  font-size: 12px;
}

.settings-wide-field {
  grid-column: span 2;
}

.settings-social-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid #e3ebf4;
  border-radius: 8px;
  background: #fbfdff;
  padding: 10px;
}

.settings-social-grid span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #3b4b63;
  font-weight: 900;
}

.settings-field-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #3b4b63;
  font-weight: 900;
  font-size: 12px;
}

.settings-field-title .ui-icon {
  width: 15px;
  height: 15px;
}

.settings-brand-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 6px;
  color: currentColor;
}

.settings-brand-icon svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.settings-brand-icon.phone {
  color: #1f4e79;
}

.settings-brand-icon.telegram {
  color: #229ed9;
}

.settings-brand-icon.whatsapp {
  color: #25d366;
}

.settings-brand-icon.instagram {
  color: #e1306c;
}

.settings-brand-icon.facebook {
  color: #1877f2;
}

.settings-brand-icon.tiktok {
  color: #111827;
}

.settings-brand-icon.website {
  color: #0f766e;
}

.settings-logo-actions {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.settings-logo-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
  border-color: #cfe0f3;
  background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
  color: var(--blue);
  box-shadow: 0 6px 14px rgba(31, 78, 121, 0.1);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.settings-logo-upload.secondary {
  min-height: 34px;
  padding: 0;
}

.settings-logo-upload:hover {
  border-color: #9fc2e7;
  background: #e9f4ff;
}

.settings-logo-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.settings-logo-upload .ui-icon {
  width: 17px;
  height: 17px;
}

.settings-invite-action {
  min-width: 178px;
  border-color: #174b78;
  background: var(--action-dark);
  color: #ffffff;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(31, 94, 150, 0.16);
}

.settings-invite-action:hover {
  border-color: #103f6c;
  background: #174b78;
}

.settings-users-list,
.settings-toggle-list {
  display: grid;
  gap: 10px;
}

.settings-user-row,
.settings-toggle-row {
  display: grid;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  padding: 12px;
}

.settings-user-row {
  grid-template-columns: minmax(190px, 0.78fr) minmax(0, 1.5fr) auto;
  align-items: stretch;
  gap: 14px;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.settings-user-row:hover {
  border-color: var(--action-border);
  box-shadow: 0 12px 28px rgba(20, 55, 90, .08);
}

.settings-user-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.settings-user-avatar {
  width: 48px;
  height: 48px;
  border: 1px solid #dce9f7;
  background: #eff6ff;
  color: var(--action-dark);
  font-size: 14px;
  font-weight: 950;
  overflow: hidden;
}

.settings-user-avatar.has-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.settings-user-row strong,
.settings-user-row span,
.settings-user-row em {
  display: block;
}

.settings-user-row strong {
  color: #172033;
}

.settings-user-main,
.settings-user-access,
.settings-user-scope {
  min-width: 0;
}

.settings-user-main {
  display: grid;
  gap: 2px;
}

.settings-user-main strong {
  font-size: 14px;
  line-height: 1.25;
}

.settings-user-main em {
  color: var(--action-dark);
  font-weight: 900;
}

.settings-user-details {
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: center;
}

.settings-user-data-grid {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) minmax(92px, .65fr) minmax(105px, .65fr);
  gap: 8px;
}

.settings-user-data-grid span {
  min-width: 0;
  border: 1px solid #e1ebf5;
  border-radius: 8px;
  background: #f8fbff;
  padding: 7px 9px;
}

.settings-user-data-grid small {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.settings-user-data-grid b {
  display: block;
  overflow: hidden;
  color: #172033;
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-user-case-preview {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-user-permissions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.settings-user-permission-icon {
  position: relative;
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #dbe8f6;
  border-radius: 50%;
  background: #f8fbff;
  color: var(--action-dark);
  outline: none;
  padding: 0;
  line-height: 0;
}

.settings-user-permission-icon .ui-icon {
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
}

.settings-user-permission-icon::after,
.settings-access-status::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  z-index: 40;
  width: max-content;
  max-width: 180px;
  transform: translateX(-50%) translateY(4px);
  border: 1px solid rgba(32, 76, 120, .14);
  border-radius: 7px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 22px rgba(22, 48, 76, .12);
  color: var(--text);
  padding: 5px 7px;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}

.settings-user-permission-icon::before,
.settings-access-status::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  z-index: 41;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid rgba(32, 76, 120, .14);
  border-bottom: 1px solid rgba(32, 76, 120, .14);
  background: rgba(255, 255, 255, .96);
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
}

.settings-user-permission-icon:hover::after,
.settings-user-permission-icon:focus-visible::after,
.settings-access-status:hover::after,
.settings-access-status:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.settings-user-permission-icon:hover::before,
.settings-user-permission-icon:focus-visible::before,
.settings-access-status:hover::before,
.settings-access-status:focus-visible::before {
  opacity: 1;
}

.settings-user-permission-icon.blue {
  border-color: #b9d7f4;
  background: #edf6ff;
  color: var(--action-dark);
}

.settings-user-permission-icon.green {
  border-color: var(--semantic-green-border);
  background: var(--semantic-green-soft);
  color: var(--semantic-green);
}

.settings-user-permission-icon.amber {
  border-color: var(--semantic-amber-border);
  background: var(--semantic-amber-soft);
  color: var(--semantic-amber);
}

.settings-user-permission-icon.violet {
  border-color: #d8c6ff;
  background: #f3eeff;
  color: #6d4acb;
}

.settings-user-permission-icon.red {
  border-color: var(--semantic-red-border);
  background: var(--semantic-red-soft);
  color: var(--semantic-red);
}

.settings-user-permission-icon.more-chip {
  background: #edf4fc;
}

.settings-user-permission-icon.muted-chip {
  color: var(--muted);
}

.settings-user-access b {
  display: block;
  color: var(--action-dark);
  font-size: 13px;
  line-height: 1.25;
}

.settings-user-scope {
  display: grid;
  gap: 4px;
  justify-items: start;
}

.settings-user-scope span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  border: 1px solid #dbe8f6;
  border-radius: 999px;
  background: #f8fbff;
  color: var(--action-dark);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 900;
}

.settings-user-scope .ui-icon {
  width: 14px;
  height: 14px;
}

.settings-user-scope small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.settings-access-status {
  position: relative;
  width: 30px;
  height: 30px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  padding: 0;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.settings-access-status .ui-icon {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
}

.settings-access-status.green {
  border-color: var(--semantic-green-border);
  background: var(--semantic-green-soft);
  color: var(--semantic-green);
}

.settings-access-status.amber {
  border-color: var(--semantic-amber-border);
  background: var(--semantic-amber-soft);
  color: var(--semantic-amber);
}

.settings-access-status.blue {
  border-color: var(--action-border);
  background: var(--action-soft);
  color: var(--action-dark);
}

.settings-user-row span,
.settings-user-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.settings-user-row .settings-user-permission-icon {
  display: inline-grid;
}

.settings-user-row .settings-access-status {
  display: inline-flex;
}

.settings-toggle-row {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  cursor: pointer;
}

.settings-toggle-row > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--blue);
}

.settings-toggle-row strong {
  color: #172033;
  font-size: 14px;
}

.settings-toggle-row em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.settings-toggle-row small {
  display: block;
  margin-top: 6px;
  color: var(--action-dark);
  font-size: 11px;
  font-weight: 900;
}

.settings-toggle-row input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--blue);
}

.settings-integration-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.035);
  padding: 14px;
}

.settings-integration-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.settings-integration-corner {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.settings-integration-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eaf2fb;
  color: var(--blue);
}

.settings-integration-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.settings-integration-copy strong,
.settings-integration-copy em {
  display: block;
}

.settings-integration-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.settings-integration-copy strong {
  color: #172033;
  font-size: 14px;
}

.settings-integration-copy em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.settings-integration-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.settings-integration-meta > span {
  border-radius: 8px;
  background: #eef4fb;
  color: #3b4b63;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  padding: 6px 8px;
}

.settings-integration-config-button {
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  background: #fff;
  color: var(--action-dark);
  cursor: pointer;
  padding: 0;
}

.settings-integration-config-button:hover {
  background: #dfeaf6;
  border-color: #bfd2e8;
}

.settings-integration-config-button.needs-config::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  border: 1px solid #ffffff;
  border-radius: 999px;
  background: #f6b64b;
  box-shadow: 0 0 0 1px rgba(246, 182, 75, 0.22);
}

.settings-integration-config-button .ui-icon {
  width: 14px;
  height: 14px;
}

.settings-integration-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  border-top: 1px solid #e7edf5;
  padding-top: 10px;
}

.settings-integration-control.has-test {
  justify-content: space-between;
}

.settings-integration-control .compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  min-height: 32px;
  border-radius: 8px;
  padding: 0 12px;
  color: var(--action-dark);
  text-align: center;
  white-space: nowrap;
}

.settings-audit-empty {
  color: var(--muted);
}

.crm-modal-grid,
.settings-integration-config-grid {
  display: grid;
  gap: 10px;
}

.crm-modal-form,
.settings-integration-config-form {
  width: min(520px, calc(100vw - 32px));
  margin-inline: auto;
}

.modal-head.crm-modal-head,
.modal-head.settings-integration-config-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: start;
  justify-content: stretch;
  gap: 0;
  border-bottom: 1px solid #e7edf5;
  padding-bottom: 13px;
}

.crm-modal-title,
.settings-integration-config-title {
  grid-column: 2;
  justify-self: center;
  width: min(100%, 430px);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  min-width: 0;
}

.crm-modal-title-icon,
.crm-modal-close,
.settings-integration-config-title-icon,
.settings-modal-close {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
}

.crm-modal-title-icon,
.settings-integration-config-title-icon {
  background: #eaf2fb;
  color: var(--action-dark);
}

.crm-modal-title-icon .ui-icon,
.settings-integration-config-title-icon .ui-icon {
  width: 17px;
  height: 17px;
}

.crm-modal-title h2,
.settings-integration-config-title h2 {
  line-height: 1.2;
}

.crm-modal-title p,
.settings-integration-config-title p {
  margin: 5px 0 0;
  line-height: 1.38;
}

.crm-modal-close,
.settings-modal-close {
  grid-column: 3;
  justify-self: end;
  flex: 0 0 auto;
  border: 1px solid #dbe6f2;
  background: #ffffff;
  color: var(--action-dark);
  cursor: pointer;
  padding: 0;
}

.crm-modal-close:hover,
.settings-modal-close:hover {
  background: #eef6ff;
  border-color: #bfd2e8;
}

.crm-modal-close .ui-icon,
.settings-modal-close .ui-icon {
  width: 16px;
  height: 16px;
}

.crm-modal-status,
.settings-integration-config-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  border: 1px solid #dce7f3;
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfdff 0%, #f5f8fc 100%);
  padding: 14px;
}

.crm-modal-status span,
.settings-integration-config-status span {
  justify-self: start;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  padding: 5px 9px;
}

.crm-modal-status span.ready,
.settings-integration-config-status span.ready {
  background: #dcfce7;
  color: #047857;
}

.crm-modal-status span.setup,
.settings-integration-config-status span.setup {
  background: #fff4db;
  color: #9a6700;
}

.crm-modal-status span.disabled,
.settings-integration-config-status span.disabled {
  background: #fee2e2;
  color: #b91c1c;
}

.crm-modal-status strong,
.settings-integration-config-status strong {
  justify-self: end;
  color: #172033;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
  white-space: nowrap;
}

.crm-modal-status em,
.settings-integration-config-status em {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
  padding-top: 2px;
}

.crm-modal-field,
.settings-integration-config-field {
  border: 1px solid #e0e8f2;
  border-radius: 8px;
  background: #ffffff;
  padding: 11px;
}

.crm-modal-field.required,
.settings-integration-config-field.required {
  border-color: #d6e3f2;
  background: #fbfdff;
}

.crm-modal-field input,
.crm-modal-field select,
.crm-modal-field textarea,
.settings-integration-config-field input {
  min-height: 38px;
  border-color: #d9e3ef;
  background: #ffffff;
}

.crm-modal-field input:focus,
.crm-modal-field select:focus,
.crm-modal-field textarea:focus,
.settings-integration-config-field input:focus {
  border-color: #8bbcf4;
  box-shadow: 0 0 0 3px rgba(43, 126, 204, 0.12);
  outline: none;
}

.settings-password-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.settings-password-field-label {
  color: var(--muted);
}

.settings-password-input-row {
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 6px;
  border: 1px solid #d9e3ef;
  border-radius: 8px;
  background: #ffffff;
  padding: 3px;
}

.settings-password-input-row:focus-within {
  border-color: #8bbcf4;
  box-shadow: 0 0 0 3px rgba(43, 126, 204, 0.12);
}

.settings-password-input-row input {
  min-height: 30px;
  border: 0;
  background: transparent;
  padding: 0 8px;
}

.settings-password-input-row input:focus {
  box-shadow: none;
}

.settings-password-generate {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: #edf4fb;
  color: var(--action-dark);
  cursor: pointer;
  padding: 0;
}

.settings-password-generate:hover,
.settings-password-generate:focus-visible {
  background: #dceeff;
  outline: none;
}

.settings-password-generate .ui-icon {
  width: 15px;
  height: 15px;
}

.settings-custom-select-field {
  position: relative;
  overflow: visible;
}

.settings-custom-select-field:has(.settings-custom-select.is-open) {
  z-index: 90;
}

.settings-custom-select-field select[data-settings-custom-select-source] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.settings-custom-select {
  position: relative;
  z-index: 4;
  margin-top: 6px;
}

.settings-custom-select.is-open {
  z-index: 100;
}

.settings-custom-select-trigger {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #d9e3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #172033;
  padding: 0 11px;
  text-align: left;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.settings-custom-select-trigger:hover,
.settings-custom-select.is-open .settings-custom-select-trigger {
  border-color: #9bc6f4;
  background: #f8fbff;
  box-shadow: 0 0 0 3px rgba(43, 126, 204, 0.1);
}

.settings-custom-select-trigger [data-settings-custom-select-value] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-custom-select-arrow {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #edf4fb;
  color: var(--action-dark);
  line-height: 1;
  transition: transform 0.16s ease;
}

.settings-custom-select-arrow svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-custom-select.is-open .settings-custom-select-arrow {
  transform: rotate(180deg);
}

.settings-custom-select-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 110;
  display: grid;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid #cfddea;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(31, 41, 55, 0.18);
  padding: 6px;
}

.settings-custom-select-menu[hidden] {
  display: none;
}

.settings-custom-select-option {
  min-height: 36px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #253348;
  padding: 7px 9px;
  text-align: left;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.settings-custom-select-option .ui-icon {
  width: 17px;
  height: 17px;
  color: transparent;
}

.settings-custom-select-option:hover {
  background: #eef6ff;
  color: var(--action-dark);
}

.settings-custom-select-option.is-selected {
  background: #dceeff;
  color: #174b78;
}

.settings-custom-select-option.is-selected .ui-icon {
  color: #174b78;
}

.crm-modal-actions,
.settings-integration-config-actions {
  display: flex;
  justify-content: center;
  border-top: 1px solid #e7edf5;
  padding-top: 13px;
}

.crm-modal-actions .primary,
.settings-integration-config-actions .primary {
  min-width: min(100%, 230px);
}

.settings-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.settings-field-label em {
  border-radius: 999px;
  background: #eef4fb;
  color: var(--action-dark);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  padding: 4px 7px;
}

.settings-switch {
  position: relative;
  display: inline-flex;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
  cursor: pointer;
}

.settings-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.settings-switch span {
  position: relative;
  width: 42px;
  height: 24px;
  border: 1px solid #cbd8e8;
  border-radius: 999px;
  background: #e7edf5;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.settings-switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  transition: transform 0.18s ease;
}

.settings-switch input:checked + span {
  border-color: var(--action-dark);
  background: var(--action-dark);
}

.settings-switch input:checked + span::after {
  transform: translateX(18px);
}

.settings-toggle-list.compact .settings-toggle-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.settings-audit-card {
  grid-column: 1 / -1;
}

.settings-audit-list {
  display: grid;
  gap: 10px;
}

.settings-audit-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  padding: 12px;
}

.settings-audit-list strong {
  color: var(--text);
  font-size: var(--text-base);
}

.settings-audit-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

input,
select,
textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--text);
  min-height: 40px;
  padding: 9px 12px;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

textarea {
  resize: vertical;
}

#global-search {
  width: min(420px, 38vw);
}

button {
  border-radius: 8px;
}

.primary,
.secondary,
.ghost,
.icon-button {
  min-height: 40px;
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.primary {
  background: var(--action-dark);
  color: white;
  border-color: var(--action-dark);
  padding: 0 14px;
  font-weight: var(--weight-semibold);
}

.primary:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
  box-shadow: 0 8px 18px var(--action-shadow);
}

.secondary {
  background: white;
  color: var(--text);
  padding: 0 13px;
}

.secondary.active {
  color: white;
  border-color: var(--action-dark);
  background: var(--action-dark);
}

.secondary.danger {
  color: var(--red);
}

.secondary.danger:hover {
  border-color: #ffd0d0;
  background: #fff0f0;
}

.secondary.outline-blue {
  border-color: var(--action-dark);
  color: var(--action-dark);
  font-weight: var(--weight-semibold);
}

.secondary.outline-blue:hover {
  background: var(--action-hover);
  color: white;
}

.ghost {
  background: transparent;
  color: var(--muted);
  padding: 0 12px;
}

.ghost:hover {
  background: var(--action-soft);
  color: var(--action-dark);
}

.icon-button {
  width: 40px;
  background: white;
  color: var(--action-dark);
  font-weight: var(--weight-bold);
  padding: 0;
}

.icon-button:hover {
  border-color: var(--action-hover);
  background: var(--action-hover);
  color: white;
}

.view {
  display: none;
  padding: 24px 28px 44px;
}

.view.active {
  display: block;
  animation: view-enter 0.18s ease both;
}

#cases.view {
  padding: 16px 16px 30px;
  overflow-x: auto;
}

@keyframes view-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .view.active {
    animation: none;
  }
}

.grid {
  display: grid;
  gap: 16px;
}

.grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.layout {
  display: grid;
  grid-template-columns: var(--main-side-grid);
  gap: 16px;
}

.layout > *,
.clients-layout > *,
.case-list-layout > *,
.calendar-layout > *,
.mailing-layout > *,
.settings-screen > *,
.tasks-workspace > *,
.tasks-bottom-grid > * {
  min-width: 0;
}

.panel,
.card,
.metric {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.panel {
  padding: 18px;
}

.metric {
  padding: 18px;
}

.metric strong {
  display: block;
  font-size: var(--text-3xl);
  line-height: 1;
  margin-top: 8px;
}

.metric span,
.muted {
  color: var(--muted);
}

.dashboard-screen {
  display: grid;
  gap: 14px;
}

.dashboard-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
}

.dashboard-hero-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.dashboard-hero-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.3);
}

.dashboard-hero span {
  display: block;
  color: var(--action-dark);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.dashboard-hero h2 {
  max-width: 660px;
  margin: 4px 0;
  color: var(--text);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}

.dashboard-hero p,
.dashboard-card-head p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.dashboard-actions button,
.dashboard-card-head button,
.dashboard-finance-card .full,
.dashboard-card .full {
  min-height: 36px;
  padding-inline: 14px;
}

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-kpi-card {
  position: relative;
  min-height: 124px;
  width: 100%;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow: hidden;
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 15px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.dashboard-kpi-card:hover,
.dashboard-kpi-card:focus-visible {
  border-color: #bdd6ee;
  box-shadow: 0 12px 24px rgba(15, 50, 87, 0.09);
  transform: translateY(-1px);
}

.dashboard-kpi-card:active {
  transform: translateY(0);
}

.dashboard-kpi-card span,
.dashboard-mini-grid span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.dashboard-kpi-card strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1.05;
}

.dashboard-kpi-card em {
  color: var(--green);
  font-style: normal;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.dashboard-kpi-card em.down {
  color: var(--red);
}

.dashboard-kpi-card small {
  max-width: 72%;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.3;
}

.dashboard-kpi-card > i {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
}

.dashboard-kpi-card > i .ui-icon {
  width: 21px;
  height: 21px;
}

.dashboard-kpi-card > i.blue {
  background: #eaf2ff;
  color: #1f7ae0;
}

.dashboard-kpi-card > i.green {
  background: #e8f7ef;
  color: #1b9b69;
}

.dashboard-kpi-card > i.violet {
  background: #efecff;
  color: #6d5bd0;
}

.dashboard-kpi-card > i.amber {
  background: #fff4db;
  color: #b7791f;
}

.dashboard-kpi-card > i.red {
  background: #feecec;
  color: #d64545;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(280px, 1fr);
  gap: 14px;
  align-items: start;
}

.dashboard-main,
.dashboard-side {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.dashboard-card {
  min-width: 0;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.dashboard-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-card-head h2 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.dashboard-card-head .dashboard-percent {
  color: var(--action-dark);
  font-size: var(--text-2xl);
  white-space: nowrap;
}

.dashboard-list {
  display: grid;
}

.dashboard-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 12px 0;
  text-align: left;
}

.dashboard-list .dashboard-row:last-child {
  border-bottom: 0;
}

.dashboard-row-button {
  width: 100%;
  color: inherit;
  cursor: pointer;
}

.dashboard-row-button:hover strong,
.dashboard-row-button:hover i {
  color: var(--action-dark);
}

.dashboard-row i {
  color: var(--action-dark);
  font-style: normal;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.dashboard-row span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dashboard-row strong {
  min-width: 0;
  color: var(--text);
  font-size: var(--text-base);
  line-height: var(--leading-tight);
}

.dashboard-row small {
  min-width: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.dashboard-row b {
  color: var(--text);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.dashboard-status-icon {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-grid !important;
  place-items: center;
  justify-self: end;
  border: 1px solid var(--dashboard-status-border, var(--semantic-blue-border));
  border-radius: 999px;
  background: var(--dashboard-status-bg, var(--semantic-blue-soft));
  color: var(--dashboard-status-color, var(--semantic-blue));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  line-height: 0;
}

.dashboard-status-icon .ui-icon {
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dashboard-status-icon .ui-icon svg {
  /* Force a square 12x12 — percentage height was resolving to 16px and the svg
     spilled below the circle (overflow is visible), pushing the icon off-center. */
  width: 12px !important;
  height: 12px !important;
  display: block;
}

.dashboard-status-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  z-index: 60;
  width: max-content;
  max-width: 180px;
  transform: translate(-50%, -4px);
  border: 1px solid #dbe8f6;
  border-radius: 7px;
  background: #fff;
  color: #334155;
  padding: 5px 7px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease 0.28s, transform 0.16s ease 0.28s;
}

.dashboard-status-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  z-index: 61;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -4px) rotate(45deg);
  border-left: 1px solid #dbe8f6;
  border-top: 1px solid #dbe8f6;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease 0.28s, transform 0.16s ease 0.28s;
}

.dashboard-status-icon:hover::after,
.dashboard-status-icon:focus-visible::after,
.dashboard-status-icon:hover::before,
.dashboard-status-icon:focus-visible::before {
  opacity: 1;
}

.dashboard-status-icon:hover::after,
.dashboard-status-icon:focus-visible::after {
  transform: translate(-50%, 0);
}

.dashboard-status-icon:hover::before,
.dashboard-status-icon:focus-visible::before {
  transform: translate(-50%, 0) rotate(45deg);
}

.dashboard-status-icon.green {
  --dashboard-status-bg: #ecfdf3;
  --dashboard-status-border: #b8e7cb;
  --dashboard-status-color: #13804f;
}

.dashboard-status-icon.amber {
  --dashboard-status-bg: #fff8d7;
  --dashboard-status-border: #edd96e;
  --dashboard-status-color: #8a6a00;
}

.dashboard-status-icon.red {
  --dashboard-status-bg: #ffe9eb;
  --dashboard-status-border: #ffc3ca;
  --dashboard-status-color: #d9293f;
}

.dashboard-status-icon.blue {
  --dashboard-status-bg: #eaf4ff;
  --dashboard-status-border: #a9cff7;
  --dashboard-status-color: #1f5f99;
}

.dashboard-list-compact .dashboard-row {
  grid-template-columns: 92px minmax(0, 1fr) auto;
}

.dashboard-side .dashboard-row,
.dashboard-side .dashboard-list-compact .dashboard-row {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
}

.dashboard-side .dashboard-row i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--action-soft);
  color: var(--action-dark);
}

.dashboard-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-mini-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-mini-grid div {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
}

.dashboard-mini-grid strong {
  color: var(--text);
  font-size: var(--text-lg);
}

.dashboard-mini-grid .danger {
  border-color: var(--semantic-red-border);
  background: var(--semantic-red-soft);
}

.dashboard-mini-grid .danger strong {
  color: var(--semantic-red);
}

.dashboard-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7edf5;
}

.dashboard-progress span {
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--action-dark), #27ae6f);
}

.dashboard-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-quick-button {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  line-height: 1.2;
  border: 1px solid var(--line);
  background: white;
  color: var(--action-dark);
  padding-inline: 12px;
}

.dashboard-quick-button:hover {
  border-color: var(--action-dark);
  background: var(--action-dark);
  color: white;
}

.dashboard-quick-button .ui-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.dashboard-empty {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.toolbar .left,
.toolbar .right {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.case-list-card .table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.clients-toolbar {
  margin-bottom: 18px;
}

.clients-toolbar #client-filter {
  width: 300px;
  border: 0;
  padding-left: 4px;
}

.clients-layout {
  display: grid;
  grid-template-columns: var(--main-side-grid);
  gap: 16px;
}

.clients-filter-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: -6px 0 16px;
  border: 1px solid #dce8f5;
  border-radius: 8px;
  background: #f8fbff;
  padding: 12px;
}

.clients-filter-panel[hidden] {
  display: none;
}

.clients-filter-panel label {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.clients-toolbar .left {
  align-items: center;
}

.clients-toolbar .search-control {
  min-width: min(340px, 34vw);
}

.clients-left {
  display: grid;
  gap: 16px;
}

.clients-side {
  display: grid;
  gap: 16px;
  align-content: start;
}

.clients-table-card {
  padding: 14px;
}

.clients-table {
  min-width: 920px;
  table-layout: fixed;
  font-size: 12px;
}

.clients-table th:first-child,
.clients-table td:first-child {
  width: 30px;
}

.clients-table th:nth-child(2),
.clients-table td:nth-child(2) {
  width: 190px;
}

.clients-table th:nth-child(2) {
  overflow: visible;
}

.clients-table th:nth-child(3),
.clients-table td:nth-child(3) {
  width: 128px;
}

.clients-table th:nth-child(4),
.clients-table td:nth-child(4) {
  width: 170px;
}

.clients-table th:nth-child(5),
.clients-table td:nth-child(5) {
  width: 210px;
}

.clients-table th:nth-child(6),
.clients-table td:nth-child(6) {
  width: 92px;
}

.clients-table th:nth-child(7),
.clients-table td:nth-child(7) {
  width: 88px;
}

.clients-table th:nth-child(8),
.clients-table td:nth-child(8) {
  width: 42px;
  text-align: right;
}

.clients-table th,
.clients-table td {
  padding: 9px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clients-table td.clients-row-actions {
  overflow: visible;
  padding-right: 4px;
}

.clients-table tbody tr:has([data-select-client-row]:checked) {
  background: #eef6ff;
  box-shadow: inset 3px 0 0 var(--action-dark);
}

.client-title-head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.client-title-label {
  white-space: nowrap;
}

.client-title-head:has(.clients-bulk-bar.active) .client-title-label {
  display: none;
}

.clients-bulk-bar.active {
  justify-self: start;
  gap: 3px;
  padding: 2px 3px;
}

.tasks-bulk-bar.clients-bulk-bar em {
  min-width: 18px;
  height: 18px;
  font-size: 10px;
}

.tasks-bulk-bar.clients-bulk-bar .task-bulk-icon {
  width: 18px;
  height: 18px;
  min-height: 18px;
}

.tasks-bulk-bar.clients-bulk-bar .task-bulk-icon .ui-icon {
  width: 9px;
  height: 9px;
}

.clients-row-actions .row-action-menu-wrap {
  justify-content: flex-end;
  opacity: 1;
  pointer-events: auto;
}

.client-name-cell a {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clients-table .badge {
  font-size: 11px;
  padding: 2px 6px;
  min-height: 20px;
}

.clients-table-card h2 {
  font-size: var(--text-lg);
  margin-bottom: 12px;
}

.documents-screen {
  display: grid;
  gap: 12px;
}

.documents-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}

.documents-toolbar h2 {
  margin: 0 0 4px;
  font-size: var(--text-xl);
}

.documents-toolbar p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.documents-toolbar-actions,
.documents-side-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.documents-side-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 9px;
}

.documents-action-button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border-color: #d2e4f7;
  background: #f3f8ff;
  color: var(--action-dark);
  justify-content: center;
  gap: 8px;
  padding-inline: 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

.documents-action-button:hover,
.documents-action-button:focus-visible {
  border-color: var(--action-dark);
  background: var(--action-dark);
  color: #fff;
}

.documents-action-button:hover .ui-icon,
.documents-action-button:focus-visible .ui-icon {
  color: #fff;
}

.documents-action-button:active {
  border-color: var(--action-dark);
  background: var(--action-dark);
  color: #fff;
  transform: translateY(1px);
}

.documents-action-button:active .ui-icon {
  color: #fff;
}

.documents-toolbar-actions .ui-icon,
.documents-side-actions .ui-icon {
  width: 14px;
  height: 14px;
}

.documents-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.documents-kpi-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 78px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.documents-kpi-card:hover,
.documents-kpi-card.active {
  border-color: rgba(24, 91, 146, 0.32);
  box-shadow: 0 12px 28px rgba(24, 91, 146, 0.08);
}

.documents-kpi-card:active {
  transform: translateY(1px);
}

.documents-kpi-card > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--action-soft);
  color: var(--blue);
}

.documents-kpi-card > span.green {
  background: #e3f8ed;
  color: var(--green);
}

.documents-kpi-card > span.red {
  background: #ffe9eb;
  color: var(--red);
}

.documents-kpi-card > span.amber {
  background: #fff4d8;
  color: var(--amber);
}

.documents-kpi-card > span.violet {
  background: #efecff;
  color: var(--violet);
}

.documents-kpi-grid .ui-icon {
  width: 18px;
  height: 18px;
}

.documents-kpi-grid strong,
.documents-kpi-grid em {
  display: block;
}

.documents-kpi-grid strong {
  color: #172033;
  font-size: 22px;
  line-height: 1;
}

.documents-kpi-grid em {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.documents-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(132px, 0.8fr)) minmax(130px, 0.7fr) 92px;
  align-items: end;
  gap: 10px;
  padding: 12px;
}

.documents-filter-field {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.documents-filter-search {
  min-width: 0;
}

.documents-esign-overview {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.25fr) minmax(220px, 0.75fr);
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-color: #d8e6f7;
  background: linear-gradient(135deg, #fbfdff 0%, #f6fbff 100%);
}

.documents-esign-title {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}

.documents-esign-title > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #cfe0f5;
  border-radius: 10px;
  background: #eef6ff;
  color: var(--action-dark);
}

.documents-esign-title .ui-icon {
  width: 19px;
  height: 19px;
}

.documents-esign-title h3 {
  margin: 0 0 4px;
  color: #172033;
  font-size: 15px;
  line-height: 1.2;
}

.documents-esign-title p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.documents-esign-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.documents-esign-steps span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbe8f6;
  border-radius: 8px;
  background: #fff;
  color: #5f6f85;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.documents-esign-steps span.active {
  border-color: #bcd6f2;
  background: #eaf4ff;
  color: var(--action-dark);
}

.documents-esign-provider {
  display: grid;
  justify-items: start;
  gap: 4px;
  border-left: 1px solid #dbe8f6;
  padding-left: 14px;
}

.documents-esign-provider strong {
  color: #172033;
  font-size: 13px;
}

.documents-esign-provider em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.documents-filters input,
.documents-filters button,
.documents-filter-select .document-custom-select-button {
  width: 100%;
  min-height: 38px;
  font-size: 13px;
}

.documents-filters input {
  box-sizing: border-box;
  border: 1px solid #d8e5f3;
  border-radius: 10px;
  outline: 0;
  background: #fbfdff;
  color: var(--text);
  padding: 0 13px;
  font-weight: 750;
}

.documents-filters input:hover,
.documents-filters input:focus {
  border-color: #8abdf3;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(53, 130, 220, .12);
}

.documents-filter-toggle {
  min-width: 0;
}

.documents-filter-toggle.active {
  border-color: var(--action-dark);
  background: var(--action-dark);
  color: #fff;
}

.documents-filter-toggle.active .ui-icon {
  color: #fff;
}

.documents-filter-reset:disabled {
  opacity: 0.55;
  cursor: default;
}

.documents-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.9fr) minmax(0, 2.35fr) minmax(290px, 0.95fr);
  gap: 14px;
  align-items: start;
}

.documents-left-rail {
  position: sticky;
  top: 94px;
  display: grid;
  gap: 14px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}

.documents-archive {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.documents-storage-archive {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.documents-storage-add-folder {
  width: 100%;
  justify-content: center;
  min-height: 36px;
  border-radius: 9px;
  color: var(--action-dark);
  font-weight: 900;
}

.documents-storage-add-folder .folder-icon {
  transform: scale(.72);
}

.documents-storage-folder {
  display: grid;
  gap: 4px;
}

.documents-storage-folder-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 6px;
  align-items: center;
  padding-left: calc(var(--level, 0) * 16px);
}

.documents-storage-folder-main {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 14px 28px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #334155;
  padding: 6px 8px;
  text-align: left;
  cursor: pointer;
}

.documents-storage-folder-main > .folder-icon {
  justify-self: center;
}

.documents-storage-folder-main > .ui-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fff3cd;
  color: #d99000;
}

.documents-storage-folder-arrow {
  color: #7b8ca3;
  font-size: 15px;
  line-height: 1;
}

.documents-storage-folder-main strong {
  overflow: hidden;
  color: #172033;
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.documents-storage-folder-main em {
  min-width: 22px;
  border-radius: 999px;
  background: #eef3f9;
  color: #536176;
  padding: 2px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.documents-storage-folder-row:hover .documents-storage-folder-main,
.documents-storage-folder-row.active .documents-storage-folder-main {
  border-color: #d8e5f3;
  background: #f7fbff;
}

.documents-storage-folder.open > .documents-storage-folder-row .documents-storage-folder-arrow {
  color: var(--action-dark);
  transform: rotate(90deg);
}

.documents-storage-folder-row .row-action-trigger {
  width: 32px;
  height: 32px;
  min-height: 32px;
}

.documents-storage-children {
  display: grid;
  gap: 4px;
}

.documents-storage-doc-list {
  margin-left: 18px;
}

.documents-archive-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.documents-archive-head h3,
.documents-folder-head h3 {
  margin: 0;
  color: #172033;
  font-size: 15px;
  line-height: 1.25;
}

.documents-archive-head span,
.documents-folder-head span {
  border-radius: 999px;
  background: #f1f6fc;
  color: #536176;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.documents-tree {
  display: grid;
  gap: 8px;
}

.documents-all-node {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #334155;
  padding: 7px 9px;
  text-align: left;
  cursor: pointer;
}

.documents-all-node > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eef6ff;
  color: var(--blue);
}

.documents-all-node strong {
  overflow: hidden;
  color: #172033;
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.documents-all-node em {
  min-width: 22px;
  border-radius: 999px;
  background: #e9f0f8;
  color: #536176;
  padding: 2px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.documents-tree-client,
.documents-tree-case {
  display: grid;
  gap: 6px;
}

.documents-client-node,
.documents-case-node,
.documents-folder-node {
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #334155;
  cursor: pointer;
  text-align: left;
}

.documents-client-node {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 16px;
  gap: 5px 8px;
  padding: 9px;
}

.documents-case-node {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 16px;
  gap: 5px 8px;
  padding: 8px;
}

.documents-client-node > span,
.documents-case-node > span {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eef6ff;
  color: var(--blue);
}

.documents-client-node .ui-icon,
.documents-case-node .ui-icon {
  width: 16px;
  height: 16px;
}

.documents-client-node strong,
.documents-client-node small,
.documents-case-node strong,
.documents-case-node small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.documents-client-node strong,
.documents-case-node strong {
  color: #172033;
  font-size: 12px;
  line-height: 1.2;
}

.documents-client-node em,
.documents-case-node em,
.documents-folder-node em {
  align-self: start;
  min-width: 22px;
  border-radius: 999px;
  background: #e9f0f8;
  color: #536176;
  padding: 2px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.documents-client-arrow,
.documents-case-arrow {
  align-self: start;
  color: #8ca0b7;
  font-size: 16px;
  line-height: 1;
  transform-origin: 50% 50%;
  transition: transform 0.16s ease, color 0.16s ease;
}

.documents-tree-client.open .documents-client-arrow,
.documents-tree-case.open .documents-case-arrow {
  color: var(--action-dark);
  transform: rotate(90deg);
}

.documents-client-node small,
.documents-case-node small {
  grid-column: 2 / 5;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.documents-client-node small {
  font-weight: 800;
}

.documents-case-node .documents-case-client {
  color: #334155;
  font-weight: 900;
}

.documents-client-case-list {
  display: grid;
  gap: 5px;
  border-left: 1px solid #dbe7f5;
  margin-left: 22px;
  padding-left: 10px;
}

.documents-client-case-list .documents-case-node > span {
  background: #f3f7fc;
  color: #2d5f91;
}

.documents-folder-list {
  display: grid;
  gap: 4px;
  border-left: 1px solid #e3eaf3;
  margin-left: 22px;
  padding-left: 10px;
}

.documents-folder-node {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 5px 8px 5px calc(8px + var(--level, 0) * 16px);
  font-size: 12px;
  font-weight: 800;
}

.documents-folder-node .ui-icon {
  width: 15px;
  height: 15px;
  color: #64748b;
}

.documents-folder-node span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.documents-client-node:hover,
.documents-case-node:hover,
.documents-all-node:hover,
.documents-folder-node:hover,
.documents-client-node.active,
.documents-case-node.active,
.documents-all-node.active,
.documents-folder-node.active {
  border-color: #d8e5f3;
  background: #f7fbff;
}

.documents-folder-node.active {
  color: var(--action-dark);
  background: #eef6ff;
}

.documents-folder-node.active .ui-icon {
  color: var(--action-dark);
}

.documents-tree-empty {
  margin: 0 0 0 -10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.document-archive-modal {
  max-width: 620px;
}

.document-archive-modal .crm-modal-title {
  display: block;
  grid-template-columns: none;
  text-align: center;
}

.document-archive-modal .crm-modal-title h2,
.document-archive-modal .crm-modal-title p {
  margin-inline: auto;
}

.document-archive-modal .crm-modal-title-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.document-archive-target {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid #d8e5f3;
  border-radius: 12px;
  background: #f8fbff;
  padding: 12px;
}

.document-archive-target > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 11px;
  background: #e8f3ff;
  color: var(--action-dark);
  font-size: 12px;
  font-weight: 950;
}

.document-archive-target strong,
.document-archive-target small {
  display: block;
  min-width: 0;
}

.document-archive-target strong {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-archive-target small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.document-archive-picker {
  display: grid;
  gap: 5px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid #d8e5f3;
  border-radius: 10px;
  background: #fbfdff;
  padding: 8px;
}

.document-archive-picker p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.document-archive-picker-node {
  width: 100%;
  min-height: 36px;
  display: grid;
  grid-template-columns: 14px 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #334155;
  padding: 6px 8px 6px calc(8px + var(--level, 0) * 18px);
  text-align: left;
  cursor: pointer;
}

.document-archive-picker-node > .folder-icon {
  justify-self: center;
}

.document-archive-picker-node strong {
  overflow: hidden;
  color: #172033;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-archive-picker-node em {
  border-radius: 999px;
  background: #eef3f9;
  color: #536176;
  padding: 2px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.document-archive-picker-node:hover,
.document-archive-picker-node.active {
  border-color: #b9d8f8;
  background: #eef7ff;
  color: var(--action-dark);
}

.documents-table-card {
  padding: 12px;
}

.documents-folder-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.documents-folder-head > div:first-child {
  min-width: 0;
}

.documents-folder-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.documents-folder-head-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.documents-folder-head-actions span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.documents-folder-head-actions button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.documents-folder-head-actions .ui-icon {
  width: 14px;
  height: 14px;
}

.documents-table {
  table-layout: fixed;
  width: 100%;
  min-width: 100%;
}

.documents-table th,
.documents-table td {
  padding: 13px 8px;
  vertical-align: middle;
}

.documents-table th:nth-child(1),
.documents-table td:nth-child(1) {
  width: 34%;
}

.documents-table th:nth-child(2),
.documents-table td:nth-child(2) {
  width: 15%;
}

.documents-table th:nth-child(3),
.documents-table td:nth-child(3) {
  width: 13%;
}

.documents-table th:nth-child(4),
.documents-table td:nth-child(4) {
  width: 7%;
}

.documents-table th:nth-child(5),
.documents-table td:nth-child(5) {
  width: 13%;
}

.documents-table th:nth-child(6),
.documents-table td:nth-child(6) {
  width: 10%;
}

.documents-table th:nth-child(7),
.documents-table td:nth-child(7) {
  width: 42px;
}

.documents-table td {
  overflow-wrap: anywhere;
}

.documents-table th:nth-child(6),
.documents-table td:nth-child(6) {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.documents-table th:nth-child(5),
.documents-table td:nth-child(5) {
  text-align: left;
}

.documents-table th:nth-child(4),
.documents-table td:nth-child(4) {
  text-align: center;
}

.documents-table tbody tr {
  transition: background 0.16s ease;
}

.documents-table tbody tr[data-document-row] {
  cursor: pointer;
}

.documents-table tbody tr[data-document-row]:focus-visible {
  outline: 2px solid var(--action-border);
  outline-offset: -2px;
}

.documents-table tbody tr:hover,
.documents-table tbody tr.selected {
  background: #f4f7fb;
}

.documents-table tbody tr:has([data-select-document-row]:checked) {
  background: #eef6ff;
  box-shadow: inset 3px 0 0 var(--action-dark);
}

.documents-empty-table-cell {
  height: 220px;
}

.documents-empty-table-cell div {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.documents-empty-table-cell strong {
  color: #172033;
  font-size: 14px;
}

.documents-empty-table-cell span {
  max-width: 320px;
  color: #66758c;
  font-size: 12px;
  line-height: 1.4;
}

.documents-empty-table-cell button {
  margin-top: 4px;
}

.document-status-icon {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--task-status-border, var(--semantic-blue-border));
  border-radius: 999px;
  background: var(--task-status-bg, var(--semantic-blue-soft));
  color: var(--task-status-color, var(--semantic-blue));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  cursor: default;
  line-height: 0;
  vertical-align: middle;
}

.document-status-icon .ui-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%) translateY(0.75px);
}

.document-status-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  z-index: 50;
  width: max-content;
  max-width: 180px;
  transform: translate(-50%, -4px);
  border: 1px solid #dbe8f6;
  border-radius: 7px;
  background: #fff;
  color: #334155;
  padding: 5px 7px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease 0.28s, transform 0.16s ease 0.28s;
}

.document-status-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  z-index: 51;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -4px) rotate(45deg);
  border-left: 1px solid #dbe8f6;
  border-top: 1px solid #dbe8f6;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease 0.28s, transform 0.16s ease 0.28s;
}

.document-status-icon:hover::after,
.document-status-icon:focus-visible::after,
.document-status-icon:hover::before,
.document-status-icon:focus-visible::before {
  opacity: 1;
}

.document-status-icon:hover::after,
.document-status-icon:focus-visible::after {
  transform: translate(-50%, 0);
}

.document-status-icon:hover::before,
.document-status-icon:focus-visible::before {
  transform: translate(-50%, 0) rotate(45deg);
}

.document-title-head {
  display: grid;
  grid-template-columns: 18px auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
}

.document-title-head input[type="checkbox"],
.document-title-cell input[type="checkbox"] {
  margin: 0;
  align-self: center;
  justify-self: center;
}

.document-title-cell {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.documents-bulk-bar.active {
  justify-self: start;
  gap: 3px;
  padding: 2px 3px;
}

.document-title-head:has(.documents-bulk-bar.active) .document-title-label {
  display: none;
}

.tasks-bulk-bar.documents-bulk-bar em {
  min-width: 18px;
  height: 18px;
  font-size: 10px;
}

.tasks-bulk-bar.documents-bulk-bar .task-bulk-icon {
  width: 18px;
  height: 18px;
  min-height: 18px;
}

.tasks-bulk-bar.documents-bulk-bar .task-bulk-icon .ui-icon {
  width: 9px;
  height: 9px;
}

.document-title-button {
  display: inline-grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.document-title-button .ui-icon {
  width: 18px;
  height: 18px;
  color: var(--blue);
}

.document-title-button span {
  min-width: 0;
}

.document-title-button strong,
.documents-table td small {
  display: block;
}

.document-title-button strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.document-title-button small,
.documents-table td small {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}

.documents-due {
  display: grid;
  gap: 2px;
  justify-items: start;
  width: max-content;
  max-width: 100%;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.documents-due small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.documents-due.red,
.documents-due.red small {
  color: var(--red);
}

.documents-due.amber,
.documents-due.amber small {
  color: var(--amber);
}

.documents-due.green,
.documents-due.green small {
  color: var(--green);
}

.documents-status-line {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 2px;
  padding-bottom: 2px;
}

.documents-status-line > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.documents-side .task-status-select.documents-status-select {
  justify-self: start;
}

.document-status-picker {
  position: relative;
  justify-self: start;
}

.document-status-picker summary {
  min-width: 150px;
  min-height: 34px;
  display: inline-grid;
  grid-template-columns: 20px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--task-status-border, var(--semantic-blue-border));
  border-radius: 8px;
  background: var(--task-status-bg, var(--semantic-blue-soft));
  color: var(--task-status-color, var(--semantic-blue));
  padding: 0 8px 0 10px;
  cursor: pointer;
  list-style: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.document-status-picker summary::-webkit-details-marker {
  display: none;
}

.document-status-picker summary > span,
.document-status-picker button > span {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: white;
}

.document-status-picker .ui-icon {
  width: 12px;
  height: 12px;
  transform: translateY(0.75px);
}

.document-status-picker summary strong {
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-status-picker summary i {
  color: inherit;
  font-style: normal;
  font-weight: 900;
  transition: transform 0.16s ease;
}

.document-status-picker[open] summary i {
  transform: rotate(180deg);
}

.document-status-picker > div {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 40;
  width: 238px;
  display: grid;
  gap: 4px;
  border: 1px solid #dbe8f6;
  border-radius: 9px;
  background: white;
  padding: 6px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.document-status-picker button {
  min-height: 34px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #172033;
  padding: 0 8px;
  text-align: left;
  cursor: pointer;
}

.document-status-picker button:hover,
.document-status-picker button.active {
  border-color: var(--task-status-border, #dbe8f6);
  background: var(--task-status-bg, #f8fbff);
  color: var(--task-status-color, var(--action-dark));
}

.document-status-picker button strong {
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.document-status-picker button em {
  display: inline-grid;
  place-items: center;
  color: inherit;
  font-style: normal;
}

.document-status-picker.tone-red,
.document-status-picker .tone-red {
  --task-status-bg: var(--semantic-red-soft);
  --task-status-border: var(--semantic-red-border);
  --task-status-color: var(--semantic-red);
}

.document-status-picker.tone-amber,
.document-status-picker .tone-amber {
  --task-status-bg: var(--semantic-amber-soft);
  --task-status-border: var(--semantic-amber-border);
  --task-status-color: var(--semantic-amber);
}

.document-status-picker.tone-green,
.document-status-picker .tone-green {
  --task-status-bg: var(--semantic-green-soft);
  --task-status-border: var(--semantic-green-border);
  --task-status-color: var(--semantic-green);
}

.document-status-picker.tone-blue,
.document-status-picker .tone-blue {
  --task-status-bg: var(--semantic-blue-soft);
  --task-status-border: var(--semantic-blue-border);
  --task-status-color: var(--semantic-blue);
}

.document-status-picker.tone-violet,
.document-status-picker .tone-violet {
  --task-status-bg: var(--semantic-violet-soft);
  --task-status-border: var(--semantic-violet-border);
  --task-status-color: var(--semantic-violet);
}

.document-status-icon.doc-draft,
.document-status-picker.doc-draft,
.document-status-picker .doc-draft {
  --task-status-bg: #f3f0ff;
  --task-status-border: #d7ccff;
  --task-status-color: #6d3fd1;
}

.document-status-icon.doc-not-submitted,
.document-status-picker.doc-not-submitted,
.document-status-picker .doc-not-submitted {
  --task-status-bg: #fff3df;
  --task-status-border: #efc47f;
  --task-status-color: #a46000;
}

.document-status-icon.doc-in-work,
.document-status-picker.doc-in-work,
.document-status-picker .doc-in-work {
  --task-status-bg: #eaf4ff;
  --task-status-border: #a9cff7;
  --task-status-color: #1f5f99;
}

.document-status-icon.doc-submitted,
.document-status-picker.doc-submitted,
.document-status-picker .doc-submitted {
  --task-status-bg: #e7f6ff;
  --task-status-border: #9bd1f1;
  --task-status-color: #176d98;
}

.document-status-icon.doc-waiting,
.document-status-picker.doc-waiting,
.document-status-picker .doc-waiting {
  --task-status-bg: #fff8d7;
  --task-status-border: #edd96e;
  --task-status-color: #8a6a00;
}

.document-status-icon.doc-review,
.document-status-picker.doc-review,
.document-status-picker .doc-review {
  --task-status-bg: #ffeceb;
  --task-status-border: #f2b3ae;
  --task-status-color: #c7362f;
}

.document-status-icon.doc-sign-waiting,
.document-status-picker.doc-sign-waiting,
.document-status-picker .doc-sign-waiting {
  --task-status-bg: #fff8d7;
  --task-status-border: #edd96e;
  --task-status-color: #8a6a00;
}

.document-status-icon.doc-signed,
.document-status-picker.doc-signed,
.document-status-picker .doc-signed {
  --task-status-bg: #e4f8ef;
  --task-status-border: #8dd9b3;
  --task-status-color: #13724b;
}

.document-status-icon.doc-sign-rejected,
.document-status-picker.doc-sign-rejected,
.document-status-picker .doc-sign-rejected,
.document-status-icon.doc-sign-expired,
.document-status-picker.doc-sign-expired,
.document-status-picker .doc-sign-expired {
  --task-status-bg: #ffe9eb;
  --task-status-border: #ffc3ca;
  --task-status-color: #c72537;
}

.document-status-icon.doc-received,
.document-status-picker.doc-received,
.document-status-picker .doc-received {
  --task-status-bg: #e7fbf8;
  --task-status-border: #94d9cf;
  --task-status-color: #087b71;
}

.document-status-icon.doc-ready,
.document-status-picker.doc-ready,
.document-status-picker .doc-ready {
  --task-status-bg: #ddf7bf;
  --task-status-border: #77c943;
  --task-status-color: #2f7d0c;
}

.document-status-icon.doc-ready {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62), 0 0 0 2px rgba(119, 201, 67, 0.12);
}

.document-status-icon.doc-default,
.document-status-picker.doc-default,
.document-status-picker .doc-default {
  --task-status-bg: var(--semantic-blue-soft);
  --task-status-border: var(--semantic-blue-border);
  --task-status-color: var(--semantic-blue);
}

.documents-row-actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: 5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.documents-table tr:hover .documents-row-actions,
.documents-table tr:focus-within .documents-row-actions,
.documents-table tr.selected .documents-row-actions {
  opacity: 1;
  pointer-events: auto;
}

.documents-row-actions button {
  width: 24px;
  height: 24px;
  min-height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: #516075;
  padding: 0;
  line-height: 0;
  cursor: pointer;
}

.documents-row-actions button .ui-icon {
  width: 13px;
  height: 13px;
}

.documents-row-actions button:hover {
  border-color: var(--action-hover);
  color: white;
  background: var(--action-hover);
}

.documents-row-actions .danger-icon {
  color: var(--red);
}

.documents-row-actions .danger-icon:hover {
  border-color: #ffd0d0;
  background: #fff0f0;
  color: var(--red);
}

.documents-side {
  position: sticky;
  top: 94px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.documents-side-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.documents-side-head > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eaf2fb;
  color: var(--blue);
}

.documents-side-head .ui-icon {
  width: 18px;
  height: 18px;
}

.documents-side h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--text-lg);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.documents-side p {
  margin: 4px 0 0;
  color: var(--muted);
}

.documents-meta {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}

.documents-meta div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.documents-meta dt {
  color: #65748a;
  font-size: 11px;
  font-weight: 800;
}

.documents-meta dd {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.documents-date-input {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  padding: 0 8px;
  font-size: 12px;
  font-weight: 800;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.documents-date-input:hover,
.documents-date-input:focus {
  border-color: var(--action-border);
  box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.08);
}

.documents-responsible {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.documents-comment {
  margin: 0;
  color: #536176;
  line-height: 1.45;
}

.documents-ai-card,
.documents-esign-card,
.documents-history-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 12px;
}

.documents-esign-card div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.documents-esign-card div > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eef6ff;
  color: var(--action-dark);
}

.documents-esign-card.active {
  border-color: #bcd6f2;
  background: #f5fbff;
}

.documents-esign-card small {
  color: #65748a;
  font-size: 11px;
  font-weight: 900;
}

.documents-ai-card strong,
.documents-esign-card strong,
.documents-history-card strong {
  color: #172033;
  font-size: 13px;
}

.documents-ai-card span,
.documents-esign-card p,
.documents-history-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.documents-history-card p {
  display: grid;
  gap: 3px;
  border-top: 1px solid #eef2f7;
  padding-top: 8px;
}

.documents-history-card strong + p {
  border-top: 0;
  padding-top: 0;
}

.documents-history-card p span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.documents-folder-summary,
.documents-empty-side {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 12px;
}

.documents-folder-summary strong {
  display: block;
  color: var(--blue);
  font-size: var(--text-2xl);
  line-height: 1;
}

.documents-folder-summary span {
  color: var(--muted);
  font-size: 12px;
}

.documents-empty-side {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.documents-empty-side .ui-icon {
  width: 24px;
  height: 24px;
  color: var(--blue);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.finance-screen,
.analytics-screen,
.ai-screen,
.osint-screen {
  display: grid;
  gap: 14px;
}

.finance-filters,
.osint-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 220px) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
}

.finance-layout,
.osint-layout,
.ai-workspace {
  display: grid;
  grid-template-columns: var(--main-side-grid);
  gap: 16px;
}

.finance-table-card {
  padding: 14px;
}

.finance-table {
  width: 100%;
  min-width: 860px;
}

.finance-table tbody tr:hover,
.finance-table tbody tr.selected {
  background: #f4f7fb;
}

.finance-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.debt-text {
  color: var(--red);
  font-weight: 900;
}

.paid-text {
  color: var(--green);
  font-weight: 900;
}

.mini-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef7;
}

.mini-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--action-dark);
}

.compact-button {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 12px;
}

.finance-side,
.osint-side,
.ai-side {
  display: grid;
  gap: 14px;
  align-content: start;
}

.finance-side h3 {
  margin: 0;
  font-size: var(--text-xl);
}

.finance-side-metrics {
  display: grid;
  gap: 8px;
}

.finance-side-metrics div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px;
}

.finance-side-metrics span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.finance-side-metrics strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: var(--text-lg);
}

.finance-side-metrics .debt strong {
  color: var(--red);
}

.finance-side-metrics .paid strong {
  color: var(--green);
}

.finance-reference {
  gap: 14px;
}

.finance-reference > *,
.finance-dashboard-layout > *,
.finance-main-grid > *,
.finance-bottom-grid > *,
.finance-kpi-grid > * {
  min-width: 0;
}

.finance-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: end;
}

.finance-top-row .finance-tabs {
  align-self: end;
}

.finance-date-range {
  min-width: 226px;
  justify-content: center;
  gap: 12px;
  color: #243247;
  box-shadow: 0 8px 24px rgba(31, 74, 124, 0.06);
}

.finance-date-range .ui-icon {
  width: 18px;
  height: 18px;
  color: var(--action-dark);
}

.finance-date-range:hover,
.finance-date-range[aria-expanded="true"] {
  border-color: #b9d3ef;
  background: #f8fbff;
}

.finance-date-popover {
  width: 390px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  box-shadow: 0 16px 36px rgba(18, 33, 56, 0.14);
}

.finance-date-popover > div {
  grid-column: 1 / -1;
}

.finance-tabs {
  display: flex;
  gap: 22px;
  align-items: flex-end;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}

.finance-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #627087;
  padding: 0 0 10px;
  font-weight: var(--weight-bold);
  white-space: nowrap;
  cursor: pointer;
}

.finance-tabs button.active {
  color: var(--action-dark);
  box-shadow: inset 0 -2px 0 var(--action-dark);
}

.finance-workspace-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  overflow: visible;
}

.finance-workspace-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.finance-workspace-top h2 {
  margin: 3px 0 4px;
  color: var(--text);
  font-size: var(--text-2xl);
  line-height: 1.15;
}

.finance-workspace-top p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.section-kicker {
  color: var(--action-dark);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  letter-spacing: 0;
  text-transform: uppercase;
}

.finance-workspace-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.finance-workspace-actions .primary,
.finance-workspace-actions .secondary,
.finance-workspace-footer .primary,
.finance-workspace-footer .secondary {
  min-height: 36px;
  padding: 8px 12px;
}

.finance-workspace-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.finance-workspace-metric {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 12px;
}

.finance-workspace-metric span,
.finance-workspace-metric small {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.finance-workspace-metric strong {
  color: var(--text);
  font-size: var(--text-xl);
  line-height: 1.1;
}

.finance-workspace-table {
  position: relative;
  display: grid;
  align-self: start;
  align-content: start;
  gap: 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.finance-workspace-table.is-operations,
.finance-workspace-table.is-payments,
.finance-workspace-table.salary-workspace {
  overflow: visible;
}

.finance-workspace-table.is-operations .finance-operation-list,
.finance-workspace-table.is-payments .finance-operation-list {
  align-content: start;
  align-self: start;
  min-height: 0;
}

.finance-payment-mode {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 4px;
  width: min(100%, 520px);
  margin: 12px 14px 0;
  border: 1px solid #cfe0f2;
  border-radius: 999px;
  background: #f4f8fd;
  padding: 4px;
}

.finance-payment-mode button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #52647c;
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.finance-payment-mode button:hover {
  background: #e5f1ff;
  color: var(--action-dark);
}

.finance-payment-mode button.active {
  background: var(--action-dark);
  color: #fff;
  box-shadow: 0 8px 18px rgba(31, 93, 146, 0.18);
}

.finance-operation-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(130px, 0.55fr) minmax(170px, 0.75fr) minmax(96px, auto);
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  background: #fbfdff;
}

.finance-case-filters,
.finance-client-debt-filters {
  grid-template-columns: minmax(240px, 1fr) minmax(190px, 0.42fr) minmax(96px, auto);
}

.finance-operation-filters > * {
  min-width: 0;
}

.finance-operation-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.finance-operation-search .ui-icon {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.finance-operation-search input,
.finance-operation-filters select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.finance-operation-search input {
  padding: 0 12px 0 38px;
}

.finance-operation-filters select {
  padding: 0 34px 0 12px;
}

.finance-filter-field {
  position: relative;
  display: block;
  min-width: 0;
}

.finance-filter-field > select.document-native-select,
.finance-action-select-field > select.document-native-select,
.finance-action-case-field > select.document-native-select,
.salary-select-field > select.document-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.finance-filter-select .document-custom-select-button {
  min-height: 38px;
  border-radius: 8px;
  background: #fff;
  font-size: var(--text-sm);
}

.finance-filter-select .document-custom-select-menu,
.finance-modal-select .document-custom-select-menu {
  z-index: 70;
  max-height: 290px;
  border-radius: 14px;
}

.finance-modal-select .document-custom-select-button {
  min-height: 40px;
  border-radius: 8px;
  background: #fff;
  font-size: var(--text-base);
}

.document-custom-select-group {
  padding: 8px 10px 5px;
  color: #6b778c;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.finance-workspace-head,
.finance-workspace-row {
  display: grid;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
}

.finance-workspace-head {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  background: #fbfdff;
}

.finance-workspace-row:last-child {
  border-bottom: 0;
}

.finance-workspace-row {
  color: #334155;
  font-size: var(--text-sm);
}

.finance-workspace-row strong,
.finance-workspace-row b {
  color: var(--text);
}

.case-finance-workspace .finance-workspace-head,
.case-finance-workspace .finance-workspace-row {
  min-width: 960px;
  grid-template-columns: minmax(120px, 0.8fr) minmax(220px, 1.35fr) minmax(110px, 0.75fr) minmax(110px, 0.75fr) minmax(110px, 0.75fr) minmax(120px, 0.7fr) minmax(90px, 0.55fr);
}

.salary-workspace .finance-workspace-head,
.salary-workspace .finance-workspace-row {
  min-width: 980px;
  grid-template-columns: minmax(170px, 1.35fr) minmax(90px, 0.7fr) repeat(4, minmax(92px, 0.75fr)) auto 38px;
}

.salary-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(170px, 0.55fr) auto;
  gap: 10px;
  align-items: end;
}

.salary-toolbar label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.salary-toolbar select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--text);
  padding: 0 12px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.salary-toolbar-total {
  display: grid;
  gap: 4px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 7px 12px;
}

.salary-toolbar-total span,
.salary-history-total span {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.salary-toolbar-total strong,
.salary-history-total strong {
  color: var(--text);
  font-size: var(--text-base);
}

.salary-toolbar .secondary:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.salary-history-card {
  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) minmax(280px, 1.6fr) minmax(130px, 0.45fr);
  gap: 16px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 14px;
}

.salary-history-card.is-empty {
  background: linear-gradient(180deg, #fbfdff, #f7fbff);
}

.salary-history-card h3 {
  margin: 4px 0 4px;
  color: var(--text);
  font-size: var(--text-lg);
}

.salary-history-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.salary-history-bars {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 7px;
  align-items: end;
  min-height: 112px;
}

.salary-month {
  display: grid;
  gap: 6px;
  justify-items: center;
  align-items: end;
}

.salary-month span {
  width: 100%;
  max-width: 18px;
  border-radius: 999px 999px 3px 3px;
  background: linear-gradient(180deg, #2f80d0, var(--action-dark));
}

.salary-history-card.is-empty .salary-month span {
  background: #dfeaf6;
}

.salary-month small {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.salary-history-total {
  display: grid;
  gap: 5px;
  justify-items: end;
}

.salary-person {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.salary-person small {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salary-action-cell {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.salary-empty-state {
  min-width: 980px;
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 34px 18px 38px;
  border-bottom: 1px solid var(--line);
  background: #fbfdff;
  text-align: center;
}

.salary-empty-state > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--action-soft);
  color: var(--action-dark);
}

.salary-empty-state strong {
  color: var(--text);
  font-size: var(--text-lg);
}

.salary-empty-state p {
  max-width: 430px;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.45;
}

.salary-row-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 158px;
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 6px;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.14);
}

.salary-row-menu button {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  padding: 0 8px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  white-space: nowrap;
}

.salary-row-menu button:hover {
  background: var(--action-soft);
  color: var(--action-dark);
}

.salary-row-menu button.danger {
  color: var(--red);
}

.salary-row-menu button.danger:hover {
  background: #fff0f0;
}

.finance-workspace-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.finance-client-debt-workspace {
  overflow: visible;
}

.finance-client-debt-workspace .finance-workspace-head {
  min-width: 980px;
  grid-template-columns: minmax(190px, 0.9fr) minmax(240px, 1.25fr) minmax(110px, 0.65fr) minmax(110px, 0.65fr) minmax(110px, 0.65fr) minmax(90px, auto);
}

.finance-client-debt-group {
  display: grid;
  grid-template-columns: minmax(190px, 0.9fr) minmax(0, 4fr);
  min-width: 980px;
  border-bottom: 1px solid var(--line);
}

.finance-client-debt-group:last-child {
  border-bottom: 0;
}

.finance-client-debt-cell {
  display: grid;
  align-content: start;
  gap: 5px;
  border-right: 1px solid var(--line);
  padding: 16px 16px;
  color: var(--text);
}

.finance-client-debt-cell strong {
  color: var(--text);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
}

.finance-client-debt-cell small {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.finance-client-debt-cases {
  display: grid;
}

.finance-client-debt-row {
  display: grid;
  grid-template-columns: minmax(96px, 0.8fr) minmax(150px, 1.3fr) minmax(105px, 0.75fr) minmax(105px, 0.75fr) minmax(105px, 0.75fr) minmax(90px, auto);
  gap: 12px;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  color: #334155;
  font-size: var(--text-sm);
}

.finance-client-debt-row:last-child {
  border-bottom: 0;
}

.finance-client-debt-row strong,
.finance-client-debt-row b {
  color: var(--text);
}

.finance-client-debt-row b.danger {
  color: var(--red);
}

.finance-client-card {
  display: grid;
  gap: 5px;
  justify-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  color: var(--text);
  padding: 13px;
  text-align: left;
}

.finance-client-card strong {
  color: var(--red);
  font-size: var(--text-xl);
}

.finance-client-card small {
  color: var(--muted);
  font-size: var(--text-sm);
}

.finance-workspace-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.finance-report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.finance-report-card {
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 14px;
}

.finance-report-card > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eef5ff;
  color: var(--action-dark);
}

.finance-report-card strong {
  color: var(--text);
  font-size: var(--text-lg);
}

.finance-report-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.finance-report-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.finance-report-summary div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.finance-report-summary span,
.finance-report-table-head {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.finance-report-summary strong {
  color: var(--text);
  font-size: var(--text-lg);
}

.finance-report-table {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.finance-report-table-head,
.finance-report-table-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr repeat(3, minmax(120px, 0.7fr));
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.finance-report-table-row {
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: var(--text-sm);
}

.finance-report-table-row b {
  color: var(--danger);
}

.finance-report-total {
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbff;
  padding: 12px;
}

.finance-report-total span {
  color: var(--muted);
  font-weight: var(--weight-bold);
}

.finance-report-total strong {
  color: var(--green);
  font-size: var(--text-xl);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.status-pill.green {
  background: #e7f8ef;
  color: var(--green);
}

.status-pill.amber {
  background: #fff4db;
  color: #b7791f;
}

.secondary.compact {
  min-height: 32px;
  padding: 6px 10px;
}

.finance-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.finance-kpi-card {
  position: relative;
  min-height: 126px;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 16px;
  box-shadow: var(--shadow);
}

.finance-kpi-card span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.finance-kpi-card strong {
  color: var(--text);
  font-size: 25px;
  line-height: 1.05;
}

.finance-kpi-card em {
  color: var(--green);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: var(--weight-bold);
}

.finance-kpi-card em.danger {
  color: var(--red);
}

.finance-kpi-card small {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.finance-kpi-card > i {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
}

.finance-kpi-card > i .ui-icon {
  width: 22px;
  height: 22px;
}

.finance-kpi-card > i.blue {
  background: #eaf2ff;
  color: #1f7ae0;
}

.finance-kpi-card > i.green {
  background: #e8f7ef;
  color: #1b9b69;
}

.finance-kpi-card > i.amber {
  background: #fff4db;
  color: #b7791f;
}

.finance-kpi-card > i.red {
  background: #ffeded;
  color: #e84b4b;
}

.finance-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(260px, 1fr);
  gap: 14px;
  align-items: start;
}

.finance-main-column,
.finance-right-column {
  position: relative;
  display: grid;
  gap: 14px;
  min-width: 0;
}

.finance-main-column {
  z-index: 1;
}

.finance-right-column {
  z-index: 2;
}

.finance-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 14px;
}

.finance-chart-card,
.finance-operations-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.finance-operations-card {
  overflow: hidden;
}

.finance-operations-card .finance-operation-list,
.finance-operations-card .finance-operation-client-group,
.finance-operations-card .finance-operation-client-rows,
.finance-operations-card .finance-operation-case-group,
.finance-operations-card .finance-operation-case-rows,
.finance-operations-card .finance-operation-row {
  min-width: 0;
}

.finance-chart-card h2,
.finance-operations-card h2,
.finance-right-column h2 {
  margin: 0;
  color: var(--text);
  font-size: var(--text-xl);
  line-height: 1.2;
}

.finance-operations-card h2 small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.analytics-legend .red,
.finance-cashflow-legend .red {
  color: #ef4444;
}

.finance-line-chart {
  width: 100%;
  max-width: 100%;
  height: 245px;
  overflow: hidden;
}

.finance-line-chart svg,
.analytics-line-chart svg,
.osint-line-chart svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.finance-line-chart .grid-lines line {
  stroke: #edf2f7;
  stroke-width: 1;
}

.finance-line-chart text {
  fill: #718096;
  font-size: 11px;
  font-weight: var(--weight-semibold);
}

.finance-line-chart .line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.finance-line-chart .blue-line {
  stroke: #1f7ae0;
}

.finance-line-chart .red-line {
  stroke: #ef4444;
}

.finance-line-chart .green-line {
  stroke: #27ae6f;
}

.finance-chart-empty {
  min-height: 245px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed #d8e4f1;
  border-radius: 8px;
  background: #fbfdff;
  padding: 20px;
  color: var(--muted);
  text-align: center;
}

.finance-chart-empty.is-compact {
  min-height: 190px;
}

.finance-chart-empty strong {
  color: var(--text);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
}

.finance-chart-empty span {
  max-width: 340px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.45;
}

.finance-donut-wrap {
  display: grid;
  grid-template-columns: minmax(126px, 174px) minmax(150px, 1fr);
  gap: 18px;
  align-items: center;
}

.finance-income-donut {
  position: relative;
  width: min(174px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #1f7ae0 0 60%,
    #27ae6f 60% 80%,
    #f59e0b 80% 90%,
    #7c5ce8 90% 95%,
    #9aa7b7 95% 100%
  );
}

.finance-income-donut.is-empty,
.analytics-status-donut.is-empty {
  background: conic-gradient(#e8eef5 0 100%);
  border: 1px solid #dbe5f0;
}

.finance-income-donut::after {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: inherit;
  background: white;
}

.finance-donut-legend {
  display: grid;
  gap: 10px;
}

.finance-donut-legend div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  align-items: center;
  color: #627087;
  font-size: var(--text-sm);
}

.finance-donut-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.finance-donut-legend span::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--legend-color);
}

.finance-donut-legend strong {
  color: #627087;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
}

.finance-recent-head {
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(140px, 0.65fr) minmax(0, 3fr);
  gap: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 12px 10px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.finance-recent-tree {
  display: grid;
  align-content: start;
  border-bottom: 1px solid var(--line);
}

.finance-recent-client {
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(0, 3.65fr);
  min-width: 0;
  border-bottom: 1px solid var(--line);
}

.finance-recent-client:last-child {
  border-bottom: 0;
}

.finance-recent-client-cell,
.finance-recent-case-cell {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

.finance-recent-client-cell {
  border-right: 1px solid #edf3fa;
  padding: 14px 16px;
}

.finance-recent-client-cell strong,
.finance-recent-case-cell .case-link-button {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-recent-client-cell strong {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 950;
  line-height: 1.25;
}

.finance-recent-client-cell small,
.finance-recent-case-cell small {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.finance-recent-case-list {
  display: grid;
  min-width: 0;
}

.finance-recent-case {
  display: grid;
  grid-template-columns: minmax(140px, 0.65fr) minmax(0, 3fr);
  min-width: 0;
  border-bottom: 1px solid #edf3fa;
}

.finance-recent-case:last-child {
  border-bottom: 0;
}

.finance-recent-case-cell {
  position: relative;
  border-right: 1px solid #edf3fa;
  padding: 12px 12px 12px 22px;
}

.finance-recent-case-cell::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: 999px;
  background: #dbe8f5;
}

.finance-recent-rows {
  display: grid;
  min-width: 0;
}

.finance-recent-row {
  display: grid;
  grid-template-columns: 86px 94px minmax(120px, 1fr) minmax(88px, auto) minmax(86px, auto) minmax(88px, 0.8fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 42px;
  border-bottom: 1px solid #edf3fa;
  color: #53627a;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}

.finance-recent-row:last-child {
  border-bottom: 0;
}

.finance-recent-row:hover,
.finance-recent-row:focus {
  background: #f2f8ff;
  box-shadow: inset 3px 0 0 var(--action-dark);
  outline: 0;
}

.finance-recent-row > * {
  min-width: 0;
}

.finance-recent-row span,
.finance-recent-row strong,
.finance-recent-row em,
.finance-recent-row b,
.finance-recent-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-recent-row strong {
  font-style: normal;
  font-weight: var(--weight-black);
}

.finance-recent-row strong.success {
  color: var(--green);
}

.finance-recent-row strong.danger,
.finance-recent-row b.danger {
  color: var(--red);
}

.finance-recent-row em {
  color: #53627a;
  font-style: normal;
}

.finance-recent-row b {
  color: var(--text);
}

.finance-recent-row small {
  color: var(--muted);
}

.finance-operation-head,
.finance-operation-client-group {
  display: grid;
  grid-template-columns: minmax(120px, 0.95fr) 70px 84px 80px minmax(120px, 1.25fr) 80px 76px minmax(80px, 0.8fr) 42px;
  gap: 10px;
  align-items: center;
}

.finance-operation-head.is-readonly,
.finance-operation-list.is-readonly .finance-operation-client-group {
  grid-template-columns: minmax(120px, 0.95fr) 70px 84px 80px minmax(120px, 1.25fr) 80px 76px minmax(80px, 0.8fr);
}

.finance-operation-head.is-tree {
  grid-template-columns: minmax(178px, 0.9fr) 148px 82px 10px 96px 10px minmax(160px, 1.4fr) 10px 104px 10px 96px 10px minmax(120px, 0.85fr) 46px;
  gap: 0;
}

.finance-operation-head.is-readonly.is-tree {
  grid-template-columns: minmax(178px, 0.9fr) 148px 82px 10px 96px 10px minmax(160px, 1.4fr) 10px 104px 10px 96px 10px minmax(120px, 0.85fr);
  gap: 0;
}

.finance-operation-head {
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.finance-operation-head > :last-child {
  padding-right: 12px;
}

.finance-operation-list {
  position: relative;
  display: grid;
  align-content: start;
  align-self: start;
}

.finance-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding: 12px 14px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.finance-pagination div {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.finance-pagination button {
  min-width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  color: #516075;
  font-weight: var(--weight-black);
  cursor: pointer;
}

.finance-pagination button.active {
  border-color: var(--action-dark);
  background: var(--action-dark);
  color: white;
}

.finance-pagination button:disabled {
  opacity: 0.45;
  cursor: default;
}

.finance-pagination em {
  color: var(--muted);
  font-style: normal;
  font-weight: var(--weight-bold);
  padding: 0 2px;
}

.finance-operation-client-group {
  gap: 0 10px;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}

.finance-operation-client-group:last-child {
  border-bottom: 0;
}

.finance-operation-client-cell {
  display: grid;
  align-content: start;
  gap: 4px;
  border-right: 1px solid #edf3fa;
  padding: 14px 14px 14px 16px;
}

.finance-operation-client-cell strong {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 950;
  line-height: 1.25;
}

.finance-operation-client-cell small {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.finance-operation-client-rows {
  grid-column: 2 / -1;
  display: grid;
}

.finance-operation-list.is-tree .finance-operation-client-group {
  grid-template-columns: minmax(178px, 0.9fr) minmax(0, 4fr);
}

.finance-operation-case-group {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  align-items: stretch;
  border-bottom: 1px solid #edf3fa;
}

.finance-operation-case-group:last-child {
  border-bottom: 0;
}

.finance-operation-case-cell {
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  border-right: 1px solid #edf3fa;
  padding: 12px 12px 12px 22px;
}

.finance-operation-case-cell .case-link-button,
.finance-operation-case-cell small {
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-operation-case-cell::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: 999px;
  background: #dbe8f5;
}

.finance-operation-case-cell small {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.finance-operation-case-rows {
  display: grid;
}

.finance-operation-row {
  display: grid;
  grid-template-columns: 70px 84px 80px minmax(120px, 1.25fr) 80px 76px minmax(80px, 0.8fr) 42px;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  border-bottom: 1px solid #edf3fa;
  color: #53627a;
  font-size: var(--text-sm);
  padding-right: 10px;
}

.finance-operation-list.is-readonly .finance-operation-row {
  grid-template-columns: 70px 84px 80px minmax(120px, 1.25fr) 80px 76px minmax(80px, 0.8fr);
}

.finance-operation-row.is-case-tree {
  grid-template-columns: 82px 96px minmax(160px, 1.4fr) 104px 96px minmax(120px, 0.85fr) 46px;
}

.finance-operation-list.is-readonly .finance-operation-row.is-case-tree {
  grid-template-columns: 82px 96px minmax(160px, 1.4fr) 104px 96px minmax(120px, 0.85fr);
}

.finance-operation-row:last-child {
  border-bottom: 0;
}

.finance-operation-row.is-clickable {
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}

.finance-operation-row.is-clickable:hover,
.finance-operation-row.is-clickable.is-selected {
  background: #f2f8ff;
  box-shadow: inset 3px 0 0 var(--action-dark);
  outline: 0;
}

.finance-operation-head.is-tree > :nth-child(2) {
  grid-column: 2;
  padding-left: 34px;
}

.finance-operation-head.is-tree > :nth-child(3) {
  grid-column: 3;
  padding-left: 26px;
}

.finance-operation-head.is-tree > :nth-child(4) {
  grid-column: 5;
  padding-left: 12px;
}

.finance-operation-head.is-tree > :nth-child(5) {
  grid-column: 7;
  padding-left: 12px;
}

.finance-operation-head.is-tree > :nth-child(6) {
  grid-column: 9;
  padding-left: 12px;
}

.finance-operation-head.is-tree > :nth-child(7) {
  grid-column: 11;
  padding-left: 12px;
}

.finance-operation-head.is-tree > :nth-child(8) {
  grid-column: 13;
  padding-left: 12px;
}

.finance-operation-head.is-tree > :nth-child(9) {
  grid-column: 14;
}

.finance-operation-row.is-case-tree > :first-child {
  padding-left: 14px;
}

.finance-operation-row > * {
  min-width: 0;
}

.finance-operation-row > span,
.finance-operation-row > strong,
.finance-operation-row > b,
.finance-workspace-row > span,
.finance-workspace-row > strong,
.finance-workspace-row > b {
  overflow: hidden;
  text-overflow: ellipsis;
}

.finance-operation-row > span,
.finance-operation-row > strong,
.finance-operation-row > b,
.finance-workspace-row > strong,
.finance-workspace-row > b,
.finance-workspace-row .case-link-button {
  white-space: nowrap;
}

.finance-operation-row strong.success {
  color: var(--green);
}

.finance-operation-row strong.danger,
.finance-operation-row b.danger {
  color: var(--red);
}

.finance-operation-row b {
  color: var(--text);
  white-space: nowrap;
}

.finance-row-menu {
  position: relative;
  width: 26px;
  height: 26px;
  min-height: 26px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #dbe7f4;
  border-radius: 7px;
  background: #fff;
  padding: 0;
  color: var(--action-dark);
  font-size: 0;
  line-height: 1;
}

.finance-row-menu::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
  transform: translate(-50%, -50%);
}

.finance-row-menu:hover,
.finance-row-menu.is-open {
  border-color: #b8cfe8;
  background: #fff;
  color: var(--action-dark);
  box-shadow: 0 4px 10px rgba(31, 78, 121, 0.08);
}

.finance-action-cell {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding-right: 10px;
}

.finance-operation-menu {
  z-index: 120;
}

.finance-selected-operation-card {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.finance-selected-operation-card > strong {
  color: var(--text);
  font-size: var(--text-lg);
  line-height: 1.25;
}

.finance-selected-operation-card div:not(.toolbar) {
  display: grid;
  grid-template-columns: minmax(78px, .6fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.finance-selected-operation-card span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.finance-selected-operation-card b {
  color: var(--text);
  font-size: var(--text-sm);
}

.finance-selected-operation-card b.danger {
  color: var(--red);
}

.finance-operation-empty {
  margin: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  padding: 18px;
  text-align: center;
}

.finance-view-all {
  justify-self: start;
  margin-top: 4px;
}

.finance-bottom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.finance-mini-bars {
  display: grid;
  gap: 12px;
}

.finance-mini-bar {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(110px, 1.1fr) auto;
  gap: 12px;
  align-items: center;
  color: #59677d;
  font-size: var(--text-sm);
}

.finance-mini-bar span {
  min-width: 0;
}

.finance-mini-bar em {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef2f7;
}

.finance-mini-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.finance-mini-bar strong {
  color: #627087;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.finance-cashflow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: #59677d;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.finance-cashflow-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.finance-cashflow-legend span::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: currentColor;
}

.finance-cashflow-legend .green {
  color: #27ae6f;
}

.finance-cashflow-chart {
  min-height: 190px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: end;
  padding: 8px 4px 0;
}

.finance-cashflow-chart div {
  position: relative;
  height: 170px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  align-items: end;
  padding-bottom: 28px;
}

.finance-cashflow-chart span {
  display: block;
  border-radius: 3px 3px 0 0;
}

.finance-cashflow-chart .green {
  background: #27ae6f;
}

.finance-cashflow-chart .red {
  background: #ef4444;
}

.finance-cashflow-chart em {
  position: absolute;
  inset: auto 0 0;
  color: #718096;
  font-size: 11px;
  font-style: normal;
  text-align: center;
}

.finance-status-card,
.finance-debt-card,
.finance-quick-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.finance-status-card div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  color: #627087;
  font-size: var(--text-sm);
}

.finance-status-card strong {
  color: var(--text);
  white-space: nowrap;
}

.finance-status-card .available {
  margin: 2px -16px -16px;
  padding: 12px 16px;
  background: #f0fbf6;
  color: #249565;
}

.finance-status-card .available strong {
  color: #249565;
  font-size: var(--text-lg);
}

.finance-debt-card > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  padding: 4px 0;
  text-align: left;
  cursor: pointer;
}

.finance-debt-card > button:hover {
  background: #f5f8fc;
  padding-inline: 8px;
}

.finance-debt-card > button span,
.finance-debt-card > button strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.finance-debt-card > button small {
  grid-column: 1 / -1;
  color: var(--red);
  font-size: var(--text-sm);
}

.finance-all-debts {
  justify-self: start;
}

.finance-quick-card button {
  min-height: 38px;
  justify-content: start;
  border: 0;
  border-radius: 8px;
  background: #f7faff;
  color: var(--action-dark);
  padding: 9px 10px;
  font-weight: var(--weight-bold);
  text-align: left;
}

.finance-quick-card button:hover {
  background: #eef5ff;
}

.finance-quick-card .ui-icon {
  width: 17px;
  height: 17px;
}

.analytics-reference {
  gap: 14px;
}

.analytics-reference > *,
.analytics-dashboard-grid > *,
.analytics-kpi-grid > * {
  min-width: 0;
}

.analytics-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
}

.analytics-date-wrap {
  position: relative;
  min-width: 0;
}

.analytics-date-range {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: #58677c;
  padding: 0 14px;
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.analytics-date-range span {
  white-space: nowrap;
}

.analytics-date-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 25;
  width: min(360px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 12px;
  box-shadow: 0 18px 42px rgba(18, 33, 56, 0.16);
}

.analytics-date-popover label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.analytics-date-popover input {
  width: 100%;
  color: var(--text);
}

.analytics-date-popover > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.analytics-filter-card {
  display: grid;
  grid-template-columns: repeat(6, minmax(112px, 1fr)) minmax(150px, auto) minmax(92px, auto);
  gap: 10px;
  align-items: end;
  padding: 14px;
  box-shadow: none;
}

.analytics-filter-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.analytics-filter-card select {
  width: 100%;
  min-height: 40px;
  color: var(--text);
  font-weight: var(--weight-medium);
}

.analytics-tabs {
  display: flex;
  gap: 22px;
  align-items: flex-end;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}

.analytics-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #627087;
  padding: 0 0 10px;
  font-weight: var(--weight-bold);
  white-space: nowrap;
  cursor: pointer;
}

.analytics-tabs button.active {
  color: var(--action-dark);
  box-shadow: inset 0 -2px 0 var(--action-dark);
}

.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.analytics-kpi-card {
  position: relative;
  min-height: 132px;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 16px;
  box-shadow: var(--shadow);
}

.analytics-kpi-card span,
.analytics-finance-summary span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.analytics-kpi-card strong {
  color: var(--text);
  font-size: 28px;
  line-height: 1.05;
}

.analytics-kpi-card em,
.analytics-finance-summary em {
  color: var(--green);
  font-style: normal;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.analytics-kpi-card em.down,
.analytics-finance-summary em.danger {
  color: var(--red);
}

.analytics-kpi-card small {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.analytics-kpi-card > i {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
}

.analytics-kpi-card > i .ui-icon {
  width: 22px;
  height: 22px;
}

.analytics-kpi-card > i.blue {
  background: #eaf2ff;
  color: #1f7ae0;
}

.analytics-kpi-card > i.green {
  background: #e8f7ef;
  color: #1b9b69;
}

.analytics-kpi-card > i.violet {
  background: #efecff;
  color: #6d5bd0;
}

.analytics-kpi-card > i.amber {
  background: #fff4db;
  color: #b7791f;
}

.analytics-kpi-card > i.gray {
  background: #eef2f7;
  color: #64748b;
}

.analytics-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.analytics-chart-card {
  min-width: 0;
  min-height: 280px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
}

.analytics-chart-card h2 {
  margin: 0;
  color: var(--text);
  font-size: var(--text-xl);
  line-height: 1.2;
}

.analytics-chart-card h2 small {
  color: var(--muted);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.analytics-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.analytics-card-head select {
  min-height: 34px;
  width: auto;
  min-width: 112px;
  padding: 7px 28px 7px 10px;
  color: #59677d;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.finance-chart-scale-field {
  min-width: 128px;
}

.analytics-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: #59677d;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.analytics-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.analytics-legend span::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}

.analytics-legend .blue {
  color: #1f7ae0;
}

.analytics-legend span.blue {
  color: #1f7ae0;
}

.analytics-legend span.red {
  color: #ef4444;
}

.analytics-legend .green {
  color: #27ae6f;
}

.analytics-legend span.green {
  color: #27ae6f;
}

.analytics-legend .amber {
  color: #f59e0b;
}

.analytics-legend span.neutral {
  color: #94a3b8;
}

.analytics-line-chart {
  width: 100%;
  max-width: 100%;
  height: 245px;
  overflow: hidden;
}

.analytics-line-chart .grid-lines line {
  stroke: #edf2f7;
  stroke-width: 1;
}

.analytics-line-chart text {
  fill: #718096;
  font-size: 11px;
  font-weight: var(--weight-semibold);
}

.analytics-line-chart .line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.analytics-line-chart .blue-line {
  stroke: #1f7ae0;
}

.analytics-line-chart .green-line {
  stroke: #27ae6f;
}

.analytics-line-chart .amber-line {
  stroke: #f59e0b;
}

.analytics-chart-empty {
  min-height: 245px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed #d8e4f1;
  border-radius: 8px;
  background: #fbfdff;
  padding: 20px;
  color: var(--muted);
  text-align: center;
}

.analytics-chart-empty.is-compact {
  min-height: 190px;
}

.analytics-chart-empty strong {
  color: var(--text);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
}

.analytics-chart-empty span {
  max-width: 340px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.45;
}

.analytics-donut-wrap {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.analytics-status-donut {
  position: relative;
  width: min(180px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #1f7ae0 0 45%,
    #27ae6f 45% 58%,
    #f59e0b 58% 76%,
    #7c5ce8 76% 86%,
    #9aa7b7 86% 94%,
    #c8d1dc 94% 100%
  );
}

.analytics-status-donut::after {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: inherit;
  background: white;
}

.analytics-donut-legend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  color: #627087;
  font-size: var(--text-sm);
}

.finance-empty-note,
.analytics-empty-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.analytics-donut-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: var(--weight-medium);
}

.analytics-donut-legend span::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--legend-color);
}

.analytics-donut-legend strong {
  color: #627087;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.analytics-hbar-list,
.analytics-lawyer-list {
  display: grid;
  gap: 12px;
}

.analytics-hbar {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(130px, 2fr) 34px;
  gap: 12px;
  align-items: center;
  color: #59677d;
  font-size: var(--text-sm);
}

.analytics-hbar span {
  min-width: 0;
}

.analytics-hbar em,
.analytics-lawyer-row em {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef2f7;
}

.analytics-hbar i,
.analytics-lawyer-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.analytics-hbar strong {
  text-align: right;
  color: var(--text);
  font-size: var(--text-sm);
}

.analytics-lawyer-row {
  display: grid;
  grid-template-columns: 20px 28px minmax(100px, 1fr) minmax(120px, 1.2fr) 36px;
  gap: 10px;
  align-items: center;
  color: #59677d;
  font-size: var(--text-sm);
}

.analytics-lawyer-row strong {
  color: var(--text);
  font-size: var(--text-sm);
}

.analytics-lawyer-row i {
  background: #1f7ae0;
}

.analytics-lawyer-row:nth-child(2) i {
  background: #27ae6f;
}

.analytics-lawyer-row:nth-child(3) i {
  background: #f59e0b;
}

.analytics-lawyer-row:nth-child(4) i {
  background: #7c5ce8;
}

.analytics-lawyer-row b {
  color: #59677d;
  font-size: var(--text-sm);
  text-align: right;
}

.analytics-view-all {
  justify-self: center;
  margin-top: 8px;
  min-width: 146px;
}

.analytics-finance-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.analytics-finance-summary div {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-right: 1px solid var(--line);
}

.analytics-finance-summary div:last-child {
  border-right: 0;
}

.analytics-finance-summary strong {
  font-size: var(--text-lg);
}

.analytics-column-chart {
  min-height: 190px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 20px;
  padding: 16px 18px 4px;
}

.analytics-column-group {
  height: 170px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: end;
  position: relative;
  padding-bottom: 24px;
}

.analytics-column-group span {
  display: block;
  border-radius: 3px 3px 0 0;
  background: #1f7ae0;
}

.analytics-column-group span.red {
  background: #ef4444;
}

.analytics-column-group span.green {
  background: #27ae6f;
}

.analytics-column-group em {
  position: absolute;
  inset: auto 0 0;
  color: #718096;
  font-size: var(--text-sm);
  font-style: normal;
  text-align: center;
}

@media (max-width: 1500px) {
  .analytics-filter-card {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto;
  }

  .analytics-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .analytics-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-line-card,
  .analytics-finance-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1100px) {
  .analytics-top-row {
    grid-template-columns: 1fr;
  }

  .analytics-filter-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-filter-card button,
  .analytics-date-wrap,
  .analytics-date-range,
  .analytics-top-row .secondary {
    width: 100%;
  }

  .analytics-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .analytics-line-card,
  .analytics-finance-card {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  .analytics-reference {
    gap: 12px;
  }

  .analytics-filter-card,
  .analytics-kpi-grid {
    grid-template-columns: 1fr;
  }

  .analytics-kpi-card {
    min-height: 108px;
  }

  .analytics-tabs {
    gap: 16px;
  }

  .analytics-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .analytics-card-head select {
    width: 100%;
  }

  .analytics-donut-wrap,
  .analytics-finance-summary {
    grid-template-columns: 1fr;
  }

  .analytics-status-donut {
    justify-self: center;
    max-width: 170px;
  }

  .analytics-hbar,
  .analytics-lawyer-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .analytics-hbar strong,
  .analytics-lawyer-row b {
    text-align: left;
  }

  .analytics-column-chart {
    gap: 12px;
    padding-inline: 4px;
  }

  .analytics-date-popover {
    left: 0;
    right: 0;
    width: 100%;
  }

  .analytics-date-popover > div {
    grid-template-columns: 1fr;
  }
}

.ai-helper-grid {
  align-items: stretch;
}

.ai-helper-card {
  display: grid;
  gap: 8px;
  justify-items: start;
  border: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
}

.ai-helper-card.active {
  border-color: var(--action-dark);
  box-shadow: 0 0 0 2px rgba(31, 87, 131, 0.12);
}

.ai-helper-card > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eaf2fb;
  color: var(--blue);
}

.ai-helper-card strong {
  color: var(--text);
  font-size: var(--text-base);
}

.ai-helper-card em,
.action-list-button span {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.ai-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 10px;
}

.action-list-button {
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.ai-directory-screen {
  gap: 18px;
}

.ai-page-tools {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}

.ai-page-tools .search-field {
  width: min(360px, 100%);
}

.ai-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ai-summary-strip button {
  min-height: 76px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(18, 33, 56, 0.04);
}

.ai-summary-strip button.active,
.ai-summary-strip button:hover {
  border-color: #b9d3ef;
  background: #f8fbff;
}

.ai-summary-strip i {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
}

.ai-summary-strip i .ui-icon {
  width: 18px;
  height: 18px;
}

.ai-summary-strip i.blue {
  background: #eaf2ff;
  color: #1f7ae0;
}

.ai-summary-strip i.green {
  background: #e8f7ef;
  color: #1b9b69;
}

.ai-summary-strip i.amber {
  background: #fff4db;
  color: #b7791f;
}

.ai-summary-strip i.violet {
  background: #f1eafd;
  color: #7c5ee8;
}

.ai-summary-strip strong {
  color: var(--text);
  font-size: 19px;
  line-height: 1.05;
}

.ai-summary-strip span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.ai-layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

.ai-main,
.ai-right-stack {
  min-width: 0;
  display: grid;
  gap: 18px;
}

.ai-section {
  display: grid;
  gap: 14px;
}

.section-head.compact {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.section-head.compact h2 {
  margin: 0 0 4px;
}

.ai-law-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.ai-law-card {
  min-height: 170px;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 10px;
  border: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
}

.ai-law-card.active {
  border-color: var(--action-dark);
  box-shadow: 0 0 0 2px rgba(31, 87, 131, 0.12);
}

.ai-law-card strong,
.ai-case-row strong {
  color: var(--text);
  font-size: var(--text-base);
}

.ai-law-card em,
.ai-case-row span,
.ai-case-row p,
.ai-case-row small {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.ai-law-card small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}

.ai-law-card small .ui-icon {
  width: 16px;
  height: 16px;
}

.ai-law-icon,
.ai-case-icon,
.ai-bot-mark {
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: #eaf2fb;
  color: var(--action-dark);
}

.ai-law-icon {
  width: 40px;
  height: 40px;
}

.ai-case-icon {
  width: 44px;
  height: 44px;
  font-weight: 900;
}

.ai-law-icon .ui-icon,
.ai-case-icon .ui-icon,
.ai-bot-mark .ui-icon {
  width: 22px;
  height: 22px;
}

.ai-law-icon.green,
.ai-case-icon.green {
  background: #e8f8ef;
  color: var(--green);
}

.ai-law-icon.amber,
.ai-case-icon.amber {
  background: #fff5dc;
  color: #d28a00;
}

.ai-law-icon.violet,
.ai-case-icon.violet {
  background: #f1eafd;
  color: #7c5ee8;
}

.ai-case-icon.neutral {
  background: #f1f4f8;
  color: var(--muted);
  font-size: 24px;
}

.ai-case-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 180px) minmax(150px, 200px);
  gap: 10px;
}

.ai-view-toggle {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f9fc;
}

.ai-view-toggle button {
  width: 34px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.ai-view-toggle button.active {
  border-radius: 7px;
  background: #fff;
  color: var(--action-dark);
  box-shadow: var(--shadow-xs);
}

.ai-case-list {
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.ai-case-list.card-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border: 0;
  background: transparent;
}

.ai-case-row {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(220px, 1.1fr) minmax(240px, 1.4fr) auto auto 38px;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
  cursor: pointer;
}

.ai-case-list.card-mode .ai-case-row {
  grid-template-columns: 72px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 10px 16px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  padding: 16px;
  cursor: pointer;
}

.ai-case-list.card-mode .ai-case-row > p {
  grid-column: 2 / 4;
  max-width: 560px;
}

.ai-case-list.card-mode .ai-row-actions {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ai-case-row:last-child {
  border-bottom: 0;
}

.ai-case-row.selected {
  background: #f7fbff;
}

.ai-case-list.card-mode .ai-case-row.selected {
  border-color: #b9d3ef;
  background: #f7fbff;
  box-shadow: 0 0 0 2px rgba(31, 87, 131, 0.08);
}

.ai-case-row > div:not(.ai-row-actions) {
  display: grid;
  gap: 4px;
}

.ai-case-list.card-mode .ai-case-icon {
  width: 62px;
  height: 62px;
  border-radius: 14px;
}

.ai-case-list.card-mode .ai-case-icon .ui-icon {
  width: 30px;
  height: 30px;
}

.ai-case-list.card-mode .ai-case-main {
  align-self: center;
  gap: 6px;
}

.ai-case-list.card-mode .ai-case-main strong {
  font-size: 15px;
  line-height: 1.25;
}

.ai-case-list.card-mode .ai-case-main span,
.ai-case-list.card-mode .ai-case-main small {
  font-size: 12px;
}

.ai-case-main small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ai-case-main small .ui-icon {
  width: 14px;
  height: 14px;
}

.ai-case-row p {
  margin: 0;
}

.ai-case-row .badge {
  justify-self: start;
}

.ai-status-pill {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.ai-status-pill .ui-icon {
  width: 15px;
  height: 15px;
}

.ai-status-pill.green {
  background: #e8f8ef;
  color: #16865a;
}

.ai-status-pill.amber {
  background: #fff4db;
  color: #a76400;
}

.ai-create-row {
  grid-template-columns: 52px minmax(0, 1fr) auto;
}

.ai-create-row .secondary {
  grid-column: -2;
}

.ai-row-actions {
  position: relative;
}

.ai-row-menu {
  position: absolute;
  z-index: 8;
  top: 40px;
  right: 0;
  width: 190px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-md);
}

.ai-row-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 10px 12px;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.ai-row-menu button .ui-icon {
  width: 15px;
  height: 15px;
}

.ai-row-menu button:last-child {
  border-bottom: 0;
  color: var(--red);
}

.ai-row-menu button:hover {
  background: #f5f8fc;
}

.ai-card-chat-panel {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 14px;
  border-color: #d6e5f7;
  background: #fbfdff;
  box-shadow: 0 10px 28px rgba(18, 33, 56, 0.06);
}

.ai-card-chat-panel .toolbar {
  align-items: center;
}

.ai-card-chat-panel .ai-chat {
  min-height: 220px;
  max-height: 340px;
  overflow-y: auto;
  background: white;
}

.ai-chat-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #dfe7f2;
  border-radius: 50%;
  background: white;
  color: #64748b;
  cursor: pointer;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.ai-chat-close:hover {
  border-color: #cbd8e8;
  background: #f7fbff;
  color: var(--action-dark);
}

.ai-consultant-card,
.ai-stats-card,
.ai-actions-card {
  display: grid;
  gap: 14px;
}

.ai-consultant-card {
  text-align: left;
}

.ai-bot-mark {
  justify-self: center;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 38%, #ede7ff 39%, #f7f3ff 70%);
  color: #7656e8;
}

.ai-bot-mark .ui-icon {
  width: 42px;
  height: 42px;
}

.ai-question-list {
  display: grid;
  gap: 8px;
}

.ai-question-list > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ai-question-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: #f6f8fb;
  padding: 10px 12px;
  color: var(--text);
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.ai-question-list button:hover {
  background: #eef4fb;
}

.ai-stats-card div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  color: var(--muted);
  font-weight: 800;
}

.ai-stats-card strong {
  color: var(--text);
}

.ai-actions-card .list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f7faff;
  color: var(--action-dark);
}

.ai-how-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ai-how-card h2 {
  grid-column: 1 / -1;
  margin: 0;
}

.ai-how-card div {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
}

.ai-how-card span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #eaf2fb;
  color: var(--action-dark);
}

.ai-how-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.osint-check-row {
  display: grid;
  gap: 6px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.osint-check-row.active {
  border-color: var(--action-dark);
  background: #f4f7fb;
}

.osint-check-row p {
  margin: 0;
}

.osint-side h3 {
  margin: 0;
  font-size: var(--text-base);
}

.osint-reference {
  gap: 12px;
}

.osint-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.osint-top-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.osint-date-wrap {
  flex: 0 0 auto;
}

.osint-date-range {
  min-width: 238px;
}

.osint-search {
  min-width: 240px;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 0 12px;
}

.osint-search .ui-icon {
  color: var(--muted);
}

.osint-search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.osint-tabs,
.osint-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  border-bottom: 1px solid var(--line);
}

.osint-tabs button,
.osint-subtabs button {
  min-height: 36px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  padding: 0 0 8px;
  cursor: pointer;
}

.osint-tabs button.active,
.osint-subtabs button.active {
  border-color: var(--blue);
  color: var(--action-dark);
}

.osint-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.osint-kpi-card {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.osint-kpi-card:hover {
  border-color: #c8d8eb;
  background: #fbfdff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.osint-kpi-card.active {
  border-color: #b8d3f4;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: inset 3px 0 0 var(--action-dark);
}

.osint-kpi-card:active {
  transform: translateY(1px);
}

.osint-kpi-card span,
.osint-kpi-card small {
  display: block;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.osint-kpi-card strong {
  display: block;
  margin: 6px 0 4px;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}

.osint-kpi-card small {
  color: var(--green);
}

.osint-kpi-card small.danger {
  color: var(--red);
}

.osint-kpi-card em {
  width: 36px;
  height: 36px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
}

.osint-kpi-card em.blue {
  background: #eaf4ff;
  color: var(--action-dark);
}

.osint-kpi-card em.green {
  background: #e7f8ef;
  color: var(--green);
}

.osint-kpi-card em.red {
  background: #ffe9ec;
  color: var(--red);
}

.osint-kpi-card em .ui-icon {
  width: 18px;
  height: 18px;
}

.osint-empty-state {
  min-height: 300px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 42px 24px;
  text-align: center;
}

.osint-empty-state > span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--action-soft);
  color: var(--action-dark);
}

.osint-empty-state > span .ui-icon {
  width: 25px;
  height: 25px;
}

.osint-empty-state strong {
  color: var(--text);
  font-size: var(--text-xl);
  font-weight: 950;
}

.osint-empty-state p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.55;
}

.osint-overview-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1.08fr) minmax(190px, 0.62fr) minmax(250px, 0.76fr) minmax(260px, 0.88fr);
  grid-template-areas:
    "line line sources side"
    "lower lower lower side"
    "data data data side";
  gap: 10px;
  align-items: start;
}

.osint-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
  gap: 14px;
  align-items: start;
}

.osint-lower-grid,
.osint-bottom-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(210px, 0.75fr) minmax(210px, 0.75fr);
  gap: 14px;
  align-items: start;
}

.osint-bottom-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.31fr);
}

.osint-chart-card,
.osint-wide-card,
.osint-small-card,
.osint-right-card {
  padding: 12px;
  align-self: start;
  min-width: 0;
}

.osint-chart-card h2,
.osint-wide-card h2,
.osint-small-card h2,
.osint-right-card h2 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 16px;
}

.osint-side-stack .osint-right-card:first-child {
  max-height: 520px;
  overflow: hidden;
}

.osint-side-stack .osint-right-card:first-child .osint-active-list {
  max-height: 454px;
  overflow: auto;
  padding-right: 2px;
}

.osint-line-panel {
  grid-area: line;
}

.osint-source-panel {
  grid-area: sources;
  min-height: 266px;
  display: grid;
  grid-template-rows: auto 1fr;
}

.osint-mentions-panel {
  grid-area: mentions;
}

.osint-graph-panel {
  grid-area: graph;
}

.osint-types-panel {
  grid-area: types;
}

.osint-lower-composite {
  grid-area: lower;
  padding: 0;
  overflow: hidden;
}

.osint-sources-panel {
  grid-area: data;
}

.osint-side-stack {
  grid-area: side;
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}

.osint-lower-composite .osint-subtabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
}

.osint-lower-composite .osint-subtabs button {
  justify-content: center;
  width: 100%;
  min-width: 0;
  padding-inline: 2px;
  text-align: center;
  white-space: normal;
}

.osint-lower-columns {
  display: grid;
  grid-template-columns: minmax(340px, 1.02fr) minmax(300px, 0.9fr) minmax(270px, 0.74fr);
  align-items: stretch;
}

.osint-mentions-column,
.osint-graph-column,
.osint-types-column {
  min-width: 0;
  padding: 10px 12px 12px;
}

.osint-graph-column,
.osint-types-column {
  border-left: 1px solid var(--line);
}

.osint-graph-column h2,
.osint-types-column h2 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 16px;
}

.osint-line-chart {
  width: 100%;
  height: 172px;
  margin-top: 4px;
}

.osint-chart-empty {
  min-height: 172px;
  display: grid;
  place-items: center;
  border: 1px dashed #cfe0f3;
  border-radius: 8px;
  background: #f8fbff;
  color: var(--muted);
  padding: 18px;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.45;
}

.osint-line-chart .grid-line {
  stroke: #e9eef6;
  stroke-width: 1;
}

.osint-line-chart .line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.osint-line-chart .all {
  stroke: #1f7ae0;
}

.osint-line-chart .negative {
  stroke: #ef4444;
}

.osint-line-chart .positive {
  stroke: #27ae6f;
}

.osint-line-chart .neutral {
  stroke: #94a3b8;
}

.osint-line-chart text {
  fill: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.analytics-legend .muted-dot {
  background: #94a3b8;
}

.osint-donut-wrap {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 172px;
}

.osint-donut {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: conic-gradient(#1f7ae0 0 45%, #27ae6f 45% 70%, #7c5ce8 70% 85%, #f59e0b 85% 92%, #8796a8 92% 97%, #cbd5e1 97% 100%);
  position: relative;
}

.osint-donut::after {
  content: "";
  position: absolute;
  inset: 42px;
  border-radius: 50%;
  background: white;
}

.osint-source-panel .osint-donut-wrap {
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  align-self: center;
}

.osint-source-panel .osint-donut {
  width: 112px;
  height: 112px;
}

.osint-source-panel .osint-donut::after {
  inset: 32px;
}

.osint-source-panel .osint-legend {
  gap: 8px 7px;
  font-size: 11px;
}

.osint-source-panel .osint-legend i {
  width: 10px;
  height: 10px;
}

.osint-legend {
  display: grid;
  gap: 12px;
}

.osint-legend span {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 3px 9px;
  align-items: center;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.osint-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.osint-legend b {
  grid-column: 2;
  color: var(--muted);
}

.osint-active-list,
.osint-mentions-list,
.osint-quick-actions,
.osint-registry-table,
.osint-focus-grid {
  display: grid;
  gap: 8px;
}

.osint-mentions-list {
  gap: 0;
}

.osint-active-list button,
.osint-mention-row,
.osint-quick-actions button,
.osint-focus-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--text);
  cursor: pointer;
}

.osint-active-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
  text-align: left;
  padding: 8px 0 9px;
  border-width: 0 0 1px;
  border-radius: 0;
}

.osint-active-list button:last-child {
  border-bottom: 0;
}

.osint-active-list strong,
.osint-active-list b,
.osint-focus-card strong {
  display: block;
  color: var(--action-dark);
  font-size: 11px;
}

.osint-active-list b,
.osint-focus-card strong {
  color: var(--text);
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.16;
  text-wrap: balance;
}

.osint-active-list small {
  color: var(--muted);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
}

.osint-active-list .badge {
  align-self: start;
  white-space: nowrap;
  min-height: 20px;
  padding: 2px 6px;
  font-size: 9.5px;
}

.osint-progress-caption {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
}

.osint-progress-caption strong {
  color: var(--text);
  font-size: 11px;
}

.osint-active-list em {
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef7;
}

.osint-list-hint {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: var(--weight-bold);
}

.osint-active-list em i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1f7ae0;
}

.osint-subtabs {
  margin: -4px 0 12px;
  flex-wrap: nowrap;
  gap: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}

.osint-subtabs::-webkit-scrollbar {
  display: none;
}

.osint-subtabs button {
  min-height: 32px;
  flex: 0 0 auto;
  font-size: 9px;
  white-space: nowrap;
}

.osint-mention-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 104px;
  gap: 4px 10px;
  align-items: start;
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
  padding: 5px 0;
  text-align: left;
}

.source-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
}

.source-icon.blue {
  background: #eaf4ff;
  color: var(--action-dark);
}

.source-icon.facebook {
  background: #1f7ae0;
  color: white;
}

.source-icon.opendata {
  background: linear-gradient(180deg, #2fb6ff 0%, #ffd54a 100%);
  color: #0f2f55;
}

.source-icon.red {
  background: #ffe9ec;
  color: var(--red);
}

.source-icon.amber {
  background: #fff4db;
  color: #b7791f;
}

.source-icon b {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.source-icon.facebook b {
  font-size: 20px;
}

.osint-mention-row strong,
.osint-mention-row small {
  display: block;
}

.osint-mention-row strong {
  color: var(--text);
  font-size: 11px;
  line-height: 1.2;
}

.osint-mention-row small,
.osint-mention-row time {
  color: var(--muted);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  line-height: 1.22;
}

.osint-mention-row > .source-icon {
  grid-row: 1 / span 2;
}

.osint-mention-row > span:not(.source-icon):not(.badge) {
  grid-column: 2;
  min-width: 0;
}

.osint-mention-row time {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  white-space: nowrap;
}

.osint-mention-row .badge {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  white-space: nowrap;
}

.osint-mention-row > span:not(.source-icon):not(.badge) strong,
.osint-mention-row > span:not(.source-icon):not(.badge) small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.osint-list-more {
  justify-self: start;
  margin-top: 8px;
}

.osint-graph {
  width: min(100%, 330px);
  min-height: 215px;
  margin: 0 auto;
  position: relative;
}

.osint-graph-column .osint-graph {
  min-height: 230px;
}

.osint-graph svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.osint-graph .edge-line {
  stroke: #c8d5e6;
  stroke-width: 1.35;
}

.osint-graph .edge-line.dashed {
  stroke-dasharray: 5 5;
}

.osint-graph .node {
  position: absolute;
  z-index: 2;
  min-width: 54px;
  min-height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #ecf5ff;
  color: var(--action-dark);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-align: center;
  box-shadow: 0 8px 18px rgba(31, 122, 224, 0.12);
}

.osint-graph .center {
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--blue);
  color: white;
}

.osint-graph .n1 { left: 50%; top: 6%; }
.osint-graph .n2 { right: 2%; top: 32%; }
.osint-graph .n3 { right: 6%; bottom: 14%; }
.osint-graph .n4 { left: 4%; bottom: 15%; }
.osint-graph .n5 { left: 3%; top: 32%; }

.osint-graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.osint-graph-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.osint-graph-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #77aeea;
}

.osint-graph-legend .company {
  background: var(--green);
}

.osint-graph-legend .line,
.osint-graph-legend .dash {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #94a3b8;
}

.osint-graph-legend .dash {
  background: repeating-linear-gradient(90deg, #94a3b8 0 5px, transparent 5px 8px);
}

.osint-bar-list {
  display: grid;
  gap: 13px;
}

.osint-bar-list div {
  display: grid;
  grid-template-columns: minmax(64px, 1fr) minmax(42px, 0.75fr) 30px;
  gap: 5px;
  align-items: center;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.osint-bar-list em {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef7;
}

.osint-bar-list i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.osint-bar-list b {
  color: var(--text);
}

.osint-source-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.osint-source-grid article {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  align-content: start;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 12px;
}

.osint-source-grid article.is-disabled {
  opacity: 0.58;
}

.source-card-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #eaf4ff;
  color: var(--action-dark);
}

.source-card-icon.green {
  background: #e7f8ef;
  color: var(--green);
}

.source-card-icon.amber {
  background: #fff4db;
  color: #b7791f;
}

.source-card-icon.blue {
  background: #eaf4ff;
  color: var(--action-dark);
}

.source-card-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.osint-source-grid strong,
.osint-registry-table strong {
  display: block;
  color: var(--text);
}

.osint-source-grid span,
.osint-source-grid small,
.osint-registry-table span,
.osint-registry-table time,
.osint-focus-card span {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.osint-source-grid .badge {
  grid-column: 2;
  justify-self: start;
}

.osint-manage {
  justify-self: end;
  margin-top: 10px;
}

.osint-source-manager {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 14px;
}

.osint-source-manager .analytics-card-head {
  margin-bottom: 12px;
}

.osint-source-manager h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--text-lg);
}

.osint-source-manager p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.osint-source-manager-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.osint-source-manager-grid article {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 12px;
}

.osint-source-manager-grid article.is-disabled {
  background: #f5f7fb;
}

.osint-source-toggle {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.osint-source-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.osint-source-toggle span {
  width: 34px;
  height: 20px;
  position: relative;
  border-radius: 999px;
  background: #d9e3f0;
  transition: background 0.16s ease;
}

.osint-source-toggle span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
  transition: transform 0.16s ease;
}

.osint-source-toggle input:checked + span {
  background: var(--action-dark);
}

.osint-source-toggle input:checked + span::after {
  transform: translateX(14px);
}

.osint-source-manager-grid dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.osint-source-manager-grid dl div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #edf2f8;
  padding-top: 6px;
}

.osint-source-manager-grid dt,
.osint-source-manager-grid dd {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.osint-source-manager-grid dd {
  color: var(--text);
  text-align: right;
}

.osint-source-manager-grid button {
  justify-self: start;
}

.osint-quick-actions {
  grid-template-columns: 1fr 1fr;
}

.osint-quick-actions button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 10px;
  background: #f8fbff;
  color: var(--action-dark);
  font-weight: var(--weight-bold);
}

.osint-quick-actions button:hover,
.osint-mention-row:hover,
.osint-active-list button:hover,
.osint-focus-card:hover {
  border-color: #c8d8eb;
  background: #f5f9ff;
}

.osint-registry-table div {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(220px, 1.3fr) auto auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}

.osint-registry-table div:last-child {
  border-bottom: 0;
}

.osint-focus-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.osint-focus-card {
  display: grid;
  justify-items: start;
  gap: 7px;
  padding: 12px;
  text-align: left;
}

.osint-tab-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.42fr);
  gap: 14px;
  align-items: start;
}

.osint-graph-card {
  overflow: hidden;
}

.osint-graph-card .osint-graph {
  min-height: 255px;
}

.osint-graph-card .osint-graph-legend {
  justify-content: center;
  margin-top: 4px;
}

.osint-tab-workspace {
  align-self: start;
}

.settings-user-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.settings-user-menu-wrap {
  position: relative;
}

.settings-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: 190px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 6px;
  box-shadow: var(--shadow);
}

.settings-user-menu[hidden] {
  display: none;
}

.settings-user-menu button {
  width: 100%;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  padding: 0 9px;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.settings-user-menu button:hover {
  background: var(--action-hover);
  color: white;
}

.settings-user-menu button.danger {
  color: var(--semantic-red);
}

.settings-user-menu button.danger:hover {
  background: var(--semantic-red);
  color: white;
}

.settings-user-menu .ui-icon {
  width: 15px;
  height: 15px;
}

#settings-invite-dialog {
  width: min(820px, calc(100vw - 32px));
}

#settings-access-delivery-dialog {
  width: min(620px, calc(100vw - 32px));
}

#settings-password-info-dialog {
  width: min(560px, calc(100vw - 32px));
}

#settings-user-delete-dialog {
  width: min(540px, calc(100vw - 32px));
}

#settings-audit-clear-dialog {
  width: min(540px, calc(100vw - 32px));
}

#settings-client-picker-dialog {
  width: min(720px, calc(100vw - 32px));
}

.settings-user-form {
  width: min(760px, calc(100vw - 32px));
  gap: 14px;
}

.settings-user-form .settings-invite-title {
  width: min(100%, 620px);
}

.settings-access-delivery-form {
  gap: 12px;
}

.settings-delete-title-icon {
  background: #fff1f2;
  color: var(--red);
}

.settings-delete-warning {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  border: 1px solid #ffd3d7;
  border-radius: 8px;
  background: #fff7f8;
  padding: 12px;
}

.settings-delete-warning > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #ffe4e7;
  color: var(--red);
}

.settings-delete-warning strong,
.settings-delete-warning em,
.settings-delete-warning p {
  display: block;
  min-width: 0;
}

.settings-delete-warning strong {
  color: #172033;
  font-size: 14px;
  font-weight: 950;
}

.settings-delete-warning em {
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.settings-delete-warning p {
  margin: 10px 0 0;
  color: #9f1239;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.4;
}

.settings-delete-actions {
  gap: 10px;
}

.settings-delete-actions .danger {
  border-color: #be123c;
  background: #be123c;
  color: #ffffff;
}

.settings-delete-actions .danger:hover {
  border-color: #9f1239;
  background: #9f1239;
}

.settings-audit-clear-title-icon {
  background: #fff7df;
  color: #a16207;
}

.settings-audit-clear-warning {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  border: 1px solid #f3d58d;
  border-radius: 8px;
  background: #fffaf0;
  padding: 12px;
}

.settings-audit-clear-warning > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fff0c9;
  color: #a16207;
}

.settings-audit-clear-warning strong,
.settings-audit-clear-warning p {
  display: block;
  min-width: 0;
}

.settings-audit-clear-warning strong {
  color: #172033;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.35;
}

.settings-audit-clear-warning p {
  margin: 8px 0 0;
  color: #7c4a00;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.4;
}

.settings-delivery-user-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #dbe8f6;
  border-radius: 8px;
  background: #f7fbff;
  padding: 10px 12px;
}

.settings-delivery-user-card > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--action-dark);
  color: white;
}

.settings-delivery-user-card strong,
.settings-delivery-user-card em {
  display: block;
  min-width: 0;
}

.settings-delivery-user-card strong {
  color: var(--text);
  font-size: 14px;
}

.settings-delivery-user-card em {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.settings-delivery-channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.settings-delivery-channels button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #dbe8f6;
  border-radius: 8px;
  background: white;
  color: var(--action-dark);
  font-weight: 900;
  cursor: pointer;
}

.settings-delivery-channels button.active {
  border-color: #b8d3f4;
  background: #f3f8ff;
  box-shadow: inset 0 0 0 1px rgba(31, 94, 150, 0.08);
}

.settings-delivery-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
}

.settings-access-delivery-form textarea {
  resize: vertical;
  min-height: 170px;
  line-height: 1.45;
}

.settings-user-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-password-temporary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #e0e8f2;
  border-radius: 8px;
  background: #fbfdff;
  padding: 10px 12px;
  color: #172033;
  cursor: pointer;
}

.settings-password-temporary input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.settings-password-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.settings-password-copy strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #172033;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
}

.settings-password-copy em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.settings-password-switch {
  width: 44px;
  height: 24px;
  position: relative;
  border-radius: 999px;
  background: #cfddeb;
  box-shadow: inset 0 0 0 1px rgba(23, 32, 51, 0.04);
  transition: background 0.16s ease;
}

.settings-password-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  transition: transform 0.16s ease;
}

.settings-password-temporary:has(input:checked) {
  border-color: #bad7f3;
  background: #f5faff;
}

.settings-password-temporary:has(input:checked) .settings-password-switch {
  background: var(--action-dark);
}

.settings-password-temporary:has(input:checked) .settings-password-switch::before {
  transform: translateX(20px);
}

.settings-password-temporary:has(input:focus-visible) {
  border-color: #8bbcf4;
  box-shadow: 0 0 0 3px rgba(43, 126, 204, 0.12);
}

.settings-password-info-trigger {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #cfe0f1;
  border-radius: 50%;
  background: #edf4fb;
  color: var(--action-dark);
  padding: 0;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.settings-password-info-trigger:hover,
.settings-password-info-trigger:focus-visible {
  border-color: #9bc6f4;
  background: #dceeff;
  outline: none;
}

.settings-password-info-dialog .crm-modal-title-icon {
  font-size: 18px;
  font-style: italic;
  font-weight: 950;
}

.settings-password-info-body {
  display: grid;
  gap: 10px;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
}

.settings-password-info-body p {
  margin: 0;
}

.settings-password-info-body > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 1px solid #e0e8f2;
  border-radius: 8px;
  background: #fbfdff;
  padding: 10px;
}

.settings-password-info-body > div span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dceeff;
  color: var(--action-dark);
  font-size: 12px;
  font-weight: 950;
}

.settings-password-info-body em {
  border-radius: 8px;
  background: #fff7df;
  color: #8a6200;
  padding: 10px;
  font-style: normal;
  font-weight: 850;
}

.settings-user-editor-section {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 12px;
}

.settings-user-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.settings-user-editor-head strong {
  color: #172033;
  font-size: 13px;
}

.settings-user-editor-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.settings-permissions-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.settings-permission-tile {
  position: relative;
  min-height: 66px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 9px;
  row-gap: 2px;
  border: 1px solid #e3ebf4;
  border-radius: 8px;
  background: white;
  padding: 9px 10px;
  color: var(--text);
  cursor: pointer;
}

.settings-permission-tile input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.settings-permission-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  grid-row: 1 / span 2;
  border-radius: 50%;
  background: #f3f6fa;
  color: #71839b;
}

.settings-permission-tile strong {
  color: #253348;
  font-size: 12px;
  line-height: 1.2;
}

.settings-permission-tile small {
  display: block;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
}

.settings-permission-tile:has(input:checked) {
  border-color: #b8d3f4;
  background: #f6fbff;
  box-shadow: inset 0 0 0 1px rgba(31, 94, 150, 0.08);
}

.settings-permission-tile:has(input:checked) .settings-permission-icon {
  background: var(--action-dark);
  color: white;
}

.settings-permission-tile.is-locked {
  cursor: default;
}

.settings-cases-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  align-items: start;
  gap: 12px;
}

.settings-cases-controls label {
  min-width: 0;
}

.settings-case-search-field,
.settings-case-meta-field {
  align-self: stretch;
}

.settings-case-meta-field {
  justify-items: end;
}

.settings-cases-controls small {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.settings-cases-controls small span {
  min-width: 66px;
  display: grid;
  gap: 2px;
  justify-items: center;
  border: 1px solid #dbe8f6;
  border-radius: 8px;
  background: #f8fbff;
  color: var(--muted);
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.05;
}

.settings-cases-controls small em {
  font-style: normal;
}

.settings-cases-controls small strong {
  color: #172033;
  font-size: 13px;
  font-weight: 950;
}

.settings-client-picker {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

.settings-client-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #e0e8f2;
  border-radius: 8px;
  background: #fbfdff;
  padding: 10px;
}

.settings-client-open {
  min-height: 36px;
  justify-content: center;
  white-space: nowrap;
}

.settings-client-selected-list {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.settings-client-selected-list span,
.settings-client-selected-chip,
.settings-client-selected-list em {
  max-width: 100%;
  border-radius: 999px;
  background: #eef4fb;
  color: #3b4b63;
  padding: 6px 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-client-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  cursor: pointer;
  max-width: min(100%, 230px);
}

.settings-client-selected-chip span {
  min-width: 0;
  padding: 0;
  background: transparent;
}

.settings-client-selected-chip .ui-icon {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.settings-client-selected-chip:hover {
  background: #dceeff;
  color: #174b78;
}

.settings-client-selected-list em {
  background: transparent;
  color: var(--muted);
  padding-inline: 0;
}

.settings-client-selected-list .is-total {
  background: #dceeff;
  color: #174b78;
}

.settings-client-picker-form {
  width: min(680px, calc(100vw - 32px));
}

.settings-client-picker-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.settings-client-picker-status {
  min-width: 170px;
  display: grid;
  align-content: center;
  gap: 5px;
  border: 1px solid #e0e8f2;
  border-radius: 8px;
  background: #fbfdff;
  padding: 11px;
}

.settings-client-picker-status span,
.settings-client-picker-status strong {
  display: block;
  line-height: 1.2;
}

.settings-client-picker-status span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.settings-client-picker-status strong {
  color: #172033;
  font-size: 12px;
  font-weight: 950;
}

.settings-client-picker-quick-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.settings-client-picker-selected {
  display: grid;
  gap: 8px;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px;
}

.settings-client-picker-selected strong {
  color: #172033;
  font-size: 12px;
  font-weight: 950;
}

.settings-client-picker-selected > div {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.settings-client-picker-selected em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.35;
}

.settings-client-picker-more {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #eef4fb;
  color: #3b4b63;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
}

.settings-client-dialog-list {
  max-height: min(460px, 48vh);
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding-right: 2px;
}

.settings-client-dialog-choice {
  display: grid;
  gap: 0;
  border: 1px solid #e0e8f2;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.settings-client-dialog-summary {
  min-height: 54px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.settings-client-dialog-summary::-webkit-details-marker {
  display: none;
}

.settings-client-dialog-summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid #6b7a90;
  border-bottom: 2px solid #6b7a90;
  transform: rotate(-45deg);
  transition: transform 0.16s ease;
}

.settings-client-dialog-choice[open] .settings-client-dialog-summary::before {
  transform: rotate(45deg);
}

.settings-client-dialog-master {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--action-dark);
  cursor: pointer;
}

.settings-client-dialog-limit {
  border: 1px dashed #cfddea;
  border-radius: 8px;
  background: #fbfdff;
  color: var(--muted);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.settings-client-dialog-copy,
.settings-client-dialog-copy strong,
.settings-client-dialog-copy em,
.settings-client-dialog-count {
  min-width: 0;
}

.settings-client-dialog-copy strong,
.settings-client-dialog-copy em,
.settings-client-dialog-count {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-client-dialog-copy strong {
  color: #172033;
  font-size: 13px;
  font-weight: 900;
}

.settings-client-dialog-copy em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.settings-client-dialog-count {
  max-width: 130px;
  justify-self: end;
  border-radius: 999px;
  background: #eef4fb;
  color: #3b4b63;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
}

.settings-client-dialog-choice.is-selected {
  border-color: #b8d3f4;
  background: #f6fbff;
  box-shadow: inset 0 0 0 1px rgba(31, 94, 150, 0.08);
}

.settings-client-dialog-choice.is-partial {
  border-color: #f0d491;
  background: #fffaf0;
}

.settings-client-dialog-choice.is-selected .settings-client-dialog-count {
  background: #dceeff;
  color: #174b78;
}

.settings-client-dialog-choice.is-partial .settings-client-dialog-count {
  background: #fff0c9;
  color: #8a6200;
}

.settings-client-case-list {
  display: grid;
  gap: 6px;
  border-top: 1px solid #e4edf6;
  padding: 8px 10px 10px 38px;
}

.settings-client-case-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid #e5edf7;
  border-radius: 8px;
  background: #ffffff;
  padding: 8px 10px;
  cursor: pointer;
}

.settings-client-case-choice input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--action-dark);
}

.settings-client-case-choice span,
.settings-client-case-choice strong,
.settings-client-case-choice em {
  min-width: 0;
}

.settings-client-case-choice strong,
.settings-client-case-choice em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-client-case-choice strong {
  color: var(--action-dark);
  font-size: 12px;
  font-weight: 900;
}

.settings-client-case-choice em {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.settings-cases-grid {
  max-height: 440px;
  overflow-y: auto;
  display: grid;
  gap: 10px;
  padding-right: 2px;
}

.settings-case-group {
  display: grid;
  gap: 6px;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  background: #f8fbff;
  padding: 8px;
}

.settings-case-group-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 1px 2px;
  cursor: pointer;
  list-style: none;
}

.settings-case-group-head::-webkit-details-marker {
  display: none;
}

.settings-case-group-head::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid #6b7a90;
  border-bottom: 2px solid #6b7a90;
  transform: rotate(-45deg);
  transition: transform 0.16s ease;
}

.settings-case-group[open] .settings-case-group-head {
  padding-bottom: 4px;
}

.settings-case-group[open] .settings-case-group-head::before {
  transform: rotate(45deg);
}

.settings-case-group-head strong {
  min-width: 0;
  color: #172033;
  font-size: 12px;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-case-group-head span {
  border-radius: 999px;
  background: #eef4fb;
  color: #3b4b63;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.settings-case-group-clear {
  min-height: 26px;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  background: #ffffff;
  color: var(--action-dark);
  padding: 0 9px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.settings-case-group-clear:hover {
  border-color: #bfd2e8;
  background: #eef6ff;
}

.settings-case-group-list {
  display: grid;
  gap: 6px;
}

.settings-case-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #e2ebf5;
  border-radius: 8px;
  background: white;
  padding: 8px 10px;
}

.settings-case-choice.no-access {
  background: #fbfdff;
}

.settings-case-label {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(120px, 0.55fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.settings-case-choice input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--action-dark);
}

.settings-case-choice strong,
.settings-case-choice em,
.settings-case-choice small {
  display: block;
  min-width: 0;
}

.settings-case-choice strong {
  color: var(--action-dark);
  font-size: 12px;
}

.settings-case-choice em {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.settings-case-choice small {
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-case-access-badge {
  min-width: 88px;
  justify-self: end;
  border-radius: 999px;
  background: #eaf8f0;
  color: #147848;
  padding: 6px 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.settings-case-choice.no-access .settings-case-access-badge {
  background: #eef4fb;
  color: #64748b;
}

.settings-case-choice.no-access .settings-case-label small,
.settings-case-choice.no-access .settings-case-label em {
  color: #7a8799;
}

.settings-case-hide {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}

.settings-case-hide:hover {
  border-color: #bfd2e8;
  background: #eef6ff;
  color: var(--action-dark);
}

.settings-case-hide .ui-icon {
  width: 14px;
  height: 14px;
}

.settings-case-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 1px dashed #d6e1ee;
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 18px;
  text-align: center;
}

.settings-case-empty strong {
  color: #172033;
  font-size: 13px;
  font-weight: 950;
}

.settings-case-empty span {
  max-width: 420px;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .settings-user-form-grid,
  .settings-cases-controls {
    grid-template-columns: 1fr;
  }

  .settings-permissions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-delivery-channels,
  .settings-delivery-actions {
    grid-template-columns: 1fr;
  }

  .settings-client-summary,
  .settings-client-picker-toolbar,
  .settings-client-dialog-list {
    grid-template-columns: 1fr;
  }

  .settings-client-picker-status {
    min-width: 0;
  }

  .settings-client-picker-quick-actions {
    justify-content: stretch;
  }

  .settings-client-picker-quick-actions .compact {
    flex: 1 1 0;
  }

  .settings-cases-controls small {
    justify-self: stretch;
    flex-wrap: wrap;
  }

  .settings-cases-controls small span {
    flex: 1 1 72px;
  }

  .settings-case-choice,
  .settings-case-label {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .settings-case-label small {
    grid-column: 2;
  }

  .settings-case-access-badge {
    justify-self: start;
    grid-column: 1 / -1;
  }
}

@media (max-width: 1100px) {
  .view {
    max-width: 100%;
    overflow-x: hidden;
  }

  .case-list-layout,
  .clients-layout {
    grid-template-columns: 1fr;
  }

  .case-list-side,
  .clients-side {
    position: static;
  }

  .documents-layout {
    grid-template-columns: 1fr;
  }

  .documents-esign-overview {
    grid-template-columns: 1fr;
  }

  .documents-esign-provider {
    border-left: 0;
    border-top: 1px solid #dbe8f6;
    padding: 12px 0 0;
  }

  .documents-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .documents-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .documents-left-rail,
  .documents-archive,
  .documents-side {
    position: static;
    max-height: none;
  }

  .finance-layout,
  .finance-dashboard-layout,
  .osint-overview-layout,
  .osint-dashboard-grid,
  .osint-lower-grid,
  .osint-bottom-layout,
  .osint-tab-layout,
  .osint-layout,
  .ai-workspace,
  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .osint-overview-layout {
    grid-template-areas:
      "line"
      "sources"
      "side"
      "lower"
      "data";
  }

  .osint-lower-columns {
    grid-template-columns: 1fr;
  }

  .osint-graph-column,
  .osint-types-column {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .finance-main-grid,
  .finance-bottom-grid {
    grid-template-columns: 1fr;
  }

  .finance-chart-card,
  .finance-operations-card,
  .analytics-card,
  .osint-card {
    min-width: 0;
  }

  .finance-workspace-cards,
  .finance-report-grid,
  .finance-report-summary,
  .osint-kpi-grid,
  .osint-source-grid,
  .osint-focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .osint-topbar {
    grid-template-columns: 1fr;
  }

  .osint-top-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .osint-search,
  .osint-date-wrap,
  .osint-top-actions > .primary {
    flex: 1 1 220px;
  }

  .osint-date-range,
  .osint-top-actions > .primary {
    width: 100%;
    min-width: 0;
  }

  .salary-history-card {
    grid-template-columns: 1fr;
  }

  .salary-history-total {
    justify-items: start;
  }

  .finance-right-column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .analytics-risks .list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .finance-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .osint-donut-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .osint-subtabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .osint-mention-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .osint-mention-row time,
  .osint-mention-row .badge {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
  }

  .osint-registry-table div {
    grid-template-columns: 1fr;
  }

  .finance-workspace-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-right-column {
    grid-template-columns: 1fr;
  }

  .finance-operation-head {
    display: none;
  }

  .finance-operation-list {
    gap: 10px;
  }

  .finance-operation-filters {
    grid-template-columns: 1fr;
  }

  .finance-payment-mode {
    grid-template-columns: 1fr;
    width: auto;
    border-radius: 8px;
  }

  .finance-payment-mode button {
    border-radius: 6px;
  }

  .finance-operation-client-group {
    grid-template-columns: 1fr;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdff;
    padding: 12px;
  }

  .finance-operation-client-cell {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 10px;
  }

  .finance-operation-client-rows {
    grid-column: 1;
    gap: 8px;
  }

  .finance-operation-head.is-readonly,
  .finance-operation-list.is-readonly .finance-operation-client-group {
    grid-template-columns: 1fr;
  }

  .finance-operation-row {
    min-height: 0;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 10px;
  }

  .finance-operation-list.is-readonly .finance-operation-row {
    grid-template-columns: 1fr 1fr;
  }

  .finance-operation-row:last-child {
    border-bottom: 0;
  }

  .finance-operation-row > :nth-child(2),
  .finance-operation-row > :nth-child(4),
  .finance-operation-row > :nth-child(7) {
    grid-column: 1 / -1;
  }

  .finance-row-menu {
    justify-self: end;
  }
}

@media (max-width: 720px) {
  .documents-toolbar,
  .documents-toolbar-actions,
  .documents-side-actions {
    align-items: stretch;
  }

  .documents-toolbar {
    display: grid;
  }

  .documents-toolbar-actions,
  .documents-side-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .documents-filters {
    grid-template-columns: 1fr;
  }

  .documents-esign-steps {
    grid-template-columns: 1fr 1fr;
  }

  .documents-table {
    min-width: 760px;
  }

  .finance-filters,
  .osint-filters,
  .osint-top-actions,
  .ai-input-row {
    grid-template-columns: 1fr;
  }

  .osint-top-actions {
    display: grid;
  }

  .finance-top-row {
    grid-template-columns: 1fr;
  }

  .finance-workspace-top {
    display: grid;
  }

  .finance-workspace-actions,
  .finance-workspace-footer {
    justify-content: stretch;
  }

  .finance-workspace-actions .primary,
  .finance-workspace-actions .secondary,
  .finance-workspace-footer .primary,
  .finance-workspace-footer .secondary,
  .finance-report-card .secondary {
    width: 100%;
  }

  .finance-top-row .analytics-date-range,
  .finance-top-row > button {
    width: 100%;
  }

  .finance-kpi-grid,
  .osint-kpi-grid,
  .osint-source-grid,
  .osint-focus-grid,
  .osint-quick-actions,
  .finance-donut-wrap,
  .finance-mini-bar,
  .finance-workspace-metrics,
  .finance-workspace-cards,
  .finance-report-grid,
  .finance-report-summary,
  .salary-toolbar {
    grid-template-columns: 1fr;
  }

  .finance-report-table-head {
    display: none;
  }

  .finance-report-table-row {
    grid-template-columns: 1fr 1fr;
  }

  .salary-toolbar .secondary {
    width: 100%;
  }

  .salary-history-bars {
    gap: 5px;
  }

  .finance-kpi-card {
    min-height: 112px;
  }

  .finance-kpi-card strong {
    font-size: var(--text-xl);
  }

  .finance-tabs {
    gap: 16px;
  }
}

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px 0;
  color: var(--muted);
  font-size: 12px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 6px;
}

.page {
  width: 32px;
  height: 32px;
  min-height: 32px;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.page.active {
  background: var(--action-dark);
  color: white;
}

.side-card {
  width: 100%;
  min-width: 0;
  padding: 16px;
}

.side-card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: var(--text-lg);
}

.telegram-connect {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.side-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

.mailing-grid {
  display: grid;
  grid-template-columns: minmax(76px, .85fr) minmax(0, 1.25fr);
  align-items: end;
  gap: 14px;
  margin-bottom: 14px;
}

.mailing-grid > *,
.client-select-field {
  min-width: 0;
}

select.client-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

select.screen-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.client-screen-select {
  position: relative;
  min-width: 0;
}

.clients-toolbar .client-screen-select {
  min-width: 180px;
}

.clients-filter-panel .client-screen-select,
.client-select-field .client-screen-select {
  width: 100%;
}

.client-screen-select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  border: 1px solid #d8e5f3;
  border-radius: 8px;
  outline: 0;
  background: #fbfdff;
  color: var(--text);
  padding: 0 13px;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.client-screen-select-button:hover,
.client-screen-select.is-open .client-screen-select-button,
.client-screen-select-button:focus-visible {
  border-color: #8abdf3;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(53, 130, 220, .12);
}

.client-screen-select-button [data-client-select-value] {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-screen-select-chevron {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--action-dark);
  border-bottom: 2px solid var(--action-dark);
  flex: 0 0 auto;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s ease;
}

.client-screen-select.is-open .client-screen-select-chevron {
  transform: translateY(2px) rotate(225deg);
}

.client-screen-select-menu {
  position: absolute;
  z-index: 75;
  top: calc(100% + 7px);
  right: 0;
  left: 0;
  overflow: auto;
  max-height: 250px;
  border: 1px solid #d8e5f3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(15, 42, 71, .18);
  padding: 7px;
}

.client-screen-select-menu[hidden] {
  display: none;
}

.client-screen-select-option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.client-screen-select-option span {
  color: transparent;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.client-screen-select-option strong {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-screen-select-option:hover,
.client-screen-select-option:focus-visible {
  background: #eef6ff;
  outline: 0;
}

.client-screen-select-option.is-selected {
  background: #e4f1ff;
  color: var(--action-dark);
}

.client-screen-select-option.is-selected span {
  color: #4d9beb;
}

.mailing-grid strong,
.mailing-grid span,
.message-label span {
  display: block;
  margin-bottom: 6px;
}

.mailing-grid strong {
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.client-select-field {
  position: relative;
  display: block;
}

.client-select-field select {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  appearance: none;
  border: 1px solid #d7e4f3;
  border-radius: 8px;
  background:
    linear-gradient(45deg, transparent 50%, var(--action-dark) 50%) right 18px center / 8px 8px no-repeat,
    linear-gradient(135deg, var(--action-dark) 50%, transparent 50%) right 12px center / 8px 8px no-repeat,
    #fbfdff;
  box-shadow: 0 8px 18px rgba(37, 85, 128, .05);
  color: var(--text);
  font-weight: 750;
  padding: 10px 34px 10px 12px;
}

.client-select-field select:hover,
.client-select-field select:focus {
  border-color: #9ec9f7;
  background-color: #f3f8ff;
  box-shadow: 0 0 0 3px rgba(39, 122, 214, .12);
  outline: none;
}

.message-label {
  display: block;
}

.message-label textarea {
  width: 100%;
}

.message-preview {
  min-height: 140px;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 14px;
  background: #e7f7e9;
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: 13px;
}

.full-width {
  width: 100%;
}

.telegram-icon {
  color: var(--blue);
  display: inline-flex;
}

.telegram-icon-active {
  color: var(--green);
}

.connected-text {
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
}

.ui-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  flex: 0 0 auto;
}

.ui-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.search-control {
  min-height: 40px;
  width: 340px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--muted);
  padding: 0 12px;
}

.status-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}

th,
td {
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 13px 12px;
  vertical-align: middle;
}

th {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

td a,
.link {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}

.client-name-cell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
}

.edit-icon-button {
  width: 28px;
  height: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--blue);
  padding: 0;
  cursor: pointer;
}

.edit-icon-button:hover {
  background: var(--blue-soft);
  border-color: #cfe0ff;
}

.edit-icon-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mini-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 150px;
}

.mini-badges .badge {
  font-size: 11px;
  min-height: 21px;
  padding: 2px 7px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  border: 1px solid transparent;
  background: #eef2f7;
  color: #34435b;
  white-space: nowrap;
}

.badge.green {
  border-color: var(--semantic-green-border);
  background: var(--semantic-green-soft);
  color: var(--semantic-green);
}

.badge.red {
  border-color: var(--semantic-red-border);
  background: var(--semantic-red-soft);
  color: var(--semantic-red);
}

.badge.amber {
  border-color: var(--semantic-amber-border);
  background: var(--semantic-amber-soft);
  color: var(--semantic-amber);
}

.badge.blue {
  border-color: var(--semantic-blue-border);
  background: var(--semantic-blue-soft);
  color: var(--semantic-blue);
}

.badge.violet {
  border-color: var(--semantic-violet-border);
  background: var(--semantic-violet-soft);
  color: var(--semantic-violet);
}

.profile {
  display: grid;
  gap: 14px;
}

.profile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.profile-head h2,
.profile-head p {
  margin-bottom: 4px;
}

.client-summary {
  margin-bottom: 16px;
}

.case-reference-screen {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: -4px;
}

.case-back {
  border: 0;
  background: transparent;
  color: #617085;
  font-size: 12px;
  padding: 0;
  margin-bottom: 16px;
  cursor: pointer;
}

.case-back:hover {
  color: var(--blue);
}

.case-list-screen {
  display: grid;
  gap: 14px;
}

.case-list-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.case-list-head h2 {
  margin: 2px 0 0;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}

.case-list-global-search {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 42px auto;
  gap: 10px;
  align-items: center;
  width: min(680px, 55vw);
}

#create-case-from-list {
  background: var(--action-dark);
  border-color: var(--action-dark);
}

.case-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.case-kpi-grid .case-kpi-card {
  position: relative;
  min-height: 86px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-content: center;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 16px 18px;
  color: #172033;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.case-kpi-grid .case-kpi-card:hover,
.case-kpi-grid .case-kpi-card.active {
  border-color: #b8d4ef;
  background: #f8fbff;
  box-shadow: 0 10px 24px rgba(20, 67, 108, 0.08);
}

.case-kpi-grid .case-kpi-card.active {
  box-shadow: inset 3px 0 0 var(--action-dark), 0 10px 24px rgba(20, 67, 108, 0.08);
}

.case-kpi-grid span {
  grid-column: 1;
  color: var(--muted);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
}

.case-kpi-grid strong {
  grid-column: 1;
  font-size: var(--text-3xl);
  line-height: 1;
}

.case-kpi-grid i {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  justify-self: end;
  border-radius: 999px;
  background: #eef5ff;
  color: var(--action-dark);
  font-style: normal;
}

.case-kpi-grid i.red {
  background: var(--semantic-red-soft);
  color: var(--semantic-red);
}

.case-kpi-grid i.amber {
  background: var(--semantic-amber-soft);
  color: var(--semantic-amber);
}

.case-kpi-grid i.violet {
  background: var(--semantic-violet-soft);
  color: var(--semantic-violet);
}

.case-kpi-grid i .ui-icon {
  width: 16px;
  height: 16px;
}

.case-list-toolbar {
  display: grid;
  grid-template-columns: 220px 160px 160px 180px auto;
  gap: 10px;
  align-items: center;
}

.case-list-toolbar input,
.case-list-toolbar select {
  min-height: 42px;
}

.case-list-card {
  display: flex;
  flex-direction: column;
  padding: 14px;
  min-height: 720px;
  height: 720px;
}

.case-list-layout {
  display: grid;
  grid-template-columns: var(--main-side-grid);
  gap: 16px;
  align-items: stretch;
}

.case-list-table {
  min-width: 1050px;
  table-layout: fixed;
  font-size: 11px;
}

.case-list-table th,
.case-list-table td {
  padding: 14px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  vertical-align: middle;
}

.case-list-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: white;
  color: #536176;
  font-size: 11px;
  letter-spacing: 0;
}

.case-list-table th:nth-child(1),
.case-list-table td:nth-child(1) {
  width: 185px;
}

.case-list-table th:nth-child(2) {
  overflow: visible;
  z-index: 6;
}

.case-list-table th:nth-child(2),
.case-list-table td:nth-child(2) {
  width: 144px;
}

.case-list-table th:nth-child(3),
.case-list-table td:nth-child(3) {
  width: 210px;
}

.case-list-table th:nth-child(4),
.case-list-table td:nth-child(4) {
  width: 110px;
}

.case-list-table th:nth-child(5),
.case-list-table td:nth-child(5) {
  width: 96px;
  text-align: center;
}

.case-list-table th:nth-child(6),
.case-list-table td:nth-child(6) {
  width: 74px;
  text-align: center;
}

.case-list-table th:nth-child(7),
.case-list-table td:nth-child(7) {
  width: 74px;
  text-align: center;
}

.case-list-table th:nth-child(8),
.case-list-table td:nth-child(8) {
  width: 126px;
}

.case-list-table th:nth-child(9),
.case-list-table td:nth-child(9) {
  width: 44px;
  text-align: center;
}

.case-list-table tbody tr {
  cursor: pointer;
  transition: background 0.16s ease;
}

.case-list-table tbody tr:hover,
.case-list-table tbody tr.selected {
  background: #f7faff;
}

.case-client-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.case-client-avatar {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-color: #cfe0f2;
  background: #eaf4ff;
  color: var(--action-dark);
  font-size: 11px;
}

.case-client-text {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.case-client-text strong {
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #172033;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
}

.case-client-text strong em {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #eaf4ff;
  color: var(--action-dark);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.case-client-text span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
}

.case-client-text .ui-icon {
  width: 11px;
  height: 11px;
  color: #7b8da5;
}

.case-client-text em {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case-client-repeat-cell {
  display: block;
  min-height: 32px;
}

.case-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.case-pagination div {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.case-pagination-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.case-pagination-left select {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  color: #334155;
  padding: 0 28px 0 10px;
  font-weight: 700;
  font-size: 12px;
}

.case-pagination button {
  min-width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  color: #516075;
  font-weight: 800;
  cursor: pointer;
}

.case-pagination button.active {
  border-color: var(--action-dark);
  background: var(--action-dark);
  color: white;
}

.case-pagination button:disabled {
  opacity: 0.45;
  cursor: default;
}

.case-list-table td > span:not(.badge):not(.case-status-icon):not(.case-deadline-chip):not(.sr-only),
.case-list-table td > strong + span,
.case-number-date {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}

.case-list-table td a {
  display: inline-block;
  color: var(--blue);
  font-weight: 800;
  margin-bottom: 2px;
}

.case-list-table tbody tr.case-completed-row td:nth-child(3) > strong,
.case-list-table tbody tr.case-completed-row .case-number-stack a {
  color: #7b8da5;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.case-list-table tbody tr.case-completed-row td:nth-child(3) > span,
.case-list-table tbody tr.case-completed-row .case-materials,
.case-list-table tbody tr.case-completed-row .case-number-stack small {
  opacity: 0.72;
}

.case-list-screen .badge {
  min-height: 22px;
  border: 1px solid transparent;
  padding: 3px 10px;
  font-size: 11px;
}

.case-list-screen .badge.blue {
  border-color: var(--semantic-blue-border);
  background: var(--semantic-blue-soft);
  color: var(--semantic-blue);
}

.case-list-screen .badge.red {
  border-color: var(--semantic-red-border);
  background: var(--semantic-red-soft);
  color: var(--semantic-red);
}

.case-list-screen .badge.amber {
  border-color: var(--semantic-amber-border);
  background: var(--semantic-amber-soft);
  color: var(--semantic-amber);
}

.case-list-screen .badge.green {
  border-color: var(--semantic-green-border);
  background: var(--semantic-green-soft);
  color: var(--semantic-green);
}

.case-number-cell {
  display: inline-grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  max-width: 100%;
}

.case-number-cell input {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 5px 0 0;
  justify-self: center;
}

.case-number-stack {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.case-list-table td .case-number-stack small {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
}

.case-title-head {
  display: grid;
  grid-template-columns: 14px auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.case-title-head input {
  width: 14px;
  height: 14px;
  margin: 0;
}

.case-bulk-bar.active {
  justify-self: start;
  gap: 2px;
  margin-left: 0;
  padding: 2px 3px;
}

.case-bulk-bar.active .task-bulk-icon::after {
  top: calc(100% + 8px);
  bottom: auto;
  z-index: 80;
  transform: translate(-50%, -4px);
}

.case-bulk-bar.active .task-bulk-icon::before {
  top: calc(100% + 4px);
  bottom: auto;
  z-index: 81;
  transform: translate(-50%, -4px) rotate(45deg);
}

.case-bulk-bar.active .task-bulk-icon:hover::after,
.case-bulk-bar.active .task-bulk-icon:focus-visible::after {
  transform: translate(-50%, 0);
}

.case-bulk-bar.active .task-bulk-icon:hover::before,
.case-bulk-bar.active .task-bulk-icon:focus-visible::before {
  transform: translate(-50%, 0) rotate(45deg);
}

.case-title-head:has(.case-bulk-bar.active) .case-title-label {
  display: none;
}

.tasks-bulk-bar.case-bulk-bar em {
  min-width: 18px;
  height: 18px;
  font-size: 10px;
}

.tasks-bulk-bar.case-bulk-bar .task-bulk-icon {
  width: 18px;
  height: 18px;
  min-height: 18px;
}

.tasks-bulk-bar.case-bulk-bar .task-bulk-icon .ui-icon {
  width: 9px;
  height: 9px;
}

.case-actions-cell {
  overflow: visible !important;
  text-align: center;
}

.case-row-actions {
  display: inline-flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.case-list-table tr:hover .case-row-actions,
.case-list-table tr:focus-within .case-row-actions,
.case-actions-cell .case-row-actions {
  opacity: 1;
  pointer-events: auto;
}

.case-row-actions button {
  width: 22px;
  height: 22px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: #516075;
  padding: 0;
  cursor: pointer;
}

.case-row-actions button .ui-icon {
  width: 12px;
  height: 12px;
  color: currentColor;
}

.case-row-actions button:hover {
  border-color: var(--action-hover);
  color: white;
  background: var(--action-hover);
}

.case-row-actions .danger-icon {
  color: var(--red);
}

.case-row-actions .danger-icon:hover {
  border-color: #ffd0d0;
  background: #fff0f0;
  color: var(--red);
}

.case-status-icon {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--case-status-border, var(--semantic-blue-border));
  border-radius: 999px;
  background: var(--case-status-bg, var(--semantic-blue-soft));
  color: var(--case-status-color, var(--semantic-blue));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  cursor: default;
  line-height: 0;
  vertical-align: middle;
}

.case-status-icon .ui-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%) translateY(0.75px);
}

.case-status-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  z-index: 50;
  width: max-content;
  max-width: 180px;
  transform: translate(-50%, -4px);
  border: 1px solid #dbe8f6;
  border-radius: 7px;
  background: #fff;
  color: #334155;
  padding: 5px 7px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease 0.28s, transform 0.16s ease 0.28s;
}

.case-status-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  z-index: 51;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -4px) rotate(45deg);
  border-left: 1px solid #dbe8f6;
  border-top: 1px solid #dbe8f6;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease 0.28s, transform 0.16s ease 0.28s;
}

.case-status-icon:hover::after,
.case-status-icon:focus-visible::after,
.case-status-icon:hover::before,
.case-status-icon:focus-visible::before {
  opacity: 1;
}

.case-status-icon:hover::after,
.case-status-icon:focus-visible::after {
  transform: translate(-50%, 0);
}

.case-status-icon:hover::before,
.case-status-icon:focus-visible::before {
  transform: translate(-50%, 0) rotate(45deg);
}

.case-status-icon.case-work {
  --case-status-bg: #eaf4ff;
  --case-status-border: #a9cff7;
  --case-status-color: #1f5f99;
}

.case-status-icon.case-waiting {
  --case-status-bg: #fff8d7;
  --case-status-border: #edd96e;
  --case-status-color: #8a6a00;
}

.case-status-icon.case-urgent {
  --case-status-bg: #ffe9eb;
  --case-status-border: #ffc3ca;
  --case-status-color: #d9293f;
}

.case-status-icon.case-low {
  --case-status-bg: #ecfdf3;
  --case-status-border: #b8e7cb;
  --case-status-color: #13804f;
}

.case-status-icon.case-planned {
  --case-status-bg: #f3f0ff;
  --case-status-border: #d7ccff;
  --case-status-color: #6d3fd1;
}

.case-status-icon.case-completed {
  --case-status-bg: #ddf7bf;
  --case-status-border: #77c943;
  --case-status-color: #2f7d0c;
}

.case-status-icon.case-archive {
  --case-status-bg: #f1f5f9;
  --case-status-border: #cbd5e1;
  --case-status-color: #475569;
}

.case-status-icon.case-default {
  --case-status-bg: var(--semantic-blue-soft);
  --case-status-border: var(--semantic-blue-border);
  --case-status-color: var(--semantic-blue);
}

.case-deadline-chip {
  --case-deadline-bg: #f8fbff;
  --case-deadline-border: #dbe8f6;
  --case-deadline-color: #456176;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--case-deadline-border);
  border-radius: 999px;
  background: var(--case-deadline-bg);
  color: var(--case-deadline-color);
  padding: 0 8px;
  white-space: nowrap;
}

.case-deadline-chip .ui-icon {
  width: 12px;
  height: 12px;
}

.case-deadline-chip strong {
  color: inherit;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.case-finance-summary {
  display: grid;
  gap: 3px;
  min-width: 118px;
}

.case-finance-summary strong {
  color: #151d2c;
  font-size: 12px;
  white-space: nowrap;
}

.case-finance-summary span {
  margin-top: 0;
  white-space: nowrap;
}

.case-finance-summary .debt {
  color: var(--red);
  font-weight: 800;
}

.case-finance-summary .paid {
  color: #18975e;
  font-weight: 800;
}

.case-materials {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-top: 7px;
  justify-items: start;
}

.case-material-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  border-radius: 999px;
  border: 1px solid #e1e8f2;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.case-material-badge .ui-icon {
  width: 11px;
  height: 11px;
}

.case-material-badge strong {
  color: inherit;
  font-size: 10px;
  line-height: 1;
}

.case-material-badge.blue {
  background: #f5f8fc;
  color: #2a6fc7;
}

.case-material-badge.amber {
  background: #fff9ec;
  color: #b7791f;
}

.case-material-badge.violet {
  background: #f7f4ff;
  color: #6850c9;
}

.case-preview-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 14px 13px;
  position: sticky;
  top: 14px;
  min-height: 0;
  height: 720px;
  max-height: calc(100vh - 112px);
  overflow: auto;
}

.case-preview-hero {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-bottom: 12px;
}

.case-preview-icon {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #dbe8f6;
  border-radius: 9px;
  background: #eef6ff;
  color: var(--action-dark);
}

.case-preview-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.case-preview-hero h2 {
  margin: 0;
  color: #172033;
  font-size: 16px;
  line-height: 1.2;
}

.case-preview-card.case-completed-card .case-preview-hero h2 {
  color: #7b8da5;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.case-preview-card.case-completed-card .case-preview-summary p {
  color: #728096;
}

.case-preview-hero p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.case-preview-pills {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  position: relative;
}

.case-preview-pill-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.case-preview-pill-row > span {
  color: #526176;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.case-preview-pill {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--case-pill-border);
  border-radius: 7px;
  background: var(--case-pill-bg);
  color: var(--case-pill-color);
  padding: 0 9px;
}

.case-pill-picker {
  position: relative;
  --case-pill-bg: var(--semantic-blue-soft);
  --case-pill-border: var(--semantic-blue-border);
  --case-pill-color: var(--semantic-blue);
}

.case-pill-picker summary {
  min-height: 34px;
  display: inline-grid;
  grid-template-columns: 20px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
  max-width: none;
  cursor: pointer;
  list-style: none;
  padding: 0 8px 0 10px;
  border-color: var(--case-pill-border);
  background: var(--case-pill-bg);
  color: var(--case-pill-color);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.case-pill-picker summary::-webkit-details-marker {
  display: none;
}

.case-pill-picker summary:hover,
.case-pill-picker[open] summary {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--case-pill-color) 18%, rgba(255, 255, 255, 0.45)), 0 1px 3px rgba(15, 23, 42, 0.04);
}

.case-pill-picker summary > .ui-icon,
.case-pill-picker button > span {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--case-pill-color) 28%, transparent);
  background: color-mix(in srgb, white 78%, var(--case-pill-bg));
  color: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.case-pill-picker summary .ui-icon svg,
.case-pill-picker button .ui-icon svg {
  width: 12px;
  height: 12px;
}

.case-pill-picker summary strong {
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case-pill-picker summary i {
  color: inherit;
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  transition: transform 0.16s ease;
}

.case-pill-picker[open] summary i {
  transform: rotate(180deg);
}

.case-pill-picker > div {
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  z-index: 90;
  width: 238px;
  display: grid;
  gap: 4px;
  border: 1px solid #dbe8f6;
  border-radius: 9px;
  background: white;
  padding: 6px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
}

.case-pill-picker button {
  --case-pill-bg: var(--semantic-blue-soft);
  --case-pill-border: var(--semantic-blue-border);
  --case-pill-color: var(--semantic-blue);
  min-height: 34px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #172033;
  padding: 0 8px;
  text-align: left;
  cursor: pointer;
}

.case-pill-picker button:hover,
.case-pill-picker button.active {
  border-color: var(--case-pill-border);
  background: var(--case-pill-bg);
  color: var(--case-pill-color);
}

.case-pill-picker button span {
  color: inherit;
}

.case-pill-picker button strong {
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case-pill-picker button em {
  display: inline-grid;
  place-items: center;
  color: inherit;
  font-style: normal;
  font-weight: 900;
}

.case-preview-pill .ui-icon {
  width: 13px;
  height: 13px;
}

.case-pill-picker summary.case-preview-pill > .ui-icon {
  width: 18px;
  height: 18px;
}

.case-preview-pill strong {
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
}

.case-preview-pill.case-work,
.case-pill-picker.case-work,
.case-pill-picker .case-work {
  --case-pill-bg: #eaf4ff;
  --case-pill-border: #a9cff7;
  --case-pill-color: #1f5f99;
}

.case-preview-pill.case-waiting,
.case-pill-picker.case-waiting,
.case-pill-picker .case-waiting {
  --case-pill-bg: #fff8d7;
  --case-pill-border: #edd96e;
  --case-pill-color: #8a6a00;
}

.case-preview-pill.case-urgent,
.case-pill-picker.case-urgent,
.case-pill-picker .case-urgent {
  --case-pill-bg: #ffe9eb;
  --case-pill-border: #ffc3ca;
  --case-pill-color: #d9293f;
}

.case-preview-pill.case-low,
.case-pill-picker.case-low,
.case-pill-picker .case-low {
  --case-pill-bg: #ecfdf3;
  --case-pill-border: #b8e7cb;
  --case-pill-color: #13804f;
}

.case-preview-pill.case-planned,
.case-pill-picker.case-planned,
.case-pill-picker .case-planned {
  --case-pill-bg: #f3f0ff;
  --case-pill-border: #d7ccff;
  --case-pill-color: #6d3fd1;
}

.case-preview-pill.case-completed,
.case-pill-picker.case-completed,
.case-pill-picker .case-completed {
  --case-pill-bg: #ddf7bf;
  --case-pill-border: #77c943;
  --case-pill-color: #2f7d0c;
}

.case-preview-pill.case-archive,
.case-pill-picker.case-archive,
.case-pill-picker .case-archive {
  --case-pill-bg: #f1f5f9;
  --case-pill-border: #cbd5e1;
  --case-pill-color: #475569;
}

.case-preview-summary {
  display: grid;
  gap: 7px;
  border-top: 1px solid var(--line);
  padding: 12px 0 0;
  margin-top: 4px;
}

.case-preview-summary h3 {
  margin: 0;
  color: #172033;
  font-size: 13px;
  line-height: 1.2;
}

.case-preview-summary p {
  margin: 0;
  color: #637189;
  font-size: 12px;
  line-height: 1.35;
}

.case-preview-rows {
  display: grid;
  border-top: 1px solid var(--line);
}

.case-preview-rows div {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}

.case-preview-rows span {
  color: #526176;
  font-size: 12px;
}

.case-preview-rows strong {
  font-size: 13px;
  line-height: 1.25;
  text-align: right;
}

.case-preview-rows strong em {
  color: #64748b;
  font-style: normal;
  font-weight: 700;
}

.case-preview-person {
  display: inline-flex;
  justify-self: end;
  align-items: center;
  gap: 7px;
}

.case-preview-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 0;
}

.case-preview-stat {
  --case-stat-border: #dbe8f6;
  --case-stat-color: var(--action-dark);
  --case-stat-soft: #eef6ff;
  position: relative;
  min-height: 46px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  padding: 4px 3px;
  border: 1px solid var(--case-stat-border);
  border-radius: 8px;
  background: transparent;
  text-align: center;
  outline: none;
  cursor: pointer;
}

.case-preview-stat:focus-visible {
  box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.12);
}

.case-preview-stat.open {
  border-color: var(--case-stat-color);
}

.case-preview-card:has(.case-preview-stat.open) {
  height: 720px;
  max-height: calc(100vh - 112px);
  overflow: auto;
}

.case-preview-stat i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--case-stat-color);
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
}

.case-preview-stat .ui-icon {
  width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--case-stat-border);
  border-radius: 999px;
  background: var(--case-stat-soft);
  color: var(--case-stat-color);
}

.case-preview-stat .ui-icon svg {
  width: 10px;
  height: 10px;
}

.case-preview-stats strong {
  color: inherit;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.case-preview-stats em {
  color: var(--action-dark);
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case-preview-stat.stat-documents {
  --case-stat-soft: #f3f8ff;
  --case-stat-border: #d9e9fb;
  --case-stat-color: #1f4e79;
}

.case-preview-stat.stat-tasks {
  --case-stat-soft: #fff8ec;
  --case-stat-border: #f4d9a7;
  --case-stat-color: #a46000;
}

.case-preview-stat.stat-events {
  --case-stat-soft: #f6f2ff;
  --case-stat-border: #ddd2ff;
  --case-stat-color: #6d3fd1;
}

.case-preview-stat.stat-finance {
  --case-stat-soft: #effbf5;
  --case-stat-border: #bee9d0;
  --case-stat-color: #13804f;
}

.case-stat-popovers {
  grid-column: 1 / -1;
  min-width: 0;
}

.case-stat-popover {
  width: 100%;
  display: none;
  overflow: visible;
  border: 1px solid #dbe8f6;
  border-radius: 9px;
  background: white;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07), 0 2px 8px rgba(15, 23, 42, 0.04);
}

.case-preview-stats.show-documents .stat-panel-documents,
.case-preview-stats.show-tasks .stat-panel-tasks,
.case-preview-stats.show-events .stat-panel-events,
.case-preview-stats.show-finance .stat-panel-finance {
  display: grid;
}

.case-preview-stats:has(.case-preview-stat.open) .case-stat-popovers {
  margin-top: 3px;
}

.case-stat-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  border-bottom: 1px solid var(--line);
  background: #fbfdff;
  text-align: left;
}

.case-stat-popover-head strong {
  color: #172033;
  font-size: 12px;
  line-height: 1.2;
}

.case-stat-popover-head span {
  min-width: 24px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--case-stat-soft);
  color: var(--case-stat-color);
  font-size: 11px;
  font-weight: 900;
}

.case-stat-preview-list {
  max-height: none;
  overflow-y: visible;
  border-top: 0;
  text-align: left;
}

.stat-panel-documents .case-stat-preview-list {
  max-height: 312px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.case-stat-preview-list .preview-list-row {
  min-height: 52px;
  padding: 10px 10px;
}

.case-stat-action-row {
  position: relative;
  cursor: pointer;
  outline: none;
}

.case-stat-action-row.active {
  background: #eef6ff;
  box-shadow: inset 3px 0 0 var(--action-dark);
}

.case-stat-action-row.active > div:first-child {
  padding-right: 70px;
}

.case-stat-action-row:focus-visible {
  box-shadow: inset 3px 0 0 var(--action-dark), 0 0 0 3px rgba(31, 78, 121, 0.1);
}

.case-stat-row-actions {
  position: absolute;
  top: 50%;
  right: 7px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid #dbe8f6;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.case-stat-action-row.active .case-stat-row-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.case-stat-row-actions button {
  width: 19px;
  height: 19px;
  min-height: 19px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--action-dark);
  padding: 0;
  cursor: pointer;
}

.case-stat-row-actions button .ui-icon {
  width: 10px;
  height: 10px;
}

.case-stat-row-actions button:hover {
  border-color: var(--action-border);
  background: #eef6ff;
}

.case-stat-row-actions .danger-icon {
  color: var(--semantic-red);
}

.case-stat-row-actions .danger-icon:hover {
  border-color: var(--semantic-red-border);
  background: var(--semantic-red-soft);
}

.case-preview-links .case-stat-row-actions button {
  width: 19px;
  height: 19px;
  min-height: 19px;
  display: inline-grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--action-dark);
  padding: 0;
  line-height: 0;
}

.case-preview-links .case-stat-row-actions button:hover {
  border-color: var(--action-border);
  background: #eef6ff;
}

.case-preview-links .case-stat-row-actions .danger-icon {
  color: var(--semantic-red);
}

.case-preview-links .case-stat-row-actions .danger-icon:hover {
  border-color: var(--semantic-red-border);
  background: var(--semantic-red-soft);
}

.case-preview-links .case-stat-row-actions button .ui-icon {
  width: 10px;
  height: 10px;
  color: currentColor;
  font-size: 0;
}

.case-stat-finance-popover .preview-finance-card {
  border-top: 0;
}

.case-preview-links {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.case-preview-links button {
  min-height: 40px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--text);
  padding: 0 10px;
  text-align: left;
  cursor: pointer;
}

.case-preview-links button:hover {
  border-color: var(--action-border);
  background: #f8fbff;
}

.case-preview-links button span {
  color: var(--blue);
  font-size: var(--text-2xl);
}

.case-preview-links em {
  min-width: 26px;
  min-height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #eef5ff;
  color: var(--blue);
  padding: 2px 8px;
  font-style: normal;
  font-weight: 800;
  font-size: 12px;
}

.case-preview-links .case-preview-stats em {
  min-width: 0;
  min-height: 0;
  display: block;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: var(--action-dark);
  font-size: 12px;
  font-weight: 600;
}

.case-preview-links .finance-status-pill {
  min-width: 0;
  white-space: nowrap;
}

.case-preview-links .finance-status-pill.paid {
  background: #eefaf4;
  color: #18975e;
}

.case-preview-links .finance-status-pill.debt {
  background: #fff0f0;
  color: var(--red);
}

.case-preview-links .finance-status-pill.neutral {
  background: #eef2f7;
  color: #617085;
}

.case-preview-primary-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.case-preview-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.case-preview-links .case-preview-quick-actions button {
  min-height: 34px;
  display: inline-flex;
  justify-content: center;
  gap: 5px;
  border-color: #dbe8f6;
  background: #fbfdff;
  color: var(--action-dark);
  padding: 0 6px;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.case-preview-quick-actions .ui-icon {
  width: 13px;
  height: 13px;
}

.case-preview-open .ui-icon,
.case-preview-edit .ui-icon {
  width: 15px;
  height: 15px;
}

.case-preview-links .case-preview-open {
  min-height: 40px;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 8px;
  border-color: #bfd9f1;
  background: #eef6ff;
  color: var(--action-dark);
  padding: 0 14px;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58);
}

.case-preview-links .case-preview-edit {
  min-height: 40px;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 8px;
  color: var(--action-dark);
  background: #f8fbff;
}

.case-preview-links .case-preview-open:hover {
  border-color: #94bfeb;
  background: #e4f1ff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68), 0 2px 8px rgba(31, 78, 121, 0.08);
}

.case-preview-links .case-preview-open span {
  display: inline-grid;
  place-items: center;
  color: var(--action-dark);
  font-size: 0;
}

.case-preview-links .case-preview-open strong {
  color: var(--action-dark);
  font-size: 13px;
}

.case-preview-links .finance-preview-line summary {
  grid-template-columns: 16px minmax(0, 1fr) auto;
  min-height: 58px;
}

.case-preview-links .finance-preview-line summary small {
  grid-column: 2 / 4;
  color: var(--muted);
  font-size: 11px;
}

.finance-preview-line[open] {
  border-color: var(--action-border);
  box-shadow: inset 3px 0 0 var(--blue);
}

.case-preview-accordion {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  overflow: hidden;
}

.case-preview-accordion summary {
  min-height: 42px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 0 10px;
  cursor: pointer;
  list-style: none;
}

.case-preview-accordion summary::-webkit-details-marker {
  display: none;
}

.case-preview-accordion summary span {
  color: var(--blue);
  font-size: var(--text-lg);
  transition: transform 0.16s ease;
}

.case-preview-accordion summary strong,
.case-preview-links button strong {
  font-size: 13px;
}

.case-preview-accordion[open] summary span {
  transform: rotate(90deg);
}

.tasks-screen {
  display: grid;
  gap: 10px;
}

.tasks-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 24px;
  padding: 0 0 2px;
}

.tasks-page-head > div:first-child {
  display: none;
}

.tasks-page-head h2 {
  margin: 0 0 6px;
  color: #172033;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: 0;
}

.tasks-page-head p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.tasks-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}

.tasks-head-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.tasks-head-actions .primary {
  background: var(--action-dark);
  border-color: var(--action-dark);
  box-shadow: 0 8px 18px var(--action-shadow);
}

.sync-planner-button {
  background: white;
  color: #334155;
  border-color: #e2e8f0;
}

.sync-planner-button .ui-icon {
  width: 15px;
  height: 15px;
  color: #64748b;
}

.tasks-tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}

.tasks-tabs button {
  position: relative;
  border: 0;
  border-bottom: 0;
  background: transparent;
  color: #334155;
  padding: 8px 0 10px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.tasks-tabs button.active {
  color: var(--action-dark);
}

.tasks-tabs button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: var(--action-dark);
}

.tasks-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.tasks-kpi-card {
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.tasks-kpi-card:hover,
.tasks-kpi-card.active {
  border-color: rgba(24, 91, 146, 0.32);
  box-shadow: 0 12px 28px rgba(24, 91, 146, 0.08);
}

.tasks-kpi-card:active {
  transform: translateY(1px);
}

.tasks-kpi-grid span,
.tasks-kpi-grid em {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: var(--weight-bold);
  line-height: 1.25;
}

.tasks-kpi-grid strong {
  display: block;
  margin: 5px 0 3px;
  color: #152033;
  font-size: 22px;
  line-height: 1;
}

.tasks-kpi-grid i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--action-soft);
  color: var(--blue);
  font-style: normal;
}

.tasks-kpi-grid i.green {
  background: #e3f8ed;
  color: var(--green);
}

.tasks-kpi-grid i.amber {
  background: #fff4d8;
  color: var(--amber);
}

.tasks-kpi-grid i.red {
  background: #ffe9eb;
  color: var(--red);
}

.tasks-kpi-grid i.violet {
  background: #efecff;
  color: var(--violet);
}

.tasks-kpi-grid .ui-icon {
  width: 18px;
  height: 18px;
}

.tasks-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 125px 125px 125px 145px 92px;
  gap: 8px;
  align-items: center;
}

.tasks-toolbar input,
.tasks-toolbar select,
.tasks-toolbar button {
  min-width: 0;
  min-height: 38px;
  font-size: 13px;
}

.tasks-toolbar .primary {
  background: var(--action-dark);
  border-color: var(--action-dark);
}

.tasks-layout {
  display: grid;
  grid-template-columns: var(--main-side-grid);
  gap: 14px;
  align-items: stretch;
}

.tasks-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.tasks-workspace.has-task-detail {
  grid-template-columns: var(--main-side-grid);
  grid-template-rows: 86px 38px auto;
  align-items: stretch;
}

.tasks-main-column {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

.tasks-workspace.has-task-detail .tasks-main-column {
  display: contents;
}

.tasks-workspace.has-task-detail .tasks-kpi-grid,
.tasks-workspace.has-task-detail .tasks-toolbar,
.tasks-workspace.has-task-detail .tasks-list-card {
  grid-column: 1;
}

.tasks-workspace.has-task-detail .tasks-kpi-grid {
  grid-row: 1;
}

.tasks-workspace.has-task-detail .tasks-toolbar {
  grid-row: 2;
  grid-template-columns: minmax(180px, 1fr) 125px 125px 125px 145px 92px;
}

.tasks-workspace.has-task-detail .tasks-kpi-grid,
.tasks-workspace.has-task-detail .tasks-toolbar {
  height: 100%;
}

.tasks-workspace.has-task-detail .tasks-kpi-grid .tasks-kpi-card {
  min-height: 0;
  height: 86px;
}

.tasks-workspace.has-task-detail .tasks-list-card {
  grid-row: 3;
}

.tasks-list-card {
  min-height: 0;
  height: auto;
  overflow: auto;
  padding: 10px 12px 8px;
}

.tasks-bulk-bar {
  display: none;
}

.tasks-bulk-bar.active {
  justify-self: start;
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  min-width: 0;
  padding: 2px 4px;
  border: 1px solid #dbe8f6;
  border-radius: 999px;
  background: #f8fbff;
  box-shadow: 0 2px 8px rgba(20, 67, 108, 0.08);
}

.tasks-bulk-bar em {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--action-dark);
  color: white;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.tasks-bulk-bar .task-bulk-icon {
  position: relative;
  width: 22px;
  height: 22px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: white;
  color: var(--action-dark);
  padding: 0;
  line-height: 0;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

.tasks-bulk-bar .task-bulk-icon:hover {
  transform: translateY(-1px);
}

.tasks-bulk-bar .task-bulk-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 20;
  width: max-content;
  max-width: 170px;
  transform: translate(-50%, 4px);
  border: 1px solid #dbe8f6;
  border-radius: 7px;
  background: #fff;
  color: #334155;
  padding: 6px 8px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease 0.28s, transform 0.16s ease 0.28s;
}

.tasks-bulk-bar .task-bulk-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  z-index: 21;
  width: 8px;
  height: 8px;
  transform: translate(-50%, 4px) rotate(45deg);
  background: #fff;
  border-left: 1px solid #dbe8f6;
  border-top: 1px solid #dbe8f6;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease 0.28s, transform 0.16s ease 0.28s;
}

.tasks-bulk-bar .task-bulk-icon:hover::after,
.tasks-bulk-bar .task-bulk-icon:focus-visible::after,
.tasks-bulk-bar .task-bulk-icon:hover::before,
.tasks-bulk-bar .task-bulk-icon:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0) rotate(0deg);
}

.tasks-bulk-bar .task-bulk-icon:hover::before,
.tasks-bulk-bar .task-bulk-icon:focus-visible::before {
  transform: translate(-50%, 0) rotate(45deg);
}

.tasks-bulk-bar .task-bulk-icon .ui-icon {
  width: 12px;
  height: 12px;
}

.tasks-bulk-bar .bulk-done {
  border-color: var(--semantic-green-border);
  background: var(--semantic-green-soft);
  color: var(--semantic-green);
}

.tasks-bulk-bar .bulk-work {
  border-color: var(--semantic-blue-border);
  background: var(--semantic-blue-soft);
  color: var(--semantic-blue);
}

.tasks-bulk-bar .bulk-planner {
  border-color: var(--semantic-violet-border);
  background: var(--semantic-violet-soft);
  color: var(--semantic-violet);
}

.tasks-bulk-bar .bulk-clear {
  border-color: #e2e8f0;
  background: white;
  color: #64748b;
  font-size: 17px;
  font-weight: 900;
}

.tasks-bulk-bar .bulk-delete {
  border-color: var(--semantic-red-border);
  background: var(--semantic-red-soft);
  color: var(--semantic-red);
}

.tasks-workspace .tasks-list-card {
  min-height: 0;
  height: auto;
}

.tasks-workspace.is-full .tasks-table {
  min-width: 100%;
}

.tasks-table {
  table-layout: fixed;
  min-width: 1120px;
  font-size: 13px;
}

.tasks-table th,
.tasks-table td {
  padding: 10px 8px;
  vertical-align: middle;
}

.tasks-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: white;
  color: #536176;
  font-size: 12px;
}

.tasks-table th:nth-child(1),
.tasks-table td:nth-child(1) {
  width: 33%;
}

.tasks-table th:nth-child(2),
.tasks-table td:nth-child(2) {
  width: 11%;
}

.tasks-table th:nth-child(3),
.tasks-table td:nth-child(3) {
  width: 15%;
}

.tasks-table th:nth-child(4),
.tasks-table td:nth-child(4) {
  width: 16%;
}

.tasks-table th:nth-child(5),
.tasks-table td:nth-child(5) {
  width: 12%;
}

.tasks-table th:nth-child(6),
.tasks-table td:nth-child(6) {
  width: 7%;
  text-align: center;
}

.tasks-table th:nth-child(7),
.tasks-table td:nth-child(7) {
  width: 54px;
}

.tasks-table tbody tr {
  cursor: pointer;
}

.tasks-table tbody tr:hover,
.tasks-table tbody tr.selected {
  background: #f7faff;
}

.tasks-table tbody tr:has([data-select-task-row]:checked) {
  background: #eef6ff;
  box-shadow: inset 3px 0 0 var(--action-dark);
}

.tasks-table tbody tr.dragging {
  opacity: 0.5;
}

.tasks-table tbody tr.task-drop-target {
  box-shadow: inset 0 2px 0 var(--blue);
}

.tasks-table tbody tr.task-done-row {
  background: #f9fbfe;
  opacity: 0.58;
}

.tasks-table tbody tr.task-done-row:hover,
.tasks-table tbody tr.task-done-row.selected {
  background: #f3f7fc;
  opacity: 0.72;
}

.tasks-table tr.task-done-row .task-title-cell strong,
.tasks-table tr.task-done-row .task-title-cell > div > span,
.tasks-table tr.task-done-row td a,
.tasks-table tr.task-done-row td > span:not(.badge),
.tasks-table tr.task-done-row .task-assignee {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(83, 97, 118, 0.65);
}

.task-title-head {
  display: grid;
  grid-template-columns: 12px 18px auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
}

.task-title-head > span:first-child {
  width: 12px;
}

.task-drag-handle {
  display: block;
  width: 12px;
  height: 18px;
  flex: 0 0 12px;
  cursor: grab;
  opacity: 0.55;
  background-image: radial-gradient(circle, #b8c1ce 1.4px, transparent 1.6px);
  background-size: 6px 6px;
  background-position: center;
}

.task-drag-handle:hover {
  opacity: 0.95;
}

.task-drag-handle:active {
  cursor: grabbing;
}

.task-title-cell {
  display: grid;
  grid-template-columns: 12px 18px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.task-title-cell input[type="checkbox"],
.task-title-head input[type="checkbox"] {
  margin: 0;
  align-self: center;
  justify-self: center;
}

.task-title-cell > div {
  position: relative;
  min-width: 0;
}

.task-title-cell strong {
  display: block;
  color: #172033;
  font-size: 13px;
  line-height: 1.25;
}

.task-title-cell > div > span,
.tasks-table td > span:not(.badge):not(.task-status-icon):not(.sr-only) {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.task-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  font-style: normal;
}

.task-row-meta b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;
  border: 1px solid #e5edf7;
  border-radius: 999px;
  background: #f8fbff;
  color: #42526a;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.2;
}

.task-row-meta .ui-icon {
  width: 11px;
  height: 11px;
}

.task-subtasks-popover {
  position: relative;
  display: inline-flex;
  font-style: normal;
}

.task-subtasks-popover summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 20px;
  border: 1px solid #d8e5f3;
  border-radius: 999px;
  background: #f8fbff;
  color: var(--action-dark);
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.task-subtasks-popover summary::-webkit-details-marker {
  display: none;
}

.task-subtasks-popover summary em {
  color: #64748b;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.task-subtasks-popover summary .ui-icon,
.task-subtasks-popover summary span,
.task-subtasks-popover summary em {
  flex: 0 0 auto;
}

.task-subtasks-popover[open] summary {
  border-color: var(--action-border);
  background: #eef6ff;
}

.task-subtasks-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 30;
  width: min(360px, 78vw);
  display: grid;
  gap: 6px;
  border: 1px solid #d9e4f0;
  border-radius: 8px;
  background: white;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
  padding: 8px;
}

.task-subtasks-new {
  justify-self: center;
  min-height: 30px;
  border: 1px solid #d9e4f0;
  border-radius: 999px;
  background: #f8fbff;
  color: var(--action-dark);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  padding: 0 14px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.task-subtasks-new:hover {
  border-color: #bcd1e7;
  background: #eef6ff;
  box-shadow: 0 3px 8px rgba(24, 91, 146, 0.08);
}

.task-subtasks-menu-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 28px;
  gap: 8px;
  align-items: center;
  border-radius: 7px;
  background: #fbfdff;
  padding: 7px 6px 7px 8px;
}

.task-subtasks-menu-row + .task-subtasks-menu-row {
  border-top: 1px solid #eef2f7;
}

.task-subtasks-menu-row span,
.tasks-table .task-subtasks-menu-row span:not(.badge) {
  min-width: 0;
  margin: 0;
}

.task-subtasks-menu-row strong {
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.25;
}

.task-subtasks-menu-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.task-subtasks-empty {
  margin: 0;
  border: 1px dashed #d9e4f0;
  border-radius: 7px;
  background: #fbfdff;
  color: #66758c;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

.task-subtasks-actions {
  justify-self: end;
}

.task-subtasks-actions .row-action-menu-wrap > .row-action-trigger {
  width: 24px;
  height: 24px;
  min-height: 24px;
  border-color: #dce6f1;
  background: white;
}

.tasks-table .badge {
  display: inline-flex;
  width: fit-content;
  min-width: 0;
  min-height: 22px;
  padding: 2px 9px;
  justify-content: center;
}

.task-title-cell .task-drag-handle {
  margin-top: 0;
}

.task-list-actions {
  justify-content: flex-end;
  gap: 4px;
  opacity: 1;
  pointer-events: auto;
}

.tasks-table .task-list-actions button {
  width: 22px;
  height: 22px;
  min-height: 22px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: #516075;
}

.tasks-table .task-list-actions button:hover {
  border-color: var(--action-hover);
  background: var(--action-hover);
  color: white;
}

.tasks-table .task-list-actions .danger-icon,
.tasks-table .task-list-actions .danger-icon .ui-icon {
  color: var(--red);
}

.tasks-table .task-list-actions .danger-icon:hover {
  border-color: #ffd0d0;
  background: #fff0f0;
  color: var(--red);
}

.tasks-table tr:hover .task-list-actions,
.tasks-table tr:focus-within .task-list-actions {
  opacity: 1;
  pointer-events: auto;
}

.danger-text {
  color: var(--red);
  font-weight: 800;
}

.empty-cell {
  height: 180px;
  text-align: center;
  color: var(--muted);
  font-weight: 800;
}

.task-side-card {
  min-height: 0;
  height: 100%;
  overflow: auto;
  padding: 14px;
  scroll-margin-top: 16px;
}

.tasks-workspace.has-task-detail > .task-side-card {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: stretch;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
}

.task-side-card.empty {
  align-content: start;
}

.task-side-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.task-side-head h2 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.task-side-head span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.task-side-close {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  font-size: var(--text-2xl);
  color: var(--muted);
}

.task-detail-priority {
  margin-bottom: 12px;
}

.task-detail-priority .badge {
  padding: 6px 12px;
  border-radius: 6px;
}

.task-detail-tabs {
  display: flex;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
  overflow-x: auto;
}

.task-detail-tabs button {
  position: relative;
  border: 0;
  border-bottom: 0;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  padding: 7px 0 9px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.task-detail-tabs button span {
  color: inherit;
}

.task-detail-tabs button.active {
  color: var(--action-dark);
}

.task-detail-tabs button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: var(--action-dark);
}

.task-detail-info {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.task-detail-info > div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.task-detail-info span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.task-detail-info strong {
  color: #172033;
  font-size: 13px;
  line-height: 1.35;
}

.task-detail-info a {
  color: var(--blue);
  text-decoration: none;
}

.task-detail-info em {
  color: var(--red);
  font-style: normal;
}

.task-detail-info .task-chip {
  display: inline-flex;
  width: fit-content;
  margin: 0 5px 5px 0;
  border-radius: 999px;
  background: #f1f6fc;
  color: #334155;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 900;
}

.task-detail-panel {
  display: grid;
  gap: 10px;
}

.task-subtask-list,
.task-file-list,
.task-history-list {
  display: grid;
  border: 1px solid #eef2f7;
  border-radius: 8px;
  overflow: hidden;
}

.task-subtask-row,
.task-file-row,
.task-history-row {
  display: grid;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border-bottom: 1px solid #eef2f7;
  background: #fbfdff;
}

.task-subtask-row:last-child,
.task-file-row:last-child,
.task-history-row:last-child {
  border-bottom: 0;
}

.task-subtask-row {
  grid-template-columns: 18px minmax(0, 1fr) auto;
  cursor: pointer;
}

.task-subtask-row input {
  margin: 0;
  accent-color: var(--semantic-green);
}

.task-subtask-row:has(input:checked) {
  background: #f4fbf7;
}

.task-subtask-row:has(input:checked) strong {
  color: #5b687a;
  text-decoration: line-through;
}

.task-subtasks-side-empty {
  margin: 0;
  background: #fbfdff;
  color: #66758c;
  padding: 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.task-file-row {
  grid-template-columns: 18px minmax(0, 1fr) auto;
}

.task-file-row .ui-icon {
  width: 17px;
  height: 17px;
  color: #73829a;
}

.task-subtask-row strong,
.task-file-row strong,
.task-history-row strong {
  display: block;
  color: #172033;
  font-size: 12px;
  line-height: 1.25;
}

.task-subtask-row em,
.task-file-row em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.task-history-row {
  grid-template-columns: 10px 86px minmax(0, 1fr);
}

.task-history-row i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b8c5d6;
}

.task-history-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.task-inline-add {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
}

.advocate-person {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.advocate-photo {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  background:
    radial-gradient(circle at 50% 31%, #f1c9a8 0 16%, transparent 17%),
    radial-gradient(circle at 50% 22%, #24364d 0 15%, transparent 16%),
    linear-gradient(155deg, #f8fafc 0 38%, #102338 39% 64%, #d7e4f3 65% 100%);
  color: transparent;
  border: 1px solid #dbe4f0;
  box-shadow: inset 0 -4px 0 rgba(15, 55, 108, 0.16);
  overflow: hidden;
}

.advocate-photo.has-photo {
  background-image: var(--profile-photo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.advocate-photo.has-photo::before,
.advocate-photo.has-photo::after {
  display: none;
}

.advocate-photo::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 18px;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 9px 9px 3px 3px;
  background:
    linear-gradient(135deg, transparent 0 42%, white 43% 55%, transparent 56%),
    linear-gradient(45deg, transparent 0 42%, white 43% 55%, transparent 56%),
    #102338;
}

.advocate-photo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  width: 7px;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 0 0 4px 4px;
  background: #e8b991;
}

.advocate-photo span {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.advocate-photo.mini {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
}

.case-profile-photo {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}

.case-profile-photo::before {
  width: 24px;
  height: 15px;
  bottom: 5px;
}

.case-profile-photo::after {
  top: 16px;
}

.admin-photo {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.admin-photo::before {
  width: 27px;
  height: 17px;
  bottom: 5px;
}

.admin-photo::after {
  top: 18px;
}

.task-status-select {
  width: auto;
  min-width: 126px;
  max-width: 100%;
  min-height: 34px;
  border: 1px solid var(--task-status-border, var(--semantic-blue-border));
  border-radius: 8px;
  background-color: var(--task-status-bg, var(--semantic-blue-soft));
  color: var(--task-status-color, var(--semantic-blue));
  font-weight: 900;
  font-size: 12px;
  line-height: 1.2;
  padding: 0 32px 0 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.task-status-select:hover,
.task-status-select:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--task-status-color, var(--semantic-blue)) 14%, transparent);
}

.task-status-select.tone-red {
  --task-status-bg: var(--semantic-red-soft);
  --task-status-border: var(--semantic-red-border);
  --task-status-color: var(--semantic-red);
}

.task-status-select.tone-amber {
  --task-status-bg: var(--semantic-amber-soft);
  --task-status-border: var(--semantic-amber-border);
  --task-status-color: var(--semantic-amber);
}

.task-status-select.tone-green {
  --task-status-bg: var(--semantic-green-soft);
  --task-status-border: var(--semantic-green-border);
  --task-status-color: var(--semantic-green);
}

.task-status-select.tone-blue {
  --task-status-bg: var(--semantic-blue-soft);
  --task-status-border: var(--semantic-blue-border);
  --task-status-color: var(--semantic-blue);
}

.task-status-select.tone-violet {
  --task-status-bg: var(--semantic-violet-soft);
  --task-status-border: var(--semantic-violet-border);
  --task-status-color: var(--semantic-violet);
}

.task-status-icon {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--task-status-border, var(--semantic-blue-border));
  border-radius: 999px;
  background: var(--task-status-bg, var(--semantic-blue-soft));
  color: var(--task-status-color, var(--semantic-blue));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  cursor: default;
  line-height: 0;
  vertical-align: middle;
}

.task-status-icon .ui-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%) translateY(0.75px);
}

.task-status-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  z-index: 50;
  width: max-content;
  max-width: 180px;
  transform: translate(-50%, -4px);
  border: 1px solid #dbe8f6;
  border-radius: 7px;
  background: #fff;
  color: #334155;
  padding: 5px 7px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease 0.28s, transform 0.16s ease 0.28s;
}

.task-status-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  z-index: 51;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -4px) rotate(45deg);
  border-left: 1px solid #dbe8f6;
  border-top: 1px solid #dbe8f6;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease 0.28s, transform 0.16s ease 0.28s;
}

.task-status-icon:hover::after,
.task-status-icon:focus-visible::after,
.task-status-icon:hover::before,
.task-status-icon:focus-visible::before {
  opacity: 1;
}

.task-status-icon:hover::after,
.task-status-icon:focus-visible::after {
  transform: translate(-50%, 0);
}

.task-status-icon:hover::before,
.task-status-icon:focus-visible::before {
  transform: translate(-50%, 0) rotate(45deg);
}

.task-status-picker {
  position: relative;
  justify-self: start;
}

.task-status-picker summary {
  min-width: 146px;
  min-height: 34px;
  display: inline-grid;
  grid-template-columns: 20px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--task-status-border, var(--semantic-blue-border));
  border-radius: 8px;
  background: var(--task-status-bg, var(--semantic-blue-soft));
  color: var(--task-status-color, var(--semantic-blue));
  padding: 0 8px 0 10px;
  cursor: pointer;
  list-style: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.task-status-picker summary::-webkit-details-marker {
  display: none;
}

.task-status-picker summary > span,
.task-status-picker button > span {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: white;
}

.task-status-picker .ui-icon {
  width: 12px;
  height: 12px;
  transform: translateY(0.75px);
}

.task-status-picker summary strong {
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-status-picker summary i {
  color: inherit;
  font-style: normal;
  font-weight: 900;
  transition: transform 0.16s ease;
}

.task-status-picker[open] summary i {
  transform: rotate(180deg);
}

.task-status-picker > div {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 40;
  width: 238px;
  display: grid;
  gap: 4px;
  border: 1px solid #dbe8f6;
  border-radius: 9px;
  background: white;
  padding: 6px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.task-status-picker button {
  min-height: 34px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #172033;
  padding: 0 8px;
  text-align: left;
  cursor: pointer;
}

.task-status-picker button:hover,
.task-status-picker button.active {
  border-color: var(--task-status-border, #dbe8f6);
  background: var(--task-status-bg, #f8fbff);
  color: var(--task-status-color, var(--action-dark));
}

.task-status-picker button strong {
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.task-status-picker button em {
  display: inline-grid;
  place-items: center;
  color: inherit;
  font-style: normal;
}

.task-status-icon.task-new,
.task-status-picker.task-new,
.task-status-picker .task-new {
  --task-status-bg: #f3f0ff;
  --task-status-border: #d7ccff;
  --task-status-color: #6d3fd1;
}

.task-status-icon.task-planned,
.task-status-picker.task-planned,
.task-status-picker .task-planned {
  --task-status-bg: #e7f6ff;
  --task-status-border: #9bd1f1;
  --task-status-color: #176d98;
}

.task-status-icon.task-waiting,
.task-status-picker.task-waiting,
.task-status-picker .task-waiting {
  --task-status-bg: #fff8d7;
  --task-status-border: #edd96e;
  --task-status-color: #8a6a00;
}

.task-status-icon.task-work,
.task-status-picker.task-work,
.task-status-picker .task-work {
  --task-status-bg: #eaf4ff;
  --task-status-border: #a9cff7;
  --task-status-color: #1f5f99;
}

.task-status-icon.task-review,
.task-status-picker.task-review,
.task-status-picker .task-review {
  --task-status-bg: #ffeceb;
  --task-status-border: #f2b3ae;
  --task-status-color: #c7362f;
}

.task-status-icon.task-moved,
.task-status-picker.task-moved,
.task-status-picker .task-moved {
  --task-status-bg: #fff3df;
  --task-status-border: #efc47f;
  --task-status-color: #a46000;
}

.task-status-icon.task-overdue,
.task-status-picker.task-overdue,
.task-status-picker .task-overdue,
.task-status-icon.task-urgent,
.task-status-picker.task-urgent,
.task-status-picker .task-urgent,
.task-status-icon.task-cancelled,
.task-status-picker.task-cancelled,
.task-status-picker .task-cancelled {
  --task-status-bg: #ffe9eb;
  --task-status-border: #ffc3ca;
  --task-status-color: #d9293f;
}

.task-status-icon.task-low,
.task-status-picker.task-low,
.task-status-picker .task-low {
  --task-status-bg: #ecfdf3;
  --task-status-border: #b8e7cb;
  --task-status-color: #13804f;
}

.task-status-icon.task-done,
.task-status-picker.task-done,
.task-status-picker .task-done {
  --task-status-bg: #ddf7bf;
  --task-status-border: #77c943;
  --task-status-color: #2f7d0c;
}

.task-status-icon.task-done {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62), 0 0 0 2px rgba(119, 201, 67, 0.12);
}

.task-status-icon.task-default,
.task-status-picker.task-default,
.task-status-picker .task-default {
  --task-status-bg: var(--semantic-blue-soft);
  --task-status-border: var(--semantic-blue-border);
  --task-status-color: var(--semantic-blue);
}

.planner-connected {
  color: var(--green) !important;
}

.planner-connected .event-dot {
  margin-right: 8px;
}

.task-progress {
  display: grid;
  gap: 7px;
  margin: 14px 0;
}

.task-progress div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #172033;
  font-size: 13px;
}

.task-progress span {
  color: var(--muted);
  font-weight: 800;
}

.task-progress i {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue) var(--progress), #e7edf6 var(--progress));
}

.task-side-card h3 {
  margin: 0 0 7px;
  color: #172033;
  font-size: 14px;
  line-height: 1.25;
}

.task-side-card p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.task-preview-rows {
  margin-top: 8px;
}

.task-side-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 12px;
  border: 1px solid #f0f3f8;
  border-radius: 8px;
  overflow: hidden;
}

.task-side-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 36px;
  border: 0;
  border-bottom: 1px solid #f0f3f8;
  border-radius: 0;
  background: #fbfdff;
  color: var(--action-dark);
  font-size: 12px;
  font-weight: 800;
  padding: 0 12px;
}

.task-side-actions button:last-child {
  border-bottom: 0;
}

.task-side-actions button:hover {
  background: var(--action-hover);
  color: white;
}

.task-side-actions button.danger {
  color: var(--red);
}

.task-side-actions .ui-icon {
  width: 15px;
  height: 15px;
}

.task-assignee {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: #172033 !important;
  font-weight: 800;
}

.tasks-pagination {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 2px 0;
  color: var(--muted);
  font-size: 12px;
}

.tasks-pagination label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.tasks-pagination select {
  width: auto;
  min-width: 76px;
  min-height: 30px;
  padding: 4px 28px 4px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
}

.tasks-pagination em {
  justify-self: center;
  font-style: normal;
}

.tasks-pagination div {
  display: flex;
  gap: 6px;
}

.tasks-pagination button {
  min-width: 30px;
  min-height: 30px;
  padding: 0;
}

.tasks-pagination button:disabled {
  opacity: 0.45;
  cursor: default;
}

.tasks-bottom-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.55fr) minmax(300px, 0.9fr) minmax(330px, 1fr);
  gap: 12px;
  align-items: stretch;
}

.task-sync-card,
.task-priority-card,
.task-plan-card {
  min-height: 208px;
  padding: 18px 20px 16px;
}

.task-sync-card h2,
.task-priority-card h2,
.task-plan-card h2 {
  margin: 0 0 18px;
  color: #172033;
  font-size: 16px;
  line-height: 1.25;
}

.task-priority-card h2 {
  margin-bottom: 18px;
}

.task-priority-card {
  display: grid;
  grid-template-rows: auto 1fr;
}

.task-sync-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.task-sync-step {
  display: grid;
  justify-items: center;
  gap: 7px;
  text-align: center;
  min-width: 0;
}

.task-sync-step i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef6ff;
  color: #2f80ed;
  font-style: normal;
}

.task-sync-step .ui-icon {
  width: 22px;
  height: 22px;
}

.task-sync-arrow {
  align-self: center;
  justify-self: center;
  margin-top: 10px;
  color: #9aa8ba;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}

.task-sync-card strong {
  color: #334155;
  font-size: 12px;
  line-height: 1.25;
}

.task-sync-card em {
  color: var(--muted);
  max-width: 145px;
  font-size: 11.5px;
  font-style: normal;
  line-height: 1.45;
}

.priority-donut {
  width: 112px;
  height: 112px;
  margin: 0;
  border-radius: 50%;
  background: conic-gradient(
    #ef4444 0 calc(var(--high) * 1%),
    #f59e0b calc(var(--high) * 1%) calc((var(--high) + var(--medium)) * 1%),
    #fbbf24 calc((var(--high) + var(--medium)) * 1%) calc((var(--high) + var(--medium) + var(--low)) * 1%),
    #22c55e calc((var(--high) + var(--medium) + var(--low)) * 1%) 100%
  );
  position: relative;
}

.priority-donut::after {
  content: "";
  position: absolute;
  inset: 32px;
  border-radius: 50%;
  background: white;
}

.priority-card-body {
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  align-self: center;
  justify-self: stretch;
  width: 100%;
  max-width: none;
}

.priority-legend {
  display: grid;
  gap: 11px;
  min-width: 0;
}

.priority-legend p {
  display: grid;
  grid-template-columns: 10px minmax(82px, 1fr) minmax(92px, auto);
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #536176;
  font-size: 13px;
  min-width: 0;
}

.priority-legend strong {
  color: #334155;
  font-weight: 800;
  min-width: 0;
}

.priority-legend em {
  color: #536176;
  font-style: normal;
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
}

.red-dot,
.amber-dot,
.yellow-dot,
.green-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 9px;
}

.red-dot {
  background: var(--red);
}

.amber-dot {
  background: #f59e0b;
}

.yellow-dot {
  background: #fbbf24;
}

.green-dot {
  background: var(--green);
}

.task-plan-card {
  display: grid;
  align-content: start;
  gap: 12px;
}

.task-plan-card h2 {
  color: #334155;
  font-weight: 700;
}

.task-plan-list {
  display: grid;
  gap: 0;
}

.task-plan-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  border-left: 3px solid #60a5fa;
  padding: 0 0 14px 16px;
  min-width: 0;
}

.task-plan-row.red {
  border-left-color: #fb923c;
}

.task-plan-row.amber {
  border-left-color: #fbbf24;
}

.task-plan-row.green {
  border-left-color: #34d399;
}

.task-plan-row.blue {
  border-left-color: #60a5fa;
}

.task-plan-row:last-child {
  padding-bottom: 0;
}

.task-plan-card time {
  color: #334155;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.task-plan-card strong {
  color: #172033;
  display: block;
  font-size: 13px;
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: anywhere;
}

.task-plan-card em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.task-plan-card .ghost {
  justify-self: start;
  min-height: 30px;
  padding: 0;
  border: 0;
  color: #2f80ed;
  background: transparent;
  font-size: 13px;
  font-weight: 800;
}

.planner-screen {
  display: grid;
  gap: 14px;
}

.planner-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.planner-head h2 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: var(--text-xl);
}

.planner-head span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.planner-head .ui-icon {
  width: 15px;
  height: 15px;
}

.planner-head-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.planner-head-actions button {
  min-height: 38px;
  padding: 0 14px;
}

.planner-head-actions .primary .ui-icon {
  width: 14px;
  height: 14px;
}

.planner-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.planner-kpi-card {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.planner-kpi-card:hover {
  border-color: #c8d8eb;
  background: #fbfdff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.planner-kpi-card.active {
  border-color: #b8d3f4;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: inset 3px 0 0 var(--action-dark);
}

.planner-kpi-card:active {
  transform: translateY(1px);
}

.planner-kpi-grid span {
  color: var(--muted);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
}

.planner-kpi-grid strong {
  display: block;
  margin-top: 10px;
  color: var(--text);
  font-size: var(--text-3xl);
  line-height: 1;
}

.planner-kpi-grid i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--semantic-blue-soft);
  color: var(--semantic-blue);
  font-style: normal;
  font-weight: var(--weight-black);
}

.planner-kpi-grid i.red {
  background: var(--semantic-red-soft);
  color: var(--semantic-red);
}

.planner-kpi-grid i.amber {
  background: var(--semantic-amber-soft);
  color: var(--semantic-amber);
}

.planner-kpi-grid i.green {
  background: var(--semantic-green-soft);
  color: var(--semantic-green);
}

.planner-kpi-grid .ui-icon {
  width: 20px;
  height: 20px;
}

.planner-layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(260px, 1fr);
  gap: 14px;
  align-items: start;
}

.planner-main-card {
  min-height: 640px;
  padding: 16px;
}

.planner-main-card > h2 {
  margin: 0 0 18px;
  color: var(--text);
  font-size: var(--text-lg);
}

.planner-priority-list {
  display: grid;
  gap: 20px;
}

.planner-priority-group {
  display: grid;
  gap: 10px;
  scroll-margin-top: 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, padding 0.18s ease;
}

.planner-priority-group.is-focused {
  border-color: #b8d3f4;
  background: #f8fbff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.06);
  padding: 10px;
}

.planner-priority-group header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--semantic-blue);
}

.planner-priority-group.red header {
  color: var(--semantic-red);
}

.planner-priority-group.amber header {
  color: var(--semantic-amber);
}

.planner-priority-group.green header {
  color: var(--semantic-green);
}

.planner-priority-group header > span {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
}

.planner-priority-group header .ui-icon {
  width: 18px;
  height: 18px;
}

.planner-priority-group header strong {
  font-size: var(--text-base);
}

.planner-priority-group header em {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: currentColor;
  color: white;
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: var(--weight-black);
}

.planner-items {
  display: grid;
  gap: 0;
}

.planner-item {
  display: grid;
  grid-template-columns: 58px 46px minmax(0, 1.35fr) 90px minmax(150px, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 70px;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}

.planner-item time {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.2;
}

.planner-item time strong {
  color: var(--muted);
  font-size: var(--text-sm);
}

.planner-item time .ui-icon {
  width: 13px;
  height: 13px;
}

.planner-item-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 8px;
  background: var(--semantic-blue-soft);
  color: var(--semantic-blue);
}

.planner-item-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  z-index: 40;
  max-width: 190px;
  width: max-content;
  transform: translateX(-50%) translateY(4px);
  border: 1px solid #d8e3f1;
  border-radius: 7px;
  background: #f8fbff;
  color: #43536b;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(18, 33, 56, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.planner-item-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  z-index: 41;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid #d8e3f1;
  border-bottom: 1px solid #d8e3f1;
  background: #f8fbff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.planner-item-icon:hover::after,
.planner-item-icon:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.planner-item-icon:hover::before,
.planner-item-icon:focus-visible::before {
  opacity: 1;
}

.planner-priority-group.red .planner-item-icon {
  background: var(--semantic-red-soft);
  color: var(--semantic-red);
}

.planner-priority-group.amber .planner-item-icon {
  background: var(--semantic-amber-soft);
  color: var(--semantic-amber);
}

.planner-priority-group.green .planner-item-icon {
  background: var(--semantic-green-soft);
  color: var(--semantic-green);
}

.planner-item-icon .ui-icon {
  width: 20px;
  height: 20px;
}

.planner-item-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.planner-item-main strong,
.planner-item-case strong {
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.3;
}

.planner-item-main span,
.planner-item-case span {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.3;
}

.planner-item-main em {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: var(--weight-bold);
  line-height: 1.3;
}

.planner-item-main em .ui-icon {
  width: 12px;
  height: 12px;
}

.planner-item .badge {
  justify-self: start;
}

.planner-item-case {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.planner-item-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
}

.planner-item-actions .secondary {
  min-height: 32px;
  padding: 0 12px;
  color: var(--action-dark);
}

.icon-button.compact {
  width: 32px;
  height: 32px;
  min-height: 32px;
  font-size: 18px;
}

.planner-more-wrap {
  position: relative;
}

.planner-more-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  width: 210px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 6px;
  box-shadow: var(--shadow);
}

.planner-more-menu[hidden] {
  display: none;
}

.planner-more-menu button {
  width: 100%;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  padding: 0 9px;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.planner-more-menu button:hover {
  background: var(--action-hover);
  color: white;
}

.planner-more-menu button.danger {
  color: var(--semantic-red);
}

.planner-more-menu button.danger:hover {
  color: white;
  background: var(--semantic-red);
}

.planner-more-menu .ui-icon {
  width: 15px;
  height: 15px;
}

.planner-add-row {
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: white;
  color: var(--action-dark);
  font-weight: var(--weight-bold);
}

.planner-side {
  display: grid;
  gap: 14px;
}

.planner-side-card {
  padding: 14px;
}

.planner-side-card h2 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: var(--text-lg);
}

.planner-side-card small {
  display: block;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.planner-sync-list {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.planner-team-list {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.planner-team-list p {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  margin: 0;
  border: 1px solid #eef2f7;
  border-radius: 8px;
  background: #fbfdff;
  padding: 9px 10px;
}

.planner-team-list span {
  color: #334155;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.planner-team-list strong {
  color: var(--action-dark);
  font-size: var(--text-sm);
}

.planner-team-list em {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: var(--weight-bold);
}

.planner-sync-list p {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto 18px;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.planner-sync-list .ui-icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.planner-sync-list span {
  color: #44536a;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.planner-sync-list strong {
  color: var(--semantic-green);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.planner-sync-list em {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--semantic-green);
}

.planner-sync-list button {
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--action-dark);
}

.planner-check-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 16px;
  padding: 0;
  list-style: none;
}

.planner-check-list li {
  position: relative;
  padding-left: 24px;
  color: #44536a;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.planner-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--semantic-green);
  font-weight: var(--weight-black);
}

.planner-calendar-card > span {
  display: block;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: var(--text-sm);
}

.planner-calendar-card div {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.planner-calendar-card p {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 2px 10px;
  margin: 0;
  border-left: 3px solid var(--semantic-green);
  padding-left: 10px;
}

.planner-calendar-card time {
  grid-row: span 2;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.planner-calendar-card strong {
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1.3;
}

.planner-calendar-card p span {
  color: var(--muted);
  font-size: var(--text-xs);
}

.planner-productivity h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.planner-productivity h2 span {
  color: var(--muted);
  font-size: var(--text-sm);
}

.planner-productivity p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 8px;
  color: var(--muted);
  font-size: var(--text-sm);
}

.planner-productivity p strong {
  color: var(--text);
}

.planner-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f7;
}

.planner-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--action-dark), #45bf89);
}

@media (max-width: 1180px) {
  .planner-head {
    grid-template-columns: 1fr;
  }

  .planner-head-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .planner-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planner-layout {
    grid-template-columns: 1fr;
  }

  .planner-item {
    grid-template-columns: 54px 42px minmax(0, 1.2fr) 84px minmax(140px, 0.9fr) auto;
  }
}

@media (max-width: 720px) {
  .planner-head-actions,
  .planner-head-actions button {
    width: 100%;
  }

  .planner-kpi-grid {
    grid-template-columns: 1fr;
  }

  .planner-item {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px 12px;
    align-items: start;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
  }

  .planner-item time {
    grid-row: 1 / 3;
  }

  .planner-item-icon {
    grid-column: 1;
    grid-row: 3;
  }

  .planner-item-main,
  .planner-item .badge,
  .planner-item-case,
  .planner-item-actions {
    grid-column: 2;
  }

  .planner-item-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .planner-item-actions .secondary {
    flex: 1 1 150px;
  }

  .planner-sync-list p {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .planner-sync-list strong,
  .planner-sync-list em,
  .planner-sync-list button {
    grid-column: 2;
    justify-self: start;
  }
}

.preview-finance-card {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  background: #fbfcfe;
  padding: 8px 10px 10px;
}

.preview-finance-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #e7edf5;
}

.preview-finance-row span {
  color: #617085;
  font-size: 11px;
  font-weight: 700;
}

.preview-finance-row strong {
  color: #151d2c;
  font-size: 13px;
}

.preview-finance-row.debt strong {
  color: var(--red);
}

.preview-finance-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef7;
  margin-top: 10px;
}

.preview-finance-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1f7ae0, #53c28d);
}

.preview-finance-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.preview-finance-footer small {
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
}

.preview-finance-edit {
  width: 28px;
  height: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  color: #516075;
  padding: 0;
  cursor: pointer;
}

.preview-finance-edit .ui-icon {
  width: 13px;
  height: 13px;
}

.preview-list {
  display: grid;
  border-top: 1px solid var(--line);
  background: #fbfcfe;
}

.preview-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border-bottom: 1px solid #e7edf5;
  transition: background 0.16s ease;
}

.preview-list-row:hover {
  background: #f8fbff;
}

.preview-list-row:last-child {
  border-bottom: 0;
}

.preview-document-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.preview-document-row .folder-actions {
  justify-self: end;
  align-self: center;
  margin-left: 0;
  margin-top: 0;
}

.preview-document-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.preview-document-title .ui-icon {
  width: 15px;
  height: 15px;
  color: #7a889a;
}

.preview-list-row strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-list-row span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px;
}

.preview-document-meta {
  display: flex !important;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.preview-document-meta .badge {
  min-height: 18px;
  padding: 2px 7px;
  font-size: 10px;
}

.folder-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.preview-list-row:hover .folder-actions,
.preview-list-row:focus-within .folder-actions,
.folder-file-row:hover .folder-actions,
.folder-file-row:focus-within .folder-actions {
  opacity: 1;
  pointer-events: auto;
}

.folder-actions button {
  width: 22px;
  height: 22px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: #516075;
  padding: 0;
  line-height: 0;
  cursor: pointer;
}

.folder-actions button .ui-icon {
  width: 12px;
  height: 12px;
  display: grid;
  place-items: center;
  color: currentColor;
  line-height: 0;
}

.folder-actions button .ui-icon svg {
  display: block;
}

.folder-actions button .ui-icon {
  transform: translateY(-1px);
}

.folder-actions button:hover {
  border-color: var(--action-hover);
  color: white;
  background: var(--action-hover);
}

.folder-actions .danger-icon {
  color: var(--red);
}

.folder-actions .danger-icon:hover {
  border-color: #ffd0d0;
  background: #fff0f0;
  color: var(--red);
}

.preview-empty {
  padding: 10px;
  color: var(--muted);
  margin: 0;
}

.case-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.case-title-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.case-title-line h2 {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}

.case-meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.case-owner {
  display: inline-flex;
  gap: 6px;
  margin-left: 0;
}

.case-detail-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.case-detail-actions .primary {
  min-width: 184px;
  background: var(--action-dark);
  border-color: var(--action-dark);
  box-shadow: 0 8px 18px rgba(15, 55, 108, 0.18);
}

.case-detail-actions .secondary {
  min-width: 142px;
}

.case-detail-grid {
  display: grid;
  grid-template-columns: minmax(320px, 23%) minmax(0, 43%) minmax(0, 34%);
  gap: 10px;
  align-items: stretch;
}

.case-stack,
.case-main-column,
.case-side-column {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
}

.case-stack {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.case-main-column,
.case-side-column {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}

.case-stack .case-card,
.case-main-column .case-card,
.case-side-column .case-card {
  min-height: 0;
}

.case-stack .case-card {
  display: flex;
  flex-direction: column;
}

.case-side-column .case-card {
  padding: 13px 14px 12px;
}

.case-side-column .case-card h3 {
  margin-bottom: 14px;
}

.case-card {
  min-width: 0;
  max-width: 100%;
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 13px;
  box-shadow: none;
}

.case-card.case-preview-card {
  padding: 14px 13px;
}

.case-card h3,
.case-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0;
  font-weight: 800;
  color: #151d2c;
}

.case-card p {
  max-width: 100%;
  min-width: 0;
  color: #253047;
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 6px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.case-card strong,
.case-contact-list span,
.authority-box strong {
  overflow-wrap: anywhere;
}

.case-client-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.case-avatar,
.authority-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f1f5fb;
  color: #526176;
}

.case-contact-list {
  display: grid;
  gap: 12px;
}

.case-contact-list div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: #243149;
  font-size: 12px;
}

.authority-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.case-tabs {
  display: flex;
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid var(--line);
  margin: -4px 0 8px;
}

.case-tabs button {
  min-height: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #39465d;
  padding: 0;
  cursor: pointer;
}

.case-tabs button.active {
  color: var(--action-dark);
  border-bottom: 2px solid var(--action-dark);
}

.case-table-wrap {
  overflow-x: auto;
  min-height: 0;
  max-width: 100%;
}

.scroll-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.scroll-area {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding: 0 2px;
}

.case-inner-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 11px;
}

.case-inner-table th,
.case-inner-table td {
  padding: 7px 6px;
  line-height: 1.28;
  overflow-wrap: anywhere;
  word-break: normal;
}

.case-inner-table th {
  color: #536176;
  font-size: 11px;
}

.case-inner-table .empty-cell {
  height: 72px;
  color: #7a8798;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}

.case-actions-table td:first-child {
  width: 28px;
  text-align: center;
}

.case-actions-table td:nth-child(2) {
  width: 40%;
}

.case-actions-table td:nth-child(3) {
  width: 15%;
  text-align: center;
}

.case-actions-table td:nth-child(4) {
  width: 16%;
  text-align: center;
}

.case-actions-table td:nth-child(5) {
  width: 15%;
}

.case-actions-table td:nth-child(6) {
  width: 7%;
  text-align: center;
}

.case-actions-table .task-row-actions {
  justify-content: center;
  width: 100%;
}

.procedural-actions-table th:nth-child(1),
.procedural-actions-table td:nth-child(1) {
  width: 34%;
}

.procedural-actions-table th:nth-child(2),
.procedural-actions-table td:nth-child(2) {
  width: 15%;
}

.procedural-actions-table th:nth-child(3),
.procedural-actions-table td:nth-child(3),
.procedural-actions-table th:nth-child(4),
.procedural-actions-table td:nth-child(4) {
  width: 18%;
}

.procedural-actions-table th:nth-child(5),
.procedural-actions-table td:nth-child(5) {
  width: 15%;
}

.case-actions-table {
  min-width: 620px;
}

.procedural-actions-table {
  min-width: 560px;
}

.case-actions-table input[type="checkbox"] {
  width: 14px;
  height: 14px;
  min-height: 14px;
  padding: 0;
}

.task-done-row td {
  color: #7a8798;
}

.case-inner-table tr.task-done-row {
  background: #f9fbfe;
  opacity: 0.6;
}

.case-inner-table tr.task-done-row:hover {
  opacity: 0.76;
}

.task-done-row .row-title-text {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(83, 97, 118, 0.65);
}

.task-done-row td span:not(.badge):not(.task-reminder-note),
.task-done-row td strong,
.task-done-row td a {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(83, 97, 118, 0.65);
}

.task-reminder-note {
  display: block;
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  margin-top: 3px;
}

.task-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}

.hover-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.row-title-with-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  column-gap: 8px;
  width: 100%;
  max-width: 100%;
}

.row-title-text {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.row-title-with-actions .hover-row-actions {
  justify-self: start;
}

.task-action-row:hover .hover-row-actions,
.task-action-row:focus-within .hover-row-actions,
.procedural-action-row:hover .hover-row-actions,
.procedural-action-row:focus-within .hover-row-actions {
  opacity: 1;
  pointer-events: auto;
}

.task-row-actions .case-row-icon,
.procedural-row-actions .case-row-icon {
  width: 22px;
  height: 22px;
  min-height: 22px;
  border: 1px solid transparent;
  border-radius: 6px;
}

.task-row-actions .case-row-icon.active,
.task-row-actions .case-row-icon:hover,
.procedural-row-actions .case-row-icon:hover {
  border-color: var(--action-hover);
  background: var(--action-hover);
  color: white;
}

.task-row-actions .case-row-icon.active {
  border-color: var(--action-dark);
  background: var(--action-dark);
}

.task-row-actions .danger-icon,
.procedural-row-actions .danger-icon {
  color: var(--red);
}

.task-row-actions .case-row-icon.danger-icon,
.procedural-row-actions .case-row-icon.danger-icon,
.hover-row-actions .case-row-icon.danger-icon {
  color: var(--red);
}

.task-row-actions .danger-icon:hover,
.procedural-row-actions .danger-icon:hover {
  border-color: #ffd0d0;
  background: #fff0f0;
  color: var(--red);
}

.procedural-row-actions {
  justify-content: flex-end;
}

.procedural-actions-table .dot-status {
  white-space: nowrap;
}

.case-inner-table .badge {
  font-size: 10px;
  min-height: 18px;
  padding: 2px 6px;
}

.case-documents-table th,
.case-documents-table td,
.folders-table th,
.folders-table td {
  padding: 10px 8px;
}

.case-documents-table th:first-child,
.case-documents-table td:first-child {
  width: 40%;
  padding-left: 0;
}

.case-documents-table th:nth-child(2),
.case-documents-table td:nth-child(2) {
  width: 18%;
  text-align: center;
}

.case-documents-table th:nth-child(3),
.case-documents-table td:nth-child(3) {
  width: 24%;
  text-align: center;
}

.case-documents-table th:nth-child(4),
.case-documents-table td:nth-child(4) {
  width: 18%;
  text-align: right;
}

.case-documents-table {
  min-width: 0;
}

.case-documents-table tbody tr,
.folders-table .folder-row {
  min-height: 46px;
}

.case-row-icon {
  width: 26px;
  height: 26px;
  min-height: 26px;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #5d6b80;
  padding: 0;
  cursor: pointer;
}

.case-row-icon .ui-icon {
  width: 15px;
  height: 15px;
}

.case-link-button {
  min-height: 28px;
  border: 0;
  background: transparent;
  color: var(--blue);
  padding: 6px 0 0;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.scroll-card > .case-link-button {
  align-self: flex-start;
  text-align: left;
}

.case-documents-card,
.case-folders-card {
  overflow: visible;
}

.case-documents-card .case-table-wrap,
.case-folders-card .case-table-wrap {
  margin-bottom: 10px;
}

.case-documents-card .case-link-button,
.case-folders-card .case-link-button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0;
  line-height: 1.2;
}

.case-card-actions {
  display: flex;
  justify-content: flex-start;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.case-finance-card {
  margin-top: 10px;
}

.case-finance-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.case-finance-metric {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: #f8fbff;
}

.case-finance-metric span {
  display: block;
  color: #617085;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 6px;
}

.case-finance-metric strong {
  color: #151d2c;
  font-size: var(--text-lg);
  line-height: 1.15;
}

.case-finance-metric.debt {
  background: #fff4f4;
  border-color: #ffd6d6;
}

.case-finance-metric.debt strong {
  color: #d94343;
}

.case-finance-metric.paid {
  background: #effaf4;
  border-color: #cbeedc;
}

.case-finance-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef7;
  margin-top: 12px;
}

.case-finance-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1f7ae0, #53c28d);
}

.case-finance-note {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 10px;
}

.case-finance-note span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}

.case-finance-note p {
  margin: 0;
  color: #617085;
}

.dot-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #526176;
  white-space: nowrap;
}

.dot-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.dot-status.amber {
  color: var(--semantic-amber);
}

.dot-status.blue {
  color: var(--semantic-blue);
}

.dot-status.green {
  color: var(--semantic-green);
}

.dot-status.red {
  color: var(--semantic-red);
}

.procedural-doc-name {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.procedural-doc-title {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.procedural-actions {
  display: inline-flex;
  gap: 5px;
  justify-self: end;
}

.procedural-actions .row-action-menu-wrap {
  display: inline-flex;
}

.procedural-actions > .row-action-menu-wrap > .row-action-trigger {
  width: 22px;
  height: 22px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: #516075;
  padding: 0;
  line-height: 0;
  cursor: pointer;
}

.procedural-actions > .row-action-menu-wrap > .row-action-trigger .ui-icon {
  width: 12px;
  height: 12px;
}

.procedural-actions > .row-action-menu-wrap > .row-action-trigger:hover {
  border-color: var(--action-dark);
  color: var(--action-dark);
  background: white;
}

.procedural-actions .danger-icon {
  color: var(--red);
}

.procedural-actions .danger-icon:hover {
  border-color: #ffd0d0;
  background: #fff0f0;
  color: var(--red);
}

.folder-cell {
  display: grid;
  grid-template-columns: 14px 34px minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  gap: 8px;
  font-weight: 700;
  width: 100%;
  min-width: 0;
}

.folder-row-content {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(46px, 1fr);
  align-items: center;
  column-gap: 8px;
  width: 84%;
  margin: 0 auto;
  min-width: 0;
  max-width: 100%;
}

.folder-caret {
  width: 12px;
  color: var(--blue);
  font-size: var(--text-lg);
  line-height: 1;
}

.folder-open-button {
  min-height: 26px;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.folder-title-text {
  min-width: 0;
  max-width: none;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.folder-open-button:hover {
  color: var(--blue);
}

.folder-row-actions {
  display: inline-flex;
  gap: 4px;
  justify-self: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.folder-row:hover .folder-row-actions,
.folder-row:focus-within .folder-row-actions {
  opacity: 1;
  pointer-events: auto;
}

.folder-row-actions button {
  width: 22px;
  height: 22px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: #516075;
  padding: 0;
  cursor: pointer;
}

.folder-row-actions button .ui-icon {
  width: 12px;
  height: 12px;
  color: currentColor;
}

.folder-row-actions button:hover {
  border-color: var(--action-hover);
  color: white;
  background: var(--action-hover);
}

.folder-row-actions .danger-icon {
  color: var(--red);
}

.folder-row-actions button.danger-icon {
  color: var(--red);
}

.folder-row-actions .danger-icon:hover {
  border-color: #ffd0d0;
  background: #fff0f0;
  color: var(--red);
}

.folder-row.open td {
  background: #f8fbff;
}

.folders-table {
  table-layout: fixed;
  width: 100%;
  min-width: 460px;
  margin: 0;
}

.folders-table > thead th:first-child,
.folders-table .folder-row > td:first-child {
  width: 45%;
  text-align: left;
}

.folders-table > thead th:nth-child(2),
.folders-table .folder-row > td:nth-child(2) {
  width: 10%;
}

.folders-table > thead th:nth-child(3),
.folders-table .folder-row > td:nth-child(3) {
  width: 45%;
}

.folders-table > thead th:nth-child(2),
.folders-table .folder-row > td:nth-child(2),
.folders-table > thead th:nth-child(3),
.folders-table .folder-row > td:nth-child(3) {
  text-align: center;
}

.folder-files-row > td {
  padding: 0;
  background: #fbfcfe;
}

.folder-files-list {
  display: grid;
  border-top: 1px solid #e4ebf5;
  width: 100%;
  margin: 0;
}

.folder-file-row {
  display: grid;
  grid-template-columns: 45% 10% 45%;
  align-items: center;
  min-height: 56px;
  padding: 7px 0;
  border-bottom: 1px solid #e4ebf5;
  transition: background 0.16s ease;
}

.folder-file-row:last-child {
  border-bottom: 0;
}

.folder-file-row:hover {
  background: #f8fbff;
}

.folder-file-name {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  align-items: center;
  column-gap: 8px;
  width: 100%;
  min-width: 0;
  color: #35435a;
  padding: 0 8px 0 30px;
}

.folder-file-title {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.folder-file-title span {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.22;
}

.folder-file-name .ui-icon {
  width: 15px;
  height: 15px;
  color: #7a889a;
}

.folder-file-name .folder-actions {
  justify-self: center;
}

.folder-status-cell {
  display: flex;
  justify-content: center;
  padding: 0 8px;
  min-width: 0;
}

.folder-status-control {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.folder-updated-cell {
  display: flex;
  justify-content: center;
  padding: 0 8px;
  white-space: nowrap;
}

.folder-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.folder-file-row:hover .folder-actions,
.folder-file-row:focus-within .folder-actions {
  opacity: 1;
  pointer-events: auto;
}

.folder-actions button {
  width: 22px;
  height: 22px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: #516075;
  padding: 0;
  cursor: pointer;
}

.folder-actions .danger-icon {
  color: var(--red);
}

.folder-actions button .ui-icon {
  width: 12px;
  height: 12px;
  display: grid;
  place-items: center;
  color: currentColor;
  line-height: 0;
}

.folder-actions button .ui-icon svg {
  display: block;
}

.folder-actions button:hover {
  border-color: var(--action-hover);
  color: white;
  background: var(--action-hover);
}

.folder-actions .danger-icon:hover {
  border-color: #ffd0d0;
  background: #fff0f0;
  color: var(--red);
}

.folder-icon {
  position: relative;
  width: 24px;
  height: 18px;
  display: inline-block;
  border-radius: 3px;
  background: #ffc24d;
}

.folder-icon::before {
  content: "";
  position: absolute;
  left: 1px;
  top: -5px;
  width: 12px;
  height: 7px;
  border-radius: 3px 3px 0 0;
  background: #ffd36f;
}

.case-history-card {
  margin-top: 10px;
}

.case-history-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  margin-left: 6px;
  border-radius: 999px;
  background: #eef1f4;
  color: #57606a;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}

.case-history-more {
  margin-top: 10px;
}

.case-history-more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line, #d0d7de);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand, #1f3a5f);
  background: #f6f8fa;
  user-select: none;
}

.case-history-more > summary::-webkit-details-marker { display: none; }

.case-history-more > summary::after {
  content: "⌄";
  font-size: 13px;
  line-height: 1;
}

.case-history-more[open] > summary::after {
  content: "⌃";
}

.case-history-more > summary:hover {
  background: #eef1f4;
}

.case-history-more .case-history-list {
  margin-top: 12px;
}

.case-history-list {
  display: grid;
  gap: 10px;
}

.case-history-row {
  display: grid;
  grid-template-columns: 12px 116px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  color: #35435a;
  font-size: 12px;
}

@media (max-width: 1320px) {
  .case-detail-grid {
    grid-template-columns: minmax(270px, 22%) minmax(0, 42%) minmax(0, 36%);
  }

  .tasks-bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-sync-card {
    grid-column: 1 / -1;
  }

  .case-inner-table {
    font-size: 10px;
  }

  .case-card h3,
  .case-card-title {
    font-size: 12px;
  }
}

@media (max-width: 900px) {
  .case-detail-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .case-detail-head > div:first-child {
    min-width: 0;
  }

  .case-title-line {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .case-title-line h2 {
    min-width: 0;
  }

  .case-detail-actions {
    width: 100%;
  }

  .case-detail-actions .primary,
  .case-detail-actions .secondary {
    width: 100%;
    min-width: 0;
  }

  .case-detail-grid {
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .case-stack,
  .case-main-column,
  .case-side-column {
    grid-template-rows: auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .case-stack .case-card,
  .case-main-column .case-card,
  .case-side-column .case-card {
    min-height: auto;
  }

  .case-table-wrap,
  .scroll-area {
    overflow: visible;
    padding: 0;
  }

  .case-documents-card,
  .case-folders-card {
    display: grid;
    align-content: start;
    gap: 10px;
    overflow: visible;
  }

  .case-documents-card .scroll-area,
  .case-folders-card .scroll-area {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
  }

  .case-documents-card .case-table-wrap,
  .case-folders-card .case-table-wrap {
    margin-bottom: 0;
  }

  .case-documents-card .case-link-button,
  .case-folders-card .case-card-actions {
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }

  .case-folders-card .case-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: 8px 16px;
    justify-content: start;
  }

  .case-actions-table,
  .procedural-actions-table,
  .case-documents-table,
  .folders-table {
    min-width: 0;
  }

  .case-inner-table,
  .case-inner-table thead,
  .case-inner-table tbody,
  .case-inner-table tr,
  .case-inner-table td {
    display: block;
    width: 100% !important;
  }

  .case-inner-table thead {
    display: none;
  }

  .case-inner-table tr {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfe;
    margin-bottom: 10px;
    padding: 9px 10px;
  }

  .case-inner-table td {
    min-height: 30px;
    border: 0;
    padding: 6px 0;
    text-align: left !important;
  }

  .case-inner-table td:not(.empty-cell) {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }

  .case-inner-table td:not(.empty-cell)::before {
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.25;
    text-transform: uppercase;
  }

  .case-actions-table td:nth-child(1)::before {
    content: "Готово";
  }

  .case-actions-table td:nth-child(2)::before,
  .procedural-actions-table td:nth-child(1)::before {
    content: "Дія";
  }

  .case-actions-table td:nth-child(3)::before,
  .procedural-actions-table td:nth-child(5)::before,
  .case-documents-table td:nth-child(4)::before {
    content: "Статус";
  }

  .case-actions-table td:nth-child(4)::before {
    content: "Дедлайн";
  }

  .case-actions-table td:nth-child(5)::before {
    content: "Відповідальний";
  }

  .case-actions-table td:nth-child(6)::before {
    content: "Нагадування";
  }

  .procedural-actions-table td:nth-child(2)::before {
    content: "Ініціатор";
  }

  .procedural-actions-table td:nth-child(3)::before {
    content: "Дата";
  }

  .procedural-actions-table td:nth-child(4)::before {
    content: "Строк";
  }

  .case-documents-table td:nth-child(1)::before {
    content: "Документ";
  }

  .case-documents-table td:nth-child(2)::before {
    content: "Подано";
  }

  .case-documents-table td:nth-child(3)::before {
    content: "Відповідь";
  }

  .folders-table .folder-row > td:nth-child(1)::before {
    content: "Папка";
  }

  .folders-table .folder-row > td:nth-child(2)::before {
    content: "Файлів";
  }

  .folders-table .folder-row > td:nth-child(3)::before {
    content: "Оновлено";
  }

  .row-title-with-actions {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hover-row-actions,
  .folder-actions,
  .procedural-actions {
    opacity: 1;
    pointer-events: auto;
  }

  .task-row-actions,
  .procedural-row-actions {
    justify-content: flex-start;
  }

  .case-inner-table .badge,
  .dot-status {
    justify-self: start;
  }

  .folder-files-row {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
  }

  .folder-files-row > td {
    display: block !important;
    padding: 0 !important;
  }

  .folder-files-row > td::before {
    display: none;
  }

  .folder-files-list {
    gap: 8px;
    border-top: 0;
    padding: 0 0 0 12px;
  }

  .folder-file-row {
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: start;
    border: 1px solid #e4ebf5;
    border-radius: 8px;
    background: white;
    padding: 10px;
  }

  .folder-file-name {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0;
  }

  .folder-row-content {
    width: 100%;
    margin: 0;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .folder-title-text {
    overflow-wrap: anywhere;
  }

  .folder-file-title {
    justify-self: start;
  }

  .folder-status-cell,
  .folder-updated-cell {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    justify-content: stretch;
    gap: 10px;
    padding: 0;
    white-space: normal;
  }

  .folder-status-cell::before,
  .folder-updated-cell::before {
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .folder-status-cell::before {
    content: "Статус";
  }

  .folder-updated-cell::before {
    content: "Оновлено";
  }

  .folder-status-control,
  .folder-updated-cell {
    justify-content: start;
  }

  .case-documents-card .empty-cell,
  .case-folders-card .empty-cell {
    border: 1px dashed #d7e0ec;
    border-radius: 8px;
    background: #fbfcfe;
    padding: 16px;
  }
}

.case-history-row span {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: #9aa8b8;
  box-shadow: 0 0 0 4px #f0f3f7;
}

.case-history-row strong,
.case-history-row p {
  margin: 0;
  font-size: 13px;
}

.client-profile-card {
  width: 100%;
  min-width: 0;
  padding: 0;
}

.profile-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  margin: 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-lg);
}

.profile-shell {
  margin: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.profile-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.client-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.client-title strong {
  display: inline-block;
  margin-right: 10px;
  font-size: var(--text-lg);
}

.avatar.large {
  width: 48px;
  height: 48px;
  font-size: var(--text-xl);
}

.avatar.small {
  width: 34px;
  height: 34px;
}

.client-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid #dbe4f0;
  border-radius: 50%;
  background: #edf3fb;
  color: var(--action-dark);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  overflow: hidden;
}

.client-avatar.large {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
}

.client-avatar.has-client-photo {
  background-image: var(--client-photo);
  background-size: cover;
  background-position: center;
  color: transparent;
}

.profile-screenshot-grid {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 18px;
  padding-top: 14px;
}

.profile-contact-list {
  display: grid;
  gap: 12px;
  border-right: 1px solid var(--line);
  padding-right: 22px;
}

.contact-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #435067;
  font-size: 13px;
}

.contact-icons {
  color: var(--blue);
  white-space: nowrap;
  display: inline-flex;
  gap: 8px;
}

.client-photo-settings {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
}

.client-photo-settings .checkbox-line {
  min-height: auto;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: var(--weight-bold);
}

.client-photo-settings .checkbox-line input {
  width: 16px;
  height: 16px;
}

.client-photo-settings p {
  margin: 0;
}

.profile-details h3 {
  margin: 0 0 8px;
}

.profile-details p {
  color: #5b677b;
  line-height: 1.45;
  margin-bottom: 14px;
  font-size: 13px;
}

.manager-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.related-case-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.client-communication-panel {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.client-communication-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.client-communication-head h3 {
  margin: 0 0 4px;
}

.client-communication-head p {
  margin: 0;
  color: #66758c;
  font-size: 12px;
}

.client-communication-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.client-communication-list {
  display: grid;
  gap: 8px;
}

.client-communication-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  padding: 8px 10px;
  background: #f8fbff;
}

.client-communication-row i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eaf3ff;
  color: var(--action-dark);
}

.client-communication-row svg {
  width: 15px;
  height: 15px;
}

.client-communication-row strong,
.client-communication-row span {
  display: block;
}

.client-communication-row strong {
  font-size: 13px;
}

.client-communication-row span {
  margin-top: 2px;
  color: #66758c;
  font-size: 12px;
}

.client-communication-row em {
  border-radius: 999px;
  background: #eef6ff;
  color: var(--action-dark);
  padding: 4px 9px;
  font-size: 11px;
  font-style: normal;
  font-weight: var(--weight-bold);
}

.client-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.note-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
  color: #35435a;
  line-height: 1.45;
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  padding-bottom: 12px;
}

.timeline-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-soft);
}

.case-accordion {
  display: grid;
  gap: 8px;
}

.case-accordion details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  overflow: hidden;
}

.case-accordion summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.case-accordion summary::-webkit-details-marker {
  display: none;
}

.case-accordion summary::before {
  content: "›";
  color: var(--action-dark);
  font-size: var(--text-2xl);
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 0.18s ease;
}

.case-accordion summary span:first-child {
  margin-right: auto;
}

.summary-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.inline-add-button {
  width: 26px;
  height: 26px;
  min-height: 26px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--action-dark);
  border-radius: 8px;
  background: white;
  color: var(--action-dark);
  padding: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  cursor: pointer;
}

.inline-add-button:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
  color: white;
}

.case-accordion details[open] summary {
  border-bottom: 1px solid var(--line);
  background: #f8fbff;
}

.case-accordion details[open] summary::before {
  transform: rotate(90deg);
}

.accordion-body {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #fbfcfe;
}

.calendar-screen {
  display: grid;
  gap: 14px;
}

.calendar-toolbar {
  display: grid;
  grid-template-columns: auto auto auto auto minmax(150px, 1fr) minmax(190px, 280px);
  gap: 10px;
  align-items: center;
}

.calendar-toolbar input,
.calendar-toolbar select,
.calendar-toolbar button,
.calendar-filter-panel input,
.calendar-filter-panel select {
  min-height: 42px;
}

.calendar-toolbar .primary {
  background: var(--action-dark);
  border-color: var(--action-dark);
}

.calendar-mode-group,
.calendar-arrows {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.calendar-mode-group button {
  min-width: 62px;
}

.calendar-mode-group button,
.calendar-arrows button {
  border-radius: 0;
}

.calendar-mode-group button:first-child,
.calendar-arrows button:first-child {
  border-radius: 8px 0 0 8px;
}

.calendar-mode-group button:last-child,
.calendar-arrows button:last-child {
  border-radius: 0 8px 8px 0;
}

.calendar-date-picker {
  position: relative;
  justify-self: center;
}

.calendar-title-button {
  min-height: 42px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  white-space: nowrap;
  cursor: pointer;
  padding: 0 10px;
}

.calendar-title-button span {
  color: var(--muted);
  font-size: var(--text-base);
}

.calendar-picker-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 310px;
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  box-shadow: var(--shadow);
}

.calendar-picker-column {
  max-height: 220px;
  overflow-y: auto;
  display: grid;
  gap: 4px;
}

.calendar-picker-column span {
  position: sticky;
  top: 0;
  padding: 4px 8px 6px;
  background: white;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.calendar-picker-column button {
  min-height: 32px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #26354d;
  text-align: left;
  font-weight: 800;
  cursor: pointer;
  padding: 0 8px;
}

.calendar-picker-column button:hover {
  background: var(--action-hover);
  color: white;
}

.calendar-picker-column button.active {
  background: var(--action-dark);
  color: white;
}

.year-column button {
  text-align: center;
}

.calendar-filter-panel {
  display: grid;
  grid-template-columns: minmax(130px, 0.9fr) repeat(5, minmax(120px, 1fr)) auto auto;
  gap: 10px;
  align-items: center;
}

.calendar-filter-field {
  display: block;
  min-width: 0;
}

.calendar-filter-field > select.document-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.calendar-filter-select .document-custom-select-button {
  min-height: 42px;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
}

.calendar-filter-select .document-custom-select-menu {
  z-index: 90;
  max-height: 310px;
  border-radius: 14px;
}

.calendar-filter-select .document-custom-select-option {
  min-height: 38px;
  font-size: 13px;
}

.calendar-overdue-filter {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: #536176;
  font-size: 12px;
  font-weight: 900;
  padding: 0 12px;
  white-space: nowrap;
}

.calendar-overdue-filter input {
  width: 14px;
  height: 14px;
  min-height: 0;
  margin: 0;
}

.calendar-reset-filter {
  min-height: 42px;
  white-space: nowrap;
}

.calendar-layout {
  display: grid;
  grid-template-columns: var(--main-side-grid);
  gap: 14px;
  align-items: start;
}

.calendar-left-stack {
  display: grid;
  gap: 14px;
}

.calendar-main-card {
  padding: 0;
  overflow: hidden;
}

.calendar-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.calendar-title-row h2 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.calendar-title-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(var(--calendar-columns, 7), minmax(92px, 1fr));
  border: 0;
  border-bottom: 0;
  overflow: hidden;
}

.calendar-weekdays span {
  min-height: 54px;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: white;
  color: #536176;
  font-size: 12px;
  font-weight: 800;
}

.calendar-weekdays span:last-child {
  border-right: 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(var(--calendar-columns, 7), minmax(92px, 1fr));
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: white;
}

.day {
  min-height: 132px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 10px;
  background: white;
}

.calendar-grid.week-view .day {
  min-height: 430px;
}

.calendar-grid.day-view .day {
  min-height: 520px;
}

.calendar-list-view {
  display: grid;
  gap: 8px;
}

.calendar-list-row {
  display: grid;
  grid-template-columns: 12px 122px minmax(190px, 1.1fr) minmax(170px, 1fr) minmax(170px, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  text-align: left;
  padding: 12px;
  cursor: pointer;
}

.calendar-list-row:hover,
.calendar-list-row.selected {
  border-color: var(--action-border);
  background: #f8fbff;
}

.calendar-list-row strong,
.calendar-list-row em {
  display: block;
}

.calendar-list-row strong {
  color: #172033;
  font-size: 12px;
}

.calendar-list-row em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.day:nth-child(7n) {
  border-right: 0;
}

.day-num {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.muted-day .day-num {
  color: #b3bdca;
}

.event-chip {
  display: block;
  width: 100%;
  border: 0;
  text-align: left;
  min-height: 58px;
  border-radius: 7px;
  padding: 9px;
  margin-bottom: 6px;
  background: var(--blue-soft);
  color: #21415f;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.35;
}

.event-chip strong {
  font-weight: 900;
}

.event-chip span {
  display: block;
  margin-top: 5px;
  color: #3d4b61;
  font-weight: 800;
}

.event-chip.selected,
.event-chip:hover {
  outline: 2px solid var(--action-border);
}

.event-chip.court {
  background: #e6f6ed;
}

.event-chip.deadline {
  background: #ffe9eb;
}

.event-chip.meeting {
  background: #e7f1ff;
}

.event-chip.consultation {
  background: #e8f8f2;
  border-left: 3px solid #19a874;
}

.event-chip.doc {
  background: #fff4d8;
}

.event-chip.waiting {
  background: #eef2ff;
  border-left: 3px solid var(--violet);
}

.event-chip.task {
  background: #edf5ff;
  border-left: 3px solid var(--blue);
}

.event-chip.other {
  background: #efecff;
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 16px 14px;
  color: #536176;
  font-size: 13px;
  font-weight: 700;
}

.calendar-legend button {
  min-height: 34px;
  display: inline-grid;
  grid-template-columns: 10px auto auto;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  gap: 7px;
  color: #536176;
  font-size: 12px;
  font-weight: 800;
  padding: 0 10px;
  cursor: pointer;
}

.calendar-legend button:hover,
.calendar-legend button.active {
  border-color: var(--action-border);
  background: #f8fbff;
  color: #172033;
}

.calendar-legend em {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #edf2f7;
  color: #536176;
  font-style: normal;
  font-size: 11px;
}

.calendar-legend i,
.event-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: var(--blue);
}

.calendar-legend .meeting,
.event-dot.meeting {
  background: #2f7de1;
}

.calendar-legend .consultation,
.event-dot.consultation {
  background: #19a874;
}

.calendar-legend .court,
.event-dot.court {
  background: #54c988;
}

.calendar-legend .doc,
.event-dot.doc {
  background: #ffd258;
}

.calendar-legend .deadline,
.event-dot.deadline {
  background: #ff7d85;
}

.calendar-legend .waiting,
.event-dot.waiting {
  background: var(--violet);
}

.calendar-legend .other,
.event-dot.other,
.event-dot.task {
  background: #b88cff;
}

.calendar-side {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 14px;
}

.event-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.event-card-head h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.event-card-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.event-card-nav button {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
}

.event-more-wrap {
  position: relative;
}

.event-more-menu {
  position: absolute;
  z-index: 12;
  top: calc(100% + 8px);
  right: 0;
  width: 210px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 6px;
  box-shadow: var(--shadow);
}

.event-more-menu[hidden] {
  display: none;
}

.event-more-menu button {
  width: 100%;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #334155;
  padding: 0 9px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.event-more-menu button:hover {
  background: var(--action-hover);
  color: white;
}

.event-more-menu .ui-icon {
  width: 15px;
  height: 15px;
}

.event-card-title {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.event-card-title strong {
  font-size: 13px;
  line-height: 1.35;
}

.event-info-list {
  display: grid;
  gap: 16px;
}

.event-info-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  align-items: flex-start;
}

.event-info-row .ui-icon {
  width: 20px;
  height: 20px;
  color: #7a8799;
}

.event-info-row strong,
.event-info-row em {
  display: block;
}

.event-info-row strong {
  color: #172033;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
}

.event-info-row em {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.event-description {
  margin: 20px 0;
  padding-left: 38px;
  font-size: 13px;
  line-height: 1.45;
}

.event-profile .primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  justify-self: center;
  background: var(--action-dark);
  border-color: var(--action-dark);
}

.event-profile .primary .ui-icon {
  width: 15px;
  height: 15px;
}

.event-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.event-card-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
}

.event-card-actions .ui-icon {
  width: 15px;
  height: 15px;
}

.calendar-events-list {
  display: grid;
  gap: 0;
  padding: 16px 18px;
}

.calendar-events-head,
.calendar-reminders-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.calendar-reminders-head .ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--action-dark);
  font-size: 13px;
  font-weight: 900;
  padding: 0;
}

.calendar-events-head h2,
.calendar-reminders-head h2,
.calendar-reminders h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.calendar-events-list > button {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 150px 70px 116px;
  gap: 14px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: white;
  padding: 14px 4px;
  text-align: left;
  cursor: pointer;
}

.calendar-events-list > button:hover {
  background: #f8fbff;
}

.upcoming-event-main {
  min-width: 0;
}

.calendar-events-list strong {
  display: block;
  color: #172033;
  font-size: var(--text-base);
  line-height: 1.3;
}

.calendar-events-list em {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.calendar-events-list time {
  color: #536176;
  font-size: 12px;
  font-weight: 700;
}

.upcoming-event-time {
  color: #172033;
  font-size: 13px;
  font-weight: 800;
}

.calendar-events-list .badge {
  justify-self: end;
  min-width: 96px;
  justify-content: center;
}

.calendar-reminders {
  display: grid;
  gap: 18px;
}

.reminder-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.reminder-row > .ui-icon {
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 8px;
  background: #edf5ff;
  color: var(--blue);
}

.reminder-row strong {
  display: block;
  color: #172033;
  font-size: 13px;
}

.reminder-row span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.reminder-row small {
  display: block;
  margin-top: 3px;
  color: #7a8799;
  font-size: 11px;
  font-weight: 700;
}

.reminder-status {
  color: var(--green);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.reminder-status.planned {
  color: var(--blue);
}

.active-reminder-icons {
  display: flex;
  gap: 28px;
  color: #526176;
  font-weight: 800;
  font-size: 13px;
}

.active-reminder-icons span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.active-reminder-icons .ui-icon {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--green);
}

.event-reminder-log {
  display: grid;
  gap: 7px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.event-reminder-log strong {
  color: #172033;
  font-size: 12px;
}

.event-reminder-log span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.event-form-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 14px;
}

.form-section-title {
  display: grid;
  gap: 3px;
  margin-bottom: 2px;
}

.form-section-title strong {
  color: #172033;
  font-size: 13px;
}

.form-section-title span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.form-grid {
  display: grid;
  gap: 10px;
}

.form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wide-field {
  grid-column: 1 / -1;
}

.list {
  display: grid;
  gap: 10px;
}

.list-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  background: white;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.mailing-screen {
  display: grid;
  gap: 14px;
}

.mailing-head,
.mailing-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.mailing-head h2,
.mailing-card-head h2 {
  margin: 0;
}

.mailing-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.mailing-tabs {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}

.mailing-tabs button {
  position: relative;
  border: 0;
  background: transparent;
  color: #334155;
  padding: 10px 0 12px;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.mailing-tabs button.active {
  color: var(--action-dark);
}

.mailing-tabs button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: var(--action-dark);
}

.mailing-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mailing-stats article {
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 16px;
}

.mailing-stats span,
.mailing-stats em {
  display: block;
  color: var(--muted);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: var(--weight-bold);
}

.mailing-stats strong {
  display: block;
  margin: 8px 0 6px;
  color: #152033;
  font-size: var(--text-3xl);
  line-height: 1;
}

.mailing-layout {
  display: grid;
  grid-template-columns: var(--main-side-grid);
  gap: 14px;
  align-items: start;
}

.mailing-compose-card,
.mailing-side-stack,
.mailing-lower-grid {
  display: grid;
  gap: 14px;
}

.mailing-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.mailing-form-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.mailing-message-field {
  grid-column: 1 / -1;
}

.mailing-message-field textarea {
  resize: vertical;
}

.mailing-variables,
.mailing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.mailing-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.mailing-actions button,
.mailing-card-head button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mailing-actions .ui-icon {
  width: 15px;
  height: 15px;
}

.mail-preview {
  background: #eaf7ed;
  border-radius: 8px;
  padding: 16px;
  min-height: 180px;
  white-space: pre-wrap;
  color: #173322;
  line-height: 1.5;
  font-size: 13px;
}

.mailing-channel-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.mailing-channel-warning .ui-icon {
  width: 16px;
  height: 16px;
  color: var(--amber);
}

.mailing-templates-card {
  display: grid;
  gap: 8px;
}

.mailing-templates-card > button {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  text-align: left;
  padding: 12px;
  cursor: pointer;
}

.mailing-templates-card > button:hover {
  border-color: var(--action-border);
  background: #f8fbff;
}

.mailing-templates-card strong {
  color: #172033;
  font-size: 13px;
}

.mailing-templates-card span {
  color: var(--muted);
  font-size: 12px;
}

.mailing-lower-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.7fr);
}

.mailing-recipients-card {
  overflow-x: auto;
}

.mailing-recipients-card .mailing-card-head {
  min-width: 760px;
}

.mailing-table {
  table-layout: fixed;
  min-width: 760px;
  width: 100%;
  margin-top: 12px;
  font-size: 13px;
}

.mailing-table th,
.mailing-table td {
  padding: 12px 10px;
}

.mailing-table th {
  color: #536176;
  font-size: 12px;
}

.mailing-table td strong,
.mailing-table td span {
  display: block;
}

.mailing-table td > span:not(.badge):not(.mailing-channel-pill) {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.mailing-channel-pill {
  display: inline-flex !important;
  width: fit-content;
  border-radius: 999px;
  background: #edf5ff;
  color: var(--blue);
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 900;
}

.mailing-history-card {
  display: grid;
  align-content: start;
  gap: 10px;
}

.mailing-history-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.mailing-history-row strong,
.mailing-history-row em {
  display: block;
}

.mailing-history-row strong {
  color: #172033;
  font-size: 13px;
}

.mailing-history-row em {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.mailing-row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.mailing-row-actions button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  font-size: 12px;
}

.mailing-row-actions .ui-icon {
  width: 15px;
  height: 15px;
}

.mailing-row-actions .mailing-delivery-toggle {
  border-color: #cfe2fb;
  background: #eef6ff;
  color: var(--action-dark);
  font-weight: 900;
}

.mailing-row-actions .mailing-delivery-toggle.active {
  border-color: #8bbcf4;
  background: #dceeff;
}

.mailing-row-actions .mailing-send-toggle {
  border-color: #154f86;
  background: #19588f;
  color: white;
  font-weight: 950;
}

.mailing-row-actions .mailing-send-toggle:hover {
  border-color: #103f6c;
  background: #144b7a;
}

.danger-text {
  color: var(--red);
}

.danger-text:hover {
  border-color: #ffd2d2;
  background: #fff6f6;
}

.template-library-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  text-align: left;
  padding: 14px 16px;
  cursor: pointer;
}

.template-library-row > div:first-child {
  min-width: 0;
}

.template-library-row + .template-library-row {
  margin-top: 10px;
}

.template-library-row:hover {
  border-color: var(--action-border);
  background: #f8fbff;
}

.template-library-row strong {
  display: block;
  color: #172033;
  font-size: 14px;
}

.template-library-row em {
  display: block;
  max-width: 620px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-library-row span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
}

.automation-grid {
  display: grid;
  gap: 12px;
}

.automation-rule {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
  padding: 14px;
}

.automation-rule.enabled {
  border-color: #cceedd;
  background: #fbfffd;
}

.automation-rule label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.automation-rule input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.automation-rule strong,
.automation-rule em {
  display: block;
}

.automation-rule strong {
  color: #172033;
  font-size: 14px;
  font-weight: 900;
}

.automation-rule em {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.automation-rule select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: #334155;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

.automation-rule .screen-custom-select {
  width: 100%;
  min-width: 0;
}

.automation-rule .screen-custom-select .document-custom-select-button {
  min-height: 38px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.automation-rule .screen-custom-select .document-custom-select-menu {
  min-width: 170px;
}

.mailing-screen {
  gap: 18px;
}

.mailing-notice {
  display: flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid var(--action-border);
  border-radius: 8px;
  background: var(--action-soft);
  color: #1f5fbf;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
}

.toast-stack {
  position: fixed;
  right: 24px;
  top: 88px;
  z-index: 90;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  display: grid;
  gap: 3px;
  border: 1px solid #c9d9f4;
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
  color: #1f2937;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.toast.success {
  border-color: #bfe8d3;
  border-left-color: var(--green);
}

.toast.warning {
  border-color: #f5dc9f;
  border-left-color: #f59e0b;
}

.toast.danger {
  border-color: #f0c0c0;
  border-left-color: var(--red);
}

.mailing-head {
  min-height: 46px;
}

.mailing-head h2 {
  color: #111827;
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
}

.mailing-actionbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.mailing-actionbar .mailing-tabs {
  border-bottom: 0;
}

.mailing-actionbar .mailing-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  color: #4b5563;
}

.mailing-actionbar .mailing-tabs .ui-icon {
  width: 18px;
  height: 18px;
}

.mailing-top-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 10px;
}

.mailing-top-actions button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}

.mailing-top-actions .ui-icon {
  width: 16px;
  height: 16px;
}

.mailing-layout {
  grid-template-columns: minmax(0, 1.72fr) minmax(360px, 1fr);
  align-items: start;
}

.mailing-left-stack,
.mailing-right-stack {
  display: grid;
  gap: 14px;
  align-content: start;
  position: sticky;
  top: 14px;
}

.mailing-section {
  padding: 22px 24px;
}

.mailing-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.mailing-section-head h2 {
  margin: 0;
}

.mailing-section-head button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mailing-section-head .ui-icon {
  width: 16px;
  height: 16px;
}

.mailing-section-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mailing-list-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.mailing-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mailing-filter-tabs button {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: #536176;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.mailing-filter-tabs button.active {
  border-color: var(--action-dark);
  background: var(--action-dark);
  color: white;
}

.mailing-search {
  min-width: 260px;
  min-height: 36px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: #94a3b8;
  padding: 0 10px;
}

.mailing-search .ui-icon {
  width: 16px;
  height: 16px;
}

.mailing-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.mailing-campaign-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.mailing-campaign-kpis article {
  min-height: 72px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 10px 12px;
}

.mailing-campaign-kpis i,
.mailing-campaign-icon {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-style: normal;
}

.mailing-campaign-kpis i .ui-icon,
.mailing-campaign-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.mailing-campaign-kpis article.blue i,
.mailing-history-row.blue .mailing-campaign-icon {
  border: 1px solid #cfe2fb;
  background: #eaf3ff;
  color: var(--action-dark);
}

.mailing-campaign-kpis article.violet i,
.mailing-history-row.violet .mailing-campaign-icon {
  border: 1px solid #ded2ff;
  background: #f2ecff;
  color: #6d4edb;
}

.mailing-campaign-kpis article.green i,
.mailing-history-row.green .mailing-campaign-icon {
  border: 1px solid #c7efd9;
  background: #eafaf3;
  color: #0f8f61;
}

.mailing-campaign-kpis article.amber i,
.mailing-history-row.amber .mailing-campaign-icon {
  border: 1px solid #f5d58a;
  background: #fff7df;
  color: #b7790f;
}

.mailing-campaign-kpis article.red i {
  border: 1px solid #f2c3c7;
  background: #fff0f1;
  color: #dc3645;
}

.mailing-campaign-kpis strong,
.mailing-campaign-kpis span {
  display: block;
}

.mailing-campaign-kpis strong {
  color: #172033;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}

.mailing-campaign-kpis span {
  margin-top: 5px;
  color: #617089;
  font-size: 11px;
  font-weight: 900;
}

.mailing-history-list {
  display: grid;
  gap: 9px;
}

.mailing-history-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  background: white;
  padding: 11px 12px;
}

.mailing-history-row:hover {
  border-color: #c9d9f4;
  background: #f8fbff;
}

.mailing-campaign-block {
  display: grid;
  gap: 8px;
}

.mailing-campaign-main {
  min-width: 0;
}

.mailing-campaign-main strong,
.mailing-campaign-main em,
.mailing-campaign-main span {
  display: block;
}

.mailing-campaign-main strong {
  color: #172033;
  font-size: 13px;
  font-weight: 950;
}

.mailing-campaign-main em {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.mailing-campaign-main span {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.mailing-channel-mini {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #cfe2fb;
  border-radius: 999px;
  background: #eef6ff;
  color: var(--action-dark);
  padding: 0 8px;
  font-size: 11px;
  font-weight: 900;
}

.mailing-channel-mini .ui-icon {
  width: 13px;
  height: 13px;
}

.mailing-channel-mini.sms {
  border-color: #c7efd9;
  background: #ecfbf4;
  color: #0f8f61;
}

.mailing-channel-mini.email {
  border-color: #d8e4f2;
  background: #f4f8fd;
  color: #235f99;
}

.mailing-channel-mini.muted {
  border-color: #dbe3ef;
  background: #f8fafc;
  color: #64748b;
}

.mailing-channel-mini.all {
  border-color: #d8d0fa;
  background: #f3f0ff;
  color: #6d4edb;
}

.mailing-channel-mini.green {
  border-color: #c7efd9;
  background: #ecfbf4;
  color: #0f8f61;
}

.mailing-channel-mini.red {
  border-color: #ffd3d7;
  background: #fff1f2;
  color: #c02634;
}

.mailing-delivery-summary {
  margin-top: 6px;
}

.mailing-delivery-panel {
  display: grid;
  gap: 8px;
  margin-left: 48px;
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px;
}

.mailing-delivery-head,
.mailing-delivery-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.mailing-delivery-head {
  color: #172033;
  font-size: 12px;
  font-weight: 900;
}

.mailing-delivery-head span {
  color: #64748b;
  font-weight: 800;
}

.mailing-delivery-row {
  border: 1px solid #e5edf7;
  border-radius: 8px;
  background: white;
  padding: 8px;
}

.mailing-delivery-row span {
  min-width: 0;
}

.mailing-delivery-row strong,
.mailing-delivery-row em {
  display: block;
}

.mailing-delivery-row strong {
  color: #172033;
  font-size: 12px;
  font-weight: 900;
}

.mailing-delivery-row em {
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.mailing-delivery-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.mailing-delivery-actions .secondary {
  min-height: 30px;
  padding: 0 9px;
  font-size: 11px;
}

.template-library-list {
  display: grid;
  gap: 10px;
}

.template-library-list .template-library-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  border-color: #dfe7f2;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  padding: 12px;
}

.template-channel-icon,
.automation-rule-icon {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-style: normal;
}

.template-channel-icon .ui-icon,
.automation-rule-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.template-channel-icon.telegram {
  border: 1px solid #cfe2fb;
  background: #eaf3ff;
  color: var(--action-dark);
}

.template-channel-icon.sms {
  border: 1px solid #c7efd9;
  background: #ecfbf4;
  color: #0f8f61;
}

.template-channel-icon.email {
  border: 1px solid #d8e4f2;
  background: #f4f8fd;
  color: #235f99;
}

.template-channel-icon.all,
.template-channel-icon.нагадування,
.template-channel-icon.юридичне {
  border: 1px solid #d8d0fa;
  background: #f3f0ff;
  color: #6d4edb;
}

.template-library-list .template-library-row em {
  max-width: none;
  margin-top: 5px;
}

.template-library-list .template-library-row > .mailing-channel-mini {
  justify-self: end;
}

.automation-grid {
  gap: 10px;
}

.automation-grid .automation-rule {
  grid-template-columns: minmax(0, 1fr) auto 154px auto;
  border-color: #dfe7f2;
  background: white;
  padding: 12px;
}

.automation-grid .automation-rule.enabled {
  border-color: #c7efd9;
  background: #fbfffd;
}

.automation-grid .automation-rule.disabled {
  border-color: #f3d1d1;
  background: #fffafa;
}

.automation-grid .automation-rule label {
  grid-template-columns: 18px 38px minmax(0, 1fr);
}

.automation-rule-icon.green {
  border: 1px solid #c7efd9;
  background: #eafaf3;
  color: #0f8f61;
}

.automation-rule-icon.red {
  border: 1px solid #f2c3c7;
  background: #fff0f1;
  color: #dc3645;
}

.mailing-section h2,
.mailing-preview-card h2,
.forecast-card h2,
.mailing-tips-card h2 {
  margin: 0 0 18px;
  color: #172033;
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
}

.recipient-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.recipient-mode-grid button {
  min-height: 82px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  text-align: left;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.recipient-mode-grid button.selected {
  border-color: #8bbcf3;
  background: #f8fbff;
  color: var(--action-dark);
  box-shadow: 0 0 0 1px rgba(31, 122, 224, 0.16) inset, 0 10px 22px rgba(31, 122, 224, 0.08);
}

.recipient-mode-grid .ui-icon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #e1e8f2;
  border-radius: 999px;
  background: #f8fafc;
  color: #94a3b8;
  padding: 7px;
}

.recipient-mode-grid button.selected .ui-icon,
.recipient-mode-grid button.selected strong {
  color: var(--action-dark);
}

.recipient-mode-grid button.selected em {
  color: #536176;
}

.recipient-mode-grid button.selected .ui-icon {
  border-color: #bdd6ee;
  background: #eaf4ff;
  color: #1f7ae0;
}

.recipient-mode-grid strong,
.recipient-mode-grid em {
  display: block;
}

.recipient-mode-grid strong {
  color: #172033;
  font-size: 14px;
  font-weight: 900;
}

.recipient-mode-grid em {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.manual-recipient-box {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.manual-recipient-box h3 {
  margin: 0 0 12px;
  color: #172033;
  font-size: 13px;
  font-weight: 900;
}

.manual-recipient-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.manual-recipient-list label {
  min-height: 58px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
  padding: 10px 12px;
  cursor: pointer;
}

.manual-recipient-list label:has(input:checked) {
  border-color: var(--action-border);
  background: var(--action-soft);
}

.manual-recipient-list input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.manual-recipient-list strong,
.manual-recipient-list em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual-recipient-list strong {
  color: #172033;
  font-size: 13px;
  font-weight: 900;
}

.manual-recipient-list em {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.segment-filter-box {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.segment-filter-box h3,
.send-settings-grid h3,
.variables-panel h3 {
  margin: 0 0 12px;
  color: #172033;
  font-size: 13px;
  font-weight: 900;
}

.segment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.segment-chips span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #536176;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

.segment-chips button {
  border: 0;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}

.segment-add-wrap {
  position: relative;
  width: fit-content;
}

.segment-add {
  margin-top: 12px;
  min-height: 34px;
  border-style: dashed;
}

.segment-filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 10;
  width: 292px;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: 0 16px 34px rgba(18, 33, 56, 0.14);
  padding: 6px;
}

.segment-filter-menu button,
.segment-filter-menu span {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #334155;
  text-align: left;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

.segment-filter-menu button {
  cursor: pointer;
}

.segment-filter-menu button:hover {
  background: var(--action-hover);
  color: white;
}

.coverage-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.coverage-row > span {
  min-height: 96px;
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 12px;
  align-items: center;
  justify-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid #d7e4f4;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
  padding: 16px;
  box-shadow: 0 12px 26px rgba(15, 42, 74, 0.06);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.coverage-row > span::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -42px;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  background: rgba(31, 122, 224, 0.08);
  pointer-events: none;
}

.coverage-row > span:hover {
  transform: translateY(-1px);
  border-color: #b8d5f4;
  box-shadow: 0 16px 30px rgba(15, 42, 74, 0.09);
}

.coverage-row .ui-icon {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  grid-column: 2;
  grid-row: 2;
  border-radius: 999px;
  color: var(--blue);
  background: #eaf3ff;
  border: 1px solid #cfe2fb;
}

.coverage-row .ui-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.coverage-row .coverage-user .ui-icon {
  color: #5f6f85;
  background: #f2f5fa;
  border-color: #dbe3ef;
}

.coverage-row .coverage-telegram .ui-icon,
.coverage-row .coverage-email .ui-icon {
  color: var(--blue);
  background: #eaf3ff;
  border-color: #cfe2fb;
}

.coverage-row .coverage-sms .ui-icon {
  color: #0f9b69;
  background: #eafaf3;
  border-color: #c7efd9;
}

.coverage-row .coverage-sms::after {
  background: rgba(15, 155, 105, 0.1);
}

.coverage-row .coverage-email .ui-icon {
  color: #235f99;
  background: #edf6ff;
  border-color: #cfe5fb;
}

.coverage-row .coverage-user::after {
  background: rgba(95, 111, 133, 0.08);
}

.coverage-row .coverage-email::after {
  background: rgba(35, 95, 153, 0.08);
}

.coverage-row strong,
.coverage-row em {
  display: block;
  min-width: 0;
  position: relative;
  z-index: 1;
  text-align: center;
}

.coverage-row strong {
  grid-column: 1 / -1;
  grid-row: 1;
  color: #5f6f85;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.coverage-row em {
  grid-column: 3;
  grid-row: 2;
  color: #172033;
  font-style: normal;
  font-weight: 900;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0;
}

.coverage-row .coverage-user em {
  color: #172033;
}

.coverage-row .coverage-telegram em,
.coverage-row .coverage-email em {
  color: var(--action-dark);
}

.coverage-row .coverage-sms em {
  color: #0f8f61;
}

.message-channel-tabs,
.preview-tabs {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}

.message-channel-tabs button,
.preview-tabs button {
  position: relative;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #4b5563;
  font-weight: 900;
  cursor: pointer;
}

.message-channel-tabs button.active,
.preview-tabs button.active {
  color: var(--action-dark);
}

.preview-tabs button.is-disabled {
  color: #94a3b8;
}

.preview-tabs button.is-disabled::before {
  content: "";
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 999px;
  background: #cbd5e1;
}

.message-channel-tabs button.active::after,
.preview-tabs button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--action-dark);
}

.message-channel-tabs .ui-icon {
  width: 18px;
  height: 18px;
}

.message-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 18px;
  margin-top: 0;
}

.message-editor {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.editor-toolbar {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  padding: 0 10px;
}

.editor-toolbar button {
  min-width: 28px;
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  font-weight: 900;
  cursor: pointer;
}

.editor-toolbar button:hover {
  background: var(--action-hover);
  color: white;
}

.editor-toolbar .variables-button {
  margin-left: auto;
  min-width: 132px;
}

.message-editor textarea {
  width: 100%;
  border: 0;
  border-radius: 0;
  resize: vertical;
  line-height: 1.5;
}

.variables-panel {
  background: #f9fbff;
  padding: 16px;
}

.variables-panel p {
  margin: 0 0 12px;
  color: #536176;
  font-size: 12px;
  line-height: 1.35;
}

.variables-panel button {
  border: 0;
  background: transparent;
  color: #172033;
  padding: 0;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.variables-panel button:hover {
  color: var(--action-dark);
}

.variables-panel strong {
  color: #172033;
}

.message-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.send-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.send-settings-grid > div {
  border-right: 1px solid var(--line);
  padding-right: 18px;
}

.send-settings-grid > div:last-child {
  border-right: 0;
}

.send-settings-grid label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0 0;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.mailing-schedule-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 8px;
  margin-top: 12px;
}

.mailing-schedule-fields input {
  min-height: 36px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: #334155;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
}

.test-send-box {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.test-send-box h3 {
  margin: 0 0 12px;
  color: #172033;
  font-size: 13px;
  font-weight: 900;
}

.test-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.test-contact-grid label {
  min-height: 58px;
  display: grid;
  grid-template-columns: 18px 24px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
  padding: 10px;
  cursor: pointer;
}

.test-contact-grid label:has(input:checked) {
  border-color: var(--action-border);
  background: var(--action-soft);
}

.test-contact-grid input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.test-contact-grid .ui-icon {
  width: 22px;
  height: 22px;
  color: var(--blue);
}

.test-contact-grid strong,
.test-contact-grid em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.test-contact-grid strong {
  color: #172033;
  font-size: 12px;
  font-weight: 900;
}

.test-contact-grid em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.mailing-preview-card,
.forecast-card,
.mailing-tips-card {
  padding: 22px;
}

.telegram-preview {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.telegram-preview-head {
  min-height: 52px;
  display: grid;
  grid-template-columns: 28px 34px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 0 14px;
  background: #f8fafc;
}

.telegram-preview-head button {
  border: 0;
  background: transparent;
  font-size: var(--text-2xl);
  cursor: pointer;
}

.telegram-preview-head em button {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  color: #536176;
  font-size: var(--text-2xl);
  padding: 0;
}

.telegram-preview-head em button:hover {
  color: var(--blue);
}

.telegram-preview-head em button .ui-icon {
  width: 18px;
  height: 18px;
}

.telegram-preview-head strong,
.telegram-preview-head span {
  display: block;
}

.telegram-preview-head strong {
  color: #172033;
  font-size: var(--text-base);
}

.telegram-preview-head span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.telegram-preview-head em {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #536176;
  font-style: normal;
}

.telegram-preview-avatar {
  width: 34px;
  height: 34px;
  display: inline-grid !important;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #1f5f99, #0f3a64);
  color: white !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1;
}

.telegram-preview-body {
  min-height: 300px;
  padding: 30px 42px 28px 48px;
  background:
    linear-gradient(rgba(200, 224, 188, 0.75), rgba(200, 224, 188, 0.75)),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(255, 255, 255, 0.12) 12px 24px);
}

.telegram-preview-body.sms-theme {
  min-height: 246px;
  background:
    linear-gradient(135deg, rgba(238, 246, 255, 0.92), rgba(247, 250, 255, 0.96)),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(31, 122, 224, 0.06) 18px 19px);
}

.telegram-preview-body.email-theme {
  min-height: 270px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef5ff 100%);
}

.telegram-preview-body.channel-off {
  filter: grayscale(0.2);
}

.telegram-bubble {
  position: relative;
  width: min(100%, 330px);
  border-radius: 8px;
  background: #ecffe8;
  color: #233044;
  padding: 14px 16px 28px;
  white-space: pre-wrap;
  line-height: var(--leading-normal);
  font-size: var(--text-base);
  box-shadow: 0 4px 12px rgba(29, 58, 32, 0.08);
}

.telegram-bubble.sms-bubble {
  width: min(100%, 280px);
  border: 1px solid #d5e6fb;
  background: #ffffff;
  color: #172033;
  box-shadow: 0 10px 22px rgba(31, 122, 224, 0.08);
}

.telegram-bubble.email-bubble {
  width: 100%;
  max-width: 360px;
  border: 1px solid #dbe5f2;
  background: #ffffff;
  color: #172033;
  box-shadow: 0 12px 24px rgba(15, 42, 74, 0.08);
}

.telegram-bubble::after {
  content: "12:30 ✓✓";
  position: absolute;
  right: 12px;
  bottom: 8px;
  color: #8aa58b;
  font-size: 11px;
}

.telegram-bubble.sms-bubble::after {
  content: "SMS";
  color: #8aa0ba;
}

.telegram-bubble.email-bubble::after {
  content: "draft";
  color: #8aa0ba;
}

.preview-channel-note {
  margin: 12px 0 0;
  color: #7a879a;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.forecast-row,
.forecast-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  color: #334155;
  font-size: var(--text-base);
}

.forecast-row strong {
  color: #172033;
}

.forecast-row.green strong {
  color: var(--green);
}

.forecast-row.muted {
  color: #94a3b8;
}

.forecast-row.muted strong {
  color: #94a3b8;
}

.forecast-total {
  border: 1px solid #f2d98d;
  border-radius: 6px;
  background: #fffbea;
  padding: 12px;
  font-weight: 900;
}

.mailing-tips-card p {
  margin: 12px 0 0;
  color: #536176;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.ai-chat {
  min-height: 280px;
  display: grid;
  align-content: end;
  gap: 10px;
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.bubble {
  max-width: 76%;
  padding: 12px 14px;
  border-radius: 8px;
  background: white;
  border: 1px solid var(--line);
}

.bubble.user {
  justify-self: end;
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}

dialog {
  width: min(560px, calc(100vw - 32px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
}

dialog::backdrop {
  background: rgba(8, 18, 32, 0.42);
}

/* Tasteful, consistent entrance for every modal (respects reduced-motion). */
@media (prefers-reduced-motion: no-preference) {
  dialog[open] {
    animation: crm-dialog-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }

  dialog[open]::backdrop {
    animation: crm-backdrop-in 0.2s ease;
  }
}

@keyframes crm-dialog-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes crm-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

#delete-document-dialog {
  width: min(430px, calc(100vw - 32px));
  border-radius: 12px;
}

#archive-folder-delete-dialog {
  width: min(460px, calc(100vw - 32px));
  border-radius: 12px;
}

#event-dialog {
  width: min(860px, calc(100vw - 32px));
}

#task-dialog {
  width: min(780px, calc(100vw - 32px));
}

#subtask-dialog {
  width: min(520px, calc(100vw - 32px));
}

#document-dialog {
  width: min(720px, calc(100vw - 32px));
}

#document-preview-dialog {
  width: min(620px, calc(100vw - 32px));
}

.modal-form {
  max-height: min(86vh, 820px);
  overflow-y: auto;
  display: grid;
  gap: 13px;
  padding: 20px;
}

.modal-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

.modal-form .checkline {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #334155;
}

.modal-form .checkline input {
  width: 17px;
  height: 17px;
  margin: 0;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-head h2 {
  margin: 0;
}

.document-preview-modal {
  gap: 14px;
}

.document-editor-modal {
  width: 100%;
  box-sizing: border-box;
  gap: 16px;
}

.document-editor-head {
  align-items: center;
}

.document-editor-title {
  display: block;
  text-align: center;
}

.document-editor-title h2,
.document-editor-title p {
  margin-inline: auto;
}

.document-editor-title-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.document-target-mode,
.document-source-mode {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  margin: 0;
  padding: 18px;
  border: 1px solid #dce7f5;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff 0%, #f7fbff 100%);
}

.document-target-mode {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.document-target-mode[hidden] {
  display: none;
}

.document-target-archive-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .42fr);
  gap: 12px;
  align-items: stretch;
  margin-top: -2px;
  padding: 14px;
  border: 1px solid #cfe3f8;
  border-radius: 14px;
  background: #f3f9ff;
}

.document-target-archive-panel[hidden] {
  display: none;
}

.document-target-archive-panel .document-archive-picker {
  max-height: 190px;
  background: #fff;
}

.document-target-archive-panel .document-editor-field {
  align-content: start;
}

.document-editor-modal.is-editing-document .document-source-mode {
  display: none;
}

.document-editor-modal.is-editing-document [data-document-create-only] {
  display: none;
}

.document-destination-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #dce7f5;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff 0%, #f7fbff 100%);
}

.document-destination-card[hidden] {
  display: none;
}

.document-destination-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2ebf6;
}

.document-destination-head span {
  display: grid;
  gap: 4px;
}

.document-destination-head strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.2;
}

.document-destination-head small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.document-destination-head em {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #eaf3ff;
  color: var(--brand);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  padding: 8px 10px;
  white-space: nowrap;
}

.document-destination-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr);
  gap: 12px;
}

.document-editor-field.is-procedural-document {
  padding: 12px;
  border: 1px solid #b7d8ff;
  border-radius: 12px;
  background: #eef6ff;
}

.document-editor-field.is-procedural-type {
  color: #1f5d92;
}

.document-editor-field.is-procedural-type .document-custom-select-button {
  border-color: #9bcaff;
  background: #eef6ff;
  color: #174f80;
}

.document-fixed-folder {
  display: grid;
  min-height: 44px;
  align-items: center;
  border: 1px solid #9bcaff;
  border-radius: 10px;
  background: #eef6ff;
  color: #174f80;
  font-size: 14px;
  font-weight: 900;
  padding: 0 13px;
}

.document-fixed-folder[hidden] {
  display: none;
}

.document-procedural-note {
  display: block;
  color: #1f5d92;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.document-procedural-note[hidden] {
  display: none;
}

[data-document-new-folder-label][hidden] {
  display: none;
}

.document-target-mode legend,
.document-source-mode legend {
  padding: 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.document-target-mode > label,
.document-source-mode > label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  height: 116px;
  padding: 16px;
  border: 1px solid #d8e5f3;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.document-target-mode > label {
  height: 92px;
}

.document-target-mode > label:has(input:checked),
.document-source-mode > label:has(input:checked) {
  border-color: #9fc8f4;
  background: #eef7ff;
  box-shadow: inset 0 0 0 1px #b9d8f8;
}

.document-target-mode > label > input,
.document-source-mode > label > input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--action);
}

.document-target-mode > label strong,
.document-target-mode > label small,
.document-source-mode > label strong,
.document-source-mode > label small {
  display: block;
}

.document-target-mode > label strong,
.document-source-mode > label strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.2;
}

.document-target-mode > label small,
.document-source-mode > label small {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.document-source-popover {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 86px;
  border: 1px solid #cfe0f2;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
  padding: 16px;
}

.document-source-popover::before {
  content: none;
}

.document-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.document-editor-field,
.document-upload-tile {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.document-editor-field {
  position: relative;
}

.document-editor-field > input,
.document-editor-field > select,
.document-editor-field > textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d8e5f3;
  border-radius: 10px;
  outline: 0;
  background: #fbfdff;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.document-editor-field > input,
.document-editor-field > select {
  min-height: 44px;
  padding: 0 13px;
}

.document-editor-field > textarea {
  min-height: 82px;
  padding: 12px 13px;
  font-weight: 750;
  line-height: 1.5;
  resize: vertical;
}

.document-editor-field > input::placeholder,
.document-editor-field > textarea::placeholder {
  color: #8b98aa;
  opacity: 1;
}

.document-editor-field > select {
  appearance: none;
  cursor: pointer;
  padding-right: 44px;
}

.document-editor-field:has(> select)::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 17px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--action-dark);
  border-bottom: 2px solid var(--action-dark);
  pointer-events: none;
  transform: rotate(45deg);
  transform-origin: center;
}

.document-editor-field:has(.document-send-contact-line)::after {
  bottom: 42px;
}

.document-editor-field > input:hover,
.document-editor-field > select:hover,
.document-editor-field > textarea:hover {
  border-color: #bdd2e9;
  background: #fff;
}

.document-editor-field > input:focus,
.document-editor-field > select:focus,
.document-editor-field > textarea:focus {
  border-color: #8abdf3;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(53, 130, 220, .14);
}

.document-editor-field > input[type="date"] {
  color-scheme: light;
}

.document-editor-field > input[type="date"]::-webkit-calendar-picker-indicator {
  width: 16px;
  height: 16px;
  border-radius: 7px;
  cursor: pointer;
  opacity: .72;
}

.document-editor-field > input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

#document-dialog select option {
  background: #fff;
  color: var(--text);
  font-weight: 750;
}

.document-editor-field > select.document-native-select,
.documents-filter-field > select.document-native-select,
#client-form label > select.document-native-select,
#case-form label > select.document-native-select,
#task-form label > select.document-native-select,
#task-form .task-subtask-editor-row > select.document-native-select,
#subtask-form label > select.document-native-select,
#event-form label > select.document-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.document-editor-field:has(> select.document-native-select)::after,
.documents-filter-field:has(> select.document-native-select)::after {
  content: none;
}

.document-custom-select {
  position: relative;
  min-width: 0;
}

.document-custom-select[hidden] {
  display: none;
}

.document-custom-select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid #d8e5f3;
  border-radius: 10px;
  outline: 0;
  background: #fbfdff;
  color: var(--text);
  padding: 0 13px;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.document-custom-select-button:hover {
  border-color: #bdd2e9;
  background: #fff;
}

.document-custom-select.is-open .document-custom-select-button,
.document-custom-select-button:focus-visible {
  border-color: #8abdf3;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(53, 130, 220, .14);
}

.document-custom-select-button [data-document-select-value] {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-custom-select-chevron {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--action-dark);
  border-bottom: 2px solid var(--action-dark);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s ease;
}

.document-custom-select.is-open .document-custom-select-chevron {
  transform: translateY(2px) rotate(225deg);
}

.document-custom-select-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 7px);
  right: 0;
  left: 0;
  overflow: auto;
  max-height: 260px;
  border: 1px solid #d8e5f3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(15, 42, 71, .18);
  padding: 7px;
}

.document-custom-select-option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  padding: 0 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.document-custom-select-option span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  color: transparent;
  font-size: 16px;
  line-height: 1;
}

.document-custom-select-option strong {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: normal;
}

.document-custom-select-option:hover,
.document-custom-select-option:focus-visible {
  outline: 0;
  background: #f1f7ff;
}

.document-custom-select-option.is-selected {
  background: #e8f3ff;
  color: var(--action-dark);
}

.document-custom-select-option.is-selected span {
  background: var(--action);
  color: #fff;
}

.document-custom-select-option.is-procedural-option {
  color: #1f5d92;
}

.document-custom-select-option.is-procedural-option strong::after {
  content: "Процесуальний";
  display: inline-block;
  margin-left: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e8f3ff;
  color: #1f5d92;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
}

.document-custom-select-option.is-procedural-option.is-selected {
  background: #dceeff;
  color: #174f80;
}

.document-custom-select-option.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}

.document-custom-select.is-disabled .document-custom-select-button {
  background: #f5f8fc;
  color: #8a98aa;
  cursor: default;
  box-shadow: none;
}

.document-custom-select.is-disabled .document-custom-select-chevron {
  border-color: #9aa8ba;
}

.document-editor-wide {
  grid-column: 1 / -1;
}

.document-content-field textarea {
  min-height: 156px;
  line-height: 1.45;
  resize: vertical;
}

.document-draft-button {
  justify-self: start;
  grid-column: 1 / -1;
  min-height: 34px;
  border-color: #d8e5f3;
  border-radius: 10px;
  background: #fff;
  color: var(--action-dark);
  font-weight: 900;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.document-draft-button:hover {
  border-color: #b9d4f1;
  background: #f5faff;
}

.document-draft-button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(53, 130, 220, .14);
}

.document-upload-tile {
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  min-height: 80px;
  border: 1px dashed #c9d8ea;
  border-radius: 10px;
  background: #f8fbff;
  padding: 12px;
  cursor: pointer;
}

.document-source-popover.document-upload-tile {
  min-height: 86px;
  border-style: solid;
  background: #fff;
  cursor: default;
}

.document-upload-tile:hover {
  border-color: #9fc0e5;
  background: #f3f8ff;
}

.document-upload-tile strong,
.document-upload-tile small {
  display: block;
}

.document-upload-tile strong {
  color: var(--text);
  font-size: 14px;
}

.document-upload-tile small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.document-upload-tile input:not([type="file"]) {
  width: 100%;
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--action-dark);
  font-size: 12px;
}

.document-file-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.document-file-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.document-file-picker span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #d8e5f3;
  border-radius: 9px;
  background: #f8fbff;
  color: var(--action-dark);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.document-file-picker em {
  overflow: hidden;
  min-width: 0;
  color: var(--muted);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-upload-tile[hidden],
.document-source-popover[hidden],
.document-onlyoffice-note[hidden] {
  display: none !important;
}

.document-onlyoffice-note {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 86px;
  border: 1px solid #cfe3f8;
  border-radius: 12px;
  background: #f2f8ff;
  padding: 14px;
}

.document-onlyoffice-note::before {
  background: #f2f8ff;
}

.document-onlyoffice-note > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #e4f1ff;
  color: var(--action);
}

.document-onlyoffice-note svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.document-onlyoffice-note strong,
.document-onlyoffice-note small {
  display: block;
}

.document-onlyoffice-note strong {
  color: var(--text);
  font-size: 14px;
}

.document-onlyoffice-note small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.document-create-format {
  display: grid;
  grid-template-columns: repeat(3, 54px);
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}

.document-create-format label {
  display: block;
  position: relative;
}

.document-create-format input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.document-create-format span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 28px;
  box-sizing: border-box;
  border: 1px solid #cfe0f2;
  border-radius: 9px;
  background: #fff;
  color: var(--action-dark);
  font-size: 11px;
  font-weight: 950;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
}

.document-create-format label:hover span {
  border-color: #9fc8f4;
  background: #f7fbff;
}

.document-create-format input:checked + span {
  border-color: var(--action-dark);
  background: var(--action-dark);
  color: #fff;
  box-shadow: 0 8px 18px rgba(31, 83, 145, .2);
}

.document-create-format input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(53, 130, 220, .16);
}

.document-editor-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  border-top: 1px solid #e7edf5;
  padding-top: 14px;
}

.document-editor-actions button {
  min-width: 150px;
}

.document-preview-content {
  display: grid;
  gap: 12px;
}

.document-preview-hero {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 14px;
}

.document-preview-hero > span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eef6ff;
  color: var(--action-dark);
  font-size: 12px;
  font-weight: 900;
}

.document-preview-hero.has-file > span {
  background: #e3f8ed;
  color: var(--green);
}

.document-preview-hero strong,
.document-preview-hero p {
  display: block;
  margin: 0;
  min-width: 0;
}

.document-preview-hero strong {
  color: #172033;
  font-size: 16px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.document-preview-hero p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.document-preview-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.document-preview-meta div {
  border: 1px solid #edf2f7;
  border-radius: 8px;
  background: #fbfdff;
  padding: 10px 12px;
}

.document-preview-meta dt,
.document-preview-meta dd {
  margin: 0;
}

.document-preview-meta dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.document-preview-meta dd {
  margin-top: 4px;
  color: #172033;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.document-preview-file-state,
.document-preview-comment,
.document-preview-body {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 12px;
}

.document-preview-file-state.ready {
  border-color: #bdebd1;
  background: #f2fbf6;
}

.document-preview-file-state.empty {
  border-color: #ffe0a3;
  background: #fffaf0;
}

.document-preview-file-state strong,
.document-preview-comment strong,
.document-preview-body strong {
  color: #172033;
  font-size: 13px;
}

.document-preview-file-state span,
.document-preview-comment p,
.document-preview-body p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.document-preview-body p {
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
}

.document-preview-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.document-export-modal {
  gap: 16px;
}

.document-export-title {
  display: block;
  grid-template-columns: none;
  text-align: center;
}

.document-send-title {
  display: block;
  grid-template-columns: none;
}

.document-send-modal .crm-modal-head {
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  gap: 10px;
  align-items: start;
}

.document-send-modal .crm-modal-title {
  justify-self: stretch;
  width: auto;
  display: block;
  text-align: left;
}

.document-send-modal .crm-modal-title h2,
.document-send-modal .crm-modal-title p {
  margin-inline: 0;
  overflow-wrap: anywhere;
}

.document-export-title h2,
.document-export-title p,
.document-send-title h2,
.document-send-title p {
  margin-inline: auto;
}

.document-export-file {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid #d8e5f3;
  border-radius: 12px;
  background: #f8fbff;
  padding: 12px;
}

.document-export-file > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 11px;
  background: #e8f3ff;
  color: var(--action-dark);
  font-size: 12px;
  font-weight: 950;
}

.document-export-file strong,
.document-export-file small {
  display: block;
  min-width: 0;
}

.document-export-file strong {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-export-file small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.document-send-contact-line {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.document-export-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.document-export-options label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 78px;
  box-sizing: border-box;
  border: 1px solid #d8e5f3;
  border-radius: 12px;
  background: #fff;
  padding: 13px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.document-export-options label:has(input:checked),
.document-export-options label.is-selected {
  border-color: #9fc8f4;
  background: #eef7ff;
  box-shadow: inset 0 0 0 1px #b9d8f8;
}

.document-export-options input {
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: var(--action-dark);
}

.document-export-options strong,
.document-export-options small {
  display: block;
}

.document-export-options strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}

.document-export-options small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

#office-editor-dialog {
  width: min(1120px, calc(100vw - 32px));
}

#office-editor-dialog.is-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #1f1f1f;
}

.office-editor-modal {
  width: 100%;
  min-height: min(760px, calc(100vh - 48px));
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

#office-editor-dialog.is-fullscreen .office-editor-modal {
  height: 100vh;
  max-height: none;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  background: #1f1f1f;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.office-editor-head {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.office-editor-title-icon {
  width: 40px;
  height: 40px;
  justify-self: start;
  border-radius: 10px;
}

.office-editor-title-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.office-editor-title {
  display: block;
  width: min(100%, 560px);
  text-align: center;
}

.office-editor-title h2 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.18;
}

.office-editor-title p {
  max-width: 520px;
  margin: 6px auto 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.office-editor-head .crm-modal-close {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.office-editor-window-actions {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
}

.office-editor-save-status {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #cdebdc;
  border-radius: 999px;
  background: #effcf6;
  color: #0f7a4f;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.office-editor-save-status svg,
.office-editor-fullscreen-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.office-editor-fullscreen-toggle .office-collapse-icon,
#office-editor-dialog.is-fullscreen .office-editor-fullscreen-toggle .office-expand-icon {
  display: none;
}

#office-editor-dialog.is-fullscreen .office-editor-fullscreen-toggle .office-collapse-icon {
  display: block;
}

#office-editor-dialog.is-fullscreen .office-editor-head {
  position: fixed;
  top: 7px;
  right: 39px;
  z-index: 10000;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#office-editor-dialog.is-fullscreen .office-editor-title-icon,
#office-editor-dialog.is-fullscreen .office-editor-title,
#office-editor-dialog.is-fullscreen .office-editor-save-status,
#office-editor-dialog.is-fullscreen #office-editor-close {
  display: none;
}

#office-editor-dialog.is-fullscreen .office-editor-window-actions {
  display: block;
}

#office-editor-dialog.is-fullscreen .office-editor-fullscreen-toggle {
  width: 21px;
  height: 21px;
  min-height: 21px;
  box-sizing: border-box;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(122, 178, 255, 0.62);
  background: rgba(31, 83, 145, 0.76);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(18, 74, 141, 0.18);
}

#office-editor-dialog.is-fullscreen .office-editor-fullscreen-toggle:hover {
  border-color: rgba(164, 204, 255, 0.9);
  background: rgba(34, 99, 175, 0.95);
}

#office-editor-dialog.is-fullscreen .office-editor-fullscreen-toggle svg {
  width: 12px;
  height: 12px;
  display: block;
}

.office-editor-body {
  min-height: 560px;
  display: grid;
}

#office-editor-dialog.is-fullscreen .office-editor-body {
  min-height: 0;
  height: 100vh;
  background: #1f1f1f;
  overflow: hidden;
}

.onlyoffice-editor-container {
  min-height: 560px;
  overflow: hidden;
  border: 1px solid #dbe8f6;
  border-radius: 10px;
  background: #f8fbff;
}

#office-editor-dialog.is-fullscreen .onlyoffice-editor-container,
#office-editor-dialog.is-fullscreen .office-editor-body > iframe,
#office-editor-dialog.is-fullscreen .office-editor-body iframe {
  min-height: 0;
  height: 100vh !important;
  width: 100vw !important;
  border: 0;
  border-radius: 0;
}

#office-editor-dialog.is-fullscreen .onlyoffice-editor-container {
  border: 0;
  border-radius: 0;
  background: #1f1f1f;
}

.office-editor-body > iframe,
.office-editor-body iframe {
  width: 100% !important;
  min-height: 560px;
  border: 1px solid #dbe8f6;
  border-radius: 10px;
}

.builtin-doc-editor {
  align-self: stretch;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  min-height: 560px;
}

.builtin-doc-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 6px 8px;
  border: 1px solid #dbe8f6;
  border-radius: 10px;
  background: #f7fafe;
}

.builtin-doc-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.builtin-doc-toolbar-sep {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: #d7e2f0;
}

.builtin-doc-toolbar button {
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #2c3a4f;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}

.builtin-doc-toolbar button:hover {
  background: #e9f1fb;
  border-color: #cfe0f4;
}

.builtin-doc-toolbar button:active {
  background: #dceafa;
}

.builtin-doc-block {
  height: 30px;
  padding: 0 8px;
  border: 1px solid #cfe0f4;
  border-radius: 7px;
  background: #fff;
  color: #2c3a4f;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.builtin-doc-editor-page {
  display: grid;
  justify-items: center;
  align-content: start;
  overflow: auto;
  padding: 18px;
  border: 1px solid #dbe8f6;
  border-radius: 12px;
  background: #eef2f8;
}

.builtin-doc-editor-area {
  width: min(794px, 100%);
  min-height: 540px;
  box-sizing: border-box;
  padding: 56px 64px;
  border: 1px solid #d7e2f0;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
  color: #1f2733;
  font-family: "Times New Roman", Georgia, serif;
  font-size: 15px;
  line-height: 1.6;
  outline: none;
}

.builtin-doc-editor-area:focus {
  border-color: var(--action-dark);
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12);
}

.builtin-doc-editor-area:empty::before {
  content: "Почніть писати текст документа…";
  color: #9aa7b8;
}

.builtin-doc-editor-area h1 { font-size: 22px; line-height: 1.25; margin: 0 0 10px; }
.builtin-doc-editor-area h2 { font-size: 18px; line-height: 1.3; margin: 0 0 8px; }
.builtin-doc-editor-area h3 { font-size: 16px; line-height: 1.3; margin: 0 0 6px; }
.builtin-doc-editor-area p { margin: 0 0 10px; }
.builtin-doc-editor-area ul,
.builtin-doc-editor-area ol { margin: 0 0 10px; padding-left: 26px; }

#office-editor-dialog.is-fullscreen .builtin-doc-editor {
  min-height: 0;
  height: 100vh;
  padding: 12px 16px 16px;
  background: #f0f2f6;
}

#office-editor-dialog.is-fullscreen .builtin-doc-editor-page {
  height: 100%;
  background: #e6eaf1;
}

.document-preview-richtext {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink, #1f2733);
}

.document-preview-richtext h1,
.document-preview-richtext h2,
.document-preview-richtext h3 { font-size: 14px; margin: 8px 0 4px; }

.document-preview-richtext p { margin: 0 0 6px; }
.document-preview-richtext ul,
.document-preview-richtext ol { margin: 0 0 6px; padding-left: 22px; }

.office-editor-save-status[data-state="saving"] {
  color: var(--muted);
}

.office-editor-save-status[data-state="error"] {
  color: var(--semantic-red, #d9293f);
}

.office-editor-empty,
.office-editor-loading {
  align-self: stretch;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  border: 1px solid #dbe8f6;
  border-radius: 12px;
  background: #fbfdff;
  padding: 28px;
  text-align: center;
}

.office-editor-empty > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #eef6ff;
  color: var(--action-dark);
  font-size: 12px;
  font-weight: 900;
}

.office-editor-empty h3,
.office-editor-loading strong {
  margin: 0;
  color: #172033;
  font-size: 18px;
  line-height: 1.2;
}

.office-editor-empty p,
.office-editor-loading span {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.office-editor-checklist {
  width: min(620px, 100%);
  display: grid;
  gap: 8px;
  border: 1px solid #e5edf7;
  border-radius: 10px;
  background: white;
  padding: 14px;
  text-align: left;
}

.office-editor-checklist strong {
  color: #172033;
  font-size: 13px;
}

.office-editor-checklist ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: #536176;
  font-size: 12px;
  line-height: 1.35;
}

.office-editor-empty small {
  color: #65748a;
  font-size: 11px;
  font-weight: 800;
}

.subtask-modal {
  gap: 14px;
}

.subtask-parent-context {
  display: grid;
  gap: 4px;
  border: 1px solid #d9e4f0;
  border-radius: 8px;
  background: #f8fbff;
  padding: 12px;
}

.subtask-parent-context span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.subtask-parent-context strong {
  color: #172033;
  font-size: 14px;
  line-height: 1.3;
}

.subtask-parent-context small {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.finance-action-hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.finance-action-field-note {
  display: block;
  margin-top: 6px;
  color: #6d7f99;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1.35;
}

.finance-action-mode {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid #cfe0f2;
  border-radius: 999px;
  background: #f4f8fd;
  padding: 4px;
}

.finance-action-mode button {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #52647c;
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.finance-action-mode button:hover {
  background: #e5f1ff;
  color: var(--action-dark);
}

.finance-action-mode button.active {
  background: var(--action-dark);
  color: #fff;
  box-shadow: 0 8px 18px rgba(31, 93, 146, 0.18);
}

.finance-action-document-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border: 1px solid #cfe0f2;
  border-radius: 10px;
  background: #f4f9ff;
  padding: 12px;
}

.finance-action-document-fields[hidden],
.finance-action-document-fields [hidden] {
  display: none !important;
}

.finance-action-document-note {
  grid-column: 1 / -1;
  border: 1px solid #b9d7f7;
  border-radius: 8px;
  background: #eaf4ff;
  color: var(--action-dark);
  padding: 10px 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
  line-height: 1.4;
}

.finance-action-case-field.is-locked > select,
.finance-action-case-field.is-locked > .document-custom-select {
  display: none;
}

.finance-action-case-field:not(.is-locked) .finance-action-case-summary {
  display: none;
}

.finance-action-case-summary {
  min-height: 40px;
  display: flex;
  align-items: center;
  border: 1px solid #d7e4f2;
  border-radius: 8px;
  background: #f3f8fe;
  color: var(--action-dark);
  padding: 0 12px;
  font-size: var(--text-base);
  font-weight: var(--weight-black);
}

#event-form {
  grid-template-columns: 1fr;
  gap: 14px;
}

#event-form .event-form-card,
#event-form .form-grid > *,
#event-form label,
#event-form input,
#event-form select,
#event-form textarea {
  min-width: 0;
}

#event-form input,
#event-form select,
#event-form textarea {
  width: 100%;
}

#event-form .event-form-card {
  align-self: start;
}

#event-form .event-main-card,
#event-form .event-time-card,
#event-form .event-reminder-card {
  gap: 14px;
}

#event-form .event-main-card {
  grid-column: 1 / -1;
  grid-template-columns: minmax(260px, 1fr) minmax(140px, 0.45fr) minmax(140px, 0.45fr);
  align-items: end;
}

#event-form .event-main-card .form-section-title {
  grid-column: 1 / -1;
}

#event-form .event-main-card .wide-field {
  grid-column: 1;
  margin-bottom: 2px;
}

#event-form .event-main-card > .form-grid.two:not(.event-link-fields) {
  grid-column: 2 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#event-form .event-link-fields {
  grid-column: 1 / -1;
}

#event-form .event-link-fields[hidden] {
  display: none;
}

#event-form .event-date-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#event-form .event-date-grid label:first-child {
  grid-column: auto;
}

#event-form .event-time-card {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#event-form .event-time-card .form-section-title,
#event-form .event-time-card .event-date-grid {
  grid-column: 1 / -1;
}

#event-form .event-time-card > .form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column: span 2;
}

#event-form .event-reminder-card {
  grid-template-columns: 1fr;
}

#event-form .event-reminder-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 62px;
  border: 1px solid #d8e5f3;
  border-radius: 10px;
  background: #f6fbff;
  padding: 11px 14px;
  cursor: pointer;
}

#event-form .event-reminder-toggle > span:first-child {
  display: grid;
  gap: 3px;
}

#event-form .event-reminder-toggle strong {
  color: #172033;
  font-weight: 900;
}

#event-form .event-reminder-toggle em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
}

#event-form.event-reminder-enabled .event-reminder-toggle {
  border-color: #b7d5f4;
  background: #eef7ff;
}

#event-form .event-reminder-card [data-event-reminder-settings][hidden] {
  display: none;
}

#event-form .event-reminder-card [data-event-reminder-settings] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.event-reminder-hint {
  display: grid;
  gap: 4px;
  border: 1px solid #d8e5f3;
  border-radius: 10px;
  background: #f5faff;
  color: #59677a;
  padding: 11px 12px;
  font-size: 12px;
  line-height: 1.45;
}

.event-reminder-hint strong {
  color: #1f5d92;
  font-size: 12px;
}

#event-form .modal-head,
#event-form label:has(textarea),
#event-form button[type="submit"] {
  grid-column: 1 / -1;
}

.task-form-card > strong,
.event-form-card > strong {
  color: #172033;
  font-size: 13px;
}

.task-form-grid,
.event-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.task-form-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.task-coexecutors-field {
  position: relative;
  display: grid;
  gap: 8px;
}

.task-coexecutors-field > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.task-coexecutors-picker {
  position: relative;
}

.task-coexecutors-picker summary {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: #334155;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.task-coexecutors-picker summary::-webkit-details-marker {
  display: none;
}

.task-coexecutors-picker summary b {
  color: #64748b;
  font-size: 14px;
  line-height: 1;
  transition: transform 0.16s ease;
}

.task-coexecutors-picker[open] summary {
  border-color: var(--action-border);
  box-shadow: 0 0 0 3px rgba(24, 91, 146, 0.08);
}

.task-coexecutors-picker[open] summary b {
  transform: rotate(180deg);
}

.task-coexecutors-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  gap: 6px;
  max-height: 210px;
  overflow: auto;
  border: 1px solid #d9e4f0;
  border-radius: 8px;
  background: white;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  padding: 8px;
}

.task-coexecutors-menu label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border-radius: 7px;
  color: #334155;
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.task-coexecutors-menu label:hover {
  background: #f4f8fc;
}

.task-coexecutors-menu input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--action-dark);
}

.task-subtasks-editor {
  display: grid;
  gap: 8px;
}

.task-subtask-editor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 184px 34px;
  align-items: center;
  gap: 8px;
}

.task-subtask-editor-row input,
.task-subtask-editor-row select {
  min-height: 38px;
  font-size: 13px;
}

.task-subtask-editor-row .document-custom-select {
  width: 100%;
  min-width: 0;
}

.task-subtask-editor-row .document-custom-select-button {
  min-height: 38px;
  font-size: 13px;
}

.task-subtask-editor-row .document-custom-select-menu {
  min-width: 184px;
}

.task-subtask-editor-row .document-custom-select-option strong {
  white-space: nowrap;
}

.task-subtask-editor-row > button,
.task-subtask-editor-row [data-remove-subtask-row] {
  width: 34px;
  min-height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #f4c7c7;
  border-radius: 8px;
  background: #fff8f8;
  color: #d33a3a;
  padding: 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.task-subtask-editor-row > button:hover,
.task-subtask-editor-row [data-remove-subtask-row]:hover {
  border-color: #ef9f9f;
  background: #fff1f1;
}

.task-subtasks-editor-empty {
  margin: 0;
  border: 1px dashed #d9e4f0;
  border-radius: 8px;
  background: #fbfdff;
  color: #66758c;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
}

.task-case-field.is-locked > select.document-native-select + .document-custom-select {
  display: none;
}

.task-case-locked {
  display: block;
  min-height: 44px;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  background: #f6faff;
  color: #172033;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
}

.task-add-subtask-button {
  justify-self: start;
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
}

.modal-form select[multiple] {
  min-height: 104px;
  padding: 8px;
}

.confirm-dialog {
  position: relative;
  justify-items: center;
  gap: 16px;
  padding: 30px 34px 28px;
  text-align: center;
}

.confirm-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff0f0;
  color: var(--red);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
}

.confirm-title-row h2 {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}

.confirm-dialog p {
  max-width: 320px;
  margin: 0;
  color: #68758a;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.confirm-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 4px;
}

.confirm-actions .secondary,
.confirm-actions .primary {
  min-width: 116px;
}

.primary.danger {
  background: var(--red);
  border-color: var(--red);
}

.confirm-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: #8793a5;
  font-size: var(--text-3xl);
  line-height: 1;
  cursor: pointer;
}

.confirm-x:hover {
  border-color: var(--line);
  background: #f7f9fc;
  color: var(--text);
}

.folder-actions button,
.preview-row-actions button,
.case-row-actions button {
  position: relative;
  display: block;
  line-height: 0;
}

.folder-actions button .ui-icon,
.preview-row-actions button .ui-icon,
.case-row-actions button .ui-icon {
  position: absolute;
  left: 50%;
  top: calc(50% - 2px);
  width: 12px;
  height: 12px;
  display: block;
  transform: translate(-50%, -50%) !important;
  line-height: 0;
}

.folder-actions button .ui-icon svg,
.preview-row-actions button .ui-icon svg,
.case-row-actions button .ui-icon svg {
  display: block;
  width: 12px;
  height: 12px;
  transform: translateY(-1px);
}

@media (max-width: 1180px) {
  .topbar {
    padding: 0 20px;
  }

  .view {
    padding: 20px 20px 38px;
  }

  #cases.view {
    padding: 14px 14px 28px;
  }

  .layout,
  .clients-layout,
  .case-list-layout,
  .tasks-workspace.has-task-detail,
  .calendar-layout,
  .ai-layout,
  .mailing-layout,
  .mailing-lower-grid,
  .settings-screen,
  .case-detail-grid,
  .tasks-bottom-grid,
  .profile-screenshot-grid {
    grid-template-columns: 1fr;
  }

  .tasks-workspace.has-task-detail {
    grid-template-rows: auto;
  }

  .tasks-workspace.has-task-detail .tasks-main-column {
    display: grid;
  }

  .tasks-workspace.has-task-detail .tasks-kpi-grid,
  .tasks-workspace.has-task-detail .tasks-toolbar,
  .tasks-workspace.has-task-detail .tasks-list-card,
  .tasks-workspace.has-task-detail > .task-side-card {
    grid-column: auto;
    grid-row: auto;
  }

  .tasks-workspace.has-task-detail > .task-side-card,
  .task-side-card {
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .case-list-card,
  .tasks-list-card,
  .tasks-workspace .tasks-list-card {
    height: auto;
    min-height: 560px;
  }

  .case-preview-card,
  .calendar-side {
    position: static;
  }

  .case-kpi-grid,
  .tasks-kpi-grid,
  .settings-summary-grid,
  .settings-readiness-grid,
  .settings-pilot-grid,
  .ai-law-grid,
  .ai-how-card,
  .mailing-stats,
  .coverage-row,
  .case-finance-grid,
  .settings-form-grid,
  .grid.cols-4,
  .grid.cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-list-toolbar,
  .tasks-toolbar,
  .ai-case-filters,
  .calendar-filter-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-profile-layout {
    grid-template-columns: 1fr;
  }

  .settings-readiness-next {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-readiness-next span {
    text-align: left;
  }

  .settings-readiness-summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .settings-readiness-total {
    min-width: 128px;
    padding: 10px 12px;
  }

  .settings-pilot-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-list-toolbar .primary,
  .tasks-toolbar .primary,
  .calendar-filter-panel button {
    width: 100%;
  }

  .calendar-toolbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .calendar-toolbar .primary,
  .calendar-toolbar > select,
  .calendar-toolbar > input {
    grid-column: span 1;
  }

  .calendar-date-picker {
    justify-self: stretch;
  }

  .calendar-title-button {
    width: 100%;
    text-align: left;
  }

  .calendar-main-card {
    overflow-x: auto;
  }

  .calendar-weekdays,
  .calendar-grid {
    min-width: 680px;
  }

  .recipient-mode-grid,
  .message-editor-grid,
  .send-settings-grid,
  .test-contact-grid {
    grid-template-columns: 1fr;
  }

  .mailing-right-stack {
    position: static;
  }

  .send-settings-grid > div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 16px;
  }

  .send-settings-grid > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 1040px) {
  .sidebar {
    width: 76px;
    padding: 20px 10px;
  }

  .brand {
    justify-content: center;
    padding: 0 0 22px;
  }

  .brand > div:not(.brand-mark) {
    display: none;
  }

  .brand div:last-child,
  .collapse-menu,
  .nav-item {
    font-size: 0;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
  }

  .nav-item {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0;
  }

  .nav-item span {
    font-size: 14px;
  }

  .nav-item.active::before {
    left: -10px;
  }

  .nav-badge {
    position: absolute;
    top: 4px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    font-size: 10px !important;
  }

  .nav-new {
    display: none;
  }

  .app {
    margin-left: 76px;
  }

  body.sidebar-collapsed .app {
    margin-left: 0;
  }

  .admin-actions {
    padding-left: 14px;
  }

  .topbar-clock {
    min-width: 108px;
    padding: 4px 8px;
  }

  .admin-profile {
    min-width: 168px;
  }

  .profile-contact-list {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 16px;
  }
}

@media (max-width: 900px) {
  .topbar {
    min-height: 74px;
    height: auto;
    padding: 12px 16px;
    align-items: center;
  }

  .topbar-title-wrap {
    flex: 1 1 auto;
  }

  h1 {
    font-size: var(--text-2xl);
  }

  .eyebrow {
    font-size: 11px;
  }

  .top-actions {
    flex: 0 0 auto;
  }

  .topbar-clock {
    display: none;
  }

  .tasks-page-head {
    justify-content: stretch;
  }

  .tasks-head-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .admin-profile {
    min-width: 58px;
    padding: 4px;
  }

  .admin-profile > div:nth-child(2),
  .admin-chevron {
    display: none;
  }

  .topbar-panel {
    right: 0;
    width: min(340px, calc(100vw - 112px));
    min-width: 0;
  }

  .case-list-global-search {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 42px auto;
  }

  .calendar-toolbar,
  .mailing-actionbar,
  .mailing-list-tools,
  .ai-page-tools,
  .mailing-section-head {
    grid-template-columns: 1fr;
  }

  .mailing-actionbar,
  .mailing-list-tools,
  .ai-page-tools,
  .mailing-section-head {
    display: grid;
    align-items: stretch;
    min-width: 0;
  }

  .mailing-top-actions,
  .mailing-section-actions {
    flex-wrap: wrap;
  }

  .mailing-tabs {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .mailing-tabs::-webkit-scrollbar {
    display: none;
  }

  .mailing-tabs button {
    flex: 0 0 auto;
  }

  .calendar-toolbar .primary,
  .calendar-toolbar > select,
  .calendar-toolbar > input,
  .calendar-mode-group,
  .calendar-arrows,
  .ai-page-tools .search-field,
  .ai-page-tools .primary,
  .mailing-search {
    width: 100%;
    min-width: 0;
  }

  .calendar-mode-group button,
  .calendar-arrows button {
    flex: 1 1 0;
  }

  .calendar-list-row {
    grid-template-columns: 12px 98px minmax(0, 1fr) auto;
  }

  .calendar-list-row > span:nth-of-type(3) {
    display: none;
  }

  .calendar-events-list > button {
    grid-template-columns: 12px minmax(0, 1fr) 112px 64px 104px;
    gap: 10px;
  }

  .template-library-row,
  .automation-rule {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .mailing-row-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .tasks-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    gap: 16px;
    scrollbar-width: none;
  }

  .tasks-tabs::-webkit-scrollbar {
    display: none;
  }

  .tasks-tabs button {
    flex: 0 0 auto;
  }

  .ai-summary-strip,
  .ai-case-list.card-mode {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-case-row {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
  }

  .ai-case-row p,
  .ai-case-row .badge,
  .ai-status-pill,
  .ai-case-row .secondary,
  .ai-row-actions {
    grid-column: 2;
  }

  .ai-case-list.card-mode .ai-case-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .ai-case-list.card-mode .ai-case-row > p,
  .ai-case-list.card-mode .ai-status-pill,
  .ai-case-list.card-mode .ai-case-row .compact-button {
    grid-column: 2;
  }

  .ai-case-list.card-mode .ai-case-row .compact-button {
    grid-row: auto;
    justify-self: start;
    width: auto;
    min-width: 0;
    padding: 0 12px;
    font-size: 12px;
  }

  .ai-case-list.card-mode .ai-row-actions {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
  }

  .ai-row-actions {
    justify-self: start;
  }

  .ai-create-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .tasks-list-card,
  .tasks-workspace .tasks-list-card {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .tasks-table,
  .tasks-table thead,
  .tasks-table tbody,
  .tasks-table tr,
  .tasks-table td {
    display: block;
    width: 100% !important;
    min-width: 0;
  }

  .tasks-table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  .tasks-table thead {
    display: none;
  }

  .tasks-table tbody {
    display: grid;
    gap: 14px;
  }

  .tasks-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfe;
    overflow: hidden;
    padding: 14px;
  }

  .tasks-table tbody tr:hover,
  .tasks-table tbody tr.selected {
    background: #f7faff;
  }

  .tasks-table td {
    border: 0;
    padding: 0;
    min-width: 0;
  }

  .tasks-table td:first-child {
    grid-column: 1 / -1;
    padding-bottom: 2px;
  }

  .tasks-table td:not(:first-child):not(:last-child) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    align-items: start;
    min-height: 58px;
    padding: 8px 10px;
    border: 1px solid #edf1f7;
    border-radius: 8px;
    background: #f8fafc;
  }

  .tasks-table td:not(:first-child):not(:last-child)::before {
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .tasks-table td:nth-child(2)::before {
    content: "Пріоритет";
  }

  .tasks-table td:nth-child(3)::before {
    content: "Справа";
  }

  .tasks-table td:nth-child(4)::before {
    content: "Відповідальний";
  }

  .tasks-table td:nth-child(5)::before {
    content: "Дедлайн";
  }

  .tasks-table td:nth-child(6)::before {
    content: "Статус";
  }

  .task-title-cell {
    grid-template-columns: 12px 18px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .task-title-cell > div {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .task-title-cell strong {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.28;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .tasks-table td span:not(.badge),
  .task-title-cell > div > span {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .tasks-table td:nth-child(3) > span,
  .tasks-table td:nth-child(5) > span {
    grid-column: auto;
    margin-top: 0;
  }

  .tasks-table .badge {
    justify-self: start;
    white-space: nowrap;
  }

  .task-assignee {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    min-width: 0;
    max-width: 100%;
    margin-top: 0 !important;
    white-space: normal;
    line-height: 1.25;
  }

  .task-assignee .advocate-photo {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    margin-top: 0;
  }

  .tasks-table .task-list-actions {
    justify-content: flex-end;
    padding-top: 4px;
  }

  .tasks-table td:last-child {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
  }

  .case-list-card,
  .clients-table-card {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .case-list-card .table-wrap,
  .clients-table-card .table-wrap {
    overflow: visible;
  }

  .case-list-table,
  .case-list-table thead,
  .case-list-table tbody,
  .case-list-table tr,
  .case-list-table td,
  .clients-table,
  .clients-table thead,
  .clients-table tbody,
  .clients-table tr,
  .clients-table td {
    display: block;
    width: 100% !important;
    min-width: 0;
  }

  .case-list-table,
  .clients-table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  .case-list-table thead,
  .clients-table thead {
    display: none;
  }

  .case-list-table tbody,
  .clients-table tbody {
    display: grid;
    gap: 12px;
  }

  .case-list-table tbody tr,
  .clients-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    position: relative;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfe;
    padding: 12px;
    cursor: pointer;
  }

  .case-list-table td,
  .clients-table td {
    border: 0;
    padding: 0;
    white-space: normal;
    overflow: visible;
    text-align: left !important;
  }

  .case-list-table td:first-child,
  .clients-table td:first-child {
    grid-column: 1 / -1;
  }

  .case-list-table td:not(:first-child),
  .clients-table td:not(:first-child):not(:last-child) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid #edf1f7;
    border-radius: 8px;
    background: #f8fafc;
  }

  .case-list-table td:not(:first-child)::before,
  .clients-table td:not(:first-child):not(:last-child)::before {
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.25;
    text-transform: uppercase;
  }

  .case-list-table td:nth-child(2)::before {
    content: "Справа";
  }

  .case-list-table td:nth-child(3)::before {
    content: "Назва";
  }

  .case-list-table td:nth-child(4)::before {
    content: "Етап";
  }

  .case-list-table td:nth-child(5)::before {
    content: "Дедлайн";
  }

  .case-list-table td:nth-child(6)::before {
    content: "Пріоритет";
  }

  .case-list-table td:nth-child(7)::before {
    content: "Статус";
  }

  .case-list-table td:nth-child(8)::before {
    content: "Фінанси";
  }

  .case-list-table td:nth-child(9)::before {
    content: "Дії";
  }

  .case-list-table td.case-actions-cell {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    min-height: 0;
    padding-top: 2px;
  }

  .clients-table td:nth-child(2)::before {
    content: "Клієнт";
  }

  .clients-table td:nth-child(3)::before {
    content: "Телефон";
  }

  .clients-table td:nth-child(4)::before {
    content: "Email";
  }

  .clients-table td:nth-child(5)::before {
    content: "Суть";
  }

  .clients-table td:nth-child(6)::before {
    content: "Дата";
  }

  .clients-table td:nth-child(7)::before {
    content: "Telegram";
  }

  .clients-table td.clients-row-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
  }

  .case-number-cell,
  .client-name-cell a {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .case-list-table .badge,
  .clients-table .badge {
    width: fit-content;
    max-width: 100%;
    justify-self: start;
  }

  .task-subtask-editor-row {
    grid-template-columns: minmax(0, 1fr) 184px 34px;
  }

  .case-row-actions,
  .clients-row-actions .row-action-menu-wrap {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 720px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .task-subtask-editor-row {
    grid-template-columns: minmax(0, 1fr);
  }

  body {
    padding-bottom: 74px;
  }

  .sidebar {
    inset: auto 0 0 0;
    width: auto;
    height: 70px;
    flex-direction: row;
    align-items: center;
    padding: 8px 10px;
    transform: translateY(0);
  }

  body.sidebar-collapsed .sidebar {
    transform: translateY(110%);
  }

  .brand,
  .collapse-menu {
    display: none;
  }

  .nav {
    width: 100%;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 2px 2px;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav-item {
    flex: 0 0 58px;
    width: 58px;
    min-height: 52px;
    border-radius: 12px;
    font-size: 0;
  }

  .nav-icon {
    width: 26px;
    height: 26px;
  }

  .nav-icon svg {
    width: 22px;
    height: 22px;
  }

  .nav-item.active::before {
    left: 12px;
    right: 12px;
    bottom: -8px;
    width: auto;
    height: 3px;
    border-radius: 999px;
  }

  .nav-badge {
    top: 3px;
    right: 5px;
  }

  .sidebar-restore {
    left: 12px;
    bottom: 84px;
  }

  .app,
  body.sidebar-collapsed .app {
    margin-left: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .topbar {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    padding: 12px 118px 12px 12px;
    max-width: 100vw;
  }

  .topbar-title-wrap {
    flex: 0 1 auto;
    width: min(100%, calc(100vw - 146px));
    max-width: calc(100vw - 146px);
    min-width: 0;
  }

  .topbar-title-wrap h1,
  .topbar-title-wrap p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-back.visible {
    width: 36px;
    min-width: 36px;
    flex-basis: 36px;
    height: 36px;
    min-height: 36px;
  }

  .topbar-back svg {
    width: 19px;
    height: 19px;
  }

  .admin-actions {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 85;
    transform: none;
    display: flex !important;
    align-self: center;
    border-left: 0;
    padding-left: 0;
  }

  .notification-button,
  .admin-avatar {
    width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .admin-profile {
    min-width: 44px;
  }

  .topbar-panel {
    position: fixed;
    top: 68px;
    left: 12px;
    right: 12px;
    width: auto;
  }

  .topbar-panel::before {
    display: none;
  }

  .view,
  #cases.view {
    max-width: 100vw;
    overflow-x: hidden;
    padding: 14px 12px 92px;
  }

  #cases.view .case-reference-screen,
  #cases.view .case-detail-head,
  #cases.view .case-detail-grid,
  #cases.view .case-card,
  #cases.view .case-finance-card,
  #cases.view .case-history-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #cases.view .case-detail-grid,
  #cases.view .case-stack,
  #cases.view .case-main-column,
  #cases.view .case-side-column {
    display: block;
  }

  #cases.view .case-stack .case-card,
  #cases.view .case-main-column .case-card,
  #cases.view .case-side-column .case-card,
  #cases.view .case-finance-card,
  #cases.view .case-history-card {
    margin-bottom: 12px;
  }

  #cases.view .case-detail-grid > *,
  #cases.view .case-card > *,
  #cases.view .case-card p {
    max-width: 100%;
    min-width: 0;
  }

  #cases.view .case-card {
    overflow: hidden;
  }

  #cases.view .case-documents-card,
  #cases.view .case-folders-card {
    overflow: visible;
  }

  #cases.view .case-card p,
  #cases.view .case-card-title,
  #cases.view .case-contact-list span,
  #cases.view .authority-box strong {
    width: min(100%, calc(100vw - 52px));
    max-width: calc(100vw - 52px);
  }

  #cases.view .case-card p {
    display: block !important;
    width: min(100%, calc(100vw - 96px));
    max-width: calc(100vw - 96px);
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  #cases.view .case-folders-card .case-card-actions {
    grid-template-columns: 1fr;
  }

  #cases.view .case-documents-card .case-link-button,
  #cases.view .case-folders-card .case-link-button {
    width: 100%;
  }

  .panel,
  .metric,
  .mailing-section,
  .mailing-preview-card,
  .forecast-card,
  .mailing-tips-card {
    padding: 14px;
  }

  .client-profile-card {
    padding: 0;
  }

  .toolbar,
  .toolbar .left,
  .toolbar .right,
  .case-list-head,
  .mailing-head,
  .mailing-card-head,
  .calendar-events-head,
  .calendar-reminders-head {
    align-items: stretch;
    flex-direction: column;
  }

  .primary,
  .secondary,
  .ghost,
  .icon-button,
  input,
  select,
  textarea {
    min-height: 38px;
  }

  .layout,
  .clients-layout,
  .profile-screenshot-grid,
  .split,
  .settings-summary-grid,
  .settings-readiness-grid,
  .settings-pilot-grid,
  .ai-layout,
  .ai-law-grid,
  .ai-case-filters,
  .ai-how-card,
  .case-finance-grid,
  .calendar-layout,
  .calendar-filter-panel,
  .mailing-layout,
  .mailing-lower-grid,
  .settings-screen,
  .settings-form-grid,
  .case-detail-grid,
  .tasks-bottom-grid,
  .grid.cols-4,
  .grid.cols-3,
  .case-kpi-grid,
  .tasks-kpi-grid,
  .mailing-stats,
  .coverage-row,
  .recipient-mode-grid,
  .manual-recipient-list,
  .message-editor-grid,
  .send-settings-grid,
  .test-contact-grid,
  .mailing-form-grid {
    grid-template-columns: 1fr;
  }

  .settings-social-grid {
    grid-template-columns: 1fr;
  }

  .document-editor-grid {
    grid-template-columns: 1fr;
  }

  .document-destination-head,
  .document-destination-grid {
    grid-template-columns: 1fr;
  }

  .document-destination-head {
    display: grid;
  }

  .document-destination-head em {
    justify-self: start;
    white-space: normal;
  }

  .document-target-mode,
  .document-source-mode {
    grid-template-columns: 1fr;
  }

  .document-target-archive-panel {
    grid-template-columns: 1fr;
  }

  .document-onlyoffice-note {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .document-create-format {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 54px);
    justify-content: center;
  }

  .document-export-options {
    grid-template-columns: 1fr;
  }

  .document-editor-actions {
    flex-direction: column-reverse;
  }

  .document-editor-actions button {
    width: 100%;
  }

  .document-draft-button {
    justify-self: stretch;
  }

  .office-editor-modal,
  .office-editor-body,
  .onlyoffice-editor-container {
    min-height: min(620px, calc(100vh - 120px));
  }

  .settings-wide-field {
    grid-column: auto;
  }

  .form-grid.two,
  .form-grid.three {
    grid-template-columns: 1fr;
  }

  .mailing-layout,
  .mailing-left-stack,
  .mailing-right-stack,
  .mailing-section,
  .message-editor,
  .telegram-preview {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .recipient-mode-grid button,
  .message-editor textarea,
  .mailing-section .secondary,
  .mailing-section .primary {
    max-width: 100%;
    min-width: 0;
  }

  .editor-toolbar {
    flex-wrap: wrap;
    padding: 8px;
  }

  .editor-toolbar .variables-button {
    flex: 1 1 118px;
    margin-left: 0;
    min-width: 0;
  }

  .case-list-toolbar,
  .tasks-toolbar,
  .documents-kpi-grid,
  .documents-filters,
  .ai-page-tools,
  .section-head.compact,
  .calendar-toolbar,
  .calendar-filter-panel {
    grid-template-columns: 1fr;
  }

  .ai-page-tools,
  .section-head.compact {
    display: grid;
    align-items: stretch;
  }

  .ai-summary-strip,
  .ai-case-list.card-mode {
    grid-template-columns: 1fr;
  }

  .ai-summary-strip button {
    min-height: 60px;
  }

  .ai-case-row {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
  }

  .ai-case-row p,
  .ai-case-row .badge,
  .ai-status-pill,
  .ai-case-row .secondary,
  .ai-row-actions {
    grid-column: 2;
  }

  .ai-case-list.card-mode .ai-case-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .ai-case-list.card-mode .ai-case-row > p,
  .ai-case-list.card-mode .ai-status-pill,
  .ai-case-list.card-mode .ai-case-row .compact-button {
    grid-column: 2;
  }

  .ai-case-list.card-mode .ai-case-row .compact-button {
    grid-row: auto;
    justify-self: start;
    width: auto;
    min-width: 0;
    padding: 0 12px;
    font-size: 12px;
  }

  .ai-case-list.card-mode .ai-row-actions {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
  }

  .ai-row-actions {
    justify-self: start;
  }

  .ai-create-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .case-list-global-search {
    grid-template-columns: minmax(0, 1fr) 40px;
  }

  .case-list-global-search .primary,
  #create-case-from-list {
    grid-column: 1 / -1;
    width: 100%;
  }

  .case-list-card,
  .tasks-list-card,
  .tasks-workspace .tasks-list-card {
    max-width: 100%;
    overflow-x: visible;
    min-height: 460px;
  }

  .case-list-table {
    min-width: 940px;
  }

  .tasks-table {
    min-width: 0;
  }

  #tasks.view .tasks-table td:first-child {
    max-width: calc(100vw - 50px);
    overflow: hidden;
  }

  #tasks.view .task-title-cell {
    grid-template-columns: 12px 18px minmax(0, calc(100vw - 150px));
  }

  .task-title-cell > div {
    width: min(100%, calc(100vw - 150px));
    max-width: calc(100vw - 150px);
  }

  .task-title-cell strong,
  .task-title-cell > div > span {
    max-width: calc(100vw - 150px);
  }

  .tasks-table td:not(:first-child):not(:last-child) {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 8px 10px;
  }

  .tasks-table tbody tr {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .tasks-table td:first-child,
  .tasks-table td:last-child {
    grid-column: auto;
  }

  .tasks-table .task-list-actions {
    justify-content: flex-start;
  }

  .tasks-pagination {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    justify-items: stretch;
  }

  .tasks-pagination > div {
    justify-content: stretch;
  }

  .tasks-pagination > div button {
    flex: 1 1 0;
  }

  .calendar-weekdays {
    display: none;
  }

  .calendar-weekdays,
  .calendar-grid {
    min-width: 0;
  }

  .calendar-grid {
    grid-template-columns: 1fr;
  }

  .day {
    min-height: 96px;
    border-right: 0;
  }

  .calendar-grid.week-view .day,
  .calendar-grid.day-view .day {
    min-height: 120px;
  }

  .calendar-list-row,
  .calendar-events-list > button,
  .mailing-history-row {
    grid-template-columns: 12px minmax(0, 1fr);
    align-items: start;
  }

  .calendar-list-row > *,
  .calendar-events-list > button > *,
  .mailing-history-row > * {
    min-width: 0;
  }

  .calendar-list-row > span:not(.event-dot),
  .calendar-list-row > .badge,
  .calendar-events-list time,
  .calendar-events-list .upcoming-event-time,
  .calendar-events-list .badge,
  .mailing-history-row .badge,
  .mailing-history-row .mailing-row-actions {
    grid-column: 2;
    justify-self: start;
  }

  .mailing-delivery-panel {
    margin-left: 0;
  }

  .mailing-delivery-head,
  .mailing-delivery-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .mailing-delivery-actions {
    justify-content: flex-start;
  }

  .calendar-events-list .badge {
    min-width: 0;
  }

  .event-card-actions,
  .settings-user-row,
  .settings-toggle-row,
  .settings-integration-row,
  .settings-audit-list article,
  .coverage-row span {
    grid-template-columns: 1fr;
  }

  .settings-toggle-row,
  .settings-integration-row {
    justify-items: start;
  }

  .settings-integration-control {
    grid-column: 1;
    width: 100%;
    justify-content: flex-end;
  }

  .telegram-preview {
    max-width: 100%;
  }

  .message-footer-row,
  .mailing-actions {
    align-items: stretch;
    flex-direction: column;
  }

  dialog,
  #event-dialog,
  #task-dialog,
  #subtask-dialog,
  #document-dialog,
  #delete-document-dialog {
    width: calc(100vw - 20px);
  }

  .modal-form {
    max-height: 82vh;
    padding: 16px;
  }

  #event-form {
    grid-template-columns: 1fr;
  }

  #event-form .form-grid.two,
  #event-form .form-grid.three,
  #event-form .event-date-grid,
  #event-form .event-main-card,
  #event-form .event-time-card,
  #event-form .event-main-card > .form-grid.two:not(.event-link-fields),
  #event-form .event-reminder-card .form-grid.three,
  #event-form .event-reminder-card [data-event-reminder-settings] {
    grid-template-columns: 1fr;
  }

  #event-form .event-main-card .wide-field,
  #event-form .event-main-card > .form-grid.two:not(.event-link-fields) {
    grid-column: 1;
  }

  .task-form-grid,
  .event-form-grid,
  .task-form-checks {
    grid-template-columns: 1fr;
  }

  .toast-stack {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .topbar {
    min-height: 58px;
    padding: 8px 14px;
  }

  .topbar-back.visible {
    width: 32px;
    min-width: 32px;
    flex-basis: 32px;
    height: 32px;
    min-height: 32px;
  }

  .topbar-back svg {
    width: 17px;
    height: 17px;
  }

  .topbar-title-wrap h1 {
    font-size: 16px;
    line-height: 1.15;
  }

  .topbar-title-wrap p {
    max-width: 260px;
    font-size: 10px;
    line-height: 1.2;
  }

  .notification-button,
  .admin-avatar {
    width: 34px;
    height: 34px;
    min-height: 34px;
  }

  .topbar-panel {
    top: 58px;
    max-height: calc(100vh - 66px);
    overflow-y: auto;
  }

  .view,
  #cases.view {
    padding-top: 10px;
  }
}

@media (max-width: 520px) {
  .case-list-table tbody tr,
  .clients-table tbody tr {
    grid-template-columns: 1fr;
  }

  .topbar {
    min-height: 66px;
  }

  .top-actions {
    justify-content: flex-end;
  }

  .case-kpi-grid .case-kpi-card,
  .tasks-kpi-grid article,
  .mailing-stats article,
  .metric {
    min-height: auto;
  }

  .calendar-title-button {
    font-size: var(--text-xl);
    padding: 0;
  }

  .tasks-head-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .tasks-head-actions button {
    width: 100%;
  }

  .priority-card-body {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .priority-legend {
    width: 100%;
  }

  .task-plan-card div {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .calendar-picker-menu,
  .segment-filter-menu,
  .event-more-menu {
    position: fixed;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    transform: none;
  }

  .calendar-picker-menu {
    top: 122px;
    grid-template-columns: 1fr;
  }

  .segment-filter-menu,
  .event-more-menu {
    top: auto;
  }

  .mailing-top-actions button,
  .mailing-section-actions button,
  .mailing-actions button,
  .event-card-actions button {
    width: 100%;
  }

  .template-library-row em {
    white-space: normal;
  }

  .case-preview-rows div,
  .task-preview-rows div,
  .preview-finance-row,
  .case-finance-note {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1280px) {
  .dashboard-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .dashboard-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-actions {
    justify-content: flex-start;
  }

  .dashboard-actions button,
  .dashboard-card-head button {
    width: 100%;
  }

  .dashboard-kpi-grid,
  .dashboard-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-row,
  .dashboard-list-compact .dashboard-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .dashboard-row b,
  .dashboard-row .badge {
    justify-self: start;
  }

  .dashboard-status-icon {
    justify-self: start;
  }

  .dashboard-status-icon::before,
  .dashboard-status-icon::after {
    content: none;
    display: none;
  }
}

@media (max-width: 560px) {
  .dashboard-kpi-grid,
  .dashboard-side,
  .dashboard-mini-grid,
  .dashboard-mini-grid-three,
  .dashboard-quick-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-kpi-card {
    min-height: 108px;
  }

  .dashboard-kpi-card small {
    max-width: 68%;
  }
}

body .row-action-menu-wrap > .row-action-trigger {
  width: 26px;
  height: 26px;
  min-height: 26px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  color: var(--action-dark);
  padding: 0;
  font-size: 18px;
  font-weight: var(--weight-bold);
  line-height: 1;
}

body .row-action-menu-wrap > .row-action-trigger:hover,
body .row-action-menu-wrap > .row-action-trigger[aria-expanded="true"] {
  border-color: var(--action-dark);
  background: white;
  color: var(--action-dark);
}

body .row-action-menu button {
  width: 100%;
  height: auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  padding: 0 9px;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1.2;
}

body .row-action-menu button:hover {
  background: var(--action-hover);
  color: white;
}

body .row-action-menu button.danger {
  color: var(--semantic-red);
}

body .row-action-menu button.danger:hover {
  background: var(--semantic-red);
  color: white;
}

body .documents-row-actions,
body .case-row-actions,
body .folder-actions,
body .hover-row-actions,
body .procedural-actions,
body .folder-row-actions,
body .mailing-row-actions,
body .task-list-actions {
  opacity: 1;
  pointer-events: auto;
}

body .row-action-menu {
  z-index: 10000;
}

body .tasks-list-card {
  overflow: auto;
}

/* Responsive shell and cross-screen layout overrides */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
canvas,
video,
iframe {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

.mobile-menu-button,
.sidebar-drawer-close,
.sidebar-overlay {
  display: none;
}

.mobile-menu-button,
.sidebar-drawer-close {
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  color: var(--action-dark);
  cursor: pointer;
}

.mobile-menu-button svg,
.sidebar-drawer-close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar h1,
#page-title {
  font-size: clamp(20px, 1.8vw, 30px);
  line-height: 1.18;
}

.view {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

:where(.panel, .card, .metric, .kpi-card, .dashboard-kpi-card, .finance-kpi-card, .osint-kpi-card, .mailing-kpi-card) {
  min-width: 0;
}

:where(.topbar-title-wrap, .topbar-title-wrap > div, .view, .panel, .card, .metric) {
  min-width: 0;
}

:where(.topbar h1, .eyebrow, .card h2, .card h3, .panel h2, .panel h3, .metric strong, .metric span, .nav-item, td, th) {
  overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
  .sidebar {
    width: clamp(240px, 15vw, 280px);
    padding: 20px 12px 18px;
  }

  .app {
    margin-left: clamp(240px, 15vw, 280px);
  }

  .brand {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 8px 22px;
  }

  .brand > div:not(.brand-mark),
  .brand div:last-child,
  .collapse-menu {
    display: block;
  }

  .nav {
    display: grid;
    gap: 6px;
  }

  .nav-item {
    min-height: 39px;
    grid-template-columns: 30px 1fr auto;
    justify-items: stretch;
    padding: 0 10px;
    font-size: var(--text-base);
  }

  .nav-item span,
  .nav-item .nav-icon {
    display: inline-grid;
  }

  body.sidebar-collapsed .app {
    margin-left: 0;
  }

  .mobile-menu-button,
  .sidebar-drawer-close,
  .sidebar-overlay {
    display: none !important;
  }
}

@media (min-width: 1920px) {
  .view.active {
    max-width: 1840px;
    margin-inline: auto;
  }
}

@media (max-width: 1439px) {
  :where(
    .dashboard-kpi-grid,
    .finance-kpi-grid,
    .osint-kpi-grid,
    .analytics-kpi-grid,
    .settings-summary-grid,
    .mailing-stats-grid,
    .mailing-recipient-grid,
    .case-stats-grid,
    .tasks-stat-grid
  ) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1279px) {
  .topbar {
    padding-inline: 18px;
  }

  .view {
    padding: 18px 18px 32px;
  }

  :where(
    .dashboard-layout,
    .finance-overview-grid,
    .finance-dashboard-grid,
    .analytics-layout,
    .osint-overview-grid,
    .documents-workspace,
    .documents-layout,
    .case-profile-grid,
    .mailing-layout
  ) {
    gap: 16px;
  }

  :where(
    .dashboard-kpi-grid,
    .finance-kpi-grid,
    .osint-kpi-grid,
    .analytics-kpi-grid,
    .settings-summary-grid,
    .mailing-stats-grid,
    .mailing-recipient-grid,
    .case-stats-grid,
    .tasks-stat-grid
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .app,
  body.sidebar-collapsed .app {
    width: 100%;
    margin-left: 0;
  }

  .sidebar {
    inset: 0 auto 0 0;
    width: min(320px, 35vw);
    min-width: 280px;
    max-width: calc(100vw - 24px);
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    padding: 20px 12px 22px;
    transform: translateX(-105%);
    pointer-events: none;
    z-index: 1000;
    transition: transform 0.24s ease;
  }

  body {
    padding-bottom: 0;
  }

  .nav {
    width: auto;
    display: grid;
    gap: 6px;
    overflow: auto;
  }

  .nav-item {
    min-height: 44px;
    display: grid;
    grid-template-columns: 32px 1fr auto;
    justify-items: stretch;
    padding: 0 12px;
    font-size: var(--text-base);
  }

  .nav-item span,
  .nav-item .nav-icon {
    display: inline-grid;
  }

  .brand > div:not(.brand-mark) {
    display: block;
  }

  body.sidebar-drawer-open .sidebar {
    transform: translateX(0);
    pointer-events: auto;
  }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 990;
    display: block;
    background: rgba(8, 17, 31, 0.52);
    backdrop-filter: blur(1px);
  }

  .sidebar-overlay[hidden] {
    display: none !important;
  }

  .sidebar-drawer-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: grid;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  .brand {
    display: flex;
    justify-content: flex-start;
    padding-right: 56px;
  }

  .mobile-menu-button {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  .collapse-menu,
  .sidebar-restore {
    display: none !important;
  }

  .topbar {
    min-height: 66px;
    height: auto;
    padding: 10px 16px;
    gap: 10px;
  }

  .topbar-title-wrap {
    flex: 1 1 auto;
    gap: 10px;
  }

  .topbar-back.visible {
    flex-basis: 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .top-actions,
  .admin-actions {
    flex: 0 0 auto;
    gap: 8px;
  }

  .admin-actions {
    border-left: 0;
    padding-left: 0;
  }

  .notification-button,
  .admin-profile {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  .admin-profile > div:not(.admin-avatar),
  .admin-chevron {
    display: none;
  }

  .topbar-clock {
    min-width: 74px;
    height: 44px;
    padding: 0 10px;
  }

  .topbar-clock-date {
    display: none;
  }

  .view {
    padding: 20px 22px 36px;
  }

  .view > * {
    max-width: 100%;
  }

  :where(
    .dashboard-layout,
    .dashboard-side,
    .finance-overview-grid,
    .finance-dashboard-grid,
    .finance-main-grid,
    .finance-tab-layout,
    .analytics-layout,
    .osint-overview-grid,
    .osint-content-grid,
    .documents-workspace,
    .documents-layout,
    .documents-shell,
    .case-profile-grid,
    .case-detail-grid,
    .calendar-layout,
    .mailing-layout,
    .settings-layout,
    .tasks-layout,
    .planner-layout
  ) {
    grid-template-columns: 1fr !important;
  }

  :where(
    .dashboard-side,
    .finance-side,
    .finance-aside,
    .documents-detail-panel,
    .case-detail-aside,
    .calendar-side,
    .mailing-preview-column,
    .osint-side-panel
  ) {
    order: 2;
  }

  :where(.filters, .filter-bar, .documents-filters, .finance-filters, .osint-filters, .calendar-filters, .client-toolbar, .case-toolbar) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  :where(.filters > *, .filter-bar > *, .documents-filters > *, .finance-filters > *, .osint-filters > *, .calendar-filters > *) {
    flex: 1 1 190px;
    min-width: 0;
  }

  :where(button, .button, input, select, textarea, .custom-select-trigger, .select-trigger, .filter-select) {
    min-height: 44px;
  }

  .topbar-panel {
    position: fixed;
    top: 66px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .sidebar {
    width: min(300px, 85vw);
    min-width: 0;
  }

  .topbar {
    padding: 8px 12px;
  }

  .topbar h1,
  #page-title {
    font-size: clamp(20px, 6vw, 22px);
  }

  .eyebrow,
  #page-eyebrow {
    font-size: 11px;
    line-height: 1.35;
  }

  .topbar-clock {
    display: none;
  }

  .notification-button,
  .admin-profile,
  .mobile-menu-button,
  .topbar-back.visible {
    width: 44px;
    min-width: 44px;
    flex-basis: 44px;
  }

  .view {
    padding: 12px 12px 28px;
  }

  .toolbar,
  .toolbar .left,
  .toolbar .right,
  .clients-toolbar .left,
  .clients-toolbar .right {
    width: 100%;
  }

  .clients-toolbar .search-control,
  .clients-toolbar #client-filter,
  .clients-toolbar .client-screen-select,
  .clients-toolbar button {
    width: 100%;
    min-width: 0;
  }

  .settings-user-data-grid {
    grid-template-columns: 1fr;
  }

  .settings-user-data-grid,
  .settings-user-case-preview,
  .settings-user-permissions {
    width: 100%;
  }

  .task-subtasks-menu {
    position: fixed;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }

  :where(.panel, .card, .metric, .dashboard-kpi-card, .finance-kpi-card, .osint-kpi-card) {
    padding: 14px;
  }

  :where(
    .dashboard-kpi-grid,
    .finance-kpi-grid,
    .osint-kpi-grid,
    .analytics-kpi-grid,
    .settings-summary-grid,
    .mailing-stats-grid,
    .mailing-recipient-grid,
    .case-stats-grid,
    .tasks-stat-grid,
    .dashboard-side,
    .dashboard-mini-grid,
    .dashboard-mini-grid-three,
    .dashboard-quick-grid
  ) {
    grid-template-columns: 1fr !important;
  }

  :where(.toolbar, .top-actions-row, .page-actions, .mailing-top-actions, .finance-head-actions, .documents-head-actions, .case-head-actions) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  :where(.toolbar button, .top-actions-row button, .page-actions button, .mailing-top-actions button, .finance-head-actions button, .documents-head-actions button, .case-head-actions button) {
    width: 100%;
  }

  :where(.filters > *, .filter-bar > *, .documents-filters > *, .finance-filters > *, .osint-filters > *, .calendar-filters > *) {
    flex-basis: 100%;
  }

  table:not(.preserve-table) {
    display: block;
    width: 100%;
  }

  table:not(.preserve-table) thead {
    display: none;
  }

  table:not(.preserve-table) tbody,
  table:not(.preserve-table) tr,
  table:not(.preserve-table) td {
    display: block;
    width: 100%;
  }

  table:not(.preserve-table) tr {
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    padding: 10px 12px;
  }

  table:not(.preserve-table) td {
    border: 0 !important;
    padding: 6px 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  :where(
    .finance-operation-row,
    .finance-case-row,
    .finance-client-row,
    .finance-document-row,
    .case-document-row,
    .case-finance-row,
    .documents-row,
    .client-row,
    .case-row,
    .task-row,
    .calendar-list-row,
    .osint-row
  ) {
    grid-template-columns: 1fr !important;
    align-items: stretch;
    gap: 8px;
  }

  .row-action-menu {
    position: fixed;
    right: 12px;
    left: auto;
    max-width: calc(100vw - 24px);
  }

  dialog {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px);
    border-radius: 14px;
  }

  .modal-form {
    max-height: calc(100dvh - 16px);
    padding: 16px;
  }

  :where(.modal-grid, .form-grid, .crm-form-grid, .event-form-grid, .task-form-grid, .document-form-grid, .finance-modal-grid, .settings-form-grid) {
    grid-template-columns: 1fr !important;
  }

  :where(.modal-actions, .dialog-actions, .form-actions) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  :where(.modal-actions button, .dialog-actions button, .form-actions button) {
    width: 100%;
  }
}

/* Client menu alignment with the compact OSINT design language. */
body #clients {
  --client-panel-padding: var(--crm-panel-padding, 12px);
  --client-row-padding-y: 7px;
  --client-row-padding-x: 8px;
  --client-control-height: 32px;
  --client-menu-row-height: 27px;
}

body #clients .clients-toolbar {
  gap: var(--space-2) !important;
  margin-bottom: var(--space-3) !important;
}

body #clients .clients-toolbar .left,
body #clients .clients-toolbar .right {
  gap: var(--space-2) !important;
}

body #clients .clients-toolbar .search-control,
body #clients .clients-toolbar .btn,
body #clients .clients-toolbar select,
body #clients .clients-filter-panel select,
body #clients .clients-filter-panel input {
  min-height: var(--client-control-height) !important;
  font-size: var(--font-size-input) !important;
  line-height: var(--line-height-normal) !important;
  font-weight: var(--font-weight-semibold) !important;
  border-radius: var(--radius-md) !important;
}

body #clients #client-filter {
  width: min(100%, 260px) !important;
  padding-left: var(--space-2) !important;
}

body #clients .clients-filter-panel {
  gap: var(--space-2) !important;
  margin: calc(var(--space-1) * -1) 0 var(--space-3) !important;
  padding: var(--space-3) !important;
  border-radius: var(--radius-md) !important;
}

body #clients .clients-filter-panel label {
  gap: var(--space-1) !important;
  font-size: var(--font-size-label) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
}

body #clients .clients-layout {
  gap: var(--space-3) !important;
}

body #clients .clients-left,
body #clients .clients-side {
  gap: var(--space-3) !important;
}

body #clients .clients-table-card,
body #clients .side-card,
body #clients .client-profile-card,
body #clients .profile-shell,
body #clients .telegram-connect,
body #clients .message-preview,
body #clients .delivery-preview,
body #clients .client-communication-panel {
  border-radius: var(--radius-md) !important;
}

body #clients .clients-table-card,
body #clients .side-card {
  padding: var(--client-panel-padding) !important;
}

body #clients .clients-table-card h2,
body #clients .side-card h2,
body #clients .profile-section-title,
body #clients .client-communication-head h3,
body #clients .message-preview h3 {
  margin: 0 0 var(--space-2) !important;
  font-size: var(--font-size-card-title) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-black) !important;
  letter-spacing: var(--letter-spacing-tight) !important;
}

body #clients .side-card p,
body #clients .client-communication-head p,
body #clients .message-preview p,
body #clients .profile-details p,
body #clients .profile-contact-list,
body #clients .contact-row,
body #clients .manager-line,
body #clients .related-case-strip,
body #clients .mailing-grid,
body #clients .message-label,
body #clients .delivery-preview,
body #clients .client-communication-row span,
body #clients .client-communication-row em {
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-normal) !important;
}

body #clients .clients-table {
  font-size: var(--font-size-table-cell) !important;
  line-height: var(--line-height-normal) !important;
}

body #clients .clients-table th {
  padding: var(--client-row-padding-y) var(--client-row-padding-x) !important;
  font-size: var(--font-size-table-header) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: var(--letter-spacing-wide) !important;
}

body #clients .clients-table td {
  padding: var(--client-row-padding-y) var(--client-row-padding-x) !important;
  font-size: var(--font-size-table-cell) !important;
  line-height: var(--line-height-normal) !important;
  vertical-align: middle !important;
}

body #clients .clients-table strong,
body #clients .client-name-cell a,
body #clients .client-title strong,
body #clients .profile-details strong,
body #clients .client-communication-row strong {
  font-size: var(--font-size-table-cell) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-black) !important;
}

body #clients .clients-table small,
body #clients .clients-table .muted,
body #clients .client-name-cell span,
body #clients .client-title span,
body #clients .profile-meta,
body #clients .client-communication-row em {
  font-size: var(--font-size-caption) !important;
  line-height: var(--line-height-normal) !important;
  font-weight: var(--font-weight-semibold) !important;
}

body #clients .client-screen-select-button {
  min-height: var(--client-control-height) !important;
  padding: 0 var(--space-3) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--font-size-input) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
}

body #clients .client-screen-select-menu {
  top: calc(100% + 6px) !important;
  max-height: min(260px, 55vh) !important;
  padding: var(--space-1) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-menu) !important;
}

body #clients .client-screen-select-option {
  grid-template-columns: 18px minmax(0, 1fr) !important;
  min-height: var(--client-menu-row-height) !important;
  padding: 0 var(--space-2) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--font-size-menu) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
}

body #clients .client-screen-select-option span {
  font-size: var(--font-size-caption) !important;
  line-height: 1 !important;
}

body #clients .clients-actions-menu,
body #clients .row-action-menu,
body #clients .dropdown-menu,
body #clients .context-menu {
  min-width: 136px !important;
  padding: var(--space-1) !important;
  border-radius: var(--radius-lg) !important;
}

body #clients .clients-actions-menu button,
body #clients .row-action-menu button,
body #clients .dropdown-menu button,
body #clients .context-menu button {
  min-height: var(--size-menu-row-height) !important;
  padding: 0 var(--space-2) !important;
  gap: var(--space-2) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--font-size-menu) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
}

body #clients .clients-actions-menu svg,
body #clients .row-action-menu svg,
body #clients .dropdown-menu svg,
body #clients .context-menu svg,
body #clients .side-card svg,
body #clients .clients-table svg {
  width: var(--icon-size-sm) !important;
  height: var(--icon-size-sm) !important;
  stroke-width: var(--icon-stroke, 2) !important;
}

body #clients .mailing-grid {
  gap: var(--space-2) !important;
  margin-bottom: var(--space-2) !important;
}

body #clients .telegram-connect,
body #clients .message-preview,
body #clients .delivery-preview {
  padding: var(--space-3) !important;
}

body #clients .client-profile-card {
  overflow: hidden !important;
}

body #clients .profile-section-title {
  padding: 10px var(--space-3) !important;
  border-bottom: 1px solid var(--line) !important;
}

body #clients .profile-shell {
  margin: var(--space-3) !important;
  padding: var(--space-3) !important;
}

body #clients .profile-card-head {
  gap: var(--space-3) !important;
  padding-bottom: var(--space-3) !important;
}

body #clients .client-avatar.large {
  width: 36px !important;
  height: 36px !important;
  flex-basis: 36px !important;
  font-size: var(--font-size-body-lg) !important;
}

body #clients .profile-screenshot-grid {
  grid-template-columns: minmax(180px, 230px) minmax(0, 1fr) !important;
  gap: var(--space-3) !important;
  padding-top: var(--space-3) !important;
}

body #clients .profile-contact-list {
  gap: var(--space-2) !important;
  padding-right: var(--space-3) !important;
}

body #clients .contact-row {
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: var(--space-2) !important;
}

body #clients .profile-details {
  gap: var(--space-2) !important;
}

body #clients .client-communication-panel {
  padding: var(--space-3) !important;
}

body #clients .client-communication-list {
  gap: var(--space-2) !important;
}

body #clients .client-communication-row {
  grid-template-columns: 24px minmax(0, 1fr) auto !important;
  gap: var(--space-2) !important;
  padding: var(--space-2) !important;
  border-radius: var(--radius-md) !important;
}

body #clients .client-communication-row i {
  width: 24px !important;
  height: 24px !important;
}

body #clients .client-communication-row i svg {
  width: 13px !important;
  height: 13px !important;
}

body #clients #client-mailing-text,
body #clients .message-label textarea {
  font-size: var(--font-size-body) !important;
  line-height: var(--line-height-relaxed) !important;
}

@media (max-width: 1023px) {
  body #clients .clients-layout {
    grid-template-columns: 1fr !important;
  }

  body #clients .clients-side {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body #clients .profile-screenshot-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 767px) {
  body #clients .clients-toolbar,
  body #clients .clients-toolbar .left,
  body #clients .clients-toolbar .right {
    align-items: stretch !important;
  }

  body #clients .clients-toolbar .search-control,
  body #clients .clients-toolbar .btn,
  body #clients #client-filter {
    width: 100% !important;
    min-height: 44px !important;
  }

  body #clients .clients-filter-panel,
  body #clients .clients-side {
    grid-template-columns: 1fr !important;
  }

  body #clients .client-screen-select-button {
    min-height: 44px !important;
  }

  body #clients .client-screen-select-option {
    min-height: 36px !important;
  }

  body #clients .mailing-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Final compact audit guard: keep dense widgets, right panels and charts inside
   their cards at normal browser zoom while still relying on the central tokens. */
body .case-preview-card h2,
body .task-side-head h2,
body .task-side-card h2,
body .calendar-side-card h2,
body .planner-side-card h2,
body .documents-detail-panel h2,
body .finance-side-card h2,
body .osint-right-card h2,
body .right-detail-card h2 {
  font-size: var(--font-size-card-title) !important;
  line-height: var(--line-height-snug) !important;
  letter-spacing: 0 !important;
}

body .case-preview-card strong,
body .task-side-card strong,
body .calendar-side-card strong,
body .planner-side-card strong,
body .documents-detail-panel strong,
body .finance-side-card strong,
body .osint-right-card strong,
body .right-detail-card strong {
  font-size: var(--font-size-body-lg) !important;
  line-height: var(--line-height-normal) !important;
}

body .finance-mini-bars {
  display: grid;
  gap: 6px;
  min-width: 0;
}

body .finance-mini-bar {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) minmax(92px, 1.15fr) minmax(34px, auto);
  gap: 7px;
  align-items: center;
  min-width: 0;
}

body .finance-mini-bar span,
body .finance-mini-bar em,
body .finance-mini-bar i,
body .finance-mini-bar strong {
  min-width: 0;
  font-size: var(--font-size-caption) !important;
  line-height: var(--line-height-tight) !important;
  letter-spacing: 0 !important;
}

body .finance-mini-bar span,
body .finance-mini-bar strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .finance-mini-bar strong {
  justify-self: end;
  max-width: 100%;
  text-align: right;
}

body .finance-donut-wrap {
  grid-template-columns: minmax(118px, 145px) minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body .finance-donut-legend,
body .finance-donut-legend div {
  min-width: 0 !important;
  gap: 5px !important;
}

body .finance-donut-legend span,
body .finance-donut-legend strong {
  min-width: 0 !important;
  font-size: var(--font-size-caption) !important;
  line-height: var(--line-height-tight) !important;
  letter-spacing: 0 !important;
}

body .finance-donut-legend span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body .finance-cashflow-legend {
  gap: 8px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body .finance-cashflow-legend span,
body .finance-cashflow-chart em {
  font-size: var(--font-size-caption) !important;
  line-height: var(--line-height-tight) !important;
  letter-spacing: 0 !important;
}

body .finance-cashflow-chart em {
  overflow-wrap: anywhere;
}

body .finance-chart-card,
body .finance-operations-card,
body .finance-side-card,
body .finance-workspace-card,
body .finance-detail-panel {
  min-width: 0 !important;
}

#tasks.view .tasks-kpi-card .kpi-icon,
#tasks.view .tasks-kpi-card .metric-icon,
#tasks.view .tasks-kpi-card i {
  width: var(--icon-container-md) !important;
  height: var(--icon-container-md) !important;
}

#tasks.view .tasks-kpi-card svg {
  width: var(--icon-size-md) !important;
  height: var(--icon-size-md) !important;
}

#tasks.view .task-side-card,
#tasks.view .task-sync-card,
#tasks.view .task-priority-card,
#tasks.view .task-plan-card {
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-normal) !important;
  overflow-wrap: normal !important;
}

#tasks.view .task-plan-card h2,
#tasks.view .task-priority-card h2,
#tasks.view .task-sync-card h2 {
  font-size: var(--font-size-card-title) !important;
  line-height: var(--line-height-snug) !important;
}

#tasks.view .priority-legend p {
  grid-template-columns: 7px minmax(0, 1fr) minmax(34px, auto) !important;
  gap: 6px !important;
  min-width: 0 !important;
}

#tasks.view .priority-legend strong,
#tasks.view .priority-legend em,
#tasks.view .task-plan-card strong,
#tasks.view .task-plan-card em,
#tasks.view .task-plan-card .ghost,
#tasks.view .task-sync-step strong,
#tasks.view .task-sync-step em {
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-normal) !important;
  letter-spacing: 0 !important;
}

#tasks.view .priority-legend strong,
#tasks.view .task-plan-card strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#tasks.view .task-plan-card time {
  font-size: var(--font-size-body-lg) !important;
  line-height: var(--line-height-tight) !important;
  letter-spacing: 0 !important;
}

body .menu,
body .dropdown-menu,
body .context-menu,
body .select-menu,
body .popover-menu,
body .user-menu {
  font-size: var(--font-size-menu) !important;
  line-height: var(--line-height-normal) !important;
}

body .menu button,
body .dropdown-menu button,
body .context-menu button,
body .select-menu button,
body .popover-menu button,
body .user-menu button {
  min-height: var(--size-menu-row-height) !important;
  font-size: var(--font-size-menu) !important;
  line-height: var(--line-height-tight) !important;
}

@media (max-width: 374px) {
  .view {
    padding-inline: 10px;
  }

  .topbar {
    padding-inline: 10px;
  }

  .notification-button {
    display: none;
  }
}

/* Documents: mobile-first polish layered over the shared responsive shell. */
@media (max-width: 1023px) {
  .documents-left-rail {
    order: 1;
  }

  .documents-table-card {
    order: 2;
  }

  .documents-side {
    order: 3;
  }

  .documents-folder-head {
    align-items: stretch;
  }

  .sidebar .nav-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    justify-items: stretch;
    width: 100%;
    min-width: 0;
    padding: 0 12px;
    font-size: 14px !important;
    line-height: 1.2;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
  }

  .sidebar .nav-item .nav-icon {
    width: 24px;
    min-width: 24px;
    justify-self: center;
  }

  .sidebar .nav-badge {
    position: static;
    justify-self: end;
    font-size: 10px !important;
  }
}

@media (min-width: 1101px) and (max-width: 1439px) {
  .documents-layout {
    grid-template-columns: minmax(250px, 0.78fr) minmax(0, 2fr);
  }

  .documents-side {
    grid-column: 1 / -1;
    position: static;
  }

  .documents-table th:nth-child(1),
  .documents-table td:nth-child(1) {
    width: 28%;
  }

  .documents-table th:nth-child(2),
  .documents-table td:nth-child(2) {
    width: 18%;
  }

  .documents-table th:nth-child(3),
  .documents-table td:nth-child(3) {
    width: 16%;
  }

  .documents-table th:nth-child(4),
  .documents-table td:nth-child(4) {
    width: 8%;
  }

  .documents-table th:nth-child(5),
  .documents-table td:nth-child(5) {
    width: 14%;
  }

  .documents-table th:nth-child(6),
  .documents-table td:nth-child(6) {
    width: 10%;
  }
}

@media (max-width: 767px) {
  .documents-screen {
    gap: 10px;
  }

  .documents-toolbar {
    padding: 14px;
  }

  .documents-toolbar h2 {
    font-size: 18px;
  }

  .documents-kpi-card {
    min-height: 64px;
    padding: 10px 12px;
  }

  .documents-esign-overview {
    padding: 12px;
  }

  .documents-folder-head {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
  }

  .documents-folder-head h3 {
    margin-bottom: 2px;
    font-size: 16px;
  }

  .documents-folder-head-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .documents-folder-head-actions span {
    grid-column: 1 / -1;
    justify-content: center;
    border-radius: 999px;
    background: #eef4fb;
    color: #60728b;
    font-size: 12px;
    font-weight: 900;
  }

  .documents-folder-head-actions button {
    width: 100%;
    min-height: 42px;
  }

  .documents-table-card {
    padding: 10px;
    overflow: visible;
  }

  .documents-table {
    min-width: 0 !important;
    table-layout: auto;
  }

  .documents-table tbody {
    display: grid !important;
    gap: 10px;
  }

  .documents-table tbody tr[data-document-row] {
    display: grid !important;
    width: 100%;
    margin: 0;
    border: 1px solid #dbe7f5;
    border-radius: 10px;
    background: #fff;
    padding: 12px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
  }

  .documents-table tbody tr[data-document-row].selected {
    border-color: #b8d7f5;
    background: #f4f9ff;
    box-shadow: inset 3px 0 0 var(--action-dark), 0 8px 18px rgba(24, 91, 146, 0.07);
  }

  .documents-table tbody tr[data-document-row] > td {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: minmax(86px, 0.34fr) minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 5px 0 !important;
    border: 0 !important;
    color: #172033;
    font-size: 13px;
    line-height: 1.35;
  }

  .documents-table tbody tr[data-document-row] > td::before {
    color: #708097;
    content: "";
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
  }

  .documents-table tbody tr[data-document-row] > td:nth-child(1),
  .documents-table tbody tr[data-document-row] > td:nth-child(7) {
    grid-template-columns: 1fr;
  }

  .documents-table tbody tr[data-document-row] > td:nth-child(1)::before,
  .documents-table tbody tr[data-document-row] > td:nth-child(7)::before {
    display: none;
  }

  .documents-table tbody tr[data-document-row] > td:nth-child(2)::before {
    content: "Справа";
  }

  .documents-table tbody tr[data-document-row] > td:nth-child(3)::before {
    content: "Папка";
  }

  .documents-table tbody tr[data-document-row] > td:nth-child(4)::before {
    content: "Статус";
  }

  .documents-table tbody tr[data-document-row] > td:nth-child(5)::before {
    content: "Строк";
  }

  .documents-table tbody tr[data-document-row] > td:nth-child(6)::before {
    content: "Джерело";
  }

  .document-title-cell {
    width: 100%;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
  }

  .document-title-button {
    min-width: 0;
    align-items: start;
  }

  .document-title-button span,
  .document-title-button strong,
  .document-title-button small,
  .documents-table td small {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .documents-table tbody tr[data-document-row] > td:nth-child(4) {
    justify-items: start;
    text-align: left;
  }

  .documents-due {
    justify-items: start;
  }

  .documents-row-actions {
    justify-content: flex-end;
  }

  .documents-side {
    padding: 12px;
  }

  .documents-side-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .documents-action-button {
    min-height: 44px;
    padding-inline: 8px;
    font-size: 12px;
  }
}

@media (max-width: 374px) {
  .documents-folder-head-actions,
  .documents-toolbar-actions,
  .documents-side-actions {
    grid-template-columns: 1fr;
  }

  .documents-table tbody tr[data-document-row] > td {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* Responsive polish: keep drawer labels readable and prevent document tables from collapsing. */
@media (max-width: 1023px) {
  #primary-sidebar.sidebar {
    width: min(300px, 84vw);
    min-width: min(260px, calc(100vw - 24px));
  }

  #primary-sidebar .nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px;
    padding-right: 0;
  }

  #primary-sidebar .nav-item {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px !important;
    font-size: 14px !important;
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
  }

  #primary-sidebar .nav-item .nav-icon {
    flex: 0 0 28px;
    width: 28px;
    min-width: 28px;
    height: 28px;
  }

  #primary-sidebar .nav-badge {
    position: static !important;
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 10px !important;
  }
}

@media (min-width: 768px) {
  .documents-table th,
  .documents-table td {
    word-break: normal;
  }

  .documents-table th {
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .documents-table td:nth-child(2),
  .documents-table td:nth-child(4),
  .documents-table td:nth-child(5),
  .documents-table td:nth-child(6) {
    overflow-wrap: normal;
  }

  .documents-table .case-link-button {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (min-width: 1101px) and (max-width: 1599px) {
  .documents-layout {
    grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.75fr) !important;
    align-items: start;
  }

  .documents-side {
    grid-column: 1 / -1 !important;
    position: static !important;
    max-width: none;
  }

  .documents-table {
    table-layout: fixed;
  }

  .documents-table th:nth-child(1),
  .documents-table td:nth-child(1) {
    width: 32%;
  }

  .documents-table th:nth-child(2),
  .documents-table td:nth-child(2) {
    width: 20%;
  }

  .documents-table th:nth-child(3),
  .documents-table td:nth-child(3) {
    width: 16%;
  }

  .documents-table th:nth-child(4),
  .documents-table td:nth-child(4) {
    width: 10%;
  }

  .documents-table th:nth-child(5),
  .documents-table td:nth-child(5) {
    width: 12%;
  }

  .documents-table th:nth-child(6),
  .documents-table td:nth-child(6) {
    width: 10%;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .documents-filters {
    grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(150px, 1fr));
  }

  .documents-filter-toggle,
  .documents-filter-reset {
    min-width: 0;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .osint-topbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .osint-top-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, auto) auto;
    justify-content: stretch;
  }

  .osint-search,
  .osint-date-wrap,
  .osint-date-range,
  .osint-top-actions > .primary {
    width: 100%;
    min-width: 0;
  }

  .osint-overview-layout {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "line"
      "sources"
      "side"
      "lower"
      "data" !important;
  }

  .osint-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .osint-side-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .osint-lower-columns {
    grid-template-columns: minmax(300px, 1fr) minmax(280px, 0.95fr);
  }

  .osint-types-column {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .osint-source-panel .osint-donut-wrap {
    grid-template-columns: 140px minmax(0, 1fr);
    justify-content: center;
  }
}

@media (min-width: 1280px) and (max-width: 1439px) {
  .osint-overview-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr) !important;
    grid-template-areas:
      "line line"
      "sources side"
      "lower lower"
      "data data" !important;
  }

  .osint-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .osint-source-panel .osint-donut-wrap {
    grid-template-columns: 120px minmax(0, 1fr);
  }
}

@media (min-width: 1024px) and (max-width: 1040px) {
  .sidebar {
    width: clamp(240px, 15vw, 280px) !important;
    padding: 20px 12px 18px !important;
  }

  .app {
    margin-left: clamp(240px, 15vw, 280px) !important;
  }

  .brand {
    justify-content: flex-start !important;
    gap: 10px;
    padding: 0 8px 22px !important;
  }

  .brand > div:not(.brand-mark),
  .brand div:last-child,
  .collapse-menu {
    display: block !important;
  }

  .nav-item {
    min-height: 39px !important;
    display: grid !important;
    grid-template-columns: 30px 1fr auto !important;
    justify-items: stretch !important;
    padding: 0 10px !important;
    font-size: var(--text-base) !important;
  }

  .nav-item span,
  .nav-item .nav-icon {
    display: inline-grid !important;
    font-size: inherit !important;
  }

  .nav-badge {
    position: static !important;
    justify-self: end;
    min-width: 22px;
    height: 22px;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .finance-dashboard-layout {
    grid-template-columns: 1fr !important;
  }

  .finance-main-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.85fr);
  }

  .finance-right-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-bottom-grid > .finance-chart-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .finance-dashboard-layout {
    grid-template-columns: 1fr !important;
  }

  .finance-right-column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) and (max-width: 1599px) {
  .finance-recent-head {
    grid-template-columns: minmax(120px, 0.55fr) minmax(96px, 0.45fr) minmax(0, 3.2fr);
    padding-inline: 10px;
  }

  .finance-recent-client {
    grid-template-columns: minmax(120px, 0.55fr) minmax(0, 3.65fr);
  }

  .finance-recent-client-cell {
    padding: 12px 10px;
  }

  .finance-recent-case {
    grid-template-columns: minmax(96px, 0.42fr) minmax(0, 3.05fr);
  }

  .finance-recent-case-cell {
    padding: 12px 8px 12px 18px;
  }

  .finance-recent-case-cell::before {
    left: 5px;
  }

  .finance-recent-row {
    grid-template-columns: 70px 78px minmax(0, 1fr) minmax(68px, auto) minmax(70px, auto) minmax(60px, 0.6fr);
    gap: 6px;
    font-size: 11px;
  }

  .finance-operations-card {
    overflow: visible;
  }
}

@media (max-width: 1023px) {
  .finance-recent-head {
    display: none;
  }

  .finance-recent-client,
  .finance-recent-case {
    grid-template-columns: 1fr;
  }

  .finance-recent-client-cell {
    border-right: 0;
    border-bottom: 1px solid #edf3fa;
    padding: 12px;
  }

  .finance-recent-case-cell {
    border-right: 0;
    border-bottom: 1px solid #edf3fa;
    padding: 12px 12px 12px 18px;
  }

  .finance-recent-case-cell::before {
    left: 5px;
    top: 12px;
    bottom: 12px;
  }

  .finance-recent-rows {
    gap: 8px;
    padding: 10px;
  }

  .finance-recent-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px 10px;
    min-height: 0;
    padding: 10px 12px;
    border: 1px solid #edf3fa;
    border-radius: 10px;
    background: #fff;
  }

  .finance-recent-row span,
  .finance-recent-row strong,
  .finance-recent-row em,
  .finance-recent-row b,
  .finance-recent-row small {
    white-space: normal;
  }

  .finance-recent-row em,
  .finance-recent-row small {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1440px) {
  .osint-lower-columns {
    grid-template-columns: minmax(260px, 1.05fr) minmax(230px, 0.86fr) minmax(190px, 0.64fr);
  }
}

/* Compact desktop density: makes 100% browser zoom feel closer to the productive 75-85% workspace. */
@media (min-width: 1024px) {
  :root {
    --text-2xs: 8px;
    --text-xs: 9px;
    --text-sm: 10px;
    --text-base: 11px;
    --text-md: 11px;
    --text-lg: 12px;
    --text-xl: 13px;
    --text-2xl: 14px;
    --text-3xl: 16px;
    --leading-tight: 1.18;
    --leading-normal: 1.32;
    --main-side-grid: minmax(0, 4.8fr) minmax(240px, 0.95fr);
  }

  .sidebar {
    width: 240px;
    padding: 18px 10px 16px;
  }

  .app {
    margin-left: 240px;
  }

  body.sidebar-collapsed .app {
    margin-left: 0;
  }

  .brand {
    gap: 9px;
    padding: 0 8px 20px;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .nav {
    gap: 5px;
  }

  .nav-item {
    min-height: 36px;
    grid-template-columns: 28px 1fr auto;
    padding: 0 9px;
    border-radius: 7px;
  }

  .nav-icon,
  .nav-icon svg {
    width: 18px;
    height: 18px;
  }

  .nav-badge {
    min-width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .demo-data-toggle {
    min-height: 46px;
    margin-bottom: 7px;
    padding: 7px 9px;
  }

  .collapse-menu {
    min-height: 38px;
    padding: 0 10px;
  }

  .topbar {
    height: 62px;
    padding: 0 18px;
    gap: 12px;
  }

  .topbar-title-wrap {
    gap: 9px;
  }

  .topbar h1,
  #page-title {
    font-size: 17px;
    line-height: 1.16;
  }

  .eyebrow,
  #page-eyebrow {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.25;
  }

  .view h2,
  .section-head h2,
  .documents-toolbar h2,
  .finance-workspace-title h2,
  .osint-section-title,
  .mailing-section-title {
    font-size: 14px;
    line-height: 1.18;
  }

  .view h3,
  .card h3,
  .panel h3,
  .finance-chart-card h3,
  .osint-card h3 {
    font-size: 12px;
    line-height: 1.2;
  }

  .topbar-back,
  .topbar-back.visible {
    width: 34px;
    min-width: 34px;
    flex-basis: 34px;
    height: 34px;
    min-height: 34px;
  }

  .topbar-back svg {
    width: 18px;
    height: 18px;
  }

  .topbar-clock {
    min-width: 116px;
    height: 38px;
    padding: 4px 8px;
    gap: 2px;
  }

  .notification-button,
  .admin-avatar {
    width: 36px;
    height: 36px;
    min-height: 36px;
  }

  .admin-profile {
    min-width: 148px;
    min-height: 44px;
    gap: 8px;
  }

  .admin-actions {
    gap: 8px;
    padding-left: 18px;
  }

  .view {
    padding: 14px 18px 30px;
  }

  #cases.view,
  #tasks.view {
    padding-top: 10px;
  }

  .panel,
  .card,
  .metric,
  .documents-toolbar,
  .documents-filters,
  .documents-esign-overview,
  .finance-card,
  .finance-chart-card,
  .finance-operations-card,
  .osint-card,
  .osint-chart-card,
  .mailing-card,
  .settings-card {
    padding: 12px;
    border-radius: 8px;
  }

  .documents-kpi-card,
  .finance-summary-card,
  .osint-kpi-card,
  .mailing-stat-card,
  .case-stat-card,
  .tasks-kpi-grid article {
    min-height: 66px;
    padding: 10px 12px;
  }

  .documents-kpi-card > span,
  .finance-summary-card .summary-icon,
  .osint-kpi-card > span,
  .metric .icon {
    width: 32px;
    height: 32px;
  }

  .topbar-panel,
  .row-action-menu,
  .document-custom-select-menu,
  .documents-action-menu,
  .folder-action-menu,
  .finance-action-menu {
    border-radius: 8px;
  }

  input,
  select,
  textarea,
  .document-custom-select-trigger,
  .finance-payment-mode,
  .finance-filter-field select,
  .documents-filter-field select,
  .documents-filter-search input,
  .osint-search input,
  .finance-operation-search input {
    min-height: 34px;
    font-size: 11px;
  }

  button,
  .primary,
  .secondary,
  .documents-action-button,
  .compact-button {
    min-height: 34px;
    font-size: 11px;
  }

  .documents-action-button,
  .finance-quick-action,
  .osint-quick-action {
    padding: 0 10px;
  }

  table th,
  table td,
  .table th,
  .table td,
  .tasks-table th,
  .tasks-table td,
  .documents-table th,
  .documents-table td,
  .finance-table th,
  .finance-table td,
  .case-inner-table th,
  .case-inner-table td {
    padding: 8px 9px;
    font-size: 10px;
    line-height: 1.25;
  }

  .badge,
  .pill,
  .status-pill,
  .documents-status-pill,
  .finance-status-pill {
    min-height: 20px;
    padding: 3px 8px;
    font-size: 10px;
  }

  .finance-recent-row {
    min-height: 38px;
    font-size: 10px;
  }

  .finance-recent-client-cell,
  .finance-recent-case-cell {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .finance-dashboard-layout,
  .documents-screen,
  .osint-overview-layout,
  .mailing-layout,
  .settings-layout {
    gap: 12px;
  }

  .finance-main-grid,
  .finance-bottom-grid,
  .documents-kpi-grid,
  .osint-kpi-grid,
  .mailing-stats-grid {
    gap: 10px;
  }

  .modal-form,
  dialog > form,
  .finance-action-modal {
    padding: 18px;
  }
}

@media (min-width: 1440px) {
  .sidebar {
    width: 240px;
  }

  .app {
    margin-left: 240px;
  }

  .view {
    padding-inline: 20px;
  }
}

@media (min-width: 1920px) {
  .view {
    padding-inline: 24px;
  }
}

@media (max-width: 1023px) {
  :root {
    --text-2xs: 9px;
    --text-xs: 10px;
    --text-sm: 11px;
    --text-base: 12px;
    --text-md: 12px;
    --text-lg: 14px;
    --text-xl: 15px;
    --text-2xl: 17px;
    --text-3xl: 20px;
  }
}

/* Desktop density: keep the browser at 100%, but make the CRM feel like the
   previous comfortable 75% working scale. */
@media (min-width: 1024px) {
  :root {
    --text-2xs: 7px;
    --text-xs: 8px;
    --text-sm: 9px;
    --text-base: 10px;
    --text-md: 10px;
    --text-lg: 11px;
    --text-xl: 12px;
    --text-2xl: 13px;
    --text-3xl: 15px;
    --leading-tight: 1.12;
    --leading-normal: 1.24;
    --page-padding: 12px;
    --card-padding: 10px;
    --card-gap: 9px;
  }

  html,
  body {
    font-size: 10px;
    line-height: 1.24;
  }

  .topbar {
    height: 56px;
    padding: 0 14px;
    gap: 10px;
  }

  .topbar-title-wrap {
    gap: 8px;
  }

  .topbar h1,
  #page-title {
    font-size: 15px;
    line-height: 1.12;
  }

  .eyebrow,
  #page-eyebrow {
    font-size: 8.5px;
    line-height: 1.18;
  }

  .topbar-back,
  .topbar-back.visible,
  .notification-button,
  .admin-avatar {
    width: 32px;
    min-width: 32px;
    flex-basis: 32px;
    height: 32px;
    min-height: 32px;
  }

  .topbar-clock {
    min-width: 106px;
    height: 34px;
    padding: 3px 7px;
    border-radius: 7px;
  }

  .topbar-clock-row,
  .topbar-clock strong,
  .admin-role,
  .admin-name {
    font-size: 9px;
    line-height: 1.15;
  }

  .admin-profile {
    min-width: 132px;
    min-height: 38px;
    gap: 7px;
  }

  .admin-actions {
    gap: 7px;
    padding-left: 14px;
  }

  .sidebar {
    padding: 12px 10px;
  }

  .brand {
    gap: 9px;
    margin-bottom: 18px;
  }

  .brand-logo {
    width: 34px;
    height: 34px;
  }

  .brand strong {
    font-size: 11px;
  }

  .brand span,
  .sidebar-footer,
  .demo-toggle-card small {
    font-size: 9px;
  }

  .nav {
    gap: 4px;
  }

  .nav-item {
    min-height: 32px;
    padding: 0 9px;
    gap: 8px;
    border-radius: 7px;
    font-size: 10px;
  }

  .nav-item svg {
    width: 15px;
    height: 15px;
  }

  .nav-badge {
    min-width: 17px;
    height: 17px;
    font-size: 8px;
  }

  .demo-toggle-card {
    min-height: 46px;
    padding: 8px 10px;
  }

  .view {
    padding: 10px 14px 24px;
  }

  .view h2,
  .section-head h2,
  .documents-toolbar h2,
  .finance-workspace-title h2,
  .osint-section-title,
  .mailing-section-title {
    font-size: 12px;
    line-height: 1.15;
  }

  .view h3,
  .card h3,
  .panel h3,
  .finance-chart-card h3,
  .osint-card h3,
  .tasks-page-head h2 {
    font-size: 11px;
    line-height: 1.15;
  }

  .panel,
  .card,
  .metric,
  .documents-toolbar,
  .documents-filters,
  .documents-esign-overview,
  .finance-card,
  .finance-chart-card,
  .finance-operations-card,
  .osint-card,
  .osint-chart-card,
  .mailing-card,
  .settings-card {
    padding: 9px;
    border-radius: 7px;
  }

  .documents-kpi-card,
  .finance-summary-card,
  .osint-kpi-card,
  .mailing-stat-card,
  .case-stat-card,
  .tasks-kpi-grid article {
    min-height: 56px;
    padding: 8px 9px;
  }

  .documents-kpi-card > span,
  .finance-summary-card .summary-icon,
  .osint-kpi-card > span,
  .metric .icon {
    width: 28px;
    height: 28px;
  }

  input,
  select,
  textarea,
  .document-custom-select-trigger,
  .finance-payment-mode,
  .finance-filter-field select,
  .documents-filter-field select,
  .documents-filter-search input,
  .osint-search input,
  .finance-operation-search input {
    min-height: 30px;
    padding: 0 8px;
    font-size: 10px;
    border-radius: 7px;
  }

  textarea {
    padding-block: 8px;
  }

  button,
  .primary,
  .secondary,
  .documents-action-button,
  .compact-button {
    min-height: 30px;
    padding: 0 9px;
    font-size: 10px;
    border-radius: 7px;
  }

  table th,
  table td,
  .table th,
  .table td,
  .tasks-table th,
  .tasks-table td,
  .documents-table th,
  .documents-table td,
  .finance-table th,
  .finance-table td,
  .case-inner-table th,
  .case-inner-table td {
    padding: 6px 7px;
    font-size: 9px;
    line-height: 1.18;
  }

  .badge,
  .pill,
  .status-pill,
  .documents-status-pill,
  .finance-status-pill {
    min-height: 17px;
    padding: 2px 6px;
    font-size: 8.5px;
    line-height: 1.05;
  }

  .row-action-trigger,
  .finance-row-action,
  .documents-row-action,
  .task-list-actions button {
    width: 24px;
    height: 24px;
    min-height: 24px;
    border-radius: 6px;
  }

  .row-action-menu,
  .document-custom-select-menu,
  .documents-action-menu,
  .folder-action-menu,
  .finance-action-menu {
    min-width: 128px;
    padding: 5px;
    border-radius: 7px;
  }

  .row-action-menu button,
  .documents-action-menu button,
  .folder-action-menu button,
  .finance-action-menu button {
    min-height: 28px;
    padding: 0 8px;
    gap: 6px;
    font-size: 9px;
  }

  .ui-icon,
  button svg,
  .compact-button svg {
    width: 14px;
    height: 14px;
  }

  .modal-form,
  dialog > form,
  .finance-action-modal {
    padding: 14px;
    gap: 9px;
  }
}

@media (min-width: 1024px) {
  #tasks.view .tasks-screen,
  #tasks.view .tasks-main-column,
  #tasks.view .tasks-workspace {
    gap: 8px;
  }

  #tasks.view .tasks-page-head {
    gap: 12px;
  }

  #tasks.view .tasks-head-actions {
    gap: 6px;
  }

  #tasks.view .tasks-head-actions button {
    min-height: 30px;
    padding: 0 9px;
    gap: 5px;
    font-size: 9px;
  }

  #tasks.view .tasks-tabs {
    gap: 12px;
  }

  #tasks.view .tasks-tabs button {
    padding: 5px 0 7px;
    font-size: 9px;
  }

  #tasks.view .tasks-kpi-grid {
    gap: 6px;
  }

  #tasks.view .tasks-kpi-card {
    min-height: 52px;
    padding: 7px 8px;
    gap: 6px;
  }

  #tasks.view .tasks-kpi-grid span,
  #tasks.view .tasks-kpi-grid em {
    font-size: 8.5px;
    line-height: 1.15;
  }

  #tasks.view .tasks-kpi-grid strong {
    margin: 3px 0 1px;
    font-size: 16px;
  }

  #tasks.view .tasks-kpi-grid i {
    width: 26px;
    height: 26px;
  }

  #tasks.view .tasks-toolbar,
  #tasks.view .tasks-workspace.has-task-detail .tasks-toolbar {
    grid-template-columns: minmax(160px, 1fr) 110px 110px 110px 128px 76px;
    gap: 6px;
  }

  #tasks.view .tasks-toolbar input,
  #tasks.view .tasks-toolbar select,
  #tasks.view .tasks-toolbar button {
    min-height: 30px;
    font-size: 9px;
  }

  #tasks.view .tasks-workspace.has-task-detail {
    grid-template-rows: 60px 30px auto;
    align-items: start;
    gap: 8px 10px;
  }

  #tasks.view .tasks-workspace.has-task-detail .tasks-kpi-grid .tasks-kpi-card {
    height: 60px;
  }

  #tasks.view .tasks-list-card {
    padding: 7px 8px 6px;
    min-height: 0;
    height: auto;
  }

  #tasks.view .tasks-workspace.has-task-detail > .task-side-card {
    align-self: start;
    height: auto;
    max-height: none;
  }

  #tasks.view .tasks-table {
    min-width: 920px;
    font-size: 9px;
  }

  #tasks.view .tasks-table th,
  #tasks.view .tasks-table td {
    padding: 6px 5px;
  }

  #tasks.view .tasks-table th {
    font-size: 8.5px;
  }

  #tasks.view .tasks-table th:nth-child(1),
  #tasks.view .tasks-table td:nth-child(1) {
    width: 36%;
  }

  #tasks.view .tasks-table th:nth-child(3),
  #tasks.view .tasks-table td:nth-child(3) {
    width: 14%;
  }

  #tasks.view .tasks-table th:nth-child(4),
  #tasks.view .tasks-table td:nth-child(4) {
    width: 15%;
  }

  #tasks.view .task-title-cell {
    grid-template-columns: 10px 14px minmax(0, 1fr);
    gap: 7px;
  }

  #tasks.view .task-drag-handle {
    width: 10px;
    height: 14px;
    background-size: 5px 5px;
  }

  #tasks.view .task-title-cell strong {
    display: -webkit-box;
    overflow: hidden;
    color: #172033;
    font-size: 10px;
    line-height: 1.12;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #tasks.view .task-title-cell > div > span,
  #tasks.view .tasks-table td > span:not(.badge):not(.task-status-icon):not(.sr-only) {
    margin-top: 2px;
    font-size: 8.5px;
    line-height: 1.15;
  }

  #tasks.view .task-row-meta {
    gap: 3px;
    margin-top: 3px;
  }

  #tasks.view .task-row-meta b,
  #tasks.view .task-subtasks-popover summary {
    min-height: 15px;
    padding: 1px 5px;
    gap: 3px;
    font-size: 8px;
    line-height: 1;
  }

  #tasks.view .task-row-meta .ui-icon,
  #tasks.view .task-subtasks-popover summary .ui-icon {
    width: 9px;
    height: 9px;
  }

  #tasks.view .task-assignee {
    gap: 5px;
    font-size: 9px;
  }

  #tasks.view .task-assignee img {
    width: 24px;
    height: 24px;
  }

  #tasks.view .task-side-card {
    padding: 9px;
    font-size: 9px;
  }

  #tasks.view .task-side-head {
    gap: 7px;
    margin-bottom: 6px;
  }

  #tasks.view .task-side-head h2 {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.12;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #tasks.view .task-side-head span {
    margin-top: 3px;
    font-size: 8.5px;
    line-height: 1.15;
  }

  #tasks.view .task-side-close {
    width: 24px;
    height: 24px;
    min-height: 24px;
    font-size: 14px;
  }

  #tasks.view .task-detail-priority,
  #tasks.view .task-detail-tabs,
  #tasks.view .task-detail-info {
    margin-bottom: 8px;
  }

  #tasks.view .task-detail-tabs {
    gap: 8px;
  }

  #tasks.view .task-detail-tabs button {
    padding: 4px 0 6px;
    font-size: 8.5px;
  }

  #tasks.view .task-detail-info {
    gap: 7px;
  }

  #tasks.view .task-detail-info > div {
    grid-template-columns: minmax(74px, 0.72fr) minmax(0, 1fr);
    gap: 7px;
    padding: 4px 0;
  }

  #tasks.view .task-detail-info span {
    font-size: 8.5px;
    line-height: 1.15;
  }

  #tasks.view .task-detail-info strong,
  #tasks.view .task-detail-info a,
  #tasks.view .task-detail-info em {
    font-size: 10px;
    line-height: 1.18;
  }

  #tasks.view .task-progress {
    gap: 5px;
  }

  #tasks.view .task-progress header {
    font-size: 10px;
  }

  #tasks.view .task-side-actions {
    gap: 0;
  }

  #tasks.view .task-action-line {
    min-height: 30px;
    padding: 0 8px;
    gap: 6px;
    font-size: 9.5px;
  }

  #tasks.view .tasks-bottom-grid {
    gap: 10px;
  }

  #tasks.view .task-sync-card,
  #tasks.view .task-priority-card,
  #tasks.view .task-plan-card {
    padding: 9px;
  }
}

/* Unified compact UI system for dropdowns, popovers and page typography.
   Keeps every CRM section visually consistent at the same browser zoom. */
@media (min-width: 1024px) {
  :root {
    --ui-title-font: var(--crm-section-title-size);
    --ui-section-font: var(--crm-card-title-size);
    --ui-body-font: var(--crm-description-size);
    --ui-small-font: var(--crm-meta-size);
    --ui-control-font: var(--crm-control-size);
    --ui-menu-font: var(--crm-meta-size);
    --ui-control-height: 30px;
    --ui-menu-row-height: 27px;
  }

  :where(
    .view h2,
    .section-head h2,
    .documents-toolbar h2,
    .finance-workspace-title h2,
    .finance-chart-card h2,
    .finance-operations-card h2,
    .finance-status-card h2,
    .finance-debt-card h2,
    .finance-quick-card h2,
    .osint-section-title,
    .mailing-section-title,
    .settings-card h2,
    .modal-head h2,
    .crm-modal-title strong
  ) {
    font-size: var(--ui-title-font);
    line-height: 1.14;
    letter-spacing: 0;
  }

  :where(
    .view h3,
    .card h3,
    .panel h3,
    .metric h3,
    .documents-archive h3,
    .finance-card h3,
    .osint-card h3,
    .mailing-card h3,
    .settings-card h3
  ) {
    font-size: var(--ui-section-font);
    line-height: 1.16;
    letter-spacing: 0;
  }

  :where(
    .view,
    .panel,
    .card,
    .modal-form,
    table,
    .documents-table,
    .finance-table,
    .tasks-table,
    .case-inner-table,
    .calendar-grid,
    .mailing-layout,
    .settings-layout
  ) {
    font-size: var(--ui-body-font);
    line-height: 1.22;
  }

  :where(
    .muted,
    small,
    .eyebrow,
    .documents-table small,
    .finance-table small,
    .finance-recent-row small,
    .documents-tree small,
    .osint-case-card small,
    .mailing-card small,
    .settings-card small
  ) {
    font-size: var(--ui-small-font);
    line-height: 1.18;
  }

  :where(
    select:not(.document-native-select):not(.screen-native-select):not(.client-native-select),
    input,
    textarea,
    .document-custom-select-button,
    .client-screen-select-button,
    .settings-custom-select-trigger,
    .finance-payment-mode button,
    .documents-action-button,
    .secondary,
    .primary,
    .compact-button
  ) {
    min-height: var(--ui-control-height);
    font-size: var(--ui-control-font);
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: 0;
  }

  :where(
    select:not(.document-native-select):not(.screen-native-select):not(.client-native-select),
    .document-custom-select-button,
    .client-screen-select-button,
    .settings-custom-select-trigger
  ) {
    padding: 0 28px 0 9px;
    border-radius: 7px;
  }

  :where(
    .document-custom-select-button,
    .client-screen-select-button,
    .settings-custom-select-trigger
  ) {
    gap: 8px;
  }

  :where(option, optgroup) {
    font-size: var(--ui-control-font);
    line-height: 1.2;
    font-weight: 700;
  }

  :where(
    .topbar-panel,
    .row-action-menu,
    .document-custom-select-menu,
    .client-screen-select-menu,
    .settings-custom-select-menu,
    .documents-action-menu,
    .folder-action-menu,
    .finance-action-menu,
    .salary-row-menu,
    .task-subtasks-menu,
    .task-coexecutors-menu,
    .case-stat-popover,
    .finance-date-popover,
    .analytics-date-popover,
    .document-source-popover
  ) {
    border: 1px solid #d9e4f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .14);
    font-size: var(--ui-menu-font);
    line-height: 1.16;
    letter-spacing: 0;
  }

  :where(
    .document-custom-select-menu,
    .client-screen-select-menu,
    .settings-custom-select-menu
  ) {
    top: calc(100% + 5px);
    max-height: 220px;
    padding: 5px;
  }

  :where(
    .document-custom-select-option,
    .client-screen-select-option,
    .settings-custom-select-option,
    .row-action-menu button,
    .documents-action-menu button,
    .folder-action-menu button,
    .finance-action-menu button,
    .salary-row-menu button,
    .topbar-panel button,
    .topbar-panel a,
    .task-coexecutors-menu label
  ) {
    min-height: var(--ui-menu-row-height);
    padding: 0 8px;
    gap: 6px;
    border-radius: 6px;
    font-size: var(--ui-menu-font);
    line-height: 1.12;
    font-weight: 850;
    letter-spacing: 0;
  }

  :where(.document-custom-select-option, .client-screen-select-option) {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  :where(.document-custom-select-option span, .client-screen-select-option span) {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    font-size: 11px;
  }

  :where(
    .document-custom-select-option strong,
    .client-screen-select-option strong,
    .settings-custom-select-option strong,
    .row-action-menu button,
    .salary-row-menu button
  ) {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .document-custom-select-option.is-procedural-option strong::after {
    margin-left: 5px;
    padding: 2px 5px;
    font-size: 7.5px;
  }

  :where(
    .finance-operation-filters,
    .documents-filters,
    .calendar-filter-panel,
    .tasks-toolbar,
    .case-list-toolbar,
    .clients-toolbar,
    .ai-case-filters,
    .analytics-filters,
    .osint-toolbar,
    .mailing-grid
  ) {
    gap: 7px;
  }

  :where(
    .finance-summary-card span,
    .finance-summary-card small,
    .documents-kpi-card small,
    .documents-kpi-card em,
    .osint-kpi-card span,
    .osint-kpi-card em,
    .mailing-stat-card span,
    .mailing-stat-card em
  ) {
    font-size: var(--ui-small-font);
    line-height: 1.12;
  }

  :where(
    .finance-summary-card strong,
    .documents-kpi-card strong,
    .osint-kpi-card strong,
    .mailing-stat-card strong
  ) {
    font-size: 17px;
    line-height: 1;
  }
}

@media (max-width: 1023px) {
  :where(
    .document-custom-select-button,
    .client-screen-select-button,
    .settings-custom-select-trigger,
    select:not(.document-native-select):not(.screen-native-select):not(.client-native-select)
  ) {
    min-height: 44px;
    font-size: 13px;
    line-height: 1.2;
  }

  :where(
    .document-custom-select-menu,
    .client-screen-select-menu,
    .settings-custom-select-menu,
    .row-action-menu,
    .salary-row-menu
  ) {
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
  }

  :where(
    .document-custom-select-option,
    .client-screen-select-option,
    .settings-custom-select-option,
    .row-action-menu button,
    .salary-row-menu button
  ) {
    min-height: 40px;
    font-size: 13px;
    line-height: 1.2;
  }
}

/* Final compact control normalization.
   Uses real specificity so page-level select styles cannot override it. */
@media (min-width: 1024px) {
  body .document-custom-select-button,
  body .client-screen-select-button,
  body .settings-custom-select-trigger,
  body .finance-filter-select .document-custom-select-button,
  body .finance-modal-select .document-custom-select-button,
  body .documents-filter-select .document-custom-select-button,
  body .calendar-filter-select .document-custom-select-button,
  body .screen-custom-select .document-custom-select-button,
  body .automation-rule .screen-custom-select .document-custom-select-button,
  body .task-subtask-editor-row .document-custom-select-button {
    min-height: 30px;
    padding: 0 28px 0 9px;
    gap: 7px;
    border-radius: 7px;
    font-size: 9.5px;
    line-height: 1.14;
    font-weight: 850;
    letter-spacing: 0;
  }

  body .document-custom-select-menu,
  body .client-screen-select-menu,
  body .settings-custom-select-menu,
  body .row-action-menu,
  body .documents-action-menu,
  body .folder-action-menu,
  body .finance-action-menu,
  body .salary-row-menu,
  body .task-subtasks-menu,
  body .task-coexecutors-menu,
  body .topbar-panel,
  body .case-stat-popover,
  body .finance-date-popover,
  body .analytics-date-popover,
  body .document-source-popover {
    padding: 5px;
    border: 1px solid #d9e4f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .14);
    font-size: 9px;
    line-height: 1.16;
  }

  body .document-custom-select-option,
  body .client-screen-select-option,
  body .settings-custom-select-option,
  body .calendar-filter-select .document-custom-select-option,
  body .row-action-menu button,
  body .documents-action-menu button,
  body .folder-action-menu button,
  body .finance-action-menu button,
  body .salary-row-menu button,
  body .task-coexecutors-menu label,
  body .task-subtasks-menu-row,
  body .topbar-panel button,
  body .topbar-panel a {
    min-height: 27px;
    padding: 0 8px;
    gap: 6px;
    border-radius: 6px;
    font-size: 9px;
    line-height: 1.12;
    font-weight: 850;
    letter-spacing: 0;
  }

  body .document-custom-select-option,
  body .client-screen-select-option {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  body .document-custom-select-option span,
  body .client-screen-select-option span,
  body .settings-custom-select-option .ui-icon {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    font-size: 11px;
  }

  body .document-custom-select-option strong,
  body .client-screen-select-option strong,
  body .settings-custom-select-option strong,
  body .row-action-menu button,
  body .documents-action-menu button,
  body .folder-action-menu button,
  body .finance-action-menu button,
  body .salary-row-menu button {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body .case-list-toolbar input,
  body .clients-toolbar input,
  body .documents-filter-search input,
  body .calendar-filter-panel input,
  body .osint-search input,
  body .finance-operation-search input,
  body .mailing-card input,
  body .settings-card input,
  body .settings-card textarea {
    min-height: 30px;
    padding: 0 8px;
    border-radius: 7px;
    font-size: 10px;
    line-height: 1.2;
  }

  body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  body select:not(.document-native-select):not(.screen-native-select):not(.client-native-select),
  body textarea {
    min-height: 30px;
    padding: 0 8px;
    border-radius: 7px;
    font-size: 10px;
    line-height: 1.2;
  }

  body textarea {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  body table th,
  body .table th,
  body .case-list-table th,
  body .tasks-table th,
  body .documents-table th,
  body .finance-table th,
  body .case-inner-table th {
    padding: 6px 7px;
    font-size: 9px;
    line-height: 1.18;
  }

  body table td,
  body .table td,
  body .case-list-table td,
  body .tasks-table td,
  body .documents-table td,
  body .finance-table td,
  body .case-inner-table td {
    padding: 6px 7px;
    font-size: 9px;
    line-height: 1.18;
  }

  body .finance-workspace-table.is-operations,
  body .finance-workspace-table.is-payments {
    width: 100%;
    min-width: 0;
  }

  body .finance-operation-head,
  body .finance-operation-client-group {
    grid-template-columns: minmax(104px, .75fr) 58px 70px 66px minmax(100px, 1.15fr) 72px 70px minmax(72px, .72fr) 34px;
    gap: 7px;
  }

  body .finance-operation-head.is-readonly,
  body .finance-operation-list.is-readonly .finance-operation-client-group {
    grid-template-columns: minmax(104px, .75fr) 58px 70px 66px minmax(100px, 1.15fr) 72px 70px minmax(72px, .72fr);
  }

  body .finance-operation-list.is-tree .finance-operation-client-group {
    grid-template-columns: minmax(128px, .72fr) minmax(0, 4fr);
  }

  body .finance-operation-case-group {
    grid-template-columns: minmax(112px, .68fr) minmax(0, 1fr);
  }

  body .finance-operation-head.is-tree {
    grid-template-columns: minmax(128px, .72fr) minmax(112px, .68fr) 70px 8px 74px 8px minmax(100px, 1.1fr) 8px 80px 8px 74px 8px minmax(74px, .72fr) 34px;
  }

  body .finance-operation-head.is-readonly.is-tree {
    grid-template-columns: minmax(128px, .72fr) minmax(112px, .68fr) 70px 8px 74px 8px minmax(100px, 1.1fr) 8px 80px 8px 74px 8px minmax(74px, .72fr);
  }

  body .finance-operation-row {
    grid-template-columns: 58px 70px 66px minmax(100px, 1.15fr) 72px 70px minmax(72px, .72fr) 34px;
    gap: 7px;
    min-height: 35px;
    padding-right: 6px;
    font-size: 9px;
  }

  body .finance-operation-list.is-readonly .finance-operation-row {
    grid-template-columns: 58px 70px 66px minmax(100px, 1.15fr) 72px 70px minmax(72px, .72fr);
  }

  body .finance-operation-row.is-case-tree {
    grid-template-columns: 70px 74px minmax(100px, 1.1fr) 80px 74px minmax(74px, .72fr) 34px;
  }

  body .finance-operation-list.is-readonly .finance-operation-row.is-case-tree {
    grid-template-columns: 70px 74px minmax(100px, 1.1fr) 80px 74px minmax(74px, .72fr);
  }

  body .finance-action-cell {
    justify-content: center;
    min-width: 30px;
    padding-right: 0;
  }

  body .finance-row-menu {
    width: 24px;
    height: 24px;
    min-height: 24px;
  }

  body .finance-operation-head.is-tree > :nth-child(2) {
    padding-left: 22px;
  }

  body .finance-operation-head.is-tree > :nth-child(3) {
    padding-left: 16px;
  }

  body .finance-operation-head.is-tree > :nth-child(4),
  body .finance-operation-head.is-tree > :nth-child(5),
  body .finance-operation-head.is-tree > :nth-child(6),
  body .finance-operation-head.is-tree > :nth-child(7),
  body .finance-operation-head.is-tree > :nth-child(8) {
    padding-left: 8px;
  }
}

/* CRM-wide visual system based on the OSINT screen.
   Keep page headings, card headings, descriptions, KPI values and controls in one editable scale. */
@media (min-width: 1024px) {
  body #page-title,
  body h1 {
    font-size: var(--crm-page-title-size);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: 0;
  }

  body .eyebrow,
  body .page-subtitle,
  body .screen-subtitle {
    font-size: var(--crm-description-size);
    line-height: 1.25;
    font-weight: 700;
  }

  body .panel,
  body .card,
  body .metric,
  body .dashboard-kpi-card,
  body .documents-kpi-card,
  body .finance-kpi-card,
  body .analytics-kpi-card,
  body .osint-kpi-card,
  body .settings-summary-card,
  body .mailing-stat-card,
  body .task-side-card,
  body .planner-side-card,
  body .calendar-side-card,
  body .finance-right-column > *,
  body .osint-chart-card,
  body .osint-wide-card,
  body .osint-small-card,
  body .osint-right-card {
    border-radius: 8px;
  }

  body .panel,
  body .card,
  body .metric,
  body .osint-chart-card,
  body .osint-wide-card,
  body .osint-small-card,
  body .osint-right-card,
  body .finance-workspace-panel,
  body .settings-readiness-card,
  body .settings-profile-card,
  body .settings-users-card,
  body .settings-integrations-card,
  body .settings-notifications-card,
  body .settings-audit-card,
  body .mailing-section,
  body .mailing-preview-card,
  body .forecast-card,
  body .mailing-tips-card {
    padding: var(--crm-panel-padding);
  }

  body .dashboard-screen,
  body .finance-screen,
  body .osint-screen,
  body .settings-screen,
  body .mailing-layout,
  body .documents-layout,
  body .calendar-layout,
  body .tasks-workspace,
  body .planner-layout,
  body .analytics-dashboard-grid,
  body .ai-workspace {
    gap: var(--crm-card-gap);
  }

  body h2,
  body .panel h2,
  body .card h2,
  body .metric h2,
  body .dashboard-card-head h2,
  body .dashboard-hero h2,
  body .documents-toolbar h2,
  body .clients-table-card h2,
  body .profile-section-title,
  body .finance-workspace-top h2,
  body .finance-chart-card h2,
  body .finance-operations-card h2,
  body .finance-right-column h2,
  body .analytics-chart-card h2,
  body .analytics-filter-card h2,
  body .osint-chart-card h2,
  body .osint-wide-card h2,
  body .osint-small-card h2,
  body .osint-right-card h2,
  body .osint-graph-column h2,
  body .osint-types-column h2,
  body .settings-section-head h2,
  body .mailing-section-head h2,
  body .mailing-preview-card h2,
  body .forecast-card h2,
  body .mailing-tips-card h2,
  body .section-head.compact h2,
  body .planner-main-card h2,
  body .planner-side-card h2,
  body .calendar-side-card h2,
  body .task-side-card h3,
  body .task-sync-card h2,
  body .task-priority-card h2,
  body .task-plan-card h2 {
    margin-top: 0;
    font-size: var(--crm-section-title-size);
    line-height: 1.18;
    font-weight: 950;
    letter-spacing: 0;
  }

  body h3,
  body .case-card h3,
  body .case-card-title,
  body .case-title-line h2,
  body .settings-readiness-item-head strong,
  body .settings-pilot-grid strong,
  body .finance-selected-operation-card > strong,
  body .mailing-template-title,
  body .campaign-title,
  body .ai-assistant-card h3,
  body .ai-how-card h3 {
    font-size: var(--crm-card-title-size);
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0;
  }

  body .dashboard-card-head p,
  body .dashboard-hero p,
  body .documents-toolbar p,
  body .finance-workspace-top p,
  body .finance-operations-card h2 small,
  body .finance-chart-empty span,
  body .settings-section-head p,
  body .settings-readiness-item p,
  body .settings-pilot-grid p,
  body .mailing-section p,
  body .mailing-preview-card p,
  body .forecast-card p,
  body .mailing-tips-card p,
  body .osint-empty-state p,
  body .osint-chart-empty,
  body .calendar-side-card p,
  body .planner-side-card p,
  body .task-side-card p,
  body .ai-section p,
  body .ai-how-card p,
  body .muted {
    font-size: var(--crm-description-size);
    line-height: 1.36;
    font-weight: 650;
  }

  body .dashboard-kpi-card,
  body .documents-kpi-card,
  body .finance-kpi-card,
  body .analytics-kpi-card,
  body .osint-kpi-card,
  body .settings-summary-card,
  body .mailing-stat-card,
  body .tasks-kpi-grid article {
    min-height: 86px;
    padding: 12px;
    gap: 8px;
  }

  body .dashboard-kpi-card span,
  body .dashboard-kpi-card small,
  body .dashboard-kpi-card em,
  body .documents-kpi-card small,
  body .documents-kpi-card em,
  body .finance-kpi-card span,
  body .finance-kpi-card small,
  body .finance-kpi-card em,
  body .analytics-kpi-card span,
  body .analytics-kpi-card small,
  body .analytics-kpi-card em,
  body .analytics-finance-summary span,
  body .analytics-finance-summary em,
  body .osint-kpi-card span,
  body .osint-kpi-card small,
  body .settings-summary-card em,
  body .mailing-stat-card span,
  body .mailing-stat-card em,
  body .tasks-kpi-grid i {
    font-size: var(--crm-description-size);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: 0;
  }

  body .dashboard-kpi-card strong,
  body .documents-kpi-grid strong,
  body .finance-kpi-card strong,
  body .finance-workspace-metric strong,
  body .analytics-kpi-card strong,
  body .analytics-finance-summary strong,
  body .osint-kpi-card strong,
  body .settings-summary-card strong,
  body .mailing-stat-card strong,
  body .tasks-kpi-grid strong,
  body .metric strong {
    font-size: var(--crm-kpi-value-size);
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0;
  }

  body .dashboard-kpi-card > i,
  body .documents-kpi-card > span,
  body .finance-kpi-card > i,
  body .analytics-kpi-card > i,
  body .osint-kpi-card em,
  body .settings-summary-card > span,
  body .mailing-stat-card i,
  body .tasks-kpi-grid .ui-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }

  body .dashboard-kpi-card > i .ui-icon,
  body .documents-kpi-grid .ui-icon,
  body .finance-kpi-card > i .ui-icon,
  body .analytics-kpi-card > i .ui-icon,
  body .osint-kpi-card em .ui-icon {
    width: 17px;
    height: 17px;
  }

  body button,
  body .button,
  body .primary,
  body .secondary,
  body input,
  body select,
  body textarea,
  body label,
  body .badge,
  body .pill,
  body .case-link-button,
  body .document-status-select,
  body .document-custom-select-button,
  body .client-screen-select-button,
  body .settings-custom-select-trigger {
    font-size: var(--crm-control-size);
    letter-spacing: 0;
  }

  body .finance-operation-head,
  body .finance-workspace-head,
  body .finance-report-table-head,
  body .documents-table th,
  body .case-inner-table th,
  body .tasks-table th,
  body .clients-table-card th,
  body .calendar-table th,
  body .analytics-table th {
    font-size: var(--crm-meta-size);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0;
  }

  body .finance-operation-row,
  body .finance-workspace-row,
  body .finance-report-table-row,
  body .documents-table td,
  body .case-inner-table td,
  body .tasks-table td,
  body .clients-table-card td,
  body .calendar-table td,
  body .analytics-table td,
  body .osint-active-item,
  body .osint-mention-row,
  body .settings-audit-row,
  body .mailing-history-row,
  body .template-library-row {
    font-size: var(--crm-table-size);
    line-height: 1.24;
    letter-spacing: 0;
  }
}

/* Dense case screen tuning: the cases list and right preview used larger local
   sizes than OSINT, so force them into the shared compact CRM scale. */
@media (min-width: 1024px) {
  body .case-list-screen {
    gap: var(--crm-card-gap);
  }

  body .case-list-head,
  body .case-kpi-grid,
  body .case-list-toolbar,
  body .case-list-layout {
    gap: var(--crm-card-gap);
  }

  body .case-list-global-search {
    grid-template-columns: minmax(280px, 1fr) 34px auto;
  }

  body .case-kpi-grid .case-kpi-card {
    min-height: 72px;
    padding: 10px 12px;
    grid-template-columns: minmax(0, 1fr) 30px;
  }

  body .case-kpi-grid span {
    font-size: var(--crm-description-size);
    line-height: 1.15;
  }

  body .case-kpi-grid strong {
    font-size: var(--crm-kpi-value-size);
  }

  body .case-kpi-grid i {
    width: 30px;
    height: 30px;
  }

  body .case-list-toolbar input,
  body .case-list-toolbar select {
    min-height: 32px;
    font-size: var(--crm-control-size);
  }

  body .case-list-card {
    min-height: 560px;
    height: auto;
    padding: 10px;
  }

  body .case-list-table {
    min-width: 880px;
    font-size: var(--crm-table-size);
  }

  body .case-list-table th,
  body .case-list-table td {
    padding: 7px 6px;
    font-size: var(--crm-table-size);
    line-height: 1.18;
  }

  body .case-list-table th:nth-child(1),
  body .case-list-table td:nth-child(1) {
    width: 150px;
  }

  body .case-list-table th:nth-child(2),
  body .case-list-table td:nth-child(2) {
    width: 112px;
  }

  body .case-list-table th:nth-child(3),
  body .case-list-table td:nth-child(3) {
    width: 180px;
  }

  body .case-list-table th:nth-child(4),
  body .case-list-table td:nth-child(4) {
    width: 88px;
  }

  body .case-list-table th:nth-child(5),
  body .case-list-table td:nth-child(5),
  body .case-list-table th:nth-child(8),
  body .case-list-table td:nth-child(8) {
    width: 100px;
  }

  body .case-list-table th:nth-child(6),
  body .case-list-table td:nth-child(6),
  body .case-list-table th:nth-child(7),
  body .case-list-table td:nth-child(7) {
    width: 64px;
  }

  body .case-client-avatar {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    font-size: var(--crm-meta-size);
  }

  body .case-client-text strong,
  body .case-list-table td > strong,
  body .case-number-stack a {
    font-size: var(--crm-card-title-size);
    line-height: 1.15;
  }

  body .case-client-text span,
  body .case-list-table td > span:not(.badge):not(.case-status-icon):not(.case-deadline-chip):not(.sr-only),
  body .case-list-table td .case-number-stack small,
  body .case-number-date,
  body .case-finance-summary,
  body .case-materials {
    font-size: var(--crm-meta-size);
    line-height: 1.15;
  }

  body .case-list-screen .badge,
  body .case-deadline-chip,
  body .case-materials span {
    min-height: 18px;
    padding: 2px 7px;
    font-size: var(--crm-meta-size);
    line-height: 1.1;
  }

  body .case-preview-card {
    height: auto;
    min-height: 560px;
    max-height: calc(100vh - 96px);
    padding: 10px;
    font-size: var(--crm-description-size);
  }

  body .case-preview-hero {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 9px;
  }

  body .case-preview-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  body .case-preview-icon .ui-icon {
    width: 15px;
    height: 15px;
  }

  body .case-preview-hero h2 {
    font-size: var(--crm-section-title-size);
    line-height: 1.16;
  }

  body .case-preview-hero p,
  body .case-preview-summary p {
    font-size: var(--crm-description-size);
    line-height: 1.28;
  }

  body .case-preview-pill-row {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 7px;
  }

  body .case-preview-pill-row > span,
  body .case-preview-rows span {
    font-size: var(--crm-description-size);
    line-height: 1.15;
  }

  body .case-pill-picker summary,
  body .case-preview-pill {
    min-height: 28px;
    padding: 0 7px;
    border-radius: 7px;
  }

  body .case-pill-picker summary strong,
  body .case-pill-picker button strong,
  body .case-preview-pill strong,
  body .case-preview-rows strong {
    font-size: var(--crm-card-title-size);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  body .case-preview-rows div {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 8px;
    padding: 6px 0;
  }

  body .case-preview-summary h3 {
    font-size: var(--crm-card-title-size);
  }
}

/* Unified design-system normalization.
   This final layer makes typography, icons, menus, forms, cards and tables obey
   the central tokens in frontend/design-tokens.css. */
body {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  text-rendering: optimizeLegibility;
}

body h1,
body #page-title,
body .page-title {
  font-size: var(--font-size-page-title);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--letter-spacing-normal);
}

body h2,
body .section-title,
body .panel-title,
body .card-title,
body .modal-title,
body .dialog-title,
body .finance-workspace-top h2,
body .documents-toolbar h2,
body .osint-chart-card h2,
body .osint-wide-card h2,
body .osint-small-card h2,
body .osint-right-card h2,
body .case-preview-hero h2,
body .calendar-side-card h2,
body .task-side-card h2,
body .settings-section-head h2,
body .mailing-section-head h2 {
  font-size: var(--font-size-section-title);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--letter-spacing-normal);
}

body h3,
body h4,
body .case-card-title,
body .case-title-line h2,
body .case-preview-summary h3,
body .finance-selected-operation-card > strong,
body .mailing-template-title,
body .campaign-title,
body .ai-assistant-card h3,
body .ai-how-card h3,
body .settings-readiness-item-head strong {
  font-size: var(--font-size-card-title);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-normal);
}

body p,
body li,
body dd,
body .text-body,
body .description,
body .muted,
body .page-subtitle,
body .screen-subtitle,
body .card-description,
body .helper-text,
body .field-helper,
body .empty-state,
body .toast,
body .alert,
body .notification,
body .document-comment,
body .case-preview-summary p,
body .case-preview-hero p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-normal);
}

body small,
body .caption,
body .metadata,
body .eyebrow,
body .subtle,
body .page-meta,
body .document-meta,
body .case-number-date,
body .case-client-text span,
body .case-materials,
body .finance-operations-card h2 small,
body .osint-active-item small,
body .osint-mention-row small {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-normal);
}

body label,
body .field-label,
body .form-label,
body .filter-label,
body .settings-label,
body .modal label {
  font-size: var(--font-size-label);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-normal);
}

body button,
body .button,
body .btn,
body .primary,
body .secondary,
body .danger,
body .ghost,
body .case-link-button,
body .quick-action-button,
body .document-action-button,
body .finance-action-button {
  font-size: var(--font-size-button);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-normal);
}

body input,
body textarea,
body select,
body .select-trigger,
body .custom-select-trigger,
body .document-custom-select-button,
body .client-screen-select-button,
body .settings-custom-select-trigger,
body .case-pill-picker summary {
  min-height: var(--size-control-height);
  font-size: var(--font-size-input);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-normal);
  border-radius: var(--radius-sm);
}

body input::placeholder,
body textarea::placeholder {
  font-size: var(--font-size-placeholder);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-medium);
}

body .badge,
body .pill,
body .status-pill,
body .case-deadline-chip,
body .case-materials span,
body .document-status-chip,
body .finance-status-chip,
body .priority-pill {
  min-height: 18px;
  padding: 2px 7px;
  font-size: var(--font-size-badge);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-normal);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

body table,
body .table,
body .case-list-table,
body .documents-table,
body .tasks-table,
body .clients-table-card table,
body .finance-report-table,
body .analytics-table,
body .calendar-table {
  font-size: var(--font-size-table-cell);
  line-height: var(--line-height-normal);
}

body th,
body .table-header,
body .finance-operation-head,
body .finance-workspace-head,
body .finance-report-table-head,
body .case-list-table th,
body .documents-table th,
body .tasks-table th,
body .clients-table-card th,
body .analytics-table th {
  font-size: var(--font-size-table-header);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--letter-spacing-normal);
}

body td,
body .table-cell,
body .finance-operation-row,
body .finance-workspace-row,
body .finance-report-table-row,
body .case-list-table td,
body .documents-table td,
body .tasks-table td,
body .clients-table-card td,
body .analytics-table td {
  font-size: var(--font-size-table-cell);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-normal);
}

body .nav-item,
body .sidebar .brand strong,
body .sidebar .brand span,
body .sidebar-footer,
body .sidebar-toggle-text {
  font-size: var(--font-size-sidebar);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-normal);
}

body .nav-item {
  min-height: 36px;
  gap: var(--space-2);
}

body .nav-icon,
body .ui-icon,
body button svg,
body .button svg,
body .btn svg,
body .row-action-menu svg,
body .quick-action-button svg,
body .document-action-button svg {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  stroke-width: var(--icon-stroke-width);
  flex: 0 0 var(--size-icon-sm);
}

body .nav-icon svg {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
}

body .dashboard-kpi-card > i,
body .documents-kpi-card > span,
body .finance-kpi-card > i,
body .analytics-kpi-card > i,
body .osint-kpi-card em,
body .settings-summary-card > span,
body .mailing-stat-card i,
body .case-preview-icon,
body .document-icon-box {
  width: var(--size-icon-container-lg);
  height: var(--size-icon-container-lg);
  flex: 0 0 var(--size-icon-container-lg);
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-md);
}

body .panel,
body .card,
body .metric,
body .dashboard-kpi-card,
body .documents-kpi-card,
body .finance-kpi-card,
body .analytics-kpi-card,
body .osint-kpi-card,
body .settings-summary-card,
body .mailing-stat-card,
body .case-preview-card,
body .task-side-card,
body .calendar-side-card,
body .planner-side-card,
body .finance-operations-card,
body .finance-chart-card,
body .finance-right-column > *,
body .osint-chart-card,
body .osint-wide-card,
body .osint-small-card,
body .osint-right-card {
  border-radius: var(--radius-md);
}

body .panel,
body .card,
body .metric,
body .finance-operations-card,
body .finance-chart-card,
body .finance-workspace-panel,
body .osint-chart-card,
body .osint-wide-card,
body .osint-small-card,
body .osint-right-card,
body .settings-readiness-card,
body .settings-profile-card,
body .mailing-section,
body .mailing-preview-card,
body .forecast-card,
body .mailing-tips-card {
  padding: var(--crm-panel-padding);
}

body .row-action-menu,
body .finance-action-menu,
body .salary-row-menu,
body .document-custom-select-menu,
body .client-screen-select-menu,
body .settings-custom-select-menu,
body .case-custom-select-menu,
body .custom-select-menu,
body .dropdown-menu,
body .context-menu,
body .topbar-panel,
body .user-menu {
  padding: 6px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-button);
  line-height: var(--line-height-tight);
  box-shadow: var(--shadow);
}

body .row-action-menu button,
body .finance-action-menu button,
body .salary-row-menu button,
body .document-custom-select-menu button,
body .client-screen-select-menu button,
body .settings-custom-select-menu button,
body .case-custom-select-menu button,
body .custom-select-menu button,
body .dropdown-menu button,
body .context-menu button,
body .topbar-panel button,
body .user-menu button {
  min-height: var(--size-menu-row-height);
  padding: 0 8px;
  gap: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-button);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-normal);
}

body .row-action-menu-wrap > .row-action-trigger,
body .row-action-trigger,
body .case-row-menu-trigger,
body .document-row-menu-trigger,
body .finance-row-menu-trigger,
body .icon-button {
  width: var(--size-icon-container-sm);
  height: var(--size-icon-container-sm);
  min-width: var(--size-icon-container-sm);
  min-height: var(--size-icon-container-sm);
  border-radius: var(--radius-sm);
  display: inline-grid;
  place-items: center;
  padding: 0;
}

body .modal,
body .dialog,
body .modal-card,
body .dialog-card,
body .confirm-dialog,
body .drawer-panel {
  border-radius: var(--radius-xl);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
}

body .modal h2,
body .dialog h2,
body .modal-title,
body .confirm-dialog h2,
body .drawer-panel h2 {
  font-size: var(--font-size-modal-title);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-black);
}

@media (max-width: 1023px) {
  body button,
  body .button,
  body .btn,
  body input,
  body textarea,
  body select,
  body .select-trigger,
  body .custom-select-trigger,
  body .document-custom-select-button,
  body .client-screen-select-button,
  body .settings-custom-select-trigger {
    min-height: var(--size-control-height-touch);
  }

  body .row-action-menu-wrap > .row-action-trigger,
  body .row-action-trigger,
  body .case-row-menu-trigger,
  body .document-row-menu-trigger,
  body .finance-row-menu-trigger,
  body .icon-button {
    width: var(--size-control-height-touch);
    height: var(--size-control-height-touch);
    min-width: var(--size-control-height-touch);
    min-height: var(--size-control-height-touch);
  }
}

/* Compact typography pass.
   This is the final density layer: keep 100% browser zoom visually close to the
   compact working view without changing routes or component logic. */
@media (min-width: 1024px) {
  :root {
    --ui-control-height: var(--size-control-height);
    --ui-menu-row-height: var(--size-menu-row-height);
  }

  body,
  body .view,
  body .panel,
  body .card,
  body .metric,
  body table,
  body aside {
    font-size: var(--font-size-body) !important;
    line-height: var(--line-height-normal);
  }

  body #page-title,
  body h1,
  body .page-title {
    font-size: var(--font-size-page-title) !important;
    line-height: var(--line-height-tight) !important;
  }

  body h2,
  body .panel h2,
  body .card h2,
  body .metric h2,
  body .section-title,
  body .panel-title,
  body .modal-title,
  body .dialog-title,
  body .documents-toolbar h2,
  body .finance-chart-card h2,
  body .finance-operations-card h2,
  body .finance-right-column h2,
  body .case-preview-hero h2,
  body .task-side-head h2,
  body .task-sync-card h2,
  body .task-priority-card h2,
  body .task-plan-card h2,
  body .calendar-side-card h2,
  body .planner-side-card h2,
  body .osint-chart-card h2,
  body .osint-wide-card h2,
  body .osint-small-card h2,
  body .osint-right-card h2,
  body .mailing-preview-card h2,
  body .forecast-card h2,
  body .mailing-tips-card h2 {
    font-size: var(--font-size-section-title) !important;
    line-height: var(--line-height-tight) !important;
    font-weight: var(--font-weight-black);
  }

  body h3,
  body h4,
  body .case-card-title,
  body .case-title-line h2,
  body .case-preview-summary h3,
  body .task-side-card h3,
  body .finance-selected-operation-card > strong,
  body .mailing-template-title,
  body .campaign-title,
  body .ai-assistant-card h3,
  body .ai-how-card h3,
  body .settings-readiness-item-head strong {
    font-size: var(--font-size-card-title) !important;
    line-height: var(--line-height-tight) !important;
    font-weight: var(--font-weight-bold);
  }

  body p,
  body li,
  body dd,
  body .description,
  body .muted,
  body .page-subtitle,
  body .screen-subtitle,
  body .card-description,
  body .helper-text,
  body .field-helper,
  body .empty-state,
  body .toast,
  body .alert,
  body .notification,
  body .document-comment,
  body .case-preview-summary p,
  body .case-preview-hero p,
  body .task-side-card p,
  body .calendar-side-card p,
  body .planner-side-card p {
    font-size: var(--font-size-body) !important;
    line-height: var(--line-height-relaxed) !important;
  }

  body small,
  body .caption,
  body .metadata,
  body .eyebrow,
  body .subtle,
  body .page-meta,
  body .document-meta,
  body .case-number-date,
  body .case-client-text span,
  body .case-materials,
  body .finance-operations-card h2 small,
  body .osint-active-item small,
  body .osint-mention-row small,
  body .task-side-head span,
  body .task-title-cell > div > span,
  body .tasks-table td > span:not(.badge):not(.task-status-icon):not(.sr-only) {
    font-size: var(--font-size-caption) !important;
    line-height: var(--line-height-normal) !important;
  }

  body label,
  body .field-label,
  body .form-label,
  body .filter-label,
  body .settings-label,
  body .modal label {
    font-size: var(--font-size-label) !important;
    line-height: var(--line-height-tight) !important;
  }

  body button,
  body .button,
  body .btn,
  body .primary,
  body .secondary,
  body .danger,
  body .ghost,
  body .case-link-button,
  body .quick-action-button,
  body .document-action-button,
  body .finance-action-button {
    font-size: var(--font-size-button) !important;
    line-height: var(--line-height-tight) !important;
  }

  body input,
  body textarea,
  body select,
  body .select-trigger,
  body .custom-select-trigger,
  body .document-custom-select-button,
  body .client-screen-select-button,
  body .settings-custom-select-trigger,
  body .case-pill-picker summary {
    min-height: var(--size-control-height) !important;
    font-size: var(--font-size-input) !important;
    line-height: var(--line-height-normal) !important;
  }

  body input::placeholder,
  body textarea::placeholder {
    font-size: var(--font-size-placeholder) !important;
  }

  body .badge,
  body .pill,
  body .status-pill,
  body .task-chip,
  body .case-deadline-chip,
  body .case-materials span,
  body .document-status-chip,
  body .finance-status-chip,
  body .priority-pill {
    min-height: 17px !important;
    padding: 2px 6px !important;
    font-size: var(--font-size-badge) !important;
    line-height: var(--line-height-tight) !important;
  }

  body th,
  body .table-header,
  body .finance-operation-head,
  body .finance-workspace-head,
  body .finance-report-table-head,
  body .case-list-table th,
  body .documents-table th,
  body .tasks-table th,
  body .clients-table-card th,
  body .analytics-table th {
    font-size: var(--font-size-table-header) !important;
    line-height: var(--line-height-tight) !important;
  }

  body td,
  body .table-cell,
  body .finance-operation-row,
  body .finance-workspace-row,
  body .finance-report-table-row,
  body .case-list-table td,
  body .documents-table td,
  body .tasks-table td,
  body .clients-table-card td,
  body .analytics-table td {
    font-size: var(--font-size-table-cell) !important;
    line-height: var(--line-height-normal) !important;
  }

  body .dashboard-kpi-card,
  body .documents-kpi-card,
  body .finance-kpi-card,
  body .analytics-kpi-card,
  body .osint-kpi-card,
  body .settings-summary-card,
  body .mailing-stat-card,
  body .tasks-kpi-grid article {
    min-height: 68px !important;
    padding: 9px 10px !important;
    gap: 6px !important;
  }

  body .dashboard-kpi-card strong,
  body .documents-kpi-grid strong,
  body .finance-kpi-card strong,
  body .finance-workspace-metric strong,
  body .analytics-kpi-card strong,
  body .analytics-finance-summary strong,
  body .osint-kpi-card strong,
  body .settings-summary-card strong,
  body .mailing-stat-card strong,
  body .tasks-kpi-grid strong,
  body .metric strong {
    font-size: var(--font-size-kpi-value) !important;
  }

  body .dashboard-kpi-card > i,
  body .documents-kpi-card > span,
  body .finance-kpi-card > i,
  body .analytics-kpi-card > i,
  body .osint-kpi-card em,
  body .settings-summary-card > span,
  body .mailing-stat-card i,
  body .tasks-kpi-grid .ui-icon,
  body .case-preview-icon,
  body .document-icon-box {
    width: var(--size-icon-container-lg) !important;
    height: var(--size-icon-container-lg) !important;
    flex-basis: var(--size-icon-container-lg) !important;
  }

  body .nav-item {
    min-height: 34px !important;
    font-size: var(--font-size-sidebar) !important;
  }

  body .row-action-menu,
  body .finance-action-menu,
  body .salary-row-menu,
  body .document-custom-select-menu,
  body .client-screen-select-menu,
  body .settings-custom-select-menu,
  body .case-custom-select-menu,
  body .custom-select-menu,
  body .dropdown-menu,
  body .context-menu,
  body .topbar-panel,
  body .user-menu {
    font-size: var(--font-size-button) !important;
  }

  body .row-action-menu button,
  body .finance-action-menu button,
  body .salary-row-menu button,
  body .document-custom-select-menu button,
  body .client-screen-select-menu button,
  body .settings-custom-select-menu button,
  body .case-custom-select-menu button,
  body .custom-select-menu button,
  body .dropdown-menu button,
  body .context-menu button,
  body .topbar-panel button,
  body .user-menu button {
    min-height: var(--size-menu-row-height) !important;
    font-size: var(--font-size-button) !important;
    line-height: var(--line-height-tight) !important;
  }

  body .case-preview-card,
  body .task-side-card,
  body .calendar-side-card,
  body .planner-side-card,
  body .documents-detail-panel,
  body .finance-right-column > *,
  body .osint-right-card {
    font-size: var(--font-size-body) !important;
  }

  body .case-preview-card *,
  body .task-side-card *,
  body .calendar-side-card *,
  body .planner-side-card *,
  body .documents-detail-panel *,
  body .finance-right-column > * *,
  body .osint-right-card * {
    overflow-wrap: anywhere;
  }

  body .case-preview-pill-row,
  body .case-preview-rows div,
  body .task-detail-info > div {
    grid-template-columns: minmax(58px, .62fr) minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 4px 0 !important;
  }

  body .case-preview-pill-row > span,
  body .case-preview-rows span,
  body .task-detail-info span {
    font-size: var(--font-size-caption) !important;
  }

  body .case-pill-picker summary strong,
  body .case-pill-picker button strong,
  body .case-preview-pill strong,
  body .case-preview-rows strong,
  body .task-detail-info strong,
  body .task-detail-info a,
  body .task-detail-info em {
    font-size: var(--font-size-card-title) !important;
    line-height: var(--line-height-normal) !important;
  }

  #tasks.view .task-side-card {
    padding: 8px !important;
  }

  #tasks.view .task-side-head h2 {
    font-size: var(--font-size-section-title) !important;
    line-height: var(--line-height-tight) !important;
  }

  #tasks.view .task-action-line {
    min-height: 27px !important;
    font-size: var(--font-size-button) !important;
  }

  #tasks.view .tasks-table th,
  #tasks.view .tasks-table td {
    padding: 5px 5px !important;
  }

  #tasks.view .task-title-cell strong {
    font-size: var(--font-size-card-title) !important;
  }
}

/* Tasks final polish: keep the KPI strip compact and stop top icons from
   visually overpowering the numbers at 100% browser zoom. */
@media (min-width: 1024px) {
  #tasks.view .tasks-tabs {
    gap: 14px !important;
    min-height: 28px !important;
  }

  #tasks.view .tasks-tabs button {
    padding: 5px 0 7px !important;
    font-size: var(--font-size-tab) !important;
  }

  #tasks.view .tasks-head-actions button {
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: var(--font-size-button) !important;
  }

  #tasks.view .tasks-kpi-grid {
    gap: 6px !important;
  }

  #tasks.view .tasks-kpi-card {
    min-height: 48px !important;
    padding: 7px 9px !important;
    gap: 6px !important;
    align-items: center !important;
  }

  #tasks.view .tasks-kpi-card span,
  #tasks.view .tasks-kpi-card em {
    font-size: var(--font-size-caption-xs) !important;
    line-height: 1.12 !important;
  }

  #tasks.view .tasks-kpi-card strong {
    margin: 2px 0 1px !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  #tasks.view .tasks-kpi-card i {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex: 0 0 24px !important;
  }

  #tasks.view .tasks-kpi-card .ui-icon,
  #tasks.view .tasks-kpi-card svg {
    width: 14px !important;
    height: 14px !important;
    stroke-width: 1.8px !important;
  }

  #tasks.view .tasks-toolbar input,
  #tasks.view .tasks-toolbar select,
  #tasks.view .tasks-toolbar button,
  #tasks.view .tasks-toolbar .custom-select-trigger {
    min-height: 28px !important;
    font-size: var(--font-size-input) !important;
  }

  #tasks.view .tasks-bottom-grid h2,
  #tasks.view .tasks-bottom-grid h3 {
    font-size: var(--font-size-section-title) !important;
    line-height: var(--line-height-tight) !important;
  }

  #tasks.view .tasks-bottom-grid strong,
  #tasks.view .task-sync-step strong,
  #tasks.view .task-plan-item strong {
    font-size: var(--font-size-card-title) !important;
    line-height: var(--line-height-normal) !important;
  }

  #tasks.view .tasks-bottom-grid p,
  #tasks.view .tasks-bottom-grid span,
  #tasks.view .tasks-bottom-grid li,
  #tasks.view .task-plan-item,
  #tasks.view .task-sync-step p {
    font-size: var(--font-size-body-sm) !important;
    line-height: var(--line-height-normal) !important;
  }

  #tasks.view .task-sync-step .ui-icon,
  #tasks.view .task-sync-step-icon,
  #tasks.view .task-priority-card .ui-icon {
    width: 22px !important;
    height: 22px !important;
  }
}

/* Tasks lower analytics cards: compact the planner and priority legend so
   long task titles stay inside the card at normal browser zoom. */
@media (min-width: 1024px) {
  #tasks.view .task-priority-card,
  #tasks.view .task-plan-card {
    min-width: 0 !important;
    min-height: 188px !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
  }

  #tasks.view .task-priority-card h2,
  #tasks.view .task-plan-card h2 {
    margin: 0 0 10px !important;
    font-size: 13px !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
  }

  #tasks.view .priority-card-body {
    grid-template-columns: 118px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #tasks.view .priority-donut {
    width: 108px !important;
    height: 108px !important;
  }

  #tasks.view .priority-donut::after {
    inset: 31px !important;
  }

  #tasks.view .priority-legend {
    gap: 7px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #tasks.view .priority-legend p {
    grid-template-columns: 8px minmax(56px, 1fr) minmax(56px, auto) !important;
    gap: 7px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    min-width: 0 !important;
  }

  #tasks.view .priority-legend strong,
  #tasks.view .priority-legend em {
    font-size: 10px !important;
    line-height: 1.2 !important;
    min-width: 0 !important;
  }

  #tasks.view .priority-legend strong {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #tasks.view .priority-legend em {
    text-align: right !important;
    white-space: nowrap !important;
  }

  #tasks.view .red-dot,
  #tasks.view .amber-dot,
  #tasks.view .yellow-dot,
  #tasks.view .green-dot {
    width: 7px !important;
    height: 7px !important;
    flex-basis: 7px !important;
  }

  #tasks.view .task-plan-card {
    gap: 8px !important;
  }

  #tasks.view .task-plan-list {
    gap: 0 !important;
    min-width: 0 !important;
  }

  #tasks.view .task-plan-row {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 10px !important;
    border-left-width: 2px !important;
    padding: 0 0 10px 10px !important;
    min-width: 0 !important;
  }

  #tasks.view .task-plan-card time {
    font-size: 13px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  #tasks.view .task-plan-card strong {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    color: #172033 !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  #tasks.view .task-plan-card em {
    margin-top: 2px !important;
    color: var(--muted) !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #tasks.view .task-plan-card .ghost {
    min-height: 24px !important;
    margin-top: 2px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
}

/* Tasks dense typography pass: final override for the selected task card and
   lower dashboard widgets at 100% browser zoom. */
@media (min-width: 1024px) {
  #tasks.view .task-side-card {
    padding: 10px !important;
    font-size: 8.5px !important;
    line-height: 1.24 !important;
    overflow-wrap: anywhere !important;
  }

  #tasks.view .task-side-head {
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  #tasks.view .task-side-head h2 {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #172033 !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #tasks.view .task-side-head span {
    margin-top: 2px !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
  }

  #tasks.view .task-detail-priority {
    margin-bottom: 7px !important;
  }

  #tasks.view .task-detail-priority .badge {
    min-height: 20px !important;
    padding: 2px 7px !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
  }

  #tasks.view .task-detail-tabs {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  #tasks.view .task-detail-tabs button {
    min-height: 22px !important;
    padding: 3px 0 5px !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
  }

  #tasks.view .task-detail-panel {
    gap: 7px !important;
    min-width: 0 !important;
  }

  #tasks.view .task-detail-info {
    gap: 6px !important;
    margin-bottom: 8px !important;
  }

  #tasks.view .task-detail-info > div {
    grid-template-columns: minmax(58px, .58fr) minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 3px 0 !important;
  }

  #tasks.view .task-detail-info span {
    font-size: 7.75px !important;
    line-height: 1.15 !important;
  }

  #tasks.view .task-detail-info strong,
  #tasks.view .task-detail-info a,
  #tasks.view .task-detail-info em,
  #tasks.view .task-side-card p,
  #tasks.view .task-side-card li {
    font-size: 8.75px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
  }

  #tasks.view .task-side-card h3,
  #tasks.view .task-progress header {
    font-size: 9.5px !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
  }

  #tasks.view .task-side-actions {
    gap: 0 !important;
    margin-top: 8px !important;
  }

  #tasks.view .task-action-line {
    min-height: 26px !important;
    padding: 0 8px !important;
    gap: 5px !important;
    font-size: 8.5px !important;
    line-height: 1.1 !important;
  }

  #tasks.view .task-action-line .ui-icon,
  #tasks.view .task-action-line svg {
    width: 11px !important;
    height: 11px !important;
  }

  #tasks.view .tasks-bottom-grid {
    grid-template-columns: minmax(380px, 1.35fr) minmax(300px, .82fr) minmax(330px, .92fr) !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  #tasks.view .task-sync-card,
  #tasks.view .task-priority-card,
  #tasks.view .task-plan-card {
    padding: 10px 12px !important;
  }

  #tasks.view .task-sync-card h2,
  #tasks.view .task-priority-card h2,
  #tasks.view .task-plan-card h2 {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  #tasks.view .task-sync-step i {
    width: 36px !important;
    height: 36px !important;
  }

  #tasks.view .task-sync-step .ui-icon,
  #tasks.view .task-sync-step svg {
    width: 17px !important;
    height: 17px !important;
  }

  #tasks.view .task-sync-step strong {
    font-size: 9.25px !important;
    line-height: 1.16 !important;
  }

  #tasks.view .task-sync-step em {
    max-width: 120px !important;
    font-size: 8.25px !important;
    line-height: 1.22 !important;
  }

  #tasks.view .task-sync-arrow {
    margin-top: 6px !important;
    font-size: 18px !important;
  }

  #tasks.view .priority-card-body {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #tasks.view .priority-donut {
    width: 96px !important;
    height: 96px !important;
  }

  #tasks.view .priority-donut::after {
    inset: 28px !important;
  }

  #tasks.view .priority-legend p {
    grid-template-columns: 7px minmax(46px, 1fr) minmax(52px, auto) !important;
    gap: 6px !important;
  }

  #tasks.view .priority-legend strong,
  #tasks.view .priority-legend em {
    font-size: 8.75px !important;
    line-height: 1.15 !important;
  }

  #tasks.view .task-plan-card time {
    font-size: 11.5px !important;
  }

  #tasks.view .task-plan-card strong {
    font-size: 9.25px !important;
    line-height: 1.18 !important;
  }

  #tasks.view .task-plan-card em,
  #tasks.view .task-plan-card .ghost {
    font-size: 8.5px !important;
  }
}

/* Unified visual audit pass: final design-system layer for typography, menus,
   icons and dense SaaS panels. Keep this block last so older page-specific
   rules cannot reintroduce mismatched text scales. */
body {
  font-family: var(--font-family-sans) !important;
  font-size: var(--font-size-body) !important;
  line-height: var(--line-height-normal) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
  text-rendering: geometricPrecision;
}

body .view,
body .page,
body .main-content,
body .content,
body .panel,
body .card,
body .side-panel,
body .right-panel {
  font-size: var(--font-size-body) !important;
  line-height: var(--line-height-normal) !important;
}

body h1,
body .view h1,
body .page-title,
body .page-title h1,
body .screen-title,
body .header-title,
body .topbar-title h1 {
  font-size: var(--font-size-page-title) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-black) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
}

body h2,
body .view h2,
body .section-title,
body .panel-title,
body .workspace-title,
body .chart-title,
body .modal-section-title {
  font-size: var(--font-size-section-title) !important;
  line-height: var(--line-height-snug, 1.3) !important;
  font-weight: var(--font-weight-black) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
}

body h3,
body h4,
body .view h3,
body .card-title,
body .widget-title,
body .table-title,
body .drawer-title,
body .modal-title,
body .dialog-title,
body .sheet-title,
body .right-panel-title {
  font-size: var(--font-size-card-title) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
}

body p,
body li,
body td,
body .body-text,
body .text-body,
body .description,
body .summary,
body .message,
body .preview-text {
  font-size: var(--font-size-body) !important;
  line-height: var(--line-height-normal) !important;
}

body small,
body .muted,
body .meta,
body .subtle,
body .caption,
body .helper,
body .hint,
body .eyebrow,
body .subtitle,
body .card-description,
body .field-help,
body .empty-state,
body .empty-state p,
body .timestamp,
body .date-note {
  font-size: var(--font-size-caption) !important;
  line-height: var(--line-height-normal) !important;
  font-weight: var(--font-weight-medium) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
}

body label,
body .label,
body .field-label,
body .form-label,
body .filter-label,
body .metric-label,
body .kpi-label {
  font-size: var(--font-size-label) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
}

body button,
body .btn,
body .button,
body .primary,
body .secondary,
body .ghost,
body .outline,
body .pill-button,
body .action-button,
body .toolbar-button,
body .filter-button,
body .pagination button {
  font-size: var(--font-size-button) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
}

body input,
body select,
body textarea,
body .custom-select-trigger,
body .screen-select-trigger,
body .document-select-trigger,
body .settings-select-trigger,
body .case-select-trigger,
body .client-select-trigger,
body .native-select,
body .screen-native-select,
body .document-native-select {
  font-size: var(--font-size-input) !important;
  line-height: var(--line-height-normal) !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
}

body input::placeholder,
body textarea::placeholder {
  font-size: var(--font-size-placeholder) !important;
  font-weight: var(--font-weight-medium) !important;
  line-height: var(--line-height-normal) !important;
}

body th,
body .table-head,
body .table-header,
body .table-heading,
body [role="columnheader"],
body .finance-operation-head,
body .finance-workspace-head,
body .finance-report-table-head,
body .case-list-table th,
body .documents-table th,
body .tasks-table th,
body .clients-table-card th,
body .analytics-table th {
  font-size: var(--font-size-table-header) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-black) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
}

body td,
body .table-cell,
body [role="cell"],
body .finance-operation-row,
body .finance-workspace-row,
body .finance-report-table-row,
body .case-list-table td,
body .documents-table td,
body .tasks-table td,
body .clients-table-card td,
body .analytics-table td {
  font-size: var(--font-size-table-cell) !important;
  line-height: var(--line-height-normal) !important;
  font-weight: var(--font-weight-medium) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
}

body .badge,
body .chip,
body .tag,
body .pill,
body .status-pill,
body .status-badge,
body .task-chip,
body .priority-pill,
body .case-deadline-chip,
body .document-status-chip,
body .finance-status-chip {
  min-height: 17px !important;
  padding: 2px 6px !important;
  font-size: var(--font-size-badge) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
  white-space: nowrap;
}

body .nav-item,
body .sidebar a,
body .sidebar button,
body .mobile-drawer a,
body .mobile-drawer button {
  font-size: var(--font-size-sidebar) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
}

body .tabs,
body .tab-list,
body .finance-tabs,
body .tasks-tabs,
body .mailing-tabs,
body .osint-tabs {
  min-width: 0;
}

body .tabs button,
body .tab-list button,
body .finance-tabs button,
body .tasks-tabs button,
body .mailing-tabs button,
body .osint-tabs button {
  font-size: var(--font-size-tab) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
}

body .row-action-menu,
body .finance-action-menu,
body .salary-row-menu,
body .document-custom-select-menu,
body .client-screen-select-menu,
body .settings-custom-select-menu,
body .case-custom-select-menu,
body .custom-select-menu,
body .dropdown-menu,
body .context-menu,
body .topbar-panel,
body .user-menu,
body .popover,
body .tooltip,
body .select-menu {
  font-size: var(--font-size-menu) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
}

body .row-action-menu button,
body .finance-action-menu button,
body .salary-row-menu button,
body .document-custom-select-menu button,
body .client-screen-select-menu button,
body .settings-custom-select-menu button,
body .case-custom-select-menu button,
body .custom-select-menu button,
body .dropdown-menu button,
body .context-menu button,
body .topbar-panel button,
body .user-menu button,
body .select-menu button {
  min-height: var(--size-menu-row-height) !important;
  padding: 0 var(--space-3) !important;
  gap: var(--space-2) !important;
  font-size: var(--font-size-menu) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
}

body svg,
body .ui-icon,
body .lucide {
  stroke-width: var(--icon-stroke-width) !important;
  flex-shrink: 0;
}

body .nav-item svg,
body .sidebar svg {
  width: var(--icon-size-lg) !important;
  height: var(--icon-size-lg) !important;
}

body button svg,
body .btn svg,
body .button svg,
body .row-action-menu svg,
body .finance-action-menu svg,
body .task-action-line svg,
body .meta svg,
body .chip svg,
body .badge svg {
  width: var(--icon-size-md) !important;
  height: var(--icon-size-md) !important;
}

body .metric-card svg,
body .stat-card svg,
body .kpi-card svg,
body .dashboard-kpi-card svg,
body .documents-kpi-card svg,
body .finance-kpi-card svg,
body .analytics-kpi-card svg,
body .osint-kpi-card svg,
body .settings-summary-card svg,
body .mailing-stat-card svg,
body .tasks-kpi-card svg {
  width: var(--icon-size-lg) !important;
  height: var(--icon-size-lg) !important;
}

body .metric-card strong,
body .stat-card strong,
body .summary-card strong,
body .kpi-card strong,
body .dashboard-kpi-card strong,
body .documents-kpi-grid strong,
body .finance-kpi-card strong,
body .finance-workspace-metric strong,
body .analytics-kpi-card strong,
body .analytics-finance-summary strong,
body .osint-kpi-card strong,
body .settings-summary-card strong,
body .mailing-stat-card strong,
body .tasks-kpi-card strong,
body .settings-readiness-score {
  font-size: var(--font-size-kpi-value) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-black) !important;
}

body .modal,
body .dialog,
body .modal-card,
body .dialog-card,
body .drawer,
body .sheet,
body .confirm-dialog {
  font-size: var(--font-size-body) !important;
  line-height: var(--line-height-normal) !important;
}

body .modal h1,
body .dialog h1,
body .modal-card h1,
body .dialog-card h1,
body .confirm-dialog h1 {
  font-size: var(--font-size-modal-title) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-black) !important;
}

body .case-preview-card,
body .task-side-card,
body .calendar-side-card,
body .planner-side-card,
body .documents-detail-panel,
body .finance-right-column > *,
body .finance-side-card,
body .osint-right-card,
body .right-detail-card {
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-normal) !important;
  overflow-wrap: anywhere;
}

body .case-preview-card h2,
body .task-side-card h2,
body .calendar-side-card h2,
body .planner-side-card h2,
body .documents-detail-panel h2,
body .finance-right-column h2,
body .finance-side-card h2,
body .osint-right-card h2,
body .right-detail-card h2 {
  font-size: var(--font-size-right-panel-title) !important;
  line-height: var(--line-height-snug, 1.3) !important;
}

body .case-preview-card strong,
body .task-side-card strong,
body .calendar-side-card strong,
body .planner-side-card strong,
body .documents-detail-panel strong,
body .finance-side-card strong,
body .right-detail-card strong {
  font-size: var(--font-size-right-panel-value) !important;
  line-height: var(--line-height-normal) !important;
}

body .chart-card text,
body .chart text,
body .finance-chart text,
body .analytics-chart text,
body .osint-chart text,
body .line-chart text,
body .donut-chart text,
body .bar-chart text,
body .axis,
body .chart-label,
body .legend,
body .legend *,
body .priority-legend,
body .priority-legend * {
  font-size: var(--font-size-chart-label) !important;
  line-height: var(--line-height-normal) !important;
}

body .mailing-stat-card,
body .coverage-card,
body .coverage-user,
body .coverage-telegram,
body .coverage-sms,
body .coverage-email {
  min-width: 0 !important;
  overflow: hidden !important;
}

#tasks.view .tasks-kpi-card strong,
#tasks.view .task-side-head h2,
#tasks.view .task-sync-card h2,
#tasks.view .task-priority-card h2,
#tasks.view .task-plan-card h2 {
  font-size: var(--font-size-card-title) !important;
}

#tasks.view .task-sync-step strong,
#tasks.view .task-plan-card strong,
#tasks.view .priority-legend strong,
#tasks.view .priority-legend em {
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-normal) !important;
}

#tasks.view .task-plan-card time {
  font-size: var(--font-size-card-title) !important;
  line-height: var(--line-height-tight) !important;
}

#tasks.view .task-sync-arrow {
  font-size: var(--font-size-section-title) !important;
  line-height: 1 !important;
}

body .finance-operation-row,
body .finance-operation-row *,
body .finance-workspace-row,
body .finance-workspace-row * {
  min-width: 0;
}

body .finance-operation-row .operation-description,
body .finance-operation-row .finance-description,
body .finance-operation-row .operation-title,
body .finance-operation-row .finance-case,
body .finance-operation-row .finance-client {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 1024px) {
  body .dashboard-kpi-card,
  body .documents-kpi-card,
  body .finance-kpi-card,
  body .analytics-kpi-card,
  body .osint-kpi-card,
  body .settings-summary-card,
  body .mailing-stat-card,
  body .tasks-kpi-card {
    min-height: 58px !important;
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  body .view {
    --dense-panel-padding: 10px;
  }
}

@media (max-width: 767px) {
  body .tabs,
  body .tab-list,
  body .finance-tabs,
  body .tasks-tabs,
  body .mailing-tabs,
  body .osint-tabs {
    display: flex;
    flex-wrap: nowrap !important;
    gap: var(--space-3);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body .tabs::-webkit-scrollbar,
  body .tab-list::-webkit-scrollbar,
  body .finance-tabs::-webkit-scrollbar,
  body .tasks-tabs::-webkit-scrollbar,
  body .mailing-tabs::-webkit-scrollbar,
  body .osint-tabs::-webkit-scrollbar {
    display: none;
  }

  body .tabs button,
  body .tab-list button,
  body .finance-tabs button,
  body .tasks-tabs button,
  body .mailing-tabs button,
  body .osint-tabs button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  body .modal,
  body .dialog,
  body .modal-card,
  body .dialog-card,
  body .confirm-dialog {
    max-width: calc(100vw - 24px) !important;
  }
}

/* Final client-screen typography pass. Keep right panels visually aligned with the client table. */
body #clients .clients-side,
body #clients .clients-side *,
body #clients .client-profile-card,
body #clients .client-profile-card * {
  letter-spacing: var(--letter-spacing-normal) !important;
}

body #clients .clients-side h2,
body #clients .client-profile-card h2,
body #clients .profile-section-title {
  font-size: var(--font-size-card-title) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-black) !important;
}

body #clients .clients-side h3,
body #clients .client-profile-card h3,
body #clients .telegram-connect h3,
body #clients .message-preview h3 {
  margin: 0 0 var(--space-2) !important;
  font-size: var(--font-size-table-cell) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-black) !important;
}

body #clients .clients-side p,
body #clients .clients-side span,
body #clients .clients-side label,
body #clients .clients-side textarea,
body #clients .clients-side button,
body #clients .clients-side strong,
body #clients .client-profile-card p,
body #clients .client-profile-card span,
body #clients .client-profile-card label,
body #clients .client-profile-card button,
body #clients .client-profile-card strong {
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-normal) !important;
}

body #clients .clients-side strong,
body #clients .client-profile-card strong,
body #clients .status-line,
body #clients .mailing-grid strong {
  font-weight: var(--font-weight-bold) !important;
}

body #clients .clients-side .muted,
body #clients .client-profile-card .muted,
body #clients #client-mailing-count {
  font-size: var(--font-size-caption) !important;
  line-height: var(--line-height-normal) !important;
  font-weight: var(--font-weight-semibold) !important;
}

body #clients .telegram-connect {
  display: grid !important;
  gap: var(--space-2) !important;
  padding: var(--space-3) !important;
}

body #clients .telegram-connect p {
  max-width: 100% !important;
  margin: 0 !important;
}

body #clients .side-row {
  gap: var(--space-2) !important;
  margin-top: var(--space-1) !important;
}

body #clients .status-line {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-1) !important;
  min-width: 0 !important;
  color: var(--green) !important;
  font-size: var(--font-size-body) !important;
  line-height: var(--line-height-tight) !important;
}

body #clients .message-label span,
body #clients .mailing-grid span,
body #clients .client-select-field > span {
  margin-bottom: var(--space-1) !important;
}

body #clients #client-mailing-text {
  min-height: 96px !important;
  padding: var(--space-2) !important;
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-normal) !important;
  font-weight: var(--font-weight-semibold) !important;
}

body #clients .message-preview {
  min-height: 104px !important;
  margin-bottom: var(--space-3) !important;
  padding: var(--space-3) !important;
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-relaxed) !important;
  font-weight: var(--font-weight-regular) !important;
  white-space: pre-wrap !important;
}

body #clients .message-preview,
body #clients .message-preview * {
  color: var(--text) !important;
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-relaxed) !important;
}

body #clients .clients-side .primary,
body #clients .clients-side .secondary,
body #clients .client-profile-card .primary,
body #clients .client-profile-card .secondary {
  min-height: var(--size-button-height) !important;
  padding: 0 var(--space-3) !important;
  font-size: var(--font-size-button) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
}

body #clients .clients-side .client-screen-select-button,
body #clients .client-profile-card .client-screen-select-button {
  min-height: var(--size-control-height) !important;
  font-size: var(--font-size-input) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
}

/* Final cases inspector pass. The right case card must use the same compact
   OSINT/client scale as the main table, not the older oversized preview text. */
body #cases .case-preview-card,
body #cases .case-preview-card * {
  min-width: 0;
  letter-spacing: var(--letter-spacing-normal) !important;
}

body #cases .case-preview-card {
  gap: var(--space-2) !important;
  padding: 10px !important;
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-normal) !important;
}

body #cases .case-preview-hero {
  grid-template-columns: 28px minmax(0, 1fr) !important;
  gap: var(--space-2) !important;
  margin-bottom: var(--space-2) !important;
}

body #cases .case-preview-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--radius-sm) !important;
}

body #cases .case-preview-icon .ui-icon,
body #cases .case-preview-icon svg {
  width: var(--size-icon-md) !important;
  height: var(--size-icon-md) !important;
}

body #cases .case-preview-hero h2 {
  display: -webkit-box;
  max-width: 100%;
  margin: 0 !important;
  overflow: hidden;
  color: var(--text) !important;
  font-size: var(--font-size-card-title) !important;
  line-height: var(--line-height-snug) !important;
  font-weight: var(--font-weight-black) !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body #cases .case-preview-hero p {
  margin-top: 3px !important;
  overflow: hidden;
  color: var(--muted) !important;
  font-size: var(--font-size-caption) !important;
  line-height: var(--line-height-normal) !important;
  font-weight: var(--font-weight-semibold) !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body #cases .case-preview-pills {
  gap: 6px !important;
  margin-bottom: var(--space-2) !important;
}

body #cases .case-preview-pill-row,
body #cases .case-preview-rows div {
  grid-template-columns: 68px minmax(0, 1fr) !important;
  gap: var(--space-2) !important;
  padding: 5px 0 !important;
}

body #cases .case-preview-pill-row > span,
body #cases .case-preview-rows span {
  color: var(--muted) !important;
  font-size: var(--font-size-caption) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
}

body #cases .case-pill-picker summary {
  min-height: var(--size-control-height) !important;
  grid-template-columns: 18px minmax(0, 1fr) 13px !important;
  gap: 6px !important;
  padding: 0 7px !important;
  border-radius: var(--radius-sm) !important;
}

body #cases .case-pill-picker summary > .ui-icon,
body #cases .case-pill-picker button > span {
  width: 18px !important;
  height: 18px !important;
}

body #cases .case-pill-picker summary .ui-icon svg,
body #cases .case-pill-picker button .ui-icon svg {
  width: 10px !important;
  height: 10px !important;
}

body #cases .case-pill-picker summary strong,
body #cases .case-pill-picker button strong,
body #cases .case-preview-pill strong,
body #cases .case-preview-rows strong,
body #cases .case-preview-rows strong em {
  overflow: hidden;
  color: inherit;
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-normal) !important;
  font-weight: var(--font-weight-bold) !important;
  text-align: right;
  text-overflow: ellipsis;
}

body #cases .case-preview-rows strong {
  display: block;
  justify-self: end;
  max-width: 100%;
}

body #cases .case-preview-rows strong em {
  color: var(--muted) !important;
  font-style: normal !important;
}

body #cases .case-preview-person {
  gap: 5px !important;
}

body #cases .case-preview-summary {
  gap: 5px !important;
  margin-top: 0 !important;
  padding-top: var(--space-2) !important;
}

body #cases .case-preview-summary h3,
body #cases .case-preview-accordion summary strong,
body #cases .case-preview-links button strong {
  margin: 0 !important;
  font-size: var(--font-size-card-title) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-black) !important;
}

body #cases .case-preview-summary p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-relaxed) !important;
  font-weight: var(--font-weight-medium) !important;
}

body #cases .case-preview-links {
  gap: var(--space-2) !important;
  margin-top: var(--space-2) !important;
}

body #cases .case-preview-primary-actions {
  gap: var(--space-2) !important;
}

body #cases .case-preview-links button {
  min-height: var(--size-control-height) !important;
  gap: 6px !important;
  padding: 0 8px !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--font-size-button) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
}

body #cases .case-preview-open .ui-icon,
body #cases .case-preview-edit .ui-icon,
body #cases .case-preview-links button svg {
  width: var(--size-icon-sm) !important;
  height: var(--size-icon-sm) !important;
}

body #cases .case-preview-stats {
  gap: 5px !important;
}

body #cases .case-preview-stat {
  min-height: 40px !important;
  gap: 2px !important;
  padding: 4px 2px !important;
  border-radius: var(--radius-sm) !important;
}

body #cases .case-preview-stat i {
  gap: 3px !important;
  font-size: var(--font-size-caption) !important;
}

body #cases .case-preview-stat .ui-icon {
  width: 15px !important;
  height: 15px !important;
}

body #cases .case-preview-stats strong {
  font-size: var(--font-size-body-sm) !important;
  line-height: 1 !important;
  font-weight: var(--font-weight-black) !important;
}

body #cases .case-preview-stats em,
body #cases .case-preview-links .case-preview-stats em {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--font-size-caption) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body #cases .case-preview-accordion summary {
  min-height: var(--size-control-height) !important;
  gap: 6px !important;
  padding: 0 8px !important;
}

body #cases .case-preview-accordion summary span,
body #cases .case-preview-accordion summary em {
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-black) !important;
}

body #cases .case-stat-popover-head {
  padding: 7px 8px !important;
}

body #cases .case-stat-popover-head strong,
body #cases .case-stat-preview-list .preview-list-row,
body #cases .case-stat-preview-list .preview-list-row * {
  font-size: var(--font-size-caption) !important;
  line-height: var(--line-height-normal) !important;
}

/* Cases right-panel final typography normalization. Keep the inspector compact
   and prevent action buttons from inheriting card-title scale. */
body #cases .case-preview-hero h2 {
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-snug) !important;
}

body #cases .case-preview-summary h3 {
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-tight) !important;
}

body #cases .case-preview-links button,
body #cases .case-preview-links button strong,
body #cases .case-preview-open strong,
body #cases .case-preview-edit {
  font-size: var(--font-size-button) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
}

body #cases .case-preview-rows strong,
body #cases .case-preview-rows strong em,
body #cases .case-pill-picker summary strong,
body #cases .case-pill-picker button strong {
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-normal) !important;
}

body #cases .case-preview-stat {
  min-height: 34px !important;
  padding: 3px 2px !important;
}

body #cases .case-preview-stat .ui-icon {
  width: var(--size-icon-sm) !important;
  height: var(--size-icon-sm) !important;
}

body #cases .case-preview-stats strong {
  font-size: var(--font-size-caption) !important;
}

/* Cases table final compact pass: deadline chips, finance stack and footer
   page-size select should follow the same small SaaS scale as OSINT blocks. */
body #cases .case-list-table th,
body #cases .case-list-table td {
  font-size: var(--font-size-table-cell) !important;
  line-height: var(--line-height-normal) !important;
  vertical-align: middle !important;
}

body #cases .case-list-table th {
  font-size: var(--font-size-table-header) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-black) !important;
}

body #cases .case-list-table tbody tr {
  min-height: 58px !important;
}

body #cases .case-list-table td:nth-child(5) {
  min-width: 118px !important;
  max-width: 126px !important;
  overflow: hidden !important;
}

body #cases .case-deadline-chip {
  width: fit-content !important;
  max-width: 116px !important;
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 7px !important;
  gap: 5px !important;
  border-radius: 999px !important;
  font-size: var(--font-size-body-sm) !important;
  line-height: 1 !important;
  font-weight: var(--font-weight-bold) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

body #cases .case-deadline-chip .ui-icon {
  width: 11px !important;
  height: 11px !important;
  flex: 0 0 11px !important;
}

body #cases .case-deadline-chip strong {
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: var(--font-size-body-sm) !important;
  line-height: 1 !important;
  font-weight: var(--font-weight-black) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #cases .case-finance-summary {
  min-width: 92px !important;
  gap: 2px !important;
  justify-items: start !important;
  font-size: var(--font-size-caption) !important;
  line-height: var(--line-height-tight) !important;
}

body #cases .case-finance-summary strong {
  font-size: var(--font-size-body-sm) !important;
  line-height: 1.05 !important;
  font-weight: var(--font-weight-black) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
  white-space: nowrap !important;
}

body #cases .case-finance-summary span {
  max-width: 116px !important;
  overflow: hidden !important;
  font-size: var(--font-size-caption) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #cases .case-pagination {
  align-items: center !important;
  gap: 10px !important;
  padding-top: 9px !important;
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-tight) !important;
}

body #cases .case-pagination-left {
  position: relative !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body #cases .case-pagination-left > span {
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
  white-space: nowrap !important;
}

body #cases .case-pagination-left .document-custom-select {
  position: relative !important;
  width: 92px !important;
  flex: 0 0 92px !important;
}

body #cases .case-pagination-left .document-custom-select-button {
  position: relative !important;
  justify-content: space-between !important;
  width: 92px !important;
  min-height: 22px !important;
  height: 22px !important;
  gap: 4px !important;
  padding: 0 18px 0 7px !important;
  border-radius: 6px !important;
  font-size: 10.5px !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-semibold) !important;
  box-shadow: none !important;
}

body #cases .case-pagination-left .document-custom-select-button span:first-child {
  display: block !important;
  max-width: 64px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #cases .case-pagination-left .document-custom-select-chevron {
  position: absolute !important;
  top: 50% !important;
  right: 7px !important;
  flex: 0 0 6px !important;
  width: 6px !important;
  height: 6px !important;
  margin: 0 !important;
  transform: translateY(-55%) rotate(45deg) !important;
}

body #cases .case-pagination-left .document-custom-select.is-open .document-custom-select-chevron {
  transform: translateY(-35%) rotate(225deg) !important;
}

body #cases .case-pagination-left .document-custom-select:not(.is-open) .document-custom-select-menu {
  display: none !important;
}

body #cases .case-pagination-left .document-custom-select.is-open .document-custom-select-menu {
  display: block !important;
  grid-template-columns: 1fr !important;
  grid-auto-flow: row !important;
  align-items: stretch !important;
  left: 0 !important;
  right: auto !important;
  bottom: calc(100% + 6px) !important;
  top: auto !important;
  width: 116px !important;
  min-width: 116px !important;
  max-width: min(116px, calc(100vw - 24px)) !important;
  padding: 4px !important;
  border-radius: 9px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, .96) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 12px 28px rgba(15, 42, 71, .14) !important;
}

body #cases .case-pagination-left .document-custom-select-option {
  display: grid !important;
  grid-template-columns: 14px minmax(0, 1fr) !important;
  width: 100% !important;
  justify-content: stretch !important;
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 6px !important;
  gap: 5px !important;
  border-radius: 6px !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 10.5px !important;
  line-height: var(--line-height-tight) !important;
}

body #cases .case-pagination-left .document-custom-select-option:hover,
body #cases .case-pagination-left .document-custom-select-option:focus-visible {
  background: rgba(15, 75, 130, .08) !important;
}

body #cases .case-pagination-left .document-custom-select-option.is-selected {
  background: rgba(53, 130, 220, .13) !important;
}

body #cases .case-pagination-left .document-custom-select-option strong {
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: 10.5px !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-semibold) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #cases .case-pagination button {
  min-width: 28px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  font-size: var(--font-size-button) !important;
}

body #cases .case-materials {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 5px !important;
}

body #cases .case-material-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: var(--font-weight-bold) !important;
  white-space: nowrap !important;
}

body #cases .case-material-badge .ui-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: var(--size-icon-sm) !important;
  height: var(--size-icon-sm) !important;
  min-width: var(--size-icon-sm) !important;
  min-height: var(--size-icon-sm) !important;
  flex: 0 0 var(--size-icon-sm) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  line-height: 0 !important;
}

body #cases .case-material-badge .ui-icon svg {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  flex: 0 0 10px !important;
  stroke-width: 1.9 !important;
}

body #cases .case-material-badge strong {
  display: inline-flex !important;
  align-items: center !important;
  font-size: var(--font-size-caption) !important;
  line-height: 1 !important;
  font-weight: var(--font-weight-black) !important;
  color: currentColor !important;
}

body #cases .case-material-badge.blue {
  border-color: transparent !important;
  background: transparent !important;
  color: #2a6fc7 !important;
}

body #cases .case-material-badge.blue .ui-icon {
  background: #eaf4ff !important;
}

body #cases .case-material-badge.amber {
  border-color: transparent !important;
  background: transparent !important;
  color: #b7791f !important;
}

body #cases .case-material-badge.amber .ui-icon {
  background: #fff3d8 !important;
}

body #cases .case-material-badge.violet {
  border-color: transparent !important;
  background: transparent !important;
  color: #7055d4 !important;
}

body #cases .case-material-badge.violet .ui-icon {
  background: #f1eaff !important;
}

/* Calendar density polish: keep the month useful without giant empty cells. */
@media (min-width: 1024px) {
  body #calendar .calendar-screen {
    gap: 8px !important;
  }

  body #calendar .calendar-toolbar,
  body #calendar .calendar-filter-panel,
  body #calendar .calendar-layout,
  body #calendar .calendar-left-stack,
  body #calendar .calendar-side {
    gap: 8px !important;
  }

  body #calendar .calendar-layout {
    grid-template-columns: minmax(0, 1fr) minmax(248px, 300px) !important;
  }

  body #calendar .calendar-main-card {
    overflow: hidden !important;
    min-width: 0 !important;
  }

  body #calendar .calendar-weekdays span {
    min-height: 32px !important;
    font-size: var(--font-size-table-header) !important;
    line-height: var(--line-height-tight) !important;
  }

  body #calendar .calendar-grid.month-view .day {
    height: clamp(90px, 8vh, 116px) !important;
    min-height: clamp(90px, 8vh, 116px) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 7px 8px !important;
    position: relative !important;
  }

  body #calendar .calendar-grid.week-view .day {
    min-height: 220px !important;
    padding: 8px !important;
  }

  body #calendar .calendar-grid.day-view .day {
    min-height: 320px !important;
    padding: 9px !important;
  }

  body #calendar .day-num {
    margin-bottom: 4px !important;
    font-size: var(--font-size-caption) !important;
    line-height: 1 !important;
  }

  body #calendar .event-chip {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    border-radius: 6px !important;
    font-size: 9px !important;
    line-height: 1.14 !important;
    font-weight: var(--font-weight-semibold) !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
  }

  body #calendar .event-chip strong {
    font-size: 9.5px !important;
    line-height: 1.1 !important;
    font-weight: var(--font-weight-black) !important;
  }

  body #calendar .event-chip span {
    display: block !important;
    margin-top: 2px !important;
    font-size: 8.8px !important;
    line-height: 1.1 !important;
    font-weight: var(--font-weight-bold) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body #calendar .calendar-day-more {
    width: auto !important;
    min-width: 38px !important;
    min-height: 20px !important;
    margin-top: 1px !important;
    border: 1px solid #d6e5f6 !important;
    border-radius: 999px !important;
    background: rgba(237, 245, 255, 0.92) !important;
    color: var(--action-dark) !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    font-weight: var(--font-weight-bold) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 3px 7px !important;
  }

  body #calendar .calendar-day-more span {
    font-size: 9px !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
  }

  body #calendar .calendar-day-more-wrap {
    position: relative !important;
    align-self: flex-start !important;
    z-index: 4 !important;
  }

  body #calendar .calendar-day-popover {
    position: absolute !important;
    left: 0 !important;
    top: calc(100% + 4px) !important;
    width: min(220px, 78vw) !important;
    max-height: 220px !important;
    overflow-y: auto !important;
    display: grid !important;
    gap: 4px !important;
    padding: 7px !important;
    border: 1px solid #d9e6f5 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 18px 44px rgba(20, 47, 78, 0.18) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-3px) !important;
    transition: opacity 0.16s ease, transform 0.16s ease !important;
  }

  body #calendar .calendar-day-more-wrap:hover .calendar-day-popover,
  body #calendar .calendar-day-more-wrap:focus-within .calendar-day-popover {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  body #calendar .calendar-popover-event {
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    padding: 6px 7px !important;
    text-align: left !important;
    color: #17324d !important;
    font-size: 9px !important;
    line-height: 1.18 !important;
    font-weight: var(--font-weight-bold) !important;
    cursor: pointer !important;
  }

  body #calendar .calendar-popover-event strong {
    font-size: 9px !important;
    font-weight: var(--font-weight-black) !important;
  }

  body #calendar .calendar-popover-event span {
    display: block !important;
    margin-top: 2px !important;
    color: #5c6a7d !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body #calendar .calendar-popover-event:hover {
    filter: brightness(0.98) !important;
  }

  body #calendar #event-card,
  body #calendar .calendar-reminders {
    padding: 10px !important;
    border-radius: 10px !important;
  }

  body #calendar .event-card-head,
  body #calendar .event-card-title,
  body #calendar .calendar-reminders-head {
    margin-bottom: 8px !important;
  }

  body #calendar .event-card-head h2,
  body #calendar #event-card > h2,
  body #calendar .calendar-reminders h2,
  body #calendar .calendar-reminders-head h2 {
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: var(--font-weight-bold) !important;
  }

  body #calendar .event-card-title {
    grid-template-columns: 8px minmax(0, 1fr) auto !important;
    gap: 7px !important;
  }

  body #calendar .event-card-title strong {
    font-size: var(--font-size-body-sm) !important;
    line-height: var(--line-height-snug) !important;
  }

  body #calendar .event-info-list {
    gap: 8px !important;
  }

  body #calendar .event-info-row {
    grid-template-columns: 18px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  body #calendar .event-info-row .ui-icon {
    width: 16px !important;
    height: 16px !important;
  }

  body #calendar .event-info-row strong {
    font-size: var(--font-size-body-sm) !important;
    line-height: var(--line-height-snug) !important;
  }

  body #calendar .event-info-row em,
  body #calendar .event-description,
  body #calendar .event-reminder-log span,
  body #calendar .calendar-reminders p {
    font-size: var(--font-size-caption) !important;
    line-height: var(--line-height-normal) !important;
  }

  body #calendar .event-description {
    margin: 9px 0 !important;
    padding-left: 27px !important;
  }

  body #calendar .event-reminder-log {
    gap: 4px !important;
    margin-bottom: 9px !important;
    padding: 8px !important;
    border-radius: 8px !important;
  }

  body #calendar .event-card-actions {
    gap: 8px !important;
  }

  body #calendar .event-card-actions button {
    min-height: 30px !important;
    font-size: 9px !important;
  }

  body #calendar .active-reminder-icons {
    gap: 12px !important;
    font-size: 8.5px !important;
  }

  body #calendar .calendar-events-list {
    gap: 0 !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }

  body #calendar .calendar-events-head,
  body #calendar .calendar-reminders-head {
    gap: 8px !important;
    margin-bottom: 7px !important;
  }

  body #calendar .calendar-events-head h2,
  body #calendar .calendar-reminders-head h2,
  body #calendar .calendar-reminders h2 {
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  body #calendar .calendar-events-head .ghost,
  body #calendar .calendar-reminders-head .ghost {
    min-height: 26px !important;
    gap: 5px !important;
    font-size: 8.5px !important;
    line-height: 1.1 !important;
  }

  body #calendar .calendar-events-head .ghost .ui-icon,
  body #calendar .calendar-reminders-head .ghost .ui-icon {
    width: 12px !important;
    height: 12px !important;
  }

  body #calendar .calendar-events-list > button {
    grid-template-columns: 8px minmax(0, 1fr) 68px 42px 76px !important;
    gap: 7px !important;
    min-height: 42px !important;
    padding: 7px 2px !important;
  }

  body #calendar .calendar-events-list .event-dot {
    width: 7px !important;
    height: 7px !important;
  }

  body #calendar .calendar-events-list strong,
  body #calendar .upcoming-event-main strong {
    font-size: 9.5px !important;
    line-height: 1.18 !important;
    font-weight: var(--font-weight-bold) !important;
  }

  body #calendar .calendar-events-list em,
  body #calendar .calendar-events-list time,
  body #calendar .upcoming-event-time {
    margin-top: 2px !important;
    font-size: 8.25px !important;
    line-height: 1.15 !important;
    font-weight: var(--font-weight-semibold) !important;
  }

  body #calendar .calendar-events-list .badge {
    min-width: 62px !important;
    min-height: 18px !important;
    padding: 0 6px !important;
    font-size: 7.5px !important;
    line-height: 1 !important;
  }

  body #calendar .calendar-reminders {
    gap: 9px !important;
    min-height: 0 !important;
  }

  body #calendar .reminder-row {
    grid-template-columns: 24px minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  body #calendar .reminder-row > .ui-icon {
    width: 22px !important;
    height: 22px !important;
    padding: 5px !important;
    border-radius: 6px !important;
  }

  body #calendar .reminder-row strong {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  body #calendar .reminder-row span,
  body #calendar .reminder-row small,
  body #calendar .reminder-status {
    font-size: 7.75px !important;
    line-height: 1.2 !important;
  }

  body #calendar .active-reminder-icons .ui-icon {
    width: 12px !important;
    height: 12px !important;
  }
}

/* Client screen final compact pass: keep rows dense and actions close to the table edge. */
body #clients .clients-layout {
  gap: 12px !important;
}

body #clients .clients-left,
body #clients .clients-side {
  gap: 12px !important;
}

body #clients .clients-table-card,
body #clients .side-card {
  padding: 12px !important;
}

body #clients .clients-table {
  width: 900px !important;
  max-width: 100% !important;
  min-width: 760px !important;
  table-layout: fixed !important;
}

body #clients .clients-table th,
body #clients .clients-table td {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

body #clients .clients-table th:first-child,
body #clients .clients-table td:first-child {
  width: 34px !important;
}

body #clients .clients-table th:nth-child(2),
body #clients .clients-table td:nth-child(2) {
  width: 170px !important;
}

body #clients .clients-table th:nth-child(3),
body #clients .clients-table td:nth-child(3) {
  width: 120px !important;
}

body #clients .clients-table th:nth-child(4),
body #clients .clients-table td:nth-child(4) {
  width: 170px !important;
}

body #clients .clients-table th:nth-child(5),
body #clients .clients-table td:nth-child(5) {
  width: 210px !important;
}

body #clients .clients-table th:nth-child(6),
body #clients .clients-table td:nth-child(6) {
  width: 96px !important;
}

body #clients .clients-table th:nth-child(7),
body #clients .clients-table td:nth-child(7) {
  width: 54px !important;
  text-align: center !important;
}

body #clients .clients-table th:nth-child(8),
body #clients .clients-table td:nth-child(8) {
  width: 48px !important;
  text-align: right !important;
}

body #clients .clients-table td.clients-row-actions {
  padding-right: 4px !important;
}

body #clients .clients-table .client-name-cell a,
body #clients .clients-table td {
  overflow-wrap: anywhere !important;
}

/* Clients table compact override: keep a real table, but shrink the card to the actual columns. */
@media (min-width: 1024px) {
  .clients-table-card.table-wrap {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  .clients-table-card .clients-table {
    width: 100% !important;
    min-width: 860px !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  .clients-table-card .clients-table th,
  .clients-table-card .clients-table td {
    padding: 8px 6px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .clients-table-card .clients-table th:first-child,
  .clients-table-card .clients-table td:first-child {
    width: 32px !important;
  }

  .clients-table-card .clients-table th:nth-child(2),
  .clients-table-card .clients-table td:nth-child(2) {
    width: 180px !important;
  }

  .clients-table-card .clients-table th:nth-child(3),
  .clients-table-card .clients-table td:nth-child(3) {
    width: 120px !important;
  }

  .clients-table-card .clients-table th:nth-child(4),
  .clients-table-card .clients-table td:nth-child(4) {
    width: 180px !important;
  }

  .clients-table-card .clients-table th:nth-child(5),
  .clients-table-card .clients-table td:nth-child(5) {
    width: 205px !important;
  }

  .clients-table-card .clients-table th:nth-child(6),
  .clients-table-card .clients-table td:nth-child(6) {
    width: 86px !important;
  }

  .clients-table-card .clients-table th:nth-child(7),
  .clients-table-card .clients-table td:nth-child(7) {
    width: 42px !important;
  }

  .clients-table-card .clients-table th:nth-child(8),
  .clients-table-card .clients-table td:nth-child(8) {
    width: 42px !important;
  }

  .clients-table-card .clients-table th:nth-child(7),
  .clients-table-card .clients-table td:nth-child(7),
  .clients-table-card .clients-table th:nth-child(8),
  .clients-table-card .clients-table td:nth-child(8) {
    text-align: center !important;
  }

  .clients-table-card .clients-table td.clients-row-actions {
    overflow: visible !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .clients-table-card .clients-table .row-action-menu-wrap {
    margin-left: 0 !important;
  }

  .clients-table-card .clients-table .row-action-trigger {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
  }

  .clients-table-card .table-footer {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  body #clients .clients-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body #clients .clients-left,
  body #clients .clients-table-card,
  body #clients .client-profile-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Clients EOF system override: keep list compact, remove mobile card noise, and keep Telegram/actions together. */
body #clients .clients-table-card,
body #clients .client-profile-card {
  box-sizing: border-box !important;
}

body #clients .clients-table td.clients-telegram-actions,
body #clients .clients-table th:nth-child(7) {
  text-align: left !important;
}

body #clients .clients-telegram-actions-inner {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

body #clients .clients-telegram-actions-inner .telegram-icon {
  display: inline-flex !important;
  flex: 0 0 16px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  color: var(--blue) !important;
}

body #clients .clients-telegram-actions-inner .telegram-icon.telegram-icon-active {
  color: var(--semantic-green) !important;
}

body #clients .clients-telegram-actions-inner .telegram-icon svg,
body #clients .clients-telegram-actions-inner .telegram-icon .ui-icon {
  width: 15px !important;
  height: 15px !important;
}

body #clients .clients-telegram-actions-inner .row-action-menu-wrap,
body #clients .clients-telegram-actions-inner .row-action-menu-wrap.clients-actions-menu {
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
}

body #clients .clients-telegram-actions-inner .row-action-trigger {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 8px !important;
}

@media (min-width: 1024px) {
  body #clients {
    --clients-side-width: clamp(286px, 21vw, 312px);
    --clients-action-col: 72px;
  }

  body #clients .clients-layout {
    grid-template-columns: minmax(0, 1fr) var(--clients-side-width) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  body #clients .clients-left,
  body #clients .clients-table-card,
  body #clients .client-profile-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body #clients .clients-table-card,
  body #clients .client-profile-card {
    padding: 12px !important;
  }

  body #clients .clients-table-card {
    overflow: hidden !important;
  }

  body #clients .clients-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  body #clients .clients-table th,
  body #clients .clients-table td {
    padding: 7px 8px !important;
    vertical-align: middle !important;
  }

  body #clients .clients-table th:nth-child(1),
  body #clients .clients-table td:nth-child(1) {
    width: 32px !important;
  }

  body #clients .clients-table th:nth-child(2),
  body #clients .clients-table td:nth-child(2) {
    width: 20% !important;
  }

  body #clients .clients-table th:nth-child(3),
  body #clients .clients-table td:nth-child(3) {
    width: 116px !important;
  }

  body #clients .clients-table th:nth-child(4),
  body #clients .clients-table td:nth-child(4) {
    width: 20% !important;
  }

  body #clients .clients-table th:nth-child(5),
  body #clients .clients-table td:nth-child(5) {
    width: 28% !important;
  }

  body #clients .clients-table th:nth-child(6),
  body #clients .clients-table td:nth-child(6) {
    width: 86px !important;
  }

  body #clients .clients-table th:nth-child(7),
  body #clients .clients-table td:nth-child(7) {
    width: var(--clients-action-col) !important;
    min-width: var(--clients-action-col) !important;
    max-width: var(--clients-action-col) !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

@media (max-width: 1023px) {
  body #clients .clients-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body #clients .clients-left,
  body #clients .clients-side,
  body #clients .clients-table-card,
  body #clients .client-profile-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 768px) {
  body #clients .clients-table-card {
    padding: 10px !important;
    overflow: visible !important;
  }

  body #clients .clients-table,
  body #clients .clients-table thead,
  body #clients .clients-table tbody,
  body #clients .clients-table tr,
  body #clients .clients-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body #clients .clients-table thead {
    display: none !important;
  }

  body #clients .clients-table tbody {
    display: grid !important;
    gap: 8px !important;
  }

  body #clients .clients-table tbody tr {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) 54px !important;
    gap: 5px 8px !important;
    align-items: start !important;
    padding: 10px !important;
    min-height: 0 !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body #clients .clients-table td {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    font-size: var(--font-size-table-cell) !important;
    line-height: 1.25 !important;
  }

  body #clients .clients-table td::before {
    content: none !important;
    display: none !important;
  }

  body #clients .clients-table td:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    align-self: start !important;
    padding-top: 1px !important;
    overflow: visible !important;
  }

  body #clients .clients-table td:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  body #clients .clients-table td:nth-child(3) {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  body #clients .clients-table td:nth-child(4) {
    grid-column: 2 / span 2 !important;
    grid-row: 2 !important;
  }

  body #clients .clients-table td:nth-child(5) {
    grid-column: 2 / span 2 !important;
    grid-row: 3 !important;
  }

  body #clients .clients-table td:nth-child(6) {
    grid-column: 2 !important;
    grid-row: 4 !important;
  }

  body #clients .clients-table td.clients-telegram-actions {
    grid-column: 4 !important;
    grid-row: 1 / span 4 !important;
    justify-self: end !important;
    align-self: start !important;
    width: 54px !important;
    max-width: 54px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body #clients .clients-telegram-actions-inner {
    gap: 8px !important;
  }

  body #clients .client-name-cell,
  body #clients .client-name-cell a,
  body #clients .clients-table td:nth-child(n + 2):nth-child(-n + 6) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  body #clients .client-name-cell a,
  body #clients .clients-table td:nth-child(3),
  body #clients .clients-table td:nth-child(4),
  body #clients .clients-table td:nth-child(5) {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  body #clients .clients-table-card .table-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    padding-top: 10px !important;
  }
}

@media (max-width: 430px) {
  body #clients .clients-table tbody tr {
    grid-template-columns: 24px minmax(0, 1fr) 54px !important;
    gap: 5px 8px !important;
    padding: 9px !important;
  }

  body #clients .clients-table td:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 5 !important;
  }

  body #clients .clients-table td:nth-child(2),
  body #clients .clients-table td:nth-child(3),
  body #clients .clients-table td:nth-child(4),
  body #clients .clients-table td:nth-child(5),
  body #clients .clients-table td:nth-child(6) {
    grid-column: 2 !important;
  }

  body #clients .clients-table td:nth-child(2) { grid-row: 1 !important; }
  body #clients .clients-table td:nth-child(3) { grid-row: 2 !important; }
  body #clients .clients-table td:nth-child(4) { grid-row: 3 !important; }
  body #clients .clients-table td:nth-child(5) { grid-row: 4 !important; }
  body #clients .clients-table td:nth-child(6) { grid-row: 5 !important; }

  body #clients .clients-table td.clients-telegram-actions {
    grid-column: 3 !important;
    grid-row: 1 / span 5 !important;
  }
}

/* Clients mobile hard reset for old labeled-card cells. */
@media (max-width: 768px) {
  body #clients .clients-table td:not(:first-child):not(.clients-telegram-actions) {
    display: block !important;
    grid-template-columns: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

body #clients .clients-table td:not(:first-child):not(.clients-telegram-actions)::before {
    content: none !important;
    display: none !important;
  }
}

/* Calendar true final lock: keep this at EOF so legacy calendar layers cannot override it. */
body #calendar .calendar-toolbar {
  grid-template-columns: auto auto auto auto minmax(130px, 1fr) minmax(210px, 320px) !important;
  gap: 8px !important;
}

body #calendar .calendar-filter-panel {
  grid-template-columns: repeat(5, minmax(116px, 1fr)) minmax(128px, .85fr) auto auto !important;
  gap: 8px !important;
}

body #calendar .calendar-layout {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px) !important;
  gap: 10px !important;
}

body #calendar .calendar-side {
  gap: 10px !important;
}

body #calendar .calendar-toolbar .primary,
body #calendar .calendar-toolbar .secondary,
body #calendar .calendar-toolbar input,
body #calendar .calendar-title-button,
body #calendar .calendar-filter-panel input,
body #calendar .calendar-overdue-filter,
body #calendar .calendar-reset-filter,
body #calendar .calendar-filter-select .document-custom-select-button {
  min-height: 32px !important;
  height: 32px !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--font-size-button) !important;
  line-height: 1.1 !important;
}

body #calendar .calendar-grid.month-view .day {
  min-height: 82px !important;
  height: clamp(82px, 7vh, 98px) !important;
  padding: 6px !important;
}

body #calendar .calendar-day-more-wrap.is-open .calendar-day-popover,
body #calendar .calendar-day-more-wrap:hover .calendar-day-popover,
body #calendar .calendar-day-more-wrap:focus-within .calendar-day-popover {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

body #calendar #event-card,
body #calendar .calendar-reminders,
body #calendar .calendar-events-list {
  padding: 10px 12px !important;
  border-radius: var(--radius-md) !important;
}

body #calendar .event-card-head h2,
body #calendar #event-card > h2,
body #calendar .calendar-events-head h2,
body #calendar .calendar-reminders-head h2,
body #calendar .calendar-reminders h2 {
  font-size: var(--font-size-card-title) !important;
  line-height: 1.18 !important;
}

body #calendar .event-info-row {
  grid-template-columns: 16px minmax(0, 1fr) !important;
  gap: 7px !important;
}

body #calendar .event-info-row .ui-icon,
body #calendar .event-card-actions .ui-icon,
body #calendar .calendar-reminders-head .ghost .ui-icon {
  width: 14px !important;
  height: 14px !important;
}

body #calendar .event-card-title strong,
body #calendar .event-info-row strong,
body #calendar .reminder-row strong,
body #calendar .calendar-events-list strong,
body #calendar .upcoming-event-main strong {
  font-size: var(--font-size-body-sm) !important;
  line-height: 1.24 !important;
}

body #calendar .event-info-row em,
body #calendar .event-description,
body #calendar .event-reminder-log span,
body #calendar .calendar-reminders p,
body #calendar .reminder-row span,
body #calendar .reminder-row small,
body #calendar .reminder-status,
body #calendar .calendar-events-list em,
body #calendar .calendar-events-list time,
body #calendar .upcoming-event-time {
  font-size: var(--font-size-caption) !important;
  line-height: 1.28 !important;
}

body #calendar .calendar-events-list > button {
  grid-template-columns: 8px minmax(0, 1fr) 78px 48px 76px !important;
  gap: 8px !important;
  min-height: 38px !important;
  padding: 6px 0 !important;
}

@media (max-width: 1279px) and (min-width: 1024px) {
  body #calendar .calendar-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 2fr) auto auto !important;
  }

  body #calendar .calendar-toolbar .primary,
  body #calendar .calendar-mode-group,
  body #calendar .calendar-toolbar input,
  body #calendar .calendar-date-picker {
    width: 100% !important;
  }

  body #calendar .calendar-filter-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body #calendar .calendar-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #calendar .calendar-side {
    position: static !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1023px) {
  body #calendar .calendar-toolbar,
  body #calendar .calendar-layout,
  body #calendar .calendar-side {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #calendar .calendar-filter-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body #calendar .calendar-toolbar > *,
  body #calendar .calendar-toolbar input,
  body #calendar .calendar-date-picker,
  body #calendar .calendar-filter-panel > * {
    width: 100% !important;
    max-width: none !important;
  }

  body #calendar .calendar-mode-group {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body #calendar .calendar-arrows {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body #calendar .calendar-grid.month-view .day {
    min-height: 58px !important;
    height: auto !important;
    padding: 5px !important;
  }

  body #calendar .calendar-day-popover {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    margin-top: 4px !important;
  }

  body #calendar .calendar-events-list > button {
    grid-template-columns: 8px minmax(0, 1fr) auto auto !important;
    min-height: 36px !important;
  }

  body #calendar .calendar-events-list .badge {
    grid-column: 2 / -1 !important;
    justify-self: start !important;
  }
}

@media (max-width: 520px) {
  body #calendar .calendar-filter-panel {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #calendar .calendar-events-list > button {
    grid-template-columns: 7px minmax(0, 1fr) !important;
  }

body #calendar .calendar-events-list time,
body #calendar .calendar-events-list .upcoming-event-time,
body #calendar .calendar-events-list .badge {
    grid-column: 2 !important;
    justify-self: start !important;
  }
}

/* Clients post-audit lock: keep Telegram/action cells compact and stop the
   right mailing column from crushing the table on laptop widths. */
body #clients .clients-layout {
  align-items: start !important;
}

body #clients .clients-left,
body #clients .clients-table-card,
body #clients .client-profile-card {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 1280px) {
  body #clients {
    --clients-side-width: clamp(288px, 20vw, 316px);
    --clients-action-col: 76px;
  }

  body #clients .clients-layout {
    grid-template-columns: minmax(0, 1fr) var(--clients-side-width) !important;
    gap: 12px !important;
  }

  body #clients .clients-side {
    width: var(--clients-side-width) !important;
    max-width: var(--clients-side-width) !important;
  }
}

@media (min-width: 769px) and (max-width: 1279px) {
  body #clients .clients-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body #clients .clients-side {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (min-width: 769px) {
  body #clients .clients-table-card {
    overflow: hidden !important;
  }

  body #clients .clients-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  body #clients .clients-table th,
  body #clients .clients-table td {
    padding: 7px 8px !important;
  }

  body #clients .clients-table th:nth-child(1),
  body #clients .clients-table td:nth-child(1) {
    width: 32px !important;
  }

  body #clients .clients-table th:nth-child(2),
  body #clients .clients-table td:nth-child(2) {
    width: 20% !important;
  }

  body #clients .clients-table th:nth-child(3),
  body #clients .clients-table td:nth-child(3) {
    width: 116px !important;
  }

  body #clients .clients-table th:nth-child(4),
  body #clients .clients-table td:nth-child(4) {
    width: 20% !important;
  }

  body #clients .clients-table th:nth-child(5),
  body #clients .clients-table td:nth-child(5) {
    width: 28% !important;
  }

  body #clients .clients-table th:nth-child(6),
  body #clients .clients-table td:nth-child(6) {
    width: 86px !important;
  }

  body #clients .clients-table th:nth-child(7),
  body #clients .clients-table td:nth-child(7) {
    width: var(--clients-action-col, 76px) !important;
    min-width: var(--clients-action-col, 76px) !important;
    max-width: var(--clients-action-col, 76px) !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    text-align: left !important;
  }

  body #clients .clients-table th:nth-child(7) {
    white-space: nowrap !important;
    font-size: var(--font-size-table-header) !important;
  }

  body #clients .clients-table td.clients-telegram-actions {
    overflow: visible !important;
  }

  body #clients .clients-telegram-actions-inner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon {
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon svg,
  body #clients .clients-telegram-actions-inner .telegram-icon .ui-icon {
    width: 15px !important;
    height: 15px !important;
  }

  body #clients .clients-telegram-actions-inner .row-action-menu-wrap,
  body #clients .clients-telegram-actions-inner .clients-actions-menu {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
  }

  body #clients .clients-telegram-actions-inner .row-action-trigger {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    border-radius: 8px !important;
  }
}

/* Settings/OSINT final audit lock: compact emails and very narrow tabs must not overflow. */
body #settings .settings-user-main span {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 360px) {
  body #osint .osint-tabs,
  body #osint .osint-subtabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  body #osint .osint-tabs::-webkit-scrollbar,
  body #osint .osint-subtabs::-webkit-scrollbar {
    display: none !important;
  }

  body #osint .osint-tabs button,
  body #osint .osint-subtabs button {
    flex: 0 0 max-content !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    white-space: nowrap !important;
  }
}

/* Tasks final audit lock: tablet card cells and long task titles stay measurable and readable. */
@media (max-width: 1279px) {
  body #tasks .task-title-cell strong {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    line-height: 1.25 !important;
  }

  body #tasks .tasks-table tbody td:nth-child(2),
  body #tasks .tasks-table tbody td:nth-child(6) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Final audit lock: hidden accessibility/status text must not stretch compact tables. */
body #cases .case-list-table .case-status-icon:not(:hover):not(:focus-visible)::before,
body #cases .case-list-table .case-status-icon:not(:hover):not(:focus-visible)::after,
body .dashboard-row .dashboard-status-icon:not(:hover):not(:focus-visible)::before,
body .dashboard-row .dashboard-status-icon:not(:hover):not(:focus-visible)::after {
  display: none !important;
}

body #cases .case-list-table .case-status-icon + .sr-only,
body #cases .case-list-table .sr-only {
  position: absolute !important;
  inset: auto !important;
  display: block !important;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  font-size: 1px !important;
  line-height: 1 !important;
}

body #cases .case-list-table .case-finance-summary {
  min-width: 0 !important;
  max-width: 100% !important;
}

body #cases .case-list-table .case-finance-summary strong {
  font-size: var(--font-size-body-sm) !important;
  line-height: 1.12 !important;
  letter-spacing: var(--letter-spacing-normal) !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #cases .case-list-table .case-finance-summary span {
  font-size: 11px !important;
  line-height: 1.12 !important;
  letter-spacing: var(--letter-spacing-normal) !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #cases .advocate-photo > span,
body .advocate-photo.mini > span {
  display: none !important;
}

/* Calendar event chips: one compact preview line plus optional meta, no cell stretching. */
body #calendar .event-chip {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
  grid-template-rows: 12px 10px !important;
  gap: 0 3px !important;
  align-items: start !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  padding: 3px 5px !important;
  overflow: hidden !important;
}

body #calendar .event-chip strong,
body #calendar .event-chip .event-chip-title,
body #calendar .event-chip .event-chip-meta {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #calendar .event-chip strong {
  grid-column: 1 !important;
  grid-row: 1 !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
}

body #calendar .event-chip .event-chip-title {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
  font-weight: var(--font-weight-bold) !important;
}

body #calendar .event-chip strong + .event-chip-title {
  grid-column: 2 !important;
}

body #calendar .event-chip .event-chip-meta {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  margin-top: 0 !important;
  font-size: 7.5px !important;
  line-height: 1.1 !important;
  font-weight: var(--font-weight-semibold) !important;
}

body #calendar .calendar-popover-event .event-chip-title,
body #calendar .calendar-popover-event .event-chip-meta {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Tasks audit lock: keep accessibility text invisible after all responsive table overrides. */
body #tasks .tasks-table td:nth-child(6) {
  overflow: visible !important;
}

body #tasks .tasks-table .task-status-icon + .sr-only,
body #tasks .tasks-table .sr-only {
  position: absolute !important;
  inset: auto !important;
  display: block !important;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  font-size: 1px !important;
  line-height: 1 !important;
}

body #tasks .task-subtasks-popover:not([open]) .task-subtasks-menu {
  display: none !important;
}

body #tasks .task-subtasks-popover[open] .task-subtasks-menu {
  display: grid !important;
}

body #tasks .tasks-table .task-status-icon:not(:hover):not(:focus-visible)::before,
body #tasks .tasks-table .task-status-icon:not(:hover):not(:focus-visible)::after {
  display: none !important;
}

body .dashboard-row .dashboard-status-icon:not(:hover):not(:focus-visible)::before,
body .dashboard-row .dashboard-status-icon:not(:hover):not(:focus-visible)::after {
  display: none !important;
}

@media (max-width: 374px) {
  body #tasks .task-title-cell strong {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
  }
}

/* Absolute EOF lock: documents laptop layout must override every legacy desktop rule above. */
@media (min-width: 1024px) and (max-width: 1399px) {
  body #documents.view-section.active .documents-layout,
  body #documents .documents-layout {
    grid-template-columns: clamp(216px, 18vw, 248px) minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  body #documents.view-section.active .documents-side,
  body #documents .documents-side {
    grid-column: 1 / -1 !important;
    position: static !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body #documents .documents-table-card,
  body #documents .documents-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body #documents .documents-table {
    table-layout: fixed !important;
  }

  body #documents .documents-table th,
  body #documents .documents-table td {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  body #documents .documents-table th:nth-child(1),
  body #documents .documents-table td:nth-child(1) { width: 30% !important; }
  body #documents .documents-table th:nth-child(2),
  body #documents .documents-table td:nth-child(2) { width: 17% !important; }
  body #documents .documents-table th:nth-child(3),
  body #documents .documents-table td:nth-child(3) { width: 16% !important; }
  body #documents .documents-table th:nth-child(4),
  body #documents .documents-table td:nth-child(4) { width: 9% !important; }
  body #documents .documents-table th:nth-child(5),
  body #documents .documents-table td:nth-child(5) { width: 13% !important; }
  body #documents .documents-table th:nth-child(6),
  body #documents .documents-table td:nth-child(6) { width: 10% !important; }
  body #documents .documents-table th:nth-child(7),
  body #documents .documents-table td:nth-child(7) { width: 34px !important; }
}

/* Absolute EOF lock: documents laptop layout must override every legacy desktop rule above. */
@media (min-width: 1024px) and (max-width: 1399px) {
  body #documents.view-section.active .documents-layout,
  body #documents .documents-layout {
    grid-template-columns: clamp(216px, 18vw, 248px) minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  body #documents.view-section.active .documents-side,
  body #documents .documents-side {
    grid-column: 1 / -1 !important;
    position: static !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body #documents .documents-table-card,
  body #documents .documents-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body #documents .documents-table {
    table-layout: fixed !important;
  }

  body #documents .documents-table th,
  body #documents .documents-table td {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  body #documents .documents-table th:nth-child(1),
  body #documents .documents-table td:nth-child(1) { width: 30% !important; }
  body #documents .documents-table th:nth-child(2),
  body #documents .documents-table td:nth-child(2) { width: 17% !important; }
  body #documents .documents-table th:nth-child(3),
  body #documents .documents-table td:nth-child(3) { width: 16% !important; }
  body #documents .documents-table th:nth-child(4),
  body #documents .documents-table td:nth-child(4) { width: 9% !important; }
  body #documents .documents-table th:nth-child(5),
  body #documents .documents-table td:nth-child(5) { width: 13% !important; }
  body #documents .documents-table th:nth-child(6),
  body #documents .documents-table td:nth-child(6) { width: 10% !important; }
  body #documents .documents-table th:nth-child(7),
  body #documents .documents-table td:nth-child(7) { width: 34px !important; }
}

/* Laptop documents final lock: on narrow desktop widths the preview panel must
   move below the document table, otherwise the table collapses into unreadable columns. */
@media (min-width: 1024px) and (max-width: 1399px) {
  body #documents.view-section.active .documents-layout,
  body #documents .documents-layout {
    grid-template-columns: clamp(216px, 18vw, 248px) minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  body #documents.view-section.active .documents-side,
  body #documents .documents-side {
    grid-column: 1 / -1 !important;
    position: static !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body #documents .documents-table-card,
  body #documents .documents-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body #documents .documents-table {
    table-layout: fixed !important;
  }

  body #documents .documents-table th,
  body #documents .documents-table td {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  body #documents .documents-table th:nth-child(1),
  body #documents .documents-table td:nth-child(1) { width: 30% !important; }
  body #documents .documents-table th:nth-child(2),
  body #documents .documents-table td:nth-child(2) { width: 17% !important; }
  body #documents .documents-table th:nth-child(3),
  body #documents .documents-table td:nth-child(3) { width: 16% !important; }
  body #documents .documents-table th:nth-child(4),
  body #documents .documents-table td:nth-child(4) { width: 9% !important; }
  body #documents .documents-table th:nth-child(5),
  body #documents .documents-table td:nth-child(5) { width: 13% !important; }
  body #documents .documents-table th:nth-child(6),
  body #documents .documents-table td:nth-child(6) { width: 10% !important; }
  body #documents .documents-table th:nth-child(7),
  body #documents .documents-table td:nth-child(7) { width: 34px !important; }
}

/* Final visual-audit closure: keep dense screens readable after all legacy overrides. */
body .dashboard-row {
  overflow: hidden !important;
}

body .dashboard-row span,
body .dashboard-row strong,
body .dashboard-row small {
  min-width: 0 !important;
}

body .dashboard-row strong,
body .dashboard-row small {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .dashboard-row strong {
  font-size: var(--font-size-body-sm) !important;
  line-height: 1.22 !important;
}

body .dashboard-row small,
body .dashboard-row i,
body .dashboard-row b {
  font-size: var(--font-size-caption) !important;
  line-height: 1.22 !important;
}

@media (min-width: 1280px) and (max-width: 1399px) {
  body #documents .documents-layout {
    grid-template-columns: clamp(218px, 18vw, 238px) minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body #documents .documents-side {
    grid-column: 1 / -1 !important;
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
  }

  body #documents .documents-table th,
  body #documents .documents-table td {
    padding-inline: 7px !important;
  }

  body #documents .documents-table th:nth-child(1),
  body #documents .documents-table td:nth-child(1) {
    width: 28% !important;
  }

  body #documents .documents-table th:nth-child(2),
  body #documents .documents-table td:nth-child(2) {
    width: 16% !important;
  }

  body #documents .documents-table th:nth-child(3),
  body #documents .documents-table td:nth-child(3) {
    width: 15% !important;
  }

  body #documents .documents-table th:nth-child(4),
  body #documents .documents-table td:nth-child(4) {
    width: 8% !important;
  }

  body #documents .documents-table th:nth-child(5),
  body #documents .documents-table td:nth-child(5) {
    width: 14% !important;
  }

  body #documents .documents-table th:nth-child(6),
  body #documents .documents-table td:nth-child(6) {
    width: 12% !important;
  }

  body #documents .documents-table th:nth-child(7),
  body #documents .documents-table td:nth-child(7) {
    width: 38px !important;
  }
}

body #documents .documents-due {
  display: grid !important;
  gap: 1px !important;
  max-width: 100% !important;
  font-size: var(--font-size-caption) !important;
  line-height: 1.18 !important;
  white-space: normal !important;
}

body #documents .documents-due small {
  display: block !important;
  max-width: 100% !important;
  font-size: 10px !important;
  line-height: 1.12 !important;
  overflow-wrap: anywhere !important;
}

body #cases .case-list-table td:nth-child(6),
body #cases .case-list-table td:nth-child(7) {
  overflow: visible !important;
}

body #cases .case-status-icon + .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

/* Final audit locks: keep cramped table views readable after all legacy overrides. */
@media (min-width: 1280px) and (max-width: 1399px) {
  body #documents .documents-layout {
    grid-template-columns: clamp(220px, 18vw, 252px) minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  body #documents .documents-side {
    grid-column: 1 / -1 !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
  }

  body #documents .documents-table-card,
  body #documents .documents-table {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body #documents .documents-table {
    table-layout: fixed !important;
  }

  body #documents .documents-table th,
  body #documents .documents-table td {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  body #documents .documents-table th:nth-child(1),
  body #documents .documents-table td:nth-child(1) { width: 29% !important; }
  body #documents .documents-table th:nth-child(2),
  body #documents .documents-table td:nth-child(2) { width: 17% !important; }
  body #documents .documents-table th:nth-child(3),
  body #documents .documents-table td:nth-child(3) { width: 16% !important; }
  body #documents .documents-table th:nth-child(4),
  body #documents .documents-table td:nth-child(4) { width: 10% !important; }
  body #documents .documents-table th:nth-child(5),
  body #documents .documents-table td:nth-child(5) { width: 14% !important; }
  body #documents .documents-table th:nth-child(6),
  body #documents .documents-table td:nth-child(6) { width: 10% !important; }
  body #documents .documents-table th:nth-child(7),
  body #documents .documents-table td:nth-child(7) { width: 34px !important; }
}

@media (max-width: 900px) {
  body #tasks .tasks-list-card {
    padding: 8px !important;
  }

  body #tasks .tasks-table,
  body #tasks .tasks-table thead,
  body #tasks .tasks-table tbody,
  body #tasks .tasks-table tr,
  body #tasks .tasks-table th,
  body #tasks .tasks-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body #tasks .tasks-table thead {
    display: none !important;
  }

  body #tasks .tasks-table tbody {
    display: grid !important;
    gap: 8px !important;
  }

  body #tasks .tasks-table tbody tr {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 9px 38px 9px 9px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  body #tasks .tasks-table tbody tr.selected {
    background: #f4f8fd !important;
  }

  body #tasks .tasks-table tbody td {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
  }

  body #tasks .tasks-table tbody td:first-child {
    display: block !important;
  }

  body #tasks .tasks-table tbody td:nth-child(2),
  body #tasks .tasks-table tbody td:nth-child(3),
  body #tasks .tasks-table tbody td:nth-child(4),
  body #tasks .tasks-table tbody td:nth-child(5),
  body #tasks .tasks-table tbody td:nth-child(6) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 24px !important;
    padding: 3px 0 !important;
  }

  body #tasks .tasks-table tbody td:nth-child(2)::before { content: "Пріоритет"; }
  body #tasks .tasks-table tbody td:nth-child(3)::before { content: "Справа"; }
  body #tasks .tasks-table tbody td:nth-child(4)::before { content: "Відповідальний"; }
  body #tasks .tasks-table tbody td:nth-child(5)::before { content: "Дедлайн"; }
  body #tasks .tasks-table tbody td:nth-child(6)::before { content: "Статус"; }

  body #tasks .tasks-table tbody td:nth-child(n+2):nth-child(-n+6)::before {
    flex: 0 0 auto !important;
    color: var(--muted) !important;
    font-size: var(--font-size-caption-xs) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
  }

  body #tasks .tasks-table tbody td:nth-child(7) {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    max-width: 28px !important;
  }

  body #tasks .task-title-cell {
    display: grid !important;
    grid-template-columns: 12px 18px minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: start !important;
    padding-right: 0 !important;
  }

  body #tasks .task-title-cell strong,
  body #tasks .tasks-table tbody td a,
  body #tasks .tasks-table tbody td > span,
  body #tasks .task-title-cell > div > span {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    font-size: var(--font-size-caption) !important;
    line-height: 1.25 !important;
  }

  body #tasks .task-title-cell strong {
    font-size: var(--font-size-body-sm) !important;
    font-weight: var(--font-weight-bold) !important;
  }

  body #tasks .task-row-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-top: 4px !important;
  }

  body #tasks .task-row-meta b,
  body #tasks .task-subtasks-popover summary {
    min-height: 18px !important;
    padding: 1px 6px !important;
    font-size: var(--font-size-caption-xs) !important;
    line-height: 1.2 !important;
  }

  body #tasks .tasks-table .badge {
    max-width: 128px !important;
    min-height: 20px !important;
    padding: 2px 8px !important;
    font-size: var(--font-size-caption-xs) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  body #tasks .task-assignee {
    justify-content: flex-end !important;
    text-align: right !important;
  }

  body #tasks .task-status-icon,
  body #tasks .task-list-actions .row-action-trigger {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }
}

/* Mobile drawer EOF lock: closed drawer must never remain visible over pages. */
@media (max-width: 1023px) {
  body:not(.sidebar-drawer-open) #primary-sidebar.sidebar {
    transform: translateX(-110%) !important;
    pointer-events: none !important;
  }

  body.sidebar-drawer-open #primary-sidebar.sidebar {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  body:not(.sidebar-drawer-open) .sidebar-overlay {
    display: none !important;
  }
}

/* Documents EOF lock: keep desktop document columns readable at laptop/desktop widths. */
@media (min-width: 1280px) {
  body #documents .documents-layout {
    grid-template-columns: clamp(218px, 16vw, 276px) minmax(540px, 1fr) clamp(250px, 18vw, 300px) !important;
    gap: 12px !important;
  }

  body #documents .documents-table th,
  body #documents .documents-table td {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  body #documents .documents-table th:nth-child(1),
  body #documents .documents-table td:nth-child(1) {
    width: 29% !important;
  }

  body #documents .documents-table th:nth-child(2),
  body #documents .documents-table td:nth-child(2) {
    width: 15% !important;
  }

  body #documents .documents-table th:nth-child(3),
  body #documents .documents-table td:nth-child(3) {
    width: 13% !important;
  }

  body #documents .documents-table th:nth-child(4),
  body #documents .documents-table td:nth-child(4) {
    width: 7% !important;
  }

  body #documents .documents-table th:nth-child(5),
  body #documents .documents-table td:nth-child(5) {
    width: 13% !important;
  }

  body #documents .documents-table th:nth-child(6),
  body #documents .documents-table td:nth-child(6) {
    width: 13% !important;
    white-space: nowrap !important;
  }

  body #documents .documents-table th:nth-child(7),
  body #documents .documents-table td:nth-child(7) {
    width: 36px !important;
  }
}

/* Documents laptop lock: keep the table readable before there is room for a true right rail. */
@media (min-width: 1280px) and (max-width: 1399px) {
  body #documents .documents-layout {
    grid-template-columns: clamp(220px, 18vw, 250px) minmax(0, 1fr) !important;
    align-items: start !important;
  }

  body #documents .documents-side {
    grid-column: 1 / -1 !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
  }

  body #documents .documents-table th:nth-child(1),
  body #documents .documents-table td:nth-child(1) {
    width: 30% !important;
  }

  body #documents .documents-table th:nth-child(2),
  body #documents .documents-table td:nth-child(2) {
    width: 17% !important;
  }

  body #documents .documents-table th:nth-child(3),
  body #documents .documents-table td:nth-child(3) {
    width: 14% !important;
  }

  body #documents .documents-table th:nth-child(4),
  body #documents .documents-table td:nth-child(4) {
    width: 8% !important;
  }

  body #documents .documents-table th:nth-child(5),
  body #documents .documents-table td:nth-child(5) {
    width: 13% !important;
  }

  body #documents .documents-table th:nth-child(6),
  body #documents .documents-table td:nth-child(6) {
    width: 12% !important;
  }
}

@media (max-width: 768px) {
  body #clients .clients-side {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
}

/* Final UI audit lock: compact overflowing tables/cards without changing logic. */
body .dashboard-row,
body .dashboard-row > *,
body .dashboard-list,
body .case-list-table,
body .case-list-table *,
body .finance-operation-row,
body .finance-operation-row > *,
body .finance-workspace-row,
body .finance-workspace-row > *,
body .osint-active-list *,
body .osint-mention-row *,
body .settings-user-row *,
body .settings-card *,
body .documents-table *,
body .document-row * {
  min-width: 0;
}

body .dashboard-row {
  overflow: hidden;
}

body .dashboard-row span,
body .dashboard-row strong,
body .dashboard-row small,
body .dashboard-row b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .dashboard-status-icon,
body .case-status-icon,
body .task-status-icon,
body .document-status-icon,
body .settings-user-permission-icon {
  flex: 0 0 auto;
  overflow: visible !important;
}

body .dashboard-status-icon .ui-icon,
body .case-status-icon .ui-icon,
body .task-status-icon .ui-icon,
body .document-status-icon .ui-icon,
body .settings-user-permission-icon .ui-icon {
  max-width: 100%;
  max-height: 100%;
}

body .case-list-table {
  table-layout: fixed;
  width: 100%;
}

body .case-list-table th,
body .case-list-table td {
  overflow: hidden;
}

body .case-list-table td:nth-child(2),
body .case-list-table td:nth-child(3),
body .case-list-table td:nth-child(4),
body .case-list-table td:nth-child(5),
body .case-list-table td:nth-child(6),
body .case-list-table td:nth-child(9) {
  overflow: hidden;
  text-overflow: ellipsis;
}

body .case-client-cell,
body .case-client-text,
body .case-number-stack,
body .case-number-stack a,
body .case-number-stack small,
body .case-materials,
body .case-list-table td > span:not(.badge):not(.case-status-icon):not(.case-deadline-chip):not(.sr-only),
body .case-list-table td > strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

body .case-client-text,
body .case-number-stack a,
body .case-number-stack small {
  white-space: nowrap;
}

body .case-deadline-chip {
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .finance-tabs {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

body .finance-tabs::-webkit-scrollbar {
  display: none;
}

body .finance-tabs button {
  flex: 0 0 auto;
}

body .finance-operation-row span,
body .finance-operation-row em,
body .finance-operation-row small,
body .finance-workspace-row span,
body .finance-workspace-row em,
body .finance-workspace-row small,
body .finance-status-card span,
body .finance-status-card strong,
body .finance-status-card b,
body .finance-chart-card span,
body .finance-chart-card strong,
body .finance-chart-card em {
  overflow: hidden;
  text-overflow: ellipsis;
}

body .finance-operation-row span,
body .finance-operation-row em,
body .finance-operation-row small,
body .finance-workspace-row span,
body .finance-workspace-row em,
body .finance-workspace-row small {
  white-space: nowrap;
}

body .finance-status-card,
body .finance-chart-card {
  min-width: 0;
}

body .osint-active-list button,
body .osint-mention-row,
body .osint-focus-card {
  min-width: 0;
  overflow: hidden;
}

body .osint-active-list strong,
body .osint-active-list b,
body .osint-active-list small,
body .osint-mention-row strong,
body .osint-mention-row small,
body .osint-mention-row time {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .documents-table strong,
body .documents-table span,
body .documents-table small,
body .document-row strong,
body .document-row span,
body .document-row small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1279px) {
  body .case-list-table th,
  body .case-list-table td {
    padding-inline: 7px;
    font-size: var(--font-size-table-cell);
    line-height: 1.24;
  }

  body .case-list-table .badge,
  body .case-list-table .case-material-pill {
    min-height: 22px;
    padding-inline: 7px;
    font-size: var(--font-size-badge);
  }

  body .finance-operation-head,
  body .finance-workspace-head,
  body .finance-operation-row,
  body .finance-workspace-row {
    column-gap: 8px;
  }
}

@media (max-width: 1023px) {
  body .case-list-table,
  body .clients-table,
  body .finance-table,
  body .documents-table {
    max-width: 100%;
  }

  body #calendar .calendar-main-card {
    overflow: hidden;
  }

  body #calendar .calendar-grid.month-view {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    overflow: hidden !important;
  }

  body #calendar .calendar-grid.month-view .day {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body #calendar .event-chip {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body #calendar .event-chip strong,
  body #calendar .event-chip span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body #calendar .calendar-day-more-wrap {
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

@media (max-width: 520px) {
  body #calendar .calendar-grid.month-view .day {
    min-height: 46px !important;
    padding: 3px !important;
  }

  body #calendar .event-chip {
    min-height: 20px !important;
    padding: 2px 3px !important;
    border-radius: 6px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  body #calendar .event-chip span {
    display: none !important;
  }

  body #calendar .calendar-day-more {
    min-height: 20px !important;
    padding: 1px 4px !important;
    font-size: 9px !important;
  }
}

/* Clients audit lock: compact table, equal panels, and adjacent Telegram/action controls. */
@media (min-width: 1024px) {
  body #clients {
    --clients-side-width-final: clamp(286px, 20vw, 320px);
    --clients-action-width-final: 62px;
  }

  body #clients .clients-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--clients-side-width-final) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  body #clients .clients-left {
    display: grid !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  body #clients .clients-table-card,
  body #clients .client-profile-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body #clients .clients-table-card {
    overflow: hidden !important;
    padding: 12px !important;
  }

  body #clients .clients-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  body #clients .clients-table th,
  body #clients .clients-table td {
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 8px 7px !important;
    font-size: var(--font-size-table-cell) !important;
    line-height: 1.25 !important;
    vertical-align: middle !important;
  }

  body #clients .clients-table th {
    font-size: var(--font-size-table-header) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  body #clients .clients-table th:nth-child(1),
  body #clients .clients-table td:nth-child(1) {
    width: 28px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  body #clients .clients-table th:nth-child(2),
  body #clients .clients-table td:nth-child(2) {
    width: 21% !important;
  }

  body #clients .clients-table th:nth-child(3),
  body #clients .clients-table td:nth-child(3) {
    width: 116px !important;
  }

  body #clients .clients-table th:nth-child(4),
  body #clients .clients-table td:nth-child(4) {
    width: 19% !important;
  }

  body #clients .clients-table th:nth-child(5),
  body #clients .clients-table td:nth-child(5) {
    width: 25% !important;
  }

  body #clients .clients-table th:nth-child(6),
  body #clients .clients-table td:nth-child(6) {
    width: 84px !important;
  }

  body #clients .clients-table th:nth-child(7),
  body #clients .clients-table td:nth-child(7) {
    width: var(--clients-action-width-final) !important;
    min-width: var(--clients-action-width-final) !important;
    max-width: var(--clients-action-width-final) !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    text-align: left !important;
  }

  body #clients .clients-table td:nth-child(2),
  body #clients .clients-table td:nth-child(3),
  body #clients .clients-table td:nth-child(4),
  body #clients .clients-table td:nth-child(5),
  body #clients .clients-table td:nth-child(6) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body #clients .clients-table td.clients-telegram-actions {
    overflow: visible !important;
  }

  body #clients .clients-telegram-actions-inner {
    display: inline-grid !important;
    grid-template-columns: 16px 28px !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 8px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    margin: 0 !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon {
    display: inline-grid !important;
    place-items: center !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    color: var(--blue) !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon.telegram-icon-active {
    color: var(--semantic-green) !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon svg,
  body #clients .clients-telegram-actions-inner .telegram-icon .ui-icon {
    width: 15px !important;
    height: 15px !important;
  }

  body #clients .clients-telegram-actions-inner .row-action-menu-wrap,
  body #clients .clients-telegram-actions-inner .clients-actions-menu {
    display: inline-grid !important;
    place-items: center !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
  }

  body #clients .clients-telegram-actions-inner .row-action-trigger {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  body #clients .clients-table-card .table-footer {
    padding-top: 10px !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 1023px) {
  body #clients .clients-layout,
  body #clients .clients-left,
  body #clients .clients-side {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body #clients .clients-table td:nth-child(n + 2):nth-child(-n + 6),
  body #clients .client-name-cell,
  body #clients .client-name-cell a {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Calendar final compact visual lock. Keep this after older calendar/mobile layers. */
body #calendar {
  --calendar-compact-pad: 10px 12px;
  --calendar-compact-title: var(--font-size-card-title);
  --calendar-compact-body: var(--font-size-body-sm);
  --calendar-compact-caption: var(--font-size-caption);
}

body #calendar .calendar-screen,
body #calendar .calendar-left-stack,
body #calendar .calendar-side {
  gap: 10px !important;
}

body #calendar .calendar-toolbar {
  display: grid !important;
  grid-template-columns: auto auto auto auto minmax(130px, 1fr) minmax(210px, 320px) !important;
  gap: 8px !important;
  align-items: center !important;
}

body #calendar .calendar-filter-panel {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(116px, 1fr)) minmax(128px, .85fr) auto auto !important;
  gap: 8px !important;
  align-items: center !important;
}

body #calendar .calendar-toolbar .primary,
body #calendar .calendar-toolbar .secondary,
body #calendar .calendar-toolbar input,
body #calendar .calendar-title-button,
body #calendar .calendar-filter-panel input,
body #calendar .calendar-overdue-filter,
body #calendar .calendar-reset-filter,
body #calendar .calendar-filter-select .document-custom-select-button {
  min-height: 32px !important;
  height: 32px !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--font-size-button) !important;
  line-height: 1.1 !important;
  font-weight: var(--font-weight-semibold) !important;
}

body #calendar .calendar-mode-group button,
body #calendar .calendar-arrows button {
  min-width: 44px !important;
  padding-inline: 8px !important;
}

body #calendar .calendar-title-button {
  font-size: var(--calendar-compact-title) !important;
  font-weight: var(--font-weight-bold) !important;
}

body #calendar .calendar-layout {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px) !important;
  gap: 10px !important;
}

body #calendar .calendar-grid.month-view .day {
  min-height: 82px !important;
  height: clamp(82px, 7vh, 98px) !important;
  padding: 6px !important;
}

body #calendar .event-chip {
  min-height: 22px !important;
  max-height: 34px !important;
  padding: 4px 6px !important;
  font-size: 9px !important;
  line-height: 1.12 !important;
}

body #calendar .event-chip strong {
  font-size: 9px !important;
  line-height: 1.1 !important;
}

body #calendar .event-chip span {
  font-size: 7.5px !important;
  line-height: 1.05 !important;
}

body #calendar .calendar-day-more-wrap.is-open .calendar-day-popover,
body #calendar .calendar-day-more-wrap:hover .calendar-day-popover,
body #calendar .calendar-day-more-wrap:focus-within .calendar-day-popover {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

body #calendar #event-card,
body #calendar .calendar-reminders,
body #calendar .calendar-events-list {
  padding: var(--calendar-compact-pad) !important;
  border-radius: var(--radius-md) !important;
}

body #calendar .event-card-head,
body #calendar .event-card-title,
body #calendar .calendar-events-head,
body #calendar .calendar-reminders-head {
  margin-bottom: 7px !important;
}

body #calendar .event-card-head h2,
body #calendar #event-card > h2,
body #calendar .calendar-events-head h2,
body #calendar .calendar-reminders-head h2,
body #calendar .calendar-reminders h2 {
  font-size: var(--calendar-compact-title) !important;
  line-height: 1.18 !important;
  font-weight: var(--font-weight-bold) !important;
}

body #calendar .event-info-list,
body #calendar .calendar-reminders {
  gap: 7px !important;
}

body #calendar .event-info-row {
  grid-template-columns: 16px minmax(0, 1fr) !important;
  gap: 7px !important;
}

body #calendar .event-info-row .ui-icon,
body #calendar .event-card-actions .ui-icon,
body #calendar .calendar-reminders-head .ghost .ui-icon {
  width: 14px !important;
  height: 14px !important;
}

body #calendar .event-card-title strong,
body #calendar .event-info-row strong,
body #calendar .reminder-row strong {
  font-size: var(--calendar-compact-body) !important;
  line-height: 1.24 !important;
}

body #calendar .event-info-row em,
body #calendar .event-description,
body #calendar .event-reminder-log span,
body #calendar .calendar-reminders p,
body #calendar .reminder-row span,
body #calendar .reminder-row small,
body #calendar .reminder-status {
  font-size: var(--calendar-compact-caption) !important;
  line-height: 1.35 !important;
}

body #calendar .event-description {
  margin: 7px 0 !important;
  padding-left: 23px !important;
}

body #calendar .event-reminder-log {
  margin-bottom: 8px !important;
  padding: 8px !important;
}

body #calendar .event-card-actions {
  gap: 7px !important;
}

body #calendar .event-card-actions button {
  min-height: 30px !important;
  height: 30px !important;
}

body #calendar .calendar-events-list > button {
  grid-template-columns: 8px minmax(0, 1fr) 78px 48px 76px !important;
  gap: 8px !important;
  min-height: 38px !important;
  padding: 6px 0 !important;
}

body #calendar .calendar-events-list strong,
body #calendar .upcoming-event-main strong {
  font-size: var(--calendar-compact-body) !important;
  line-height: 1.22 !important;
}

body #calendar .calendar-events-list em,
body #calendar .calendar-events-list time,
body #calendar .upcoming-event-time {
  margin-top: 1px !important;
  font-size: var(--calendar-compact-caption) !important;
  line-height: 1.15 !important;
}

body #calendar .calendar-events-list .badge {
  min-width: 58px !important;
  min-height: 18px !important;
  padding-inline: 6px !important;
  font-size: 8px !important;
}

@media (max-width: 1279px) and (min-width: 1024px) {
  body #calendar .calendar-toolbar {
    grid-template-columns: auto minmax(260px, 1fr) auto auto !important;
  }

  body #calendar .calendar-toolbar .primary,
  body #calendar .calendar-mode-group,
  body #calendar .calendar-toolbar input,
  body #calendar .calendar-date-picker {
    width: 100% !important;
  }

  body #calendar .calendar-filter-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body #calendar .calendar-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #calendar .calendar-side {
    position: static !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1023px) {
  body #calendar .calendar-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  body #calendar .calendar-mode-group {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  body #calendar .calendar-arrows {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  body #calendar .calendar-toolbar > *,
  body #calendar .calendar-toolbar input,
  body #calendar .calendar-date-picker,
  body #calendar .calendar-filter-panel > * {
    width: 100% !important;
    max-width: none !important;
  }

  body #calendar .calendar-filter-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body #calendar .calendar-layout,
  body #calendar .calendar-side {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #calendar .calendar-grid.month-view .day {
    min-height: 58px !important;
    height: auto !important;
    padding: 5px !important;
  }

  body #calendar .calendar-day-popover {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    margin-top: 4px !important;
  }

  body #calendar .calendar-events-list > button {
    grid-template-columns: 8px minmax(0, 1fr) auto auto !important;
    min-height: 36px !important;
  }

  body #calendar .calendar-events-list .badge {
    grid-column: 2 / -1 !important;
    justify-self: start !important;
  }
}

@media (max-width: 520px) {
  body #calendar .calendar-filter-panel {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #calendar .calendar-events-list > button {
    grid-template-columns: 7px minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  body #calendar .calendar-events-list time,
  body #calendar .calendar-events-list .upcoming-event-time,
  body #calendar .calendar-events-list .badge {
    grid-column: 2 !important;
    justify-self: start !important;
  }
}

/* Clients EOF lock: must stay after all calendar/client responsive rules. */
@media (min-width: 769px) and (max-width: 1279px) {
  body #clients .clients-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body #clients .clients-side {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (min-width: 1280px) {
  body #clients {
    --clients-side-width-final-audit: clamp(288px, 20vw, 316px);
    --clients-action-col-final-audit: 76px;
  }

  body #clients .clients-layout {
    grid-template-columns: minmax(0, 1fr) var(--clients-side-width-final-audit) !important;
    gap: 12px !important;
  }

  body #clients .clients-side {
    width: var(--clients-side-width-final-audit) !important;
    max-width: var(--clients-side-width-final-audit) !important;
  }
}

@media (min-width: 769px) {
  body #clients .clients-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  body #clients .clients-table th:nth-child(7),
  body #clients .clients-table td:nth-child(7) {
    width: var(--clients-action-col-final-audit, 76px) !important;
    min-width: var(--clients-action-col-final-audit, 76px) !important;
    max-width: var(--clients-action-col-final-audit, 76px) !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    text-align: left !important;
  }

  body #clients .clients-telegram-actions-inner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon {
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon svg,
  body #clients .clients-telegram-actions-inner .telegram-icon .ui-icon {
    width: 15px !important;
    height: 15px !important;
  }

  body #clients .clients-telegram-actions-inner .row-action-menu-wrap,
  body #clients .clients-telegram-actions-inner .clients-actions-menu {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
  }

  body #clients .clients-telegram-actions-inner .row-action-trigger {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    border-radius: 8px !important;
  }
}

/* Clients audit lock: Telegram/action cell must stay compact and not report hidden menu text as overflow. */
body #clients .clients-table td.clients-telegram-actions {
  min-height: 36px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

body #clients .clients-telegram-actions-inner {
  min-height: 36px !important;
}

body #clients .clients-telegram-actions-inner .row-action-trigger {
  display: inline-grid !important;
  place-items: center !important;
  line-height: 1 !important;
}

/* Clients post-audit lock v2: keep this at EOF so old client/table rules cannot win. */
body #clients .clients-layout {
  align-items: start !important;
}

body #clients .clients-left,
body #clients .clients-table-card,
body #clients .client-profile-card {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 1280px) {
  body #clients {
    --clients-side-width-final-audit: clamp(288px, 20vw, 316px);
    --clients-action-col-final-audit: 76px;
  }

  body #clients .clients-layout {
    grid-template-columns: minmax(0, 1fr) var(--clients-side-width-final-audit) !important;
    gap: 12px !important;
  }

  body #clients .clients-side {
    width: var(--clients-side-width-final-audit) !important;
    max-width: var(--clients-side-width-final-audit) !important;
  }
}

@media (min-width: 769px) and (max-width: 1279px) {
  body #clients .clients-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body #clients .clients-side {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (min-width: 769px) {
  body #clients .clients-table-card {
    overflow: hidden !important;
  }

  body #clients .clients-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  body #clients .clients-table th,
  body #clients .clients-table td {
    padding: 7px 8px !important;
  }

  body #clients .clients-table th:nth-child(1),
  body #clients .clients-table td:nth-child(1) {
    width: 32px !important;
  }

  body #clients .clients-table th:nth-child(2),
  body #clients .clients-table td:nth-child(2) {
    width: 20% !important;
  }

  body #clients .clients-table th:nth-child(3),
  body #clients .clients-table td:nth-child(3) {
    width: 116px !important;
  }

  body #clients .clients-table th:nth-child(4),
  body #clients .clients-table td:nth-child(4) {
    width: 20% !important;
  }

  body #clients .clients-table th:nth-child(5),
  body #clients .clients-table td:nth-child(5) {
    width: 28% !important;
  }

  body #clients .clients-table th:nth-child(6),
  body #clients .clients-table td:nth-child(6) {
    width: 86px !important;
  }

  body #clients .clients-table th:nth-child(7),
  body #clients .clients-table td:nth-child(7) {
    width: var(--clients-action-col-final-audit, 76px) !important;
    min-width: var(--clients-action-col-final-audit, 76px) !important;
    max-width: var(--clients-action-col-final-audit, 76px) !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    text-align: left !important;
  }

  body #clients .clients-table th:nth-child(7) {
    white-space: nowrap !important;
    font-size: var(--font-size-table-header) !important;
  }

  body #clients .clients-table td.clients-telegram-actions {
    overflow: visible !important;
  }

  body #clients .clients-telegram-actions-inner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon {
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon svg,
  body #clients .clients-telegram-actions-inner .telegram-icon .ui-icon {
    width: 15px !important;
    height: 15px !important;
  }

  body #clients .clients-telegram-actions-inner .row-action-menu-wrap,
  body #clients .clients-telegram-actions-inner .clients-actions-menu {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
  }

  body #clients .clients-telegram-actions-inner .row-action-trigger {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 768px) {
  body #clients .clients-side {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
}

/* Calendar month cells: one visible event, compact +N menu for the rest. */
body #calendar .calendar-day-more-wrap.is-open .calendar-day-popover {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

body #calendar .calendar-day-more {
  min-width: 34px !important;
  width: auto !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  border-radius: 999px !important;
  font-size: 8.5px !important;
  line-height: 1 !important;
  font-weight: var(--font-weight-bold) !important;
}

body #calendar .calendar-day-more span {
  font-size: 8px !important;
  line-height: 1 !important;
}

body #calendar .calendar-day-popover {
  min-width: 178px !important;
  max-width: min(230px, 82vw) !important;
}

body #calendar .calendar-popover-event {
  display: block !important;
  width: 100% !important;
  min-height: 28px !important;
  white-space: normal !important;
}

body #calendar .calendar-popover-event span {
  display: block !important;
}

/* Clients module final override: this must stay at EOF to beat legacy mobile table rules. */
@media (max-width: 768px) {
  body #clients .clients-table-card {
    padding: 10px !important;
  }

  body #clients .clients-table tbody {
    display: grid !important;
    gap: 8px !important;
  }

  body #clients .clients-table tbody tr {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 54px !important;
    gap: 6px 10px !important;
    align-items: start !important;
    min-height: 0 !important;
    padding: 10px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    background: #fff !important;
  }

  body #clients .clients-table td {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: var(--font-size-body-sm) !important;
    line-height: var(--line-height-snug) !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body #clients .clients-table td:not(:first-child):not(.clients-telegram-actions) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body #clients .clients-table td:not(:first-child):not(.clients-telegram-actions)::before {
    font-size: var(--font-size-caption-xs) !important;
    line-height: 1.1 !important;
    color: var(--muted) !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: .01em !important;
    text-transform: uppercase !important;
  }

  body #clients .clients-table td:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    align-self: start !important;
    width: 28px !important;
    max-width: 28px !important;
    padding-top: 2px !important;
  }

  body #clients .clients-table td:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  body #clients .clients-table td:nth-child(3) {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  body #clients .clients-table td:nth-child(4) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  body #clients .clients-table td:nth-child(5) {
    grid-column: 3 !important;
    grid-row: 2 !important;
  }

  body #clients .clients-table td:nth-child(6) {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  body #clients .clients-table td.clients-telegram-actions {
    grid-column: 4 !important;
    grid-row: 1 / span 3 !important;
    justify-self: end !important;
    align-self: start !important;
    display: flex !important;
    justify-content: flex-end !important;
    width: 54px !important;
    max-width: 54px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body #clients .clients-table td.clients-telegram-actions::before {
    display: none !important;
    content: none !important;
  }

  body #clients .clients-telegram-actions-inner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    margin: 0 !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon {
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon svg,
  body #clients .clients-telegram-actions-inner .telegram-icon .ui-icon {
    width: 15px !important;
    height: 15px !important;
  }

  body #clients .clients-telegram-actions-inner .row-action-trigger {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    border-radius: 8px !important;
  }

  body #clients .client-name-cell,
  body #clients .client-name-cell a,
  body #clients .clients-table td > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body #clients .client-name-cell a,
  body #clients .clients-table td:not(.clients-telegram-actions) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body #clients .clients-table-card .table-footer {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
}

@media (max-width: 430px) {
  body #clients .clients-table tbody tr {
    grid-template-columns: 26px minmax(0, 1fr) 54px !important;
  }

  body #clients .clients-table td:first-child {
    width: 26px !important;
    max-width: 26px !important;
  }

  body #clients .clients-table td:nth-child(2),
  body #clients .clients-table td:nth-child(3),
  body #clients .clients-table td:nth-child(4),
  body #clients .clients-table td:nth-child(5),
  body #clients .clients-table td:nth-child(6) {
    grid-column: 2 !important;
  }

  body #clients .clients-table td:nth-child(2) { grid-row: 1 !important; }
  body #clients .clients-table td:nth-child(3) { grid-row: 2 !important; }
  body #clients .clients-table td:nth-child(4) { grid-row: 3 !important; }
  body #clients .clients-table td:nth-child(5) { grid-row: 4 !important; }
  body #clients .clients-table td:nth-child(6) { grid-row: 5 !important; }

  body #clients .clients-table td.clients-telegram-actions {
    grid-column: 3 !important;
    grid-row: 1 / span 5 !important;
  }
}

/* Clients module polish: dashboard-density table, compact mobile cards, unified right rail. */
body #clients .clients-table-card,
body #clients .client-profile-card,
body #clients .clients-side .side-card {
  border-radius: var(--radius-md) !important;
}

body #clients .clients-table th,
body #clients .clients-table td {
  font-size: var(--font-size-table-cell) !important;
  line-height: var(--line-height-normal) !important;
}

body #clients .clients-table th {
  font-size: var(--font-size-table-header) !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--muted) !important;
}

body #clients .clients-table a,
body #clients .clients-table strong {
  font-size: var(--font-size-table-cell) !important;
  line-height: var(--line-height-snug) !important;
  font-weight: var(--font-weight-bold) !important;
}

body #clients .clients-side h2,
body #clients .client-profile-card h2 {
  font-size: var(--font-size-card-title) !important;
  line-height: var(--line-height-snug) !important;
  font-weight: var(--font-weight-bold) !important;
}

body #clients .clients-side h3,
body #clients .client-profile-card h3 {
  font-size: var(--font-size-body) !important;
  line-height: var(--line-height-snug) !important;
  font-weight: var(--font-weight-bold) !important;
}

body #clients .clients-side p,
body #clients .clients-side span,
body #clients .clients-side strong,
body #clients .client-profile-card p,
body #clients .client-profile-card span,
body #clients .client-profile-card strong {
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-normal) !important;
}

body #clients .clients-side textarea,
body #clients .clients-side input,
body #clients .clients-side .custom-select-trigger {
  font-size: var(--font-size-input) !important;
  line-height: var(--line-height-normal) !important;
}

body #clients .clients-side .secondary,
body #clients .clients-side .primary,
body #clients .client-profile-card .secondary,
body #clients .client-profile-card .primary {
  font-size: var(--font-size-button) !important;
  line-height: var(--line-height-tight) !important;
}

@media (min-width: 1024px) {
  body #clients {
    --clients-side-width: clamp(292px, 21vw, 320px);
    --clients-action-col: 70px;
  }

  body #clients .clients-layout {
    gap: 14px !important;
  }

  body #clients .clients-table-card,
  body #clients .client-profile-card {
    padding: 14px !important;
  }

  body #clients .clients-table th,
  body #clients .clients-table td {
    padding: 8px 8px !important;
  }

  body #clients .clients-table th:nth-child(2),
  body #clients .clients-table td:nth-child(2) {
    width: 21% !important;
  }

  body #clients .clients-table th:nth-child(3),
  body #clients .clients-table td:nth-child(3) {
    width: 114px !important;
  }

  body #clients .clients-table th:nth-child(4),
  body #clients .clients-table td:nth-child(4) {
    width: 20% !important;
  }

  body #clients .clients-table th:nth-child(5),
  body #clients .clients-table td:nth-child(5) {
    width: auto !important;
  }

  body #clients .clients-table th:nth-child(6),
  body #clients .clients-table td:nth-child(6) {
    width: 88px !important;
  }

  body #clients .clients-table th:nth-child(7),
  body #clients .clients-table td:nth-child(7) {
    width: var(--clients-action-col) !important;
    min-width: var(--clients-action-col) !important;
    max-width: var(--clients-action-col) !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  body #clients .clients-table th:nth-child(7) {
    text-align: center !important;
  }

  body #clients .clients-table td.clients-telegram-actions {
    text-align: center !important;
  }

  body #clients .clients-telegram-actions-inner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
  }

  body #clients .clients-telegram-actions-inner .row-action-trigger {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
  }

  body #clients .clients-side .side-card {
    padding: 14px !important;
  }
}

@media (max-width: 768px) {
  body #clients .clients-table-card {
    padding: 10px !important;
  }

  body #clients .clients-table tbody {
    gap: 8px !important;
  }

  body #clients .clients-table tbody tr {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 54px !important;
    gap: 6px 8px !important;
    align-items: start !important;
    min-height: 0 !important;
    padding: 10px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    background: #fff !important;
  }

  body #clients .clients-table td {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-size: var(--font-size-body-sm) !important;
    line-height: var(--line-height-snug) !important;
  }

  body #clients .clients-table td:not(:first-child):not(.clients-telegram-actions) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body #clients .clients-table td:not(:first-child):not(.clients-telegram-actions)::before {
    font-size: var(--font-size-caption-xs) !important;
    line-height: 1.1 !important;
    color: var(--muted) !important;
  }

  body #clients .clients-table td:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    align-self: start !important;
    padding-top: 2px !important;
  }

  body #clients .clients-table td:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  body #clients .clients-table td:nth-child(3) {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  body #clients .clients-table td:nth-child(4) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  body #clients .clients-table td:nth-child(5) {
    grid-column: 3 !important;
    grid-row: 2 !important;
  }

  body #clients .clients-table td:nth-child(6) {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  body #clients .clients-table td.clients-telegram-actions {
    grid-column: 4 !important;
    grid-row: 1 / span 3 !important;
    justify-self: end !important;
    align-self: start !important;
    display: flex !important;
    width: 54px !important;
    max-width: 54px !important;
    padding: 0 !important;
  }

  body #clients .clients-telegram-actions-inner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
  }

  body #clients .clients-table td.clients-telegram-actions::before {
    content: none !important;
    display: none !important;
  }

  body #clients .clients-table a,
  body #clients .clients-table strong {
    font-size: var(--font-size-body-sm) !important;
    line-height: var(--line-height-snug) !important;
  }

  body #clients .clients-table-card .table-footer {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
}

@media (max-width: 430px) {
  body #clients .clients-table tbody tr {
    grid-template-columns: 26px minmax(0, 1fr) 52px !important;
  }

  body #clients .clients-table td:nth-child(2),
  body #clients .clients-table td:nth-child(3),
  body #clients .clients-table td:nth-child(4),
  body #clients .clients-table td:nth-child(5),
  body #clients .clients-table td:nth-child(6) {
    grid-column: 2 !important;
  }

  body #clients .clients-table td:nth-child(2) { grid-row: 1 !important; }
  body #clients .clients-table td:nth-child(3) { grid-row: 2 !important; }
  body #clients .clients-table td:nth-child(4) { grid-row: 3 !important; }
  body #clients .clients-table td:nth-child(5) { grid-row: 4 !important; }
  body #clients .clients-table td:nth-child(6) { grid-row: 5 !important; }

  body #clients .clients-table td.clients-telegram-actions {
    grid-column: 3 !important;
    grid-row: 1 / span 5 !important;
  }
}

/* Audit polish: keep secondary pages aligned with the dashboard typography/layout system. */
body #mailings .coverage-row {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
  gap: 10px !important;
}

body #mailings .coverage-row > span {
  grid-template-columns: auto auto !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "label label"
    "icon value" !important;
  justify-content: center !important;
  justify-items: center !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 82px !important;
  gap: 6px 8px !important;
  padding: 12px !important;
  text-align: center !important;
}

body #mailings .coverage-row > span::after {
  display: none !important;
}

body #mailings .coverage-row > span strong {
  grid-area: label !important;
  max-width: 100% !important;
  font-size: var(--font-size-label) !important;
  line-height: var(--line-height-snug) !important;
  white-space: normal !important;
}

body #mailings .coverage-row > span em {
  grid-area: value !important;
  font-size: clamp(18px, 1.15vw, 22px) !important;
  line-height: var(--line-height-tight) !important;
}

body #mailings .coverage-row .ui-icon {
  grid-area: icon !important;
  width: 36px !important;
  height: 36px !important;
}

body #mailings .coverage-row .ui-icon svg {
  width: 18px !important;
  height: 18px !important;
}

/* Mailing simplified workflow: present the customer-requested quick flow as a
   polished CRM workspace instead of a sparse form. */
body #mailings .mailing-simple-screen {
  gap: 16px;
}

body #mailings .mailing-simple-hero {
  overflow: hidden;
  border-color: #d7e4f4;
  background:
    linear-gradient(135deg, rgba(232, 242, 255, 0.9), rgba(255, 255, 255, 0.98) 52%),
    #fff;
}

body #mailings .mailing-simple-hero .mailing-section-head {
  align-items: flex-start;
}

body #mailings .mailing-simple-hero h2 {
  margin: 0;
  color: #172033;
  font-size: clamp(24px, 2vw, 32px);
  line-height: var(--line-height-tight);
}

body #mailings .mailing-simple-hero p {
  max-width: 620px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
}

body #mailings .mailing-simple-hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body #mailings .mailing-simple-hero-badges span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #d7e4f4;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #334155;
  padding: 0 12px;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 8px 18px rgba(15, 42, 74, 0.05);
}

body #mailings .mailing-simple-hero-badges .ui-icon {
  width: 16px;
  height: 16px;
  color: var(--action-dark);
}

body #mailings .mailing-simple-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 14px;
  align-items: start;
}

body #mailings .mailing-composer-card,
body #mailings .mailing-recipients-card,
body #mailings .mailing-channels-card,
body #mailings .mailing-preview-card,
body #mailings .mailing-send-panel {
  border-color: #dfe8f4;
  box-shadow: 0 14px 30px rgba(15, 42, 74, 0.055);
}

body #mailings .mailing-composer-card,
body #mailings .mailing-recipients-card,
body #mailings .mailing-channels-card,
body #mailings .mailing-send-panel {
  min-width: 0;
}

body #mailings .mailing-composer-card,
body #mailings .mailing-send-panel {
  grid-column: 1;
}

body #mailings .mailing-preview-card {
  grid-column: 2;
  grid-row: 1 / span 3;
  position: sticky;
  top: 14px;
}

body #mailings .mailing-recipients-card,
body #mailings .mailing-channels-card {
  grid-column: 1;
}

body #mailings .mailing-simple-block-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

body #mailings .mailing-simple-block-head h3 {
  margin: 0;
  color: #172033;
  font-size: 17px;
  line-height: var(--line-height-snug);
}

body #mailings .mailing-simple-block-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-relaxed);
}

body #mailings .mailing-step {
  flex: 0 0 auto;
  min-width: 42px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #cfe2fb;
  border-radius: 999px;
  background: #eaf3ff;
  color: var(--action-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

body #mailings .mailing-message-field {
  display: grid;
  gap: 8px;
  color: #172033;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
}

body #mailings .mailing-message-field textarea {
  min-height: 210px;
  resize: vertical;
  border-color: #d7e4f4;
  background: #fbfcff;
  box-shadow: inset 0 1px 0 rgba(15, 42, 74, 0.03);
}

body #mailings .mailing-image-picker {
  margin-top: 12px;
  display: grid;
  gap: 8px;
  color: #172033;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
}

body #mailings .mailing-image-picker input {
  display: none;
}

body #mailings .mailing-image-picker span {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed #b8d5f4;
  border-radius: 8px;
  background: #f7fbff;
  color: #334155;
  padding: 0 14px;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

body #mailings .mailing-image-picker .ui-icon {
  width: 18px;
  height: 18px;
  color: var(--action-dark);
}

body #mailings .mailing-phone-preview {
  display: grid;
  gap: 12px;
  border: 1px solid #d7e4f4;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff, #eef5ff);
  padding: 14px;
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.74);
}

body #mailings .mailing-phone-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.32);
  padding: 4px 2px 12px;
}

body #mailings .mailing-phone-top span,
body #mailings .mailing-phone-top em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body #mailings .mailing-phone-top span {
  color: #172033;
  font-size: var(--font-size-caption);
  font-weight: 900;
}

body #mailings .mailing-phone-top em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

body #mailings .mailing-preview-image {
  min-height: 88px;
  display: grid;
  place-items: center;
  gap: 8px;
  border: 1px dashed #b8d5f4;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  padding: 14px;
  text-align: center;
  overflow-wrap: anywhere;
}

body #mailings .mailing-preview-image .ui-icon {
  width: 24px;
  height: 24px;
  color: var(--action-dark);
}

body #mailings .mailing-preview-bubble {
  justify-self: end;
  max-width: 92%;
  border: 1px solid #cfe2fb;
  border-radius: 14px 14px 4px 14px;
  background: #fff;
  color: #172033;
  padding: 12px 14px;
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 10px 22px rgba(15, 42, 74, 0.08);
}

body #mailings .mailing-recipients-card .recipient-mode-grid {
  margin: 0;
}

body #mailings .mailing-recipients-card .recipient-mode-card {
  min-height: 82px;
  border-color: #dfe8f4;
  background: #fbfcff;
}

body #mailings .mailing-recipients-card .recipient-mode-card.selected {
  border-color: var(--action-border);
  background: var(--action-soft);
  box-shadow: 0 12px 24px rgba(31, 122, 224, 0.08);
}

body #mailings .mailing-simple-recipients {
  margin-top: 12px;
  max-height: 280px;
  overflow: auto;
  border: 1px solid #dfe8f4;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

body #mailings .mailing-simple-channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  border: 0;
}

body #mailings .mailing-simple-channels button {
  min-height: 76px;
  justify-content: flex-start;
  border: 1px solid #dfe8f4;
  border-radius: 8px;
  background: #fbfcff;
  padding: 12px;
  text-align: left;
}

body #mailings .mailing-simple-channels button::after {
  display: none;
}

body #mailings .mailing-simple-channels button.active {
  border-color: var(--action-border);
  background: var(--action-soft);
  color: var(--action-dark);
  box-shadow: 0 12px 24px rgba(31, 122, 224, 0.08);
}

body #mailings .mailing-simple-channels button > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body #mailings .mailing-simple-channels strong,
body #mailings .mailing-simple-channels em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body #mailings .mailing-simple-channels strong {
  color: #172033;
  font-size: var(--font-size-body);
  font-weight: 900;
}

body #mailings .mailing-simple-channels em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

body #mailings .mailing-send-panel {
  display: grid;
  gap: 14px;
  background: linear-gradient(180deg, #fff, #f8fbff);
}

body #mailings .mailing-send-panel h3 {
  margin: 4px 0 0;
  color: #172033;
  font-size: 20px;
  line-height: var(--line-height-snug);
}

body #mailings .mailing-send-panel p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-relaxed);
}

body #mailings .mailing-simple-summary {
  margin-top: 0;
}

body #mailings .mailing-send-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid #dfe8f4;
  padding-top: 14px;
}

body #mailings .mailing-send-note {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body #mailings .mailing-send-note strong {
  color: #172033;
  font-size: var(--font-size-caption);
  font-weight: 900;
}

body #mailings .mailing-send-note span {
  color: var(--muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-relaxed);
}

body #mailings .mailing-send-actions .primary {
  flex: 0 0 auto;
  min-height: 42px;
}

@media (max-width: 1100px) {
  body #mailings .mailing-simple-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body #mailings .mailing-composer-card,
  body #mailings .mailing-recipients-card,
  body #mailings .mailing-channels-card,
  body #mailings .mailing-preview-card,
  body #mailings .mailing-send-panel {
    grid-column: 1;
  }

  body #mailings .mailing-preview-card {
    grid-row: auto;
    position: static;
  }
}

@media (max-width: 760px) {
  body #mailings .mailing-simple-hero .mailing-section-head,
  body #mailings .mailing-send-actions {
    align-items: stretch;
    flex-direction: column;
  }

  body #mailings .mailing-simple-hero-badges {
    justify-content: flex-start;
  }

  body #mailings .mailing-simple-channels,
  body #mailings .mailing-recipients-card .recipient-mode-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body #mailings .mailing-send-actions .primary {
    width: 100%;
  }
}

body #settings .settings-user-case-preview,
body #finance .finance-debt-card button span,
body #finance .finance-debt-card button strong,
body #finance .finance-donut-legend span,
body #finance .finance-donut-legend strong {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body #settings .settings-user-case-preview {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body #finance .finance-status-card,
body #finance .finance-debt-card,
body #finance .finance-quick-card,
body #finance .finance-donut-wrap,
body #finance .finance-donut-legend,
body #finance .finance-donut-legend div {
  min-width: 0 !important;
  max-width: 100% !important;
}

body #finance .finance-status-card div {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

body #finance .finance-status-card div > span,
body #finance .finance-status-card div > strong {
  min-width: 0 !important;
}

body #finance .finance-donut-legend span,
body #finance .finance-donut-legend strong {
  white-space: nowrap !important;
}

@media (max-width: 1023px) {
  body .finance-tabs,
  body .analytics-tabs,
  body .mailing-tabs,
  body .osint-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
    max-width: 100% !important;
    overflow: visible !important;
    border-bottom: 1px solid var(--line) !important;
  }

  body .finance-tabs button,
  body .analytics-tabs button,
  body .mailing-tabs button,
  body .osint-tabs button {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 28px !important;
    padding: 5px 0 7px !important;
    font-size: var(--font-size-tab) !important;
    line-height: var(--line-height-tight) !important;
    white-space: normal !important;
  }
}

/* Audit polish P2: tiny residual text fits without changing page behavior. */
body #tasks .tasks-table .badge,
body #tasks .task-subtasks-menu .badge {
  min-width: max-content !important;
  width: auto !important;
  max-width: none !important;
  padding-inline: 8px !important;
  overflow: visible !important;
}

body #documents .documents-due {
  width: auto !important;
  max-width: 96px !important;
  white-space: normal !important;
  overflow: visible !important;
}

body #documents .documents-due small {
  max-width: 96px !important;
  overflow-wrap: anywhere !important;
}

body #clients .clients-table th:nth-child(7),
body #clients .clients-table td:nth-child(7),
.clients-table-card .clients-table th:nth-child(7),
.clients-table-card .clients-table td:nth-child(7) {
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  text-align: center !important;
}

body #clients .clients-table th:nth-child(7) {
  font-size: var(--font-size-table-header) !important;
  white-space: nowrap !important;
}

body #settings .settings-log-list strong,
body #settings .settings-integration-copy,
body #settings .settings-integration-heading {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Audit P1 closure: keep Tasks and Calendar contained at tablet/mobile widths. */
@media (max-width: 1023px) {
  body #tasks .tasks-screen,
  body #tasks .tasks-workspace,
  body #tasks .tasks-main-column,
  body #tasks .tasks-list-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  body #tasks .tasks-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body #tasks .tasks-toolbar > *,
  body #tasks .tasks-toolbar input,
  body #tasks .tasks-toolbar button,
  body #tasks .tasks-toolbar .custom-select,
  body #tasks .tasks-toolbar .custom-select-trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body #tasks .screen-native-select {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 1px !important;
    min-width: 1px !important;
    max-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body #tasks .tasks-list-card.table-wrap {
    overflow-x: hidden !important;
  }

  body #tasks .tasks-table,
  body #tasks .tasks-table thead,
  body #tasks .tasks-table tbody,
  body #tasks .tasks-table tr,
  body #tasks .tasks-table th,
  body #tasks .tasks-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body #tasks .tasks-table thead {
    display: none !important;
  }

  body #tasks .tasks-table tbody {
    display: grid !important;
    gap: 8px !important;
  }

  body #tasks .tasks-table tbody tr {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 30px !important;
    gap: 6px 8px !important;
    padding: 10px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    background: #fff !important;
  }

  body #tasks .tasks-table tbody tr.selected {
    background: #f4f8fd !important;
  }

  body #tasks .tasks-table tbody td,
  body #tasks .tasks-table tbody td:nth-child(1),
  body #tasks .tasks-table tbody td:nth-child(2),
  body #tasks .tasks-table tbody td:nth-child(3),
  body #tasks .tasks-table tbody td:nth-child(4),
  body #tasks .tasks-table tbody td:nth-child(5),
  body #tasks .tasks-table tbody td:nth-child(6),
  body #tasks .tasks-table tbody td:nth-child(7) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    text-align: left !important;
  }

  body #tasks .tasks-table tbody td:nth-child(1) {
    grid-column: 1 / -1 !important;
  }

  body #tasks .tasks-table tbody td:nth-child(2),
  body #tasks .tasks-table tbody td:nth-child(3),
  body #tasks .tasks-table tbody td:nth-child(4),
  body #tasks .tasks-table tbody td:nth-child(5),
  body #tasks .tasks-table tbody td:nth-child(6) {
    display: grid !important;
    grid-column: 1 !important;
    grid-template-columns: 84px minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: center !important;
  }

  body #tasks .tasks-table tbody td:nth-child(2)::before { content: "Пріоритет"; }
  body #tasks .tasks-table tbody td:nth-child(3)::before { content: "Справа"; }
  body #tasks .tasks-table tbody td:nth-child(4)::before { content: "Відповідальний"; }
  body #tasks .tasks-table tbody td:nth-child(5)::before { content: "Дедлайн"; }
  body #tasks .tasks-table tbody td:nth-child(6)::before { content: "Статус"; }

  body #tasks .tasks-table tbody td:nth-child(n+2):nth-child(-n+6)::before {
    color: var(--muted) !important;
    font-size: var(--font-size-caption-xs) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
  }

  body #tasks .tasks-table tbody td:nth-child(7) {
    grid-column: 2 !important;
    grid-row: 2 / span 5 !important;
    justify-self: end !important;
    align-self: start !important;
    width: 30px !important;
    max-width: 30px !important;
  }

  body #tasks .task-title-cell,
  body #tasks .tasks-table tbody td > *,
  body #tasks .tasks-table tbody a,
  body #tasks .tasks-table tbody strong,
  body #tasks .tasks-table tbody span:not(.sr-only) {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  body #tasks .task-list-actions .row-action-trigger {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }
}

@media (max-width: 560px) {
  body #tasks .tasks-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #tasks .tasks-tabs {
    display: flex !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  body #tasks .tasks-tabs::-webkit-scrollbar {
    display: none !important;
  }
}

body #calendar .event-chip,
body #calendar .calendar-popover-event {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body #calendar .event-chip strong,
body #calendar .event-chip span,
body #calendar .calendar-popover-event strong,
body #calendar .calendar-popover-event span {
  display: block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #calendar .calendar-day-more-wrap {
  position: relative !important;
  display: inline-block !important;
  max-width: 100% !important;
}

body #calendar .calendar-day-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

body #calendar .calendar-day-popover {
  width: min(250px, calc(100vw - 32px)) !important;
  max-width: min(250px, calc(100vw - 32px)) !important;
  overflow-x: hidden !important;
  z-index: 80 !important;
}

@media (max-width: 767px) {
  body #calendar .calendar-grid.month-view .day {
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 4px !important;
  }

  body #calendar .event-chip {
    min-height: 22px !important;
    padding: 4px 5px !important;
    font-size: 9px !important;
    line-height: 1.12 !important;
  }

  body #calendar .event-chip strong {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  body #calendar .event-chip span {
    font-size: 8px !important;
    line-height: 1.1 !important;
  }

  body #calendar .calendar-day-popover {
    position: absolute !important;
    left: 0 !important;
    top: calc(100% + 4px) !important;
    display: grid !important;
    width: min(220px, calc(100vw - 28px)) !important;
    max-height: 190px !important;
  }
}

@media (max-width: 1023px) {
  body #tasks .tasks-kpi-grid,
  body #tasks .tasks-toolbar,
  body #tasks .tasks-list-card,
  body #tasks .tasks-bottom-grid,
  body #tasks .task-sync-card,
  body #tasks .task-priority-card,
  body #tasks .task-plan-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body #tasks .tasks-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body #tasks .tasks-bottom-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #tasks .task-sync-flow {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body #tasks .task-sync-step {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body #tasks .task-sync-step strong,
  body #tasks .task-sync-step em {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 767px) {
  body #tasks .tasks-kpi-grid,
  body #tasks .task-sync-flow {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Audit pass: desktop documents keep the selected document on the right only when there is room. */
@media (min-width: 1280px) {
  body #documents .documents-layout {
    grid-template-columns: clamp(238px, 17vw, 292px) minmax(420px, 1fr) clamp(258px, 19vw, 312px) !important;
    align-items: start !important;
  }

  body #documents .documents-side {
    grid-column: auto !important;
    position: sticky !important;
    top: 94px !important;
    max-width: none !important;
  }

  body #documents .documents-table-card,
  body #documents .documents-left-rail,
  body #documents .documents-side {
    min-width: 0 !important;
  }

  body #documents .documents-table {
    table-layout: fixed !important;
  }
}

@media (min-width: 1280px) and (max-width: 1399px) {
  body #documents .documents-layout {
    grid-template-columns: clamp(216px, 18vw, 248px) minmax(0, 1fr) !important;
  }

  body #documents .documents-side {
    grid-column: 1 / -1 !important;
    position: static !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  body #documents .documents-table th:nth-child(6),
  body #documents .documents-table td:nth-child(6) {
    display: none !important;
  }

  body #documents .documents-table th:nth-child(1),
  body #documents .documents-table td:nth-child(1) {
    width: 34% !important;
  }

  body #documents .documents-table th:nth-child(2),
  body #documents .documents-table td:nth-child(2) {
    width: 18% !important;
  }

  body #documents .documents-table th:nth-child(3),
  body #documents .documents-table td:nth-child(3) {
    width: 18% !important;
  }

  body #documents .documents-table th:nth-child(4),
  body #documents .documents-table td:nth-child(4) {
    width: 10% !important;
  }

  body #documents .documents-table th:nth-child(5),
  body #documents .documents-table td:nth-child(5) {
    width: 14% !important;
  }

  body #documents .documents-table th:nth-child(7),
  body #documents .documents-table td:nth-child(7) {
    width: 34px !important;
  }
}

/* Clients: keep Telegram and row actions together instead of sending actions to the far edge. */
body #clients .clients-table th:nth-child(7),
body #clients .clients-table td:nth-child(7),
.clients-table-card .clients-table th:nth-child(7),
.clients-table-card .clients-table td:nth-child(7) {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  text-align: left !important;
  overflow: visible !important;
}

body #clients .clients-table td.clients-telegram-actions,
.clients-table-card .clients-table td.clients-telegram-actions {
  padding-left: 2px !important;
  padding-right: 2px !important;
  overflow: visible !important;
}

.clients-telegram-actions-inner {
  display: inline-grid !important;
  grid-template-columns: 16px 24px !important;
  align-items: center !important;
  justify-content: start !important;
  justify-items: center !important;
  gap: 10px !important;
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  white-space: nowrap !important;
}

.clients-telegram-actions-inner .telegram-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.clients-telegram-actions-inner .telegram-icon .ui-icon {
  width: 14px !important;
  height: 14px !important;
}

.clients-telegram-actions-inner .connected-text {
  display: none !important;
}

.clients-telegram-actions-inner .row-action-menu-wrap,
.clients-telegram-actions-inner .row-action-menu-wrap.clients-actions-menu {
  display: inline-grid !important;
  place-items: center !important;
  justify-content: center !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 30px !important;
  max-width: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.clients-telegram-actions-inner .row-action-menu-wrap > .row-action-trigger,
.clients-telegram-actions-inner .row-action-menu-wrap.clients-actions-menu > .row-action-trigger {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border-radius: 7px !important;
}

@media (min-width: 769px) {
  body #clients .clients-left,
  body #clients .clients-table-card,
  body #clients .client-profile-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .clients-table-card .clients-table {
    width: 100% !important;
    min-width: 860px !important;
    max-width: 100% !important;
  }

  .clients-table-card .table-footer {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Clients dashboard reference alignment: one compact table, no dead action gutter. */
body #clients {
  --clients-action-col: 64px;
  --clients-side-width: clamp(280px, 22vw, 324px);
}

body #clients .telegram-connection-row {
  align-items: center !important;
  justify-content: space-between !important;
}

body #clients .telegram-status-icon {
  display: inline-grid !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  place-items: center !important;
  border: 1px solid var(--semantic-green-border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--semantic-green-soft) !important;
  color: var(--semantic-green) !important;
  font-size: 0 !important;
}

body #clients .telegram-status-icon .ui-icon,
body #clients .telegram-status-icon svg {
  width: 16px !important;
  height: 16px !important;
}

@media (min-width: 1280px) {
  body #clients .clients-layout {
    grid-template-columns: minmax(0, 1fr) var(--clients-side-width) !important;
    align-items: start !important;
    gap: 14px !important;
  }

  body #clients .clients-side {
    max-width: var(--clients-side-width) !important;
  }
}

@media (min-width: 769px) and (max-width: 1279px) {
  body #clients .clients-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #clients .clients-side {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}

@media (min-width: 769px) {
  body #clients .clients-left,
  body #clients .clients-table-card,
  body #clients .client-profile-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body #clients .clients-table-card.table-wrap {
    overflow: visible !important;
  }

  body #clients .clients-table-card .clients-table,
  body #clients .clients-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  body #clients .clients-table th,
  body #clients .clients-table td {
    overflow: hidden !important;
    padding: 8px 6px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
  }

  body #clients .clients-table th:first-child,
  body #clients .clients-table td:first-child {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
  }

  body #clients .clients-table th:nth-child(2),
  body #clients .clients-table td:nth-child(2) {
    width: 19% !important;
  }

  body #clients .clients-table th:nth-child(3),
  body #clients .clients-table td:nth-child(3) {
    width: 12% !important;
  }

  body #clients .clients-table th:nth-child(4),
  body #clients .clients-table td:nth-child(4) {
    width: 20% !important;
  }

  body #clients .clients-table th:nth-child(5),
  body #clients .clients-table td:nth-child(5) {
    width: 25% !important;
  }

  body #clients .clients-table th:nth-child(6),
  body #clients .clients-table td:nth-child(6) {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
  }

  body #clients .clients-table th:nth-child(7),
  body #clients .clients-table td:nth-child(7) {
    width: var(--clients-action-col) !important;
    min-width: var(--clients-action-col) !important;
    max-width: var(--clients-action-col) !important;
    overflow: visible !important;
    padding-right: 0 !important;
    text-align: left !important;
  }

  body #clients .clients-table td.clients-telegram-actions {
    overflow: visible !important;
    padding-left: 2px !important;
    padding-right: 0 !important;
  }

  body #clients .clients-telegram-actions-inner {
    display: inline-grid !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    grid-template-columns: 16px 30px !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: start !important;
    justify-items: center !important;
    white-space: nowrap !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon {
    display: inline-grid !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    place-items: center !important;
    margin: 0 !important;
    color: var(--blue) !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon.telegram-icon-active {
    color: var(--semantic-green) !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon .ui-icon,
  body #clients .clients-telegram-actions-inner .telegram-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  body #clients .clients-telegram-actions-inner .row-action-menu-wrap,
  body #clients .clients-telegram-actions-inner .row-action-menu-wrap.clients-actions-menu {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
  }

  body #clients .clients-telegram-actions-inner .row-action-trigger {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border-radius: var(--radius-sm) !important;
  }

  body #clients .clients-table-card .table-footer {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Clients page dashboard contract: compact, aligned, and controlled by design tokens. */
body #clients {
  --clients-side-width: clamp(286px, 22vw, 324px);
  --clients-action-col: 58px;
}

body #clients .clients-toolbar,
body #clients .clients-filter-panel,
body #clients .clients-layout,
body #clients .clients-left,
body #clients .clients-side {
  min-width: 0 !important;
}

body #clients .clients-left {
  display: grid !important;
  gap: 14px !important;
}

body #clients .clients-table-card,
body #clients .client-profile-card,
body #clients .clients-side .side-card {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 18px 42px rgba(20, 49, 82, .05) !important;
}

body #clients .clients-table-card,
body #clients .client-profile-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 12px !important;
}

body #clients .clients-table-card h2,
body #clients .client-profile-card h2,
body #clients .clients-side h2 {
  margin: 0 0 10px !important;
  color: var(--ink) !important;
  font-size: var(--font-size-card-title) !important;
  line-height: var(--line-height-snug) !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
}

body #clients .clients-side h3,
body #clients .client-profile-card h3 {
  margin: 0 0 6px !important;
  color: var(--ink) !important;
  font-size: var(--font-size-label) !important;
  line-height: var(--line-height-snug) !important;
  font-weight: var(--font-weight-semibold) !important;
}

body #clients .clients-side p,
body #clients .clients-side span,
body #clients .clients-side strong,
body #clients .client-profile-card p,
body #clients .client-profile-card span,
body #clients .client-profile-card strong,
body #clients .client-profile-card button {
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-normal) !important;
}

body #clients .clients-side strong,
body #clients .client-profile-card strong {
  font-weight: var(--font-weight-semibold) !important;
}

body #clients .clients-side .side-card {
  padding: 12px !important;
}

body #clients .clients-side {
  gap: 12px !important;
}

body #clients .telegram-connect {
  padding: 10px !important;
  border-radius: var(--radius-md) !important;
}

body #clients .telegram-connection-row {
  gap: 10px !important;
  justify-content: space-between !important;
}

body #clients .telegram-status-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: var(--radius-sm) !important;
}

body #clients .telegram-status-icon .ui-icon,
body #clients .telegram-status-icon svg {
  width: 15px !important;
  height: 15px !important;
}

body #clients .mailing-grid {
  gap: 10px !important;
}

body #clients .message-label textarea,
body #clients #client-mailing-text {
  min-height: 112px !important;
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-normal) !important;
}

body #clients .message-preview {
  min-height: 118px !important;
  padding: 12px !important;
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-normal) !important;
}

body #clients .client-profile-card .profile-shell {
  gap: 12px !important;
}

body #clients .client-profile-card .profile-card-head {
  gap: 10px !important;
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
}

body #clients .client-profile-card .profile-screenshot-grid {
  gap: 12px !important;
}

body #clients .client-profile-card .contact-row,
body #clients .client-profile-card .client-communication-row {
  gap: 8px !important;
}

@media (min-width: 1280px) {
  body #clients .clients-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--clients-side-width) !important;
    align-items: start !important;
    gap: 14px !important;
  }

  body #clients .clients-side {
    width: var(--clients-side-width) !important;
    max-width: var(--clients-side-width) !important;
  }
}

@media (min-width: 769px) and (max-width: 1279px) {
  body #clients .clients-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body #clients .clients-side {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 769px) {
  body #clients .clients-table-card.table-wrap {
    overflow: hidden !important;
  }

  body #clients .clients-table-card .clients-table,
  body #clients .clients-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  body #clients .clients-table th,
  body #clients .clients-table td {
    height: auto !important;
    min-height: 44px !important;
    padding: 8px 6px !important;
    color: var(--ink) !important;
    font-size: var(--font-size-table-cell) !important;
    line-height: 1.25 !important;
    font-weight: var(--font-weight-medium) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    vertical-align: middle !important;
  }

  body #clients .clients-table th {
    color: var(--muted) !important;
    font-size: var(--font-size-table-header) !important;
    line-height: var(--line-height-tight) !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: .01em !important;
  }

  body #clients .clients-table td strong,
  body #clients .clients-table td a {
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: var(--font-weight-semibold) !important;
  }

  body #clients .clients-table th:first-child,
  body #clients .clients-table td:first-child {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding-left: 4px !important;
  }

  body #clients .clients-table th:nth-child(2),
  body #clients .clients-table td:nth-child(2) {
    width: 21% !important;
  }

  body #clients .clients-table th:nth-child(3),
  body #clients .clients-table td:nth-child(3) {
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
  }

  body #clients .clients-table th:nth-child(4),
  body #clients .clients-table td:nth-child(4) {
    width: 20% !important;
  }

  body #clients .clients-table th:nth-child(5),
  body #clients .clients-table td:nth-child(5) {
    width: 27% !important;
  }

  body #clients .clients-table th:nth-child(6),
  body #clients .clients-table td:nth-child(6) {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
  }

  body #clients .clients-table th:nth-child(7),
  body #clients .clients-table td:nth-child(7) {
    width: var(--clients-action-col) !important;
    min-width: var(--clients-action-col) !important;
    max-width: var(--clients-action-col) !important;
    overflow: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
  }

  body #clients .clients-table td.clients-telegram-actions {
    overflow: visible !important;
  }

  body #clients .clients-telegram-actions-inner {
    display: inline-grid !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    grid-template-columns: 16px 28px !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: start !important;
    justify-items: center !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon {
    display: inline-grid !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    place-items: center !important;
    color: var(--blue) !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon.telegram-icon-active {
    color: var(--semantic-green) !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon .ui-icon,
  body #clients .clients-telegram-actions-inner .telegram-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  body #clients .clients-telegram-actions-inner .row-action-menu-wrap,
  body #clients .clients-telegram-actions-inner .row-action-menu-wrap.clients-actions-menu {
    display: inline-grid !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body #clients .clients-telegram-actions-inner .row-action-trigger {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border-radius: var(--radius-sm) !important;
  }

  body #clients .clients-table-card .table-footer {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 0 0 !important;
    margin-top: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    font-size: var(--font-size-caption) !important;
    line-height: var(--line-height-normal) !important;
  }
}

@media (max-width: 768px) {
  body #clients .clients-layout,
  body #clients .clients-left,
  body #clients .clients-side {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
  }

  body #clients .clients-table-card,
  body #clients .client-profile-card,
  body #clients .clients-side .side-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  body #clients .clients-table,
  body #clients .clients-table thead,
  body #clients .clients-table tbody,
  body #clients .clients-table tr,
  body #clients .clients-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body #clients .clients-table {
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  body #clients .clients-table thead {
    display: none !important;
  }

  body #clients .clients-table tbody {
    display: grid !important;
    gap: 10px !important;
  }

  body #clients .clients-table tbody tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    background: #fbfcfe !important;
  }

  body #clients .clients-table td {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--ink) !important;
    font-size: var(--font-size-table-cell) !important;
    line-height: var(--line-height-normal) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  body #clients .clients-table td:first-child {
    grid-column: 1 / -1 !important;
    width: auto !important;
  }

  body #clients .clients-table td:not(:first-child):not(.clients-telegram-actions) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    border: 1px solid #edf1f7 !important;
    border-radius: var(--radius-md) !important;
    background: #f8fafc !important;
  }

  body #clients .clients-table td:not(:first-child):not(.clients-telegram-actions)::before {
    display: block !important;
    color: var(--muted) !important;
    font-size: var(--font-size-caption-xs) !important;
    line-height: var(--line-height-tight) !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: .01em !important;
    text-transform: uppercase !important;
  }

  body #clients .clients-table td:nth-child(2)::before {
    content: "Клієнт" !important;
  }

  body #clients .clients-table td:nth-child(3)::before {
    content: "Телефон" !important;
  }

  body #clients .clients-table td:nth-child(4)::before {
    content: "Email" !important;
  }

  body #clients .clients-table td:nth-child(5)::before {
    content: "Суть" !important;
  }

  body #clients .clients-table td:nth-child(6)::before {
    content: "Дата" !important;
  }

  body #clients .clients-table td.clients-telegram-actions {
    grid-column: 1 / -1 !important;
    display: flex !important;
    justify-content: flex-start !important;
    padding-top: 2px !important;
  }

  body #clients .clients-table td.clients-telegram-actions::before {
    display: none !important;
    content: none !important;
  }

  body #clients .clients-telegram-actions-inner {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    grid-template-columns: 16px 28px !important;
    gap: 10px !important;
  }

  body #clients .clients-table-card .table-footer {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* Cases dashboard contract: keep the cases list visually aligned with Dashboard and Clients. */
body #cases {
  --cases-side-width: clamp(286px, 21vw, 330px);
  --cases-action-col: 38px;
  --cases-row-pad-y: 8px;
  --cases-row-pad-x: 6px;
}

body #cases .case-list-screen {
  display: grid !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
}

body #cases .case-list-head {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
}

body #cases .case-list-global-search {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) 40px auto !important;
  gap: 10px !important;
  align-items: center !important;
}

body #cases .case-list-global-search input,
body #cases .case-list-toolbar input,
body #cases .case-list-toolbar select,
body #cases .case-pagination-left select {
  min-height: 34px !important;
  height: 34px !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--font-size-input) !important;
  line-height: var(--line-height-normal) !important;
  font-weight: var(--font-weight-semibold) !important;
}

body #cases .case-list-global-search .icon-button {
  width: 40px !important;
  min-width: 40px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: var(--radius-sm) !important;
}

body #cases .case-list-global-search .primary {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--font-size-button) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-semibold) !important;
  white-space: nowrap !important;
}

body #cases .case-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
}

body #cases .case-kpi-card {
  min-height: 74px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: #fff !important;
  box-shadow: var(--shadow-soft) !important;
}

body #cases .case-kpi-card span {
  color: var(--muted) !important;
  font-size: var(--font-size-label) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
}

body #cases .case-kpi-card strong {
  color: var(--ink) !important;
  font-size: clamp(18px, 1.25vw, 22px) !important;
  line-height: 1.1 !important;
  font-weight: var(--font-weight-bold) !important;
}

body #cases .case-kpi-card i {
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
}

body #cases .case-kpi-card i .ui-icon,
body #cases .case-kpi-card i svg {
  width: 17px !important;
  height: 17px !important;
}

body #cases .case-list-toolbar {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(156px, 0.55fr)) !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 0 !important;
}

body #cases .case-list-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--cases-side-width) !important;
  gap: 12px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
}

body #cases .case-card,
body #cases .case-list-card,
body #cases .case-preview-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: #fff !important;
  box-shadow: var(--shadow-soft) !important;
}

body #cases .case-list-card {
  min-height: 0 !important;
  height: auto !important;
  padding: 12px !important;
  overflow: visible !important;
}

body #cases .case-list-card .table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

body #cases .case-list-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  font-size: var(--font-size-table-cell) !important;
}

body #cases .case-list-table th,
body #cases .case-list-table td {
  height: auto !important;
  min-height: 42px !important;
  padding: var(--cases-row-pad-y) var(--cases-row-pad-x) !important;
  color: var(--ink) !important;
  font-size: var(--font-size-table-cell) !important;
  line-height: 1.22 !important;
  font-weight: var(--font-weight-medium) !important;
  vertical-align: middle !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body #cases .case-list-table th {
  position: static !important;
  color: var(--muted) !important;
  font-size: var(--font-size-table-header) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: .01em !important;
  background: #fff !important;
}

body #cases .case-list-table th:nth-child(1),
body #cases .case-list-table td:nth-child(1) {
  width: 16% !important;
}

body #cases .case-list-table th:nth-child(2),
body #cases .case-list-table td:nth-child(2) {
  width: 106px !important;
}

body #cases .case-list-table th:nth-child(3),
body #cases .case-list-table td:nth-child(3) {
  width: 22% !important;
}

body #cases .case-list-table th:nth-child(4),
body #cases .case-list-table td:nth-child(4) {
  width: 13% !important;
}

body #cases .case-list-table th:nth-child(5),
body #cases .case-list-table td:nth-child(5) {
  width: 108px !important;
  text-align: left !important;
}

body #cases .case-list-table th:nth-child(6),
body #cases .case-list-table td:nth-child(6),
body #cases .case-list-table th:nth-child(7),
body #cases .case-list-table td:nth-child(7) {
  width: 54px !important;
  text-align: center !important;
}

body #cases .case-list-table th:nth-child(8),
body #cases .case-list-table td:nth-child(8) {
  width: 124px !important;
}

body #cases .case-list-table th:nth-child(9),
body #cases .case-list-table td:nth-child(9) {
  width: var(--cases-action-col) !important;
  min-width: var(--cases-action-col) !important;
  max-width: var(--cases-action-col) !important;
  overflow: visible !important;
  text-align: right !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body #cases .case-client-cell {
  gap: 8px !important;
}

body #cases .case-client-avatar {
  width: 30px !important;
  height: 30px !important;
  flex-basis: 30px !important;
  font-size: var(--font-size-caption) !important;
}

body #cases .case-client-text {
  gap: 3px !important;
}

body #cases .case-client-text strong,
body #cases .case-list-table td > strong,
body #cases .case-list-table td a {
  color: var(--ink) !important;
  font-size: var(--font-size-body-sm) !important;
  line-height: 1.2 !important;
  font-weight: var(--font-weight-bold) !important;
}

body #cases .case-client-text strong {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  color: #172033 !important;
  font-weight: 900 !important;
}

body #cases .case-client-name {
  display: inline-block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #172033 !important;
  font-weight: 900 !important;
}

body #cases .case-list-table td a {
  color: var(--blue) !important;
}

body #cases .case-client-text span,
body #cases .case-list-table td > span:not(.badge):not(.case-status-icon):not(.case-deadline-chip):not(.sr-only),
body #cases .case-list-table td > strong + span,
body #cases .case-list-table td .case-number-stack small {
  color: var(--muted) !important;
  font-size: var(--font-size-caption) !important;
  line-height: 1.2 !important;
  font-weight: var(--font-weight-medium) !important;
}

body #cases .case-client-text strong em {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 52px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #eaf4ff !important;
  color: var(--action-dark) !important;
  padding: 0 7px !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body #cases .case-client-count-toggle {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--action-dark) !important;
  padding: 0 !important;
  font-size: var(--font-size-caption) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: inherit !important;
}

body #cases .case-client-count-toggle .ui-icon {
  width: 18px !important;
  height: 18px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid currentColor !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, currentColor 9%, #fff) !important;
  color: inherit !important;
}

body #cases .case-client-count-toggle .ui-icon svg {
  width: 10px !important;
  height: 10px !important;
  stroke-width: 1.9 !important;
}

body #cases .case-client-head {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body #cases .case-client-expand-switch {
  flex: 0 0 auto !important;
  width: 31px !important;
  height: 18px !important;
  min-height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border: 1px solid #d7e4f4 !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  padding: 2px !important;
  color: var(--action-dark) !important;
  cursor: pointer !important;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

body #cases .case-client-expand-switch > span {
  width: 12px !important;
  height: 12px !important;
  display: block !important;
  border-radius: 999px !important;
  background: #94a3b8 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16) !important;
  transition: transform 0.18s ease, background 0.18s ease !important;
}

body #cases .case-client-expand-switch.active {
  border-color: #9dcbff !important;
  background: #eaf4ff !important;
  box-shadow: 0 0 0 3px rgba(43, 115, 198, 0.08) !important;
}

body #cases .case-client-expand-switch.active > span {
  transform: translateX(13px) !important;
  background: var(--action-dark) !important;
}

body #cases .case-client-expand-switch:hover,
body #cases .case-client-expand-switch:focus-visible {
  border-color: #9dcbff !important;
  outline: none !important;
}

body #cases .case-client-count-value {
  color: var(--action-dark) !important;
  font-size: var(--font-size-caption) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

body #cases .case-client-cell.has-case-toggle {
  cursor: pointer !important;
  border-radius: 8px !important;
}

body #cases .case-client-cell.has-case-toggle:hover .case-client-name,
body #cases .case-client-cell.has-case-toggle:focus-visible .case-client-name {
  color: var(--action-dark) !important;
}

body #cases .case-list-table .case-client-text .case-client-name {
  color: #172033 !important;
  font-size: var(--font-size-body-sm) !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

body #cases .case-number-cell {
  grid-template-columns: 15px minmax(0, 1fr) !important;
  gap: 6px !important;
}

body #cases .case-number-cell input,
body #cases .case-title-head input {
  width: 14px !important;
  height: 14px !important;
}

body #cases .case-materials {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-top: 5px !important;
}

body #cases .case-material-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 24px !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--blue) !important;
  font-size: var(--font-size-caption) !important;
  line-height: 1 !important;
  font-weight: var(--font-weight-bold) !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

body #cases .case-material-badge .ui-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  border: 1px solid currentColor !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, currentColor 9%, #fff) !important;
  line-height: 0 !important;
}

body #cases .case-material-badge .ui-icon svg {
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  stroke-width: 1.9 !important;
}

body #cases .case-material-badge.amber {
  color: var(--semantic-amber) !important;
}

body #cases .case-material-badge.violet {
  color: var(--semantic-violet) !important;
}

body #cases .case-deadline-chip {
  min-height: 24px !important;
  height: 24px !important;
  max-width: 100% !important;
  gap: 5px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  font-size: var(--font-size-caption) !important;
  line-height: 1 !important;
  font-weight: var(--font-weight-bold) !important;
  white-space: nowrap !important;
}

body #cases .case-deadline-chip .ui-icon,
body #cases .case-deadline-chip svg {
  width: 13px !important;
  height: 13px !important;
}

body #cases .case-status-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 999px !important;
}

body #cases .case-status-icon .ui-icon,
body #cases .case-status-icon svg {
  width: 15px !important;
  height: 15px !important;
}

body #cases .case-finance-summary {
  gap: 1px !important;
  min-width: 0 !important;
}

body #cases .case-finance-summary strong {
  display: block !important;
  color: var(--ink) !important;
  font-size: var(--font-size-card-title) !important;
  line-height: 1.15 !important;
  font-weight: var(--font-weight-bold) !important;
  white-space: nowrap !important;
}

body #cases .case-finance-summary span {
  display: block !important;
  color: var(--muted) !important;
  font-size: var(--font-size-caption) !important;
  line-height: 1.2 !important;
  font-weight: var(--font-weight-semibold) !important;
  white-space: nowrap !important;
}

body #cases .case-finance-summary span.debt {
  color: var(--semantic-red) !important;
}

body #cases .case-finance-summary span.paid {
  color: var(--semantic-green) !important;
}

body #cases .case-actions-cell .row-action-menu-wrap,
body #cases .case-actions-cell .row-action-trigger {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: var(--radius-sm) !important;
}

body #cases .case-actions-cell .row-action-trigger .ui-icon,
body #cases .case-actions-cell .row-action-trigger svg {
  width: 14px !important;
  height: 14px !important;
}

body #cases .case-pagination {
  margin-top: 10px !important;
  padding-top: 10px !important;
  gap: 10px !important;
  color: var(--muted) !important;
  font-size: var(--font-size-caption) !important;
  line-height: var(--line-height-normal) !important;
  font-weight: var(--font-weight-semibold) !important;
}

body #cases .case-pagination button {
  min-width: 30px !important;
  height: 30px !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--font-size-caption) !important;
  font-weight: var(--font-weight-bold) !important;
}

body #cases .case-preview-card {
  position: sticky !important;
  top: 12px !important;
  align-self: start !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: calc(100vh - 96px) !important;
  padding: 12px !important;
  overflow: auto !important;
}

body #cases .case-preview-hero {
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 9px !important;
  margin-bottom: 10px !important;
}

body #cases .case-preview-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--radius-sm) !important;
}

body #cases .case-preview-icon .ui-icon,
body #cases .case-preview-icon svg {
  width: 17px !important;
  height: 17px !important;
}

body #cases .case-preview-hero h2 {
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: var(--font-size-card-title) !important;
  line-height: 1.2 !important;
  font-weight: var(--font-weight-bold) !important;
}

body #cases .case-preview-hero p {
  margin-top: 4px !important;
  color: var(--muted) !important;
  font-size: var(--font-size-caption) !important;
  line-height: 1.25 !important;
  font-weight: var(--font-weight-medium) !important;
}

body #cases .case-preview-pills {
  gap: 7px !important;
  margin-bottom: 10px !important;
}

body #cases .case-preview-pill-row {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 7px !important;
}

body #cases .case-preview-pill-row > span,
body #cases .case-preview-rows span {
  color: var(--muted) !important;
  font-size: var(--font-size-caption) !important;
  line-height: 1.2 !important;
  font-weight: var(--font-weight-bold) !important;
}

body #cases .case-pill-picker summary {
  min-height: 28px !important;
  grid-template-columns: 18px minmax(0, 1fr) 18px !important;
  gap: 6px !important;
  padding: 0 8px !important;
  border-radius: var(--radius-sm) !important;
}

body #cases .case-pill-picker summary > .ui-icon,
body #cases .case-pill-picker button > span {
  width: 18px !important;
  height: 18px !important;
}

body #cases .case-pill-picker summary .ui-icon svg,
body #cases .case-pill-picker button .ui-icon svg {
  width: 11px !important;
  height: 11px !important;
}

body #cases .case-pill-picker summary strong,
body #cases .case-pill-picker button strong,
body #cases .case-preview-pill strong {
  font-size: var(--font-size-caption) !important;
  line-height: 1.15 !important;
  font-weight: var(--font-weight-bold) !important;
}

body #cases .case-pill-picker summary strong {
  text-align: center !important;
  justify-self: stretch !important;
}

body #cases .case-pill-picker summary i {
  display: block !important;
  justify-self: center !important;
  width: 7px !important;
  height: 7px !important;
  font-size: 0 !important;
  border: 0 !important;
  border-right: 1.6px solid currentColor !important;
  border-bottom: 1.6px solid currentColor !important;
  border-radius: 1px !important;
  opacity: 0.75 !important;
  transform: translateY(-2px) rotate(45deg) !important;
  transition: transform 0.16s ease !important;
}

body #cases .case-pill-picker[open] summary i {
  transform: translateY(1px) rotate(225deg) !important;
}

body #cases .case-pill-picker > div {
  width: min(230px, calc(100vw - 32px)) !important;
  gap: 3px !important;
  padding: 5px !important;
  border-radius: var(--radius-md) !important;
}

body #cases .case-pill-picker button {
  min-height: 30px !important;
  grid-template-columns: 20px minmax(0, 1fr) 14px !important;
  gap: 6px !important;
  border-radius: var(--radius-sm) !important;
}

body #cases .case-preview-rows {
  gap: 0 !important;
  margin-bottom: 10px !important;
}

body #cases .case-preview-rows div {
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  min-height: 32px !important;
  padding: 7px 0 !important;
  border-top: 1px solid var(--line) !important;
}

body #cases .case-preview-rows strong,
body #cases .case-preview-rows em,
body #cases .case-preview-summary p {
  color: var(--ink) !important;
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-normal) !important;
  font-weight: var(--font-weight-semibold) !important;
}

body #cases .case-preview-rows em {
  color: var(--muted) !important;
  font-style: normal !important;
}

body #cases .case-preview-person {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

body #cases .case-preview-summary {
  gap: 5px !important;
  padding-top: 10px !important;
}

body #cases .case-preview-summary h3 {
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: var(--font-size-card-title) !important;
  line-height: 1.2 !important;
  font-weight: var(--font-weight-bold) !important;
}

body #cases .case-preview-links {
  display: grid !important;
  gap: 9px !important;
  margin-top: 10px !important;
}

body #cases .case-preview-primary-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body #cases .case-preview-primary-actions button,
body #cases .case-preview-open,
body #cases .case-preview-edit {
  min-height: 32px !important;
  height: 32px !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--font-size-button) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-semibold) !important;
}

body #cases .case-preview-stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body #cases .case-preview-stat {
  min-height: 44px !important;
  padding: 6px 5px !important;
  border-radius: var(--radius-sm) !important;
}

body #cases .case-preview-stat i {
  gap: 4px !important;
  align-items: center !important;
}

/* The icon badge and the glyph inside it must be sized separately: the soft
   circle is the badge, the svg is a smaller, centered glyph with breathing room.
   Sizing both to 14px (old rule) made the glyph fill the circle and spill onto
   the ring, throwing it off-center. */
body #cases .case-preview-stat i .ui-icon {
  width: 18px !important;
  height: 18px !important;
  display: inline-grid !important;
  place-items: center !important;
  line-height: 0 !important;
}

body #cases .case-preview-stat i .ui-icon svg {
  width: 11px !important;
  height: 11px !important;
  display: block !important;
}

body #cases .case-preview-stat strong {
  font-size: var(--font-size-body-sm) !important;
  line-height: 1 !important;
  font-weight: var(--font-weight-bold) !important;
}

body #cases .case-preview-stat em {
  font-size: 10px !important;
  line-height: 1.1 !important;
  font-weight: var(--font-weight-bold) !important;
}

@media (max-width: 1279px) {
  body #cases .case-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body #cases .case-list-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #cases .case-preview-card {
    position: static !important;
    max-height: none !important;
  }
}

@media (max-width: 768px) {
  body #cases .case-list-global-search,
  body #cases .case-list-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #cases .case-list-global-search .primary,
  body #cases .case-list-global-search .icon-button {
    width: 100% !important;
  }

  body #cases .case-kpi-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #cases .case-list-card,
  body #cases .case-preview-card {
    padding: 12px !important;
  }

  body #cases .case-list-table,
  body #cases .case-list-table thead,
  body #cases .case-list-table tbody,
  body #cases .case-list-table tr,
  body #cases .case-list-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body #cases .case-list-table thead {
    display: none !important;
  }

  body #cases .case-list-table tbody {
    display: grid !important;
    gap: 10px !important;
  }

  body #cases .case-list-table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    position: relative !important;
    padding: 10px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    background: #fbfcfe !important;
  }

  body #cases .case-list-table td {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  body #cases .case-list-table td:nth-child(n) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  body #cases .case-list-table td:first-child {
    grid-column: 1 / -1 !important;
    order: -3 !important;
    padding-right: 34px !important;
  }

  body #cases .case-list-table td:first-child .case-client-cell {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body #cases .case-list-table td:first-child .case-client-text {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body #cases .case-list-table td:first-child .case-client-text strong {
    display: grid !important;
    grid-template-columns: minmax(0, max-content) auto !important;
    justify-content: start !important;
    max-width: 100% !important;
  }

  body #cases .case-list-table td:nth-child(2),
  body #cases .case-list-table td:nth-child(3),
  body #cases .case-list-table td:nth-child(4),
  body #cases .case-list-table td:nth-child(5),
  body #cases .case-list-table td:nth-child(8) {
    display: grid !important;
    gap: 4px !important;
    padding: 8px 10px !important;
    border: 1px solid #edf1f7 !important;
    border-radius: var(--radius-sm) !important;
    background: #f8fafc !important;
  }

  body #cases .case-list-table td:nth-child(3),
  body #cases .case-list-table td:nth-child(4),
  body #cases .case-list-table td:nth-child(5),
  body #cases .case-list-table td:nth-child(8) {
    grid-column: 1 / -1 !important;
  }

  body #cases .case-list-table td:nth-child(2)::before,
  body #cases .case-list-table td:nth-child(3)::before,
  body #cases .case-list-table td:nth-child(4)::before,
  body #cases .case-list-table td:nth-child(5)::before,
  body #cases .case-list-table td:nth-child(8)::before {
    display: block !important;
    color: var(--muted) !important;
    font-size: var(--font-size-caption-xs) !important;
    line-height: var(--line-height-tight) !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: .01em !important;
    text-transform: uppercase !important;
  }

  body #cases .case-list-table td:nth-child(2)::before {
    content: "Справа" !important;
  }

  body #cases .case-list-table td:nth-child(3)::before {
    content: "Назва" !important;
  }

  body #cases .case-list-table td:nth-child(4)::before {
    content: "Етап" !important;
  }

  body #cases .case-list-table td:nth-child(5)::before {
    content: "Дедлайн" !important;
  }

  body #cases .case-list-table td:nth-child(8)::before {
    content: "Фінанси" !important;
  }

  body #cases .case-list-table td:nth-child(6),
  body #cases .case-list-table td:nth-child(7) {
    display: inline-flex !important;
    width: auto !important;
    align-items: center !important;
    margin-right: 6px !important;
  }

  body #cases .case-list-table td:nth-child(9) {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 28px !important;
    padding: 0 !important;
  }

  body #cases .case-pagination {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  body #cases .case-preview-rows div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  body #cases .case-preview-primary-actions,
  body #cases .case-preview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Calendar final dashboard contract. */
body #calendar .calendar-screen {
  gap: 10px !important;
}

body #calendar .calendar-toolbar,
body #calendar .calendar-filter-panel,
body #calendar .calendar-layout,
body #calendar .calendar-left-stack,
body #calendar .calendar-side {
  gap: 10px !important;
}

body #calendar .calendar-toolbar {
  align-items: center !important;
}

body #calendar .calendar-toolbar .primary,
body #calendar .calendar-toolbar .secondary,
body #calendar .calendar-reset-filter,
body #calendar .calendar-overdue-filter,
body #calendar .calendar-title-button,
body #calendar .calendar-filter-select .document-custom-select-button,
body #calendar .calendar-filter-panel input {
  min-height: 32px !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--font-size-button) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-semibold) !important;
}

body #calendar .calendar-title-button {
  padding: 0 8px !important;
  color: var(--ink) !important;
  font-size: var(--font-size-card-title) !important;
  font-weight: var(--font-weight-bold) !important;
  text-align: center !important;
}

body #calendar .calendar-filter-panel {
  grid-template-columns: repeat(5, minmax(128px, 1fr)) minmax(130px, .85fr) auto auto !important;
}

body #calendar .calendar-filter-select .document-custom-select-menu,
body #calendar .calendar-picker-menu,
body #calendar .event-more-menu {
  border-radius: var(--radius-md) !important;
  background: #fff !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .14) !important;
}

body #calendar .calendar-filter-select .document-custom-select-option,
body #calendar .calendar-picker-column button,
body #calendar .event-more-menu button {
  min-height: 28px !important;
  font-size: var(--font-size-table-cell) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-semibold) !important;
}

body #calendar .calendar-layout {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 290px) !important;
  align-items: start !important;
}

body #calendar .calendar-main-card {
  padding: 0 !important;
  overflow: visible !important;
}

body #calendar .calendar-weekdays,
body #calendar .calendar-grid {
  grid-template-columns: repeat(var(--calendar-columns, 7), minmax(72px, 1fr)) !important;
  overflow: visible !important;
}

body #calendar .calendar-weekdays span {
  min-height: 28px !important;
  color: var(--muted) !important;
  font-size: var(--font-size-table-header) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
}

body #calendar .calendar-grid.month-view .day {
  min-height: 86px !important;
  height: clamp(86px, 7.2vh, 104px) !important;
  padding: 6px 7px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  overflow: visible !important;
}

body #calendar .calendar-grid.week-view .day {
  min-height: 190px !important;
  padding: 7px !important;
}

body #calendar .calendar-grid.day-view .day {
  min-height: 260px !important;
  padding: 8px !important;
}

body #calendar .day-num {
  margin: 0 0 3px !important;
  color: #718096 !important;
  font-size: var(--font-size-caption) !important;
  line-height: 1 !important;
  font-weight: var(--font-weight-medium) !important;
}

body #calendar .event-chip {
  min-height: 23px !important;
  margin: 0 !important;
  padding: 4px 6px !important;
  border-radius: 6px !important;
  font-size: 9px !important;
  line-height: 1.12 !important;
  font-weight: var(--font-weight-semibold) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body #calendar .event-chip strong {
  font-size: 9.2px !important;
  line-height: 1.05 !important;
  font-weight: var(--font-weight-bold) !important;
}

body #calendar .event-chip span {
  margin-top: 2px !important;
  font-size: 8px !important;
  line-height: 1.08 !important;
  font-weight: var(--font-weight-semibold) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #calendar .calendar-day-more-wrap {
  position: relative !important;
  z-index: 12 !important;
  width: max-content !important;
}

body #calendar .calendar-day-more {
  min-width: 34px !important;
  min-height: 18px !important;
  padding: 2px 7px !important;
  border: 1px solid #d5e4f5 !important;
  border-radius: 999px !important;
  background: #eef6ff !important;
  color: var(--action-dark) !important;
  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: var(--font-weight-bold) !important;
}

body #calendar .calendar-day-popover {
  position: absolute !important;
  left: 0 !important;
  top: calc(100% + 4px) !important;
  z-index: 50 !important;
  width: min(210px, 78vw) !important;
  max-height: 210px !important;
  display: grid !important;
  gap: 4px !important;
  overflow-y: auto !important;
  padding: 6px !important;
  border: 1px solid #dbe7f5 !important;
  border-radius: var(--radius-md) !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .16) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-3px) !important;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;
}

body #calendar .calendar-day-more-wrap:hover .calendar-day-popover,
body #calendar .calendar-day-more-wrap:focus-within .calendar-day-popover {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

body #calendar .calendar-popover-event {
  min-height: 28px !important;
  padding: 6px 7px !important;
  border: 0 !important;
  border-radius: 7px !important;
  font-size: 9px !important;
  line-height: 1.16 !important;
  font-weight: var(--font-weight-semibold) !important;
  text-align: left !important;
}

body #calendar .calendar-popover-event span {
  display: block !important;
  margin-top: 2px !important;
  color: var(--muted) !important;
  font-size: 8px !important;
  line-height: 1.1 !important;
}

body #calendar .calendar-legend {
  gap: 8px !important;
  padding: 10px 12px !important;
}

body #calendar .calendar-legend button {
  min-height: 24px !important;
  padding: 0 8px !important;
  gap: 5px !important;
  border-radius: 7px !important;
  font-size: var(--font-size-caption) !important;
  line-height: var(--line-height-tight) !important;
}

body #calendar .calendar-legend i,
body #calendar .event-dot {
  width: 7px !important;
  height: 7px !important;
}

body #calendar .calendar-legend em {
  min-width: 18px !important;
  height: 18px !important;
  font-size: 9px !important;
}

body #calendar #event-card,
body #calendar .calendar-reminders,
body #calendar .calendar-events-list {
  padding: 10px 12px !important;
  border-radius: var(--radius-md) !important;
}

body #calendar .event-card-head,
body #calendar .event-card-title,
body #calendar .calendar-events-head,
body #calendar .calendar-reminders-head {
  margin-bottom: 8px !important;
}

body #calendar .event-card-head h2,
body #calendar #event-card > h2,
body #calendar .calendar-events-head h2,
body #calendar .calendar-reminders-head h2,
body #calendar .calendar-reminders h2 {
  color: var(--ink) !important;
  font-size: var(--font-size-card-title) !important;
  line-height: 1.18 !important;
  font-weight: var(--font-weight-bold) !important;
}

body #calendar .event-card-nav button {
  width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  border-radius: 7px !important;
}

body #calendar .event-card-title {
  grid-template-columns: 8px minmax(0, 1fr) auto !important;
  gap: 7px !important;
}

body #calendar .event-card-title strong,
body #calendar .event-info-row strong,
body #calendar .reminder-row strong {
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-snug) !important;
  font-weight: var(--font-weight-bold) !important;
}

body #calendar .event-info-list,
body #calendar .calendar-reminders {
  gap: 8px !important;
}

body #calendar .event-info-row {
  grid-template-columns: 17px minmax(0, 1fr) !important;
  gap: 8px !important;
}

body #calendar .event-info-row .ui-icon {
  width: 15px !important;
  height: 15px !important;
}

body #calendar .event-info-row em,
body #calendar .event-description,
body #calendar .event-reminder-log span,
body #calendar .calendar-reminders p,
body #calendar .reminder-row span,
body #calendar .reminder-row small,
body #calendar .reminder-status {
  font-size: var(--font-size-caption) !important;
  line-height: var(--line-height-normal) !important;
  font-weight: var(--font-weight-medium) !important;
}

body #calendar .event-description {
  margin: 8px 0 !important;
  padding-left: 25px !important;
}

body #calendar .event-reminder-log {
  gap: 4px !important;
  margin-bottom: 9px !important;
  padding: 8px !important;
  border-radius: var(--radius-sm) !important;
}

body #calendar .event-card-actions {
  gap: 8px !important;
}

body #calendar .event-card-actions button {
  min-height: 30px !important;
  font-size: var(--font-size-button) !important;
}

body #calendar .calendar-events-list > button {
  grid-template-columns: 8px minmax(0, 1fr) 74px 48px 78px !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 7px 0 !important;
}

body #calendar .calendar-events-list strong,
body #calendar .upcoming-event-main strong {
  font-size: var(--font-size-body-sm) !important;
  line-height: var(--line-height-snug) !important;
  font-weight: var(--font-weight-bold) !important;
}

body #calendar .calendar-events-list em,
body #calendar .calendar-events-list time,
body #calendar .upcoming-event-time {
  margin-top: 2px !important;
  font-size: var(--font-size-caption) !important;
  line-height: 1.15 !important;
}

body #calendar .calendar-events-list .badge {
  min-width: 62px !important;
  min-height: 18px !important;
  padding: 0 6px !important;
  font-size: 8px !important;
}

body #calendar .reminder-row {
  grid-template-columns: 22px minmax(0, 1fr) auto !important;
  gap: 8px !important;
}

body #calendar .reminder-row > .ui-icon {
  width: 20px !important;
  height: 20px !important;
  padding: 5px !important;
  border-radius: 6px !important;
}

body #calendar .active-reminder-icons {
  gap: 10px !important;
  font-size: var(--font-size-caption) !important;
}

@media (max-width: 1279px) and (min-width: 1024px) {
  body #calendar .calendar-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #calendar .calendar-toolbar > *,
  body #calendar .calendar-toolbar .primary,
  body #calendar .calendar-toolbar .secondary,
  body #calendar .calendar-mode-group,
  body #calendar .calendar-arrows,
  body #calendar .calendar-date-picker,
  body #calendar .calendar-toolbar input {
    width: 100% !important;
    max-width: none !important;
  }

  body #calendar .calendar-mode-group {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body #calendar .calendar-arrows {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body #calendar .calendar-filter-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body #calendar .calendar-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #calendar .calendar-side {
    position: static !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;
  }

  body #calendar .calendar-weekdays,
  body #calendar .calendar-grid {
    grid-template-columns: repeat(var(--calendar-columns, 7), minmax(0, 1fr)) !important;
  }

  body #calendar .calendar-grid.month-view .day {
    min-height: 76px !important;
    height: 78px !important;
    padding: 5px !important;
  }

  body #calendar .event-chip {
    min-height: 22px !important;
    padding: 4px 5px !important;
    font-size: 8px !important;
  }

  body #calendar .event-chip strong {
    font-size: 8.2px !important;
  }

  body #calendar .event-chip span {
    font-size: 7.5px !important;
  }
}

@media (max-width: 1023px) {
  body #calendar .calendar-toolbar,
  body #calendar .calendar-filter-panel,
  body #calendar .calendar-layout,
  body #calendar .calendar-side {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #calendar .calendar-toolbar .primary,
  body #calendar .calendar-toolbar .secondary,
  body #calendar .calendar-mode-group,
  body #calendar .calendar-arrows,
  body #calendar .calendar-date-picker,
  body #calendar .calendar-toolbar input,
  body #calendar .calendar-filter-panel > * {
    width: 100% !important;
  }

  body #calendar .calendar-mode-group,
  body #calendar .calendar-arrows {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body #calendar .calendar-arrows {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body #calendar .calendar-main-card {
    overflow: hidden !important;
  }

  body #calendar .calendar-grid {
    gap: 0 !important;
  }

  body #calendar .calendar-grid.month-view .day {
    min-height: 58px !important;
    height: auto !important;
    padding: 7px 8px !important;
  }

  body #calendar .event-chip {
    min-height: 26px !important;
    white-space: normal !important;
  }

  body #calendar .calendar-day-popover {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    margin-top: 4px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
  }

  body #calendar .calendar-day-more-wrap:hover .calendar-day-popover,
  body #calendar .calendar-day-more-wrap:focus-within .calendar-day-popover {
    display: grid !important;
  }

  body #calendar .calendar-legend {
    align-items: stretch !important;
  }

  body #calendar .calendar-legend button {
    flex: 1 1 128px !important;
    justify-content: start !important;
  }

  body #calendar .calendar-events-list > button {
    grid-template-columns: 8px minmax(0, 1fr) !important;
  }

  body #calendar .calendar-events-list time,
  body #calendar .calendar-events-list .upcoming-event-time,
  body #calendar .calendar-events-list .badge {
    grid-column: 2 !important;
    justify-self: start !important;
  }
}

/* Tasks dashboard contract: final compact pass aligned with Dashboard/OSINT. */
body #tasks {
  --tasks-card-radius: var(--radius-md);
  --tasks-row-y: 7px;
  --tasks-row-x: 9px;
  --tasks-chip-h: 19px;
}

body #tasks .tasks-screen {
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

body #tasks .tasks-tabs {
  min-height: 28px !important;
  gap: 14px !important;
}

body #tasks .tasks-tabs button {
  min-height: 28px !important;
  padding: 5px 0 7px !important;
  font-size: var(--font-size-tab) !important;
  line-height: var(--line-height-tight) !important;
}

body #tasks .tasks-head-actions {
  gap: 8px !important;
}

body #tasks .tasks-head-actions button {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--font-size-button) !important;
  line-height: var(--line-height-tight) !important;
}

body #tasks .tasks-kpi-grid {
  gap: 8px !important;
}

body #tasks .tasks-kpi-card {
  min-height: 52px !important;
  padding: 8px 10px !important;
  gap: 8px !important;
  border-radius: var(--tasks-card-radius) !important;
}

body #tasks .tasks-kpi-card span,
body #tasks .tasks-kpi-card em {
  font-size: var(--font-size-caption-xs) !important;
  line-height: 1.15 !important;
}

body #tasks .tasks-kpi-card strong {
  margin: 2px 0 1px !important;
  font-size: clamp(16px, 1.05vw, 20px) !important;
  line-height: 1 !important;
}

body #tasks .tasks-kpi-card i {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 999px !important;
}

body #tasks .tasks-kpi-card .ui-icon,
body #tasks .tasks-kpi-card svg {
  width: 14px !important;
  height: 14px !important;
}

body #tasks .tasks-toolbar {
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(126px, .55fr)) auto !important;
  gap: 8px !important;
  align-items: center !important;
}

body #tasks .tasks-toolbar input,
body #tasks .tasks-toolbar select,
body #tasks .tasks-toolbar button,
body #tasks .tasks-toolbar .custom-select-trigger {
  min-height: 30px !important;
  height: 30px !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--font-size-input) !important;
  line-height: var(--line-height-normal) !important;
}

body #tasks .tasks-workspace.has-task-detail {
  grid-template-columns: minmax(0, 1fr) minmax(230px, 250px) !important;
  gap: 10px !important;
  align-items: start !important;
}

body #tasks .tasks-list-card,
body #tasks .task-side-card,
body #tasks .task-sync-card,
body #tasks .task-priority-card,
body #tasks .task-plan-card {
  border-radius: var(--tasks-card-radius) !important;
  box-shadow: var(--shadow-soft) !important;
}

body #tasks .tasks-list-card {
  min-height: 0 !important;
  height: auto !important;
  padding: 8px !important;
  overflow: visible !important;
}

body #tasks .tasks-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

body #tasks .tasks-table th,
body #tasks .tasks-table td {
  height: auto !important;
  min-height: 38px !important;
  padding: var(--tasks-row-y) var(--tasks-row-x) !important;
  font-size: var(--font-size-table-cell) !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
}

body #tasks .tasks-table th {
  color: var(--muted) !important;
  font-size: var(--font-size-table-header) !important;
  font-weight: var(--font-weight-bold) !important;
}

body #tasks .tasks-table th:nth-child(1),
body #tasks .tasks-table td:nth-child(1) {
  width: 34% !important;
}

body #tasks .tasks-table th:nth-child(2),
body #tasks .tasks-table td:nth-child(2) {
  width: 92px !important;
}

body #tasks .tasks-table th:nth-child(3),
body #tasks .tasks-table td:nth-child(3) {
  width: 118px !important;
}

body #tasks .tasks-table th:nth-child(4),
body #tasks .tasks-table td:nth-child(4) {
  width: 126px !important;
}

body #tasks .tasks-table th:nth-child(5),
body #tasks .tasks-table td:nth-child(5) {
  width: 112px !important;
}

body #tasks .tasks-table th:nth-child(6),
body #tasks .tasks-table td:nth-child(6) {
  width: 54px !important;
  text-align: center !important;
}

body #tasks .tasks-table th:nth-child(7),
body #tasks .tasks-table td:nth-child(7) {
  width: 38px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
  text-align: right !important;
}

body #tasks .task-title-cell {
  gap: 7px !important;
  min-width: 0 !important;
}

body #tasks .task-title-cell strong {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: var(--ink) !important;
  font-size: var(--font-size-table-cell) !important;
  line-height: 1.18 !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body #tasks .task-title-cell > div > span,
body #tasks .tasks-table td > span:not(.badge):not(.task-status-icon):not(.sr-only),
body #tasks .tasks-table td a + span,
body #tasks .tasks-table td:nth-child(5) span {
  display: block !important;
  margin-top: 2px !important;
  color: var(--muted) !important;
  font-size: var(--font-size-caption) !important;
  line-height: 1.14 !important;
  font-weight: var(--font-weight-medium) !important;
}

body #tasks .task-row-meta {
  gap: 4px !important;
  margin-top: 4px !important;
}

body #tasks .task-row-meta b,
body #tasks .task-subtasks-popover summary {
  min-height: var(--tasks-chip-h) !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  font-size: var(--font-size-caption-xs) !important;
  line-height: 1 !important;
}

body #tasks .task-row-meta .ui-icon,
body #tasks .task-subtasks-popover .ui-icon {
  width: 10px !important;
  height: 10px !important;
}

body #tasks .tasks-table .badge {
  min-height: 18px !important;
  padding: 2px 7px !important;
  font-size: var(--font-size-caption-xs) !important;
}

body #tasks .task-assignee {
  gap: 6px !important;
  font-size: var(--font-size-caption) !important;
}

body #tasks .task-assignee img,
body #tasks .task-assignee .advocate-avatar,
body #tasks .task-assignee .avatar {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
}

body #tasks .task-status-icon {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 999px !important;
}

body #tasks .task-status-icon .ui-icon,
body #tasks .task-status-icon svg {
  width: 13px !important;
  height: 13px !important;
}

body #tasks .task-list-actions .row-action-trigger {
  width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  border-radius: 7px !important;
}

body #tasks .tasks-pagination {
  min-height: 34px !important;
  padding: 8px 0 0 !important;
  gap: 8px !important;
}

body #tasks .tasks-pagination label,
body #tasks .tasks-pagination em {
  font-size: var(--font-size-caption) !important;
  line-height: var(--line-height-tight) !important;
}

body #tasks .tasks-pagination select,
body #tasks .tasks-pagination .custom-select-trigger {
  min-height: 30px !important;
  height: 30px !important;
  min-width: 68px !important;
  font-size: var(--font-size-input) !important;
}

body #tasks .tasks-pagination button {
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 8px !important;
}

body #tasks .task-side-card {
  padding: 10px !important;
  font-size: var(--font-size-caption) !important;
  line-height: 1.24 !important;
}

body #tasks .task-side-head {
  gap: 6px !important;
  margin-bottom: 7px !important;
}

body #tasks .task-side-head h2 {
  display: -webkit-box !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-size: var(--font-size-card-title) !important;
  line-height: 1.16 !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body #tasks .task-detail-tabs {
  gap: 7px !important;
  margin-bottom: 8px !important;
}

body #tasks .task-detail-tabs button {
  min-height: 23px !important;
  padding: 3px 0 5px !important;
  font-size: var(--font-size-caption-xs) !important;
  line-height: 1.1 !important;
}

body #tasks .task-detail-info {
  gap: 5px !important;
  margin-bottom: 8px !important;
}

body #tasks .task-detail-info > div {
  grid-template-columns: minmax(58px, .58fr) minmax(0, 1fr) !important;
  gap: 6px !important;
  padding: 3px 0 !important;
}

body #tasks .task-detail-info span {
  font-size: var(--font-size-caption-xs) !important;
  line-height: 1.12 !important;
}

body #tasks .task-detail-info strong,
body #tasks .task-detail-info a,
body #tasks .task-detail-info em,
body #tasks .task-side-card p,
body #tasks .task-side-card li {
  font-size: var(--font-size-caption) !important;
  line-height: 1.24 !important;
}

body #tasks .task-side-card h3,
body #tasks .task-progress header,
body #tasks .task-progress strong {
  font-size: var(--font-size-body-sm) !important;
  line-height: 1.18 !important;
}

body #tasks .task-side-actions {
  gap: 0 !important;
  margin-top: 8px !important;
}

body #tasks .task-action-line {
  min-height: 27px !important;
  padding: 0 8px !important;
  gap: 5px !important;
  font-size: var(--font-size-caption) !important;
  line-height: 1.1 !important;
}

body #tasks .task-action-line .ui-icon,
body #tasks .task-action-line svg {
  width: 11px !important;
  height: 11px !important;
}

body #tasks .tasks-bottom-grid {
  grid-template-columns: minmax(360px, 1.35fr) minmax(270px, .82fr) minmax(300px, .92fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
  min-width: 0 !important;
}

body #tasks .task-sync-card,
body #tasks .task-priority-card,
body #tasks .task-plan-card {
  min-height: 0 !important;
  padding: 10px 12px !important;
  overflow: hidden !important;
}

body #tasks .task-sync-card h2,
body #tasks .task-priority-card h2,
body #tasks .task-plan-card h2 {
  margin: 0 0 10px !important;
  font-size: var(--font-size-card-title) !important;
  line-height: 1.18 !important;
}

body #tasks .task-sync-flow {
  gap: 8px !important;
  align-items: start !important;
}

body #tasks .task-sync-step {
  gap: 6px !important;
}

body #tasks .task-sync-step i {
  width: 32px !important;
  height: 32px !important;
}

body #tasks .task-sync-step .ui-icon,
body #tasks .task-sync-step svg {
  width: 15px !important;
  height: 15px !important;
}

body #tasks .task-sync-step strong {
  font-size: var(--font-size-caption) !important;
  line-height: 1.18 !important;
}

body #tasks .task-sync-step em {
  max-width: 118px !important;
  font-size: var(--font-size-caption-xs) !important;
  line-height: 1.22 !important;
}

body #tasks .task-sync-arrow {
  margin-top: 6px !important;
  color: #9ca8b8 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

body #tasks .priority-card-body {
  grid-template-columns: 104px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
}

body #tasks .priority-donut {
  width: 96px !important;
  height: 96px !important;
}

body #tasks .priority-donut::after {
  inset: 28px !important;
}

body #tasks .priority-legend {
  gap: 6px !important;
  min-width: 0 !important;
}

body #tasks .priority-legend p {
  grid-template-columns: 7px minmax(48px, 1fr) minmax(54px, auto) !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body #tasks .priority-legend strong,
body #tasks .priority-legend em {
  min-width: 0 !important;
  font-size: var(--font-size-caption-xs) !important;
  line-height: 1.15 !important;
}

body #tasks .priority-legend strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #tasks .priority-legend em {
  text-align: right !important;
  white-space: nowrap !important;
}

body #tasks .red-dot,
body #tasks .amber-dot,
body #tasks .yellow-dot,
body #tasks .green-dot {
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
}

body #tasks .task-plan-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 6px !important;
}

body #tasks .task-plan-row {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 7px 8px !important;
  border-left-width: 3px !important;
  border-radius: 8px !important;
  background: #fff !important;
}

body #tasks .task-plan-card time {
  font-size: var(--font-size-body-sm) !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

body #tasks .task-plan-card strong {
  display: -webkit-box !important;
  overflow: hidden !important;
  font-size: var(--font-size-caption) !important;
  line-height: 1.18 !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body #tasks .task-plan-card em,
body #tasks .task-plan-card .ghost {
  font-size: var(--font-size-caption-xs) !important;
  line-height: 1.15 !important;
}

body #tasks .task-plan-card .ghost {
  min-height: 24px !important;
  margin-top: 2px !important;
  padding: 0 !important;
}

@media (max-width: 1279px) and (min-width: 1024px) {
  body #tasks .tasks-screen {
    gap: 8px !important;
  }

  body #tasks .tasks-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body #tasks .tasks-toolbar {
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(120px, .5fr)) !important;
  }

  body #tasks .tasks-toolbar button {
    grid-column: auto !important;
  }

  body #tasks .tasks-table,
  body #tasks .tasks-table thead,
  body #tasks .tasks-table tbody,
  body #tasks .tasks-table tr,
  body #tasks .tasks-table td {
    display: block !important;
    width: 100% !important;
  }

  body #tasks .tasks-table thead {
    display: none !important;
  }

  body #tasks .tasks-table tbody {
    display: grid !important;
    gap: 8px !important;
  }

  body #tasks .tasks-table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(120px, .6fr) 34px !important;
    gap: 7px 9px !important;
    padding: 10px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    background: #fff !important;
  }

  body #tasks .tasks-table tbody tr.selected {
    background: #f4f8fd !important;
  }

  body #tasks .tasks-table td {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body #tasks .tasks-table td:nth-child(1) {
    grid-column: 1 / -1 !important;
  }

  body #tasks .tasks-table td:nth-child(2),
  body #tasks .tasks-table td:nth-child(3),
  body #tasks .tasks-table td:nth-child(4),
  body #tasks .tasks-table td:nth-child(5),
  body #tasks .tasks-table td:nth-child(6) {
    display: grid !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: center !important;
  }

  body #tasks .tasks-table td:nth-child(2)::before { content: "Пріоритет"; }
  body #tasks .tasks-table td:nth-child(3)::before { content: "Справа"; }
  body #tasks .tasks-table td:nth-child(4)::before { content: "Відповідальний"; }
  body #tasks .tasks-table td:nth-child(5)::before { content: "Дедлайн"; }
  body #tasks .tasks-table td:nth-child(6)::before { content: "Статус"; }

  body #tasks .tasks-table td:nth-child(n+2):nth-child(-n+6)::before {
    color: var(--muted) !important;
    font-size: var(--font-size-caption-xs) !important;
    font-weight: var(--font-weight-bold) !important;
    text-transform: uppercase !important;
  }

  body #tasks .tasks-table td:nth-child(7) {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 30px !important;
  }

  body #tasks .tasks-bottom-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #tasks .priority-card-body {
    grid-template-columns: 104px minmax(0, 1fr) !important;
  }
}

@media (max-width: 767px) {
  body #tasks .tasks-head-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #tasks .tasks-head-actions button,
  body #tasks .tasks-toolbar > *,
  body #tasks .tasks-toolbar .custom-select-trigger {
    width: 100% !important;
  }

  body #tasks .tasks-kpi-grid,
  body #tasks .tasks-toolbar,
  body #tasks .tasks-bottom-grid,
  body #tasks .priority-card-body {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #tasks .tasks-kpi-card {
    min-height: 58px !important;
  }

  body #tasks .tasks-list-card {
    padding: 8px !important;
  }

  body #tasks .tasks-table tbody tr {
    padding: 10px !important;
  }

  body #tasks .task-title-cell {
    align-items: start !important;
  }

  body #tasks .task-title-cell strong {
    font-size: var(--font-size-body-sm) !important;
  }

  body #tasks .tasks-pagination {
    align-items: center !important;
  }

  body #tasks .task-sync-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body #tasks .task-sync-arrow {
    display: none !important;
  }

  body #tasks .task-sync-step i {
    width: 28px !important;
    height: 28px !important;
  }

  body #tasks .task-sync-step strong {
    font-size: 9px !important;
    line-height: 1.12 !important;
  }

  body #tasks .task-sync-step em {
    display: none !important;
  }

  body #tasks .priority-card-body {
    justify-items: center !important;
  }

  body #tasks .priority-legend {
    width: 100% !important;
  }

  body #tasks .task-plan-row {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 7px 8px !important;
  }

  body #tasks .task-plan-card time {
    font-size: var(--font-size-caption) !important;
  }
}

/* Tasks final responsive correction: desktop/laptop stays tabular, mobile becomes clean cards. */
@media (max-width: 1279px) and (min-width: 768px) {
  body #tasks .tasks-table {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  body #tasks .tasks-table thead {
    display: table-header-group !important;
  }

  body #tasks .tasks-table tbody {
    display: table-row-group !important;
  }

  body #tasks .tasks-table tr {
    display: table-row !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body #tasks .tasks-table th,
  body #tasks .tasks-table td {
    display: table-cell !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 8px 6px !important;
    border-bottom: 1px solid var(--border) !important;
    overflow: hidden !important;
    vertical-align: middle !important;
  }

  body #tasks .tasks-table td::before {
    content: none !important;
    display: none !important;
  }

  body #tasks .tasks-table th:nth-child(1),
  body #tasks .tasks-table td:nth-child(1) {
    width: 31% !important;
  }

  body #tasks .tasks-table th:nth-child(2),
  body #tasks .tasks-table td:nth-child(2) {
    width: 76px !important;
  }

  body #tasks .tasks-table th:nth-child(3),
  body #tasks .tasks-table td:nth-child(3) {
    width: 108px !important;
  }

  body #tasks .tasks-table th:nth-child(4),
  body #tasks .tasks-table td:nth-child(4) {
    width: 116px !important;
  }

  body #tasks .tasks-table th:nth-child(5),
  body #tasks .tasks-table td:nth-child(5) {
    width: 104px !important;
  }

  body #tasks .tasks-table th:nth-child(6),
  body #tasks .tasks-table td:nth-child(6) {
    width: 46px !important;
    text-align: center !important;
  }

  body #tasks .tasks-table th:nth-child(7),
  body #tasks .tasks-table td:nth-child(7) {
    position: static !important;
    width: 30px !important;
    padding-right: 0 !important;
    overflow: visible !important;
    text-align: right !important;
  }

  body #tasks .task-title-cell strong,
  body #tasks .tasks-table td a,
  body #tasks .tasks-table td > strong {
    font-size: var(--font-size-caption) !important;
    line-height: 1.14 !important;
  }

  body #tasks .tasks-table td > span,
  body #tasks .task-title-cell > div > span {
    font-size: var(--font-size-caption-xs) !important;
    line-height: 1.12 !important;
  }

  body #tasks .task-row-meta {
    gap: 3px !important;
  }

  body #tasks .task-row-meta b,
  body #tasks .task-subtasks-popover summary {
    max-width: 100% !important;
    padding: 1px 5px !important;
    font-size: 9px !important;
  }

  body #tasks .task-assignee img {
    width: 20px !important;
    height: 20px !important;
  }
}

@media (max-width: 767px) {
  body #tasks .tasks-table,
  body #tasks .tasks-table thead,
  body #tasks .tasks-table tbody,
  body #tasks .tasks-table tr,
  body #tasks .tasks-table th,
  body #tasks .tasks-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body #tasks .tasks-table thead {
    display: none !important;
  }

  body #tasks .tasks-table tbody {
    display: grid !important;
    gap: 8px !important;
  }

  body #tasks .tasks-table tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 30px !important;
    gap: 7px 8px !important;
    padding: 10px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    background: #fff !important;
  }

  body #tasks .tasks-table tr.selected {
    background: #f4f8fd !important;
  }

  body #tasks .tasks-table td {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    text-align: left !important;
  }

  body #tasks .tasks-table td:nth-child(1) {
    grid-column: 1 / -1 !important;
  }

  body #tasks .tasks-table td:nth-child(2),
  body #tasks .tasks-table td:nth-child(3),
  body #tasks .tasks-table td:nth-child(4),
  body #tasks .tasks-table td:nth-child(5),
  body #tasks .tasks-table td:nth-child(6) {
    display: grid !important;
    grid-column: 1 !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: center !important;
  }

  body #tasks .tasks-table td:nth-child(2)::before { content: "Пріоритет"; }
  body #tasks .tasks-table td:nth-child(3)::before { content: "Справа"; }
  body #tasks .tasks-table td:nth-child(4)::before { content: "Відповідальний"; }
  body #tasks .tasks-table td:nth-child(5)::before { content: "Дедлайн"; }
  body #tasks .tasks-table td:nth-child(6)::before { content: "Статус"; }

  body #tasks .tasks-table td:nth-child(n+2):nth-child(-n+6)::before {
    color: var(--muted) !important;
    font-size: var(--font-size-caption-xs) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
  }

  body #tasks .tasks-table td:nth-child(7) {
    grid-column: 2 !important;
    grid-row: 2 / span 5 !important;
    align-self: start !important;
    justify-self: end !important;
    width: 30px !important;
  }

  body #tasks .task-title-cell {
    grid-template-columns: 10px 18px minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  body #tasks .task-title-cell strong {
    font-size: var(--font-size-body-sm) !important;
    line-height: 1.14 !important;
  }

  body #tasks .tasks-table td > span,
  body #tasks .tasks-table td a,
  body #tasks .tasks-table td > strong,
  body #tasks .task-title-cell > div > span {
    font-size: var(--font-size-caption-xs) !important;
    line-height: 1.16 !important;
  }

  body #tasks .task-row-meta b,
  body #tasks .task-subtasks-popover summary {
    min-height: 16px !important;
    padding: 1px 5px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  body #tasks .task-status-icon,
  body #tasks .task-list-actions .row-action-trigger {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }

  body #tasks .task-status-icon svg,
  body #tasks .task-list-actions .row-action-trigger svg {
    width: 13px !important;
    height: 13px !important;
  }
}

@media (max-width: 1279px) and (min-width: 768px) {
  body #tasks .tasks-table tbody tr {
    display: table-row !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body #tasks .tasks-table tbody td,
  body #tasks .tasks-table tbody td:nth-child(1),
  body #tasks .tasks-table tbody td:nth-child(2),
  body #tasks .tasks-table tbody td:nth-child(3),
  body #tasks .tasks-table tbody td:nth-child(4),
  body #tasks .tasks-table tbody td:nth-child(5),
  body #tasks .tasks-table tbody td:nth-child(6),
  body #tasks .tasks-table tbody td:nth-child(7) {
    display: table-cell !important;
    grid-column: auto !important;
    grid-row: auto !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: auto !important;
    padding: 8px 6px !important;
    border-bottom: 1px solid var(--border) !important;
    overflow: hidden !important;
    vertical-align: middle !important;
    text-align: left !important;
  }

  body #tasks .tasks-table tbody td:nth-child(1) { width: 31% !important; }
  body #tasks .tasks-table tbody td:nth-child(2) { width: 76px !important; }
  body #tasks .tasks-table tbody td:nth-child(3) { width: 108px !important; }
  body #tasks .tasks-table tbody td:nth-child(4) { width: 116px !important; }
  body #tasks .tasks-table tbody td:nth-child(5) { width: 104px !important; }
  body #tasks .tasks-table tbody td:nth-child(6) {
    width: 46px !important;
    text-align: center !important;
  }
  body #tasks .tasks-table tbody td:nth-child(7) {
    position: static !important;
    width: 30px !important;
    padding-right: 0 !important;
    overflow: visible !important;
    text-align: right !important;
  }

  body #tasks .tasks-table tbody td::before {
    content: none !important;
    display: none !important;
  }
}

@media (max-width: 767px) {
  body #tasks .tasks-table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 30px !important;
    gap: 7px 8px !important;
    padding: 10px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    background: #fff !important;
  }

  body #tasks .tasks-table tbody td,
  body #tasks .tasks-table tbody td:nth-child(1),
  body #tasks .tasks-table tbody td:nth-child(2),
  body #tasks .tasks-table tbody td:nth-child(3),
  body #tasks .tasks-table tbody td:nth-child(4),
  body #tasks .tasks-table tbody td:nth-child(5),
  body #tasks .tasks-table tbody td:nth-child(6),
  body #tasks .tasks-table tbody td:nth-child(7) {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    text-align: left !important;
  }

  body #tasks .tasks-table tbody td:nth-child(1) {
    grid-column: 1 / -1 !important;
  }

  body #tasks .tasks-table tbody td:nth-child(2),
  body #tasks .tasks-table tbody td:nth-child(3),
  body #tasks .tasks-table tbody td:nth-child(4),
  body #tasks .tasks-table tbody td:nth-child(5),
  body #tasks .tasks-table tbody td:nth-child(6) {
    display: grid !important;
    grid-column: 1 !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: center !important;
  }

  body #tasks .tasks-table tbody td:nth-child(7) {
    grid-column: 2 !important;
    grid-row: 2 / span 5 !important;
    align-self: start !important;
    justify-self: end !important;
    width: 30px !important;
  }
}

/* Tasks pagination and compact mobile planner polish. */
body #tasks .tasks-pagination {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding-top: 8px !important;
}

body #tasks .tasks-pagination label {
  display: inline-flex !important;
  align-items: center !important;
  justify-self: start !important;
  gap: 7px !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: var(--font-size-caption-xs) !important;
  font-weight: var(--font-weight-bold) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body #tasks .tasks-pagination select {
  width: 58px !important;
  min-width: 58px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 18px 0 9px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  background-color: #fff !important;
  color: var(--text) !important;
  font-size: var(--font-size-caption) !important;
  font-weight: var(--font-weight-bold) !important;
  line-height: 1 !important;
}

body #tasks .tasks-pagination .screen-native-select {
  position: absolute !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body #tasks .tasks-pagination .document-custom-select {
  position: relative !important;
  width: 58px !important;
  min-width: 58px !important;
  flex: 0 0 58px !important;
}

body #tasks .tasks-pagination .document-custom-select-button {
  position: relative !important;
  justify-content: space-between !important;
  width: 58px !important;
  height: 30px !important;
  min-height: 30px !important;
  gap: 4px !important;
  padding: 0 17px 0 9px !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  font-size: var(--font-size-caption) !important;
  font-weight: var(--font-weight-bold) !important;
  line-height: 1 !important;
}

body #tasks .tasks-pagination .document-custom-select-button [data-document-select-value] {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #tasks .tasks-pagination .document-custom-select-chevron {
  position: absolute !important;
  top: 50% !important;
  right: 7px !important;
  width: 6px !important;
  height: 6px !important;
  margin: 0 !important;
  transform: translateY(-55%) rotate(45deg) !important;
}

body #tasks .tasks-pagination .document-custom-select.is-open .document-custom-select-chevron {
  transform: translateY(-35%) rotate(225deg) !important;
}

body #tasks .tasks-pagination .document-custom-select.is-open .document-custom-select-menu {
  left: 0 !important;
  right: auto !important;
  bottom: calc(100% + 6px) !important;
  top: auto !important;
  width: 92px !important;
  min-width: 92px !important;
  max-width: min(92px, calc(100vw - 24px)) !important;
  padding: 4px !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, .96) !important;
  backdrop-filter: blur(14px) !important;
}

body #tasks .tasks-pagination .document-custom-select-option {
  display: grid !important;
  grid-template-columns: 12px minmax(0, 1fr) !important;
  min-height: 22px !important;
  padding: 0 6px !important;
  gap: 4px !important;
  border-radius: 6px !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
}

body #tasks .tasks-pagination .document-custom-select-option strong {
  overflow: hidden !important;
  font-size: 10.5px !important;
  font-weight: var(--font-weight-semibold) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #tasks .tasks-pagination em {
  justify-self: center !important;
  color: var(--muted) !important;
  font-size: var(--font-size-caption-xs) !important;
  font-style: normal !important;
  font-weight: var(--font-weight-medium) !important;
}

body #tasks .tasks-pagination > div {
  display: inline-flex !important;
  justify-self: end !important;
  gap: 6px !important;
}

body #tasks .tasks-pagination > div button {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--font-size-caption) !important;
}

@media (max-width: 767px) {
  body #tasks .tasks-pagination {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  body #tasks .tasks-pagination label,
  body #tasks .tasks-pagination em,
  body #tasks .tasks-pagination > div {
    justify-self: stretch !important;
  }

  body #tasks .tasks-pagination label {
    justify-content: space-between !important;
  }

  body #tasks .tasks-pagination select {
    width: 48px !important;
    min-width: 48px !important;
    height: 28px !important;
    min-height: 28px !important;
    font-size: 10px !important;
  }

  body #tasks .tasks-pagination .document-custom-select,
  body #tasks .tasks-pagination .document-custom-select-button {
    width: 52px !important;
    min-width: 52px !important;
    flex-basis: 52px !important;
    height: 28px !important;
    min-height: 28px !important;
    font-size: 10px !important;
  }

  body #tasks .tasks-pagination > div {
    justify-content: center !important;
  }

  body #tasks .task-plan-card {
    padding: 10px !important;
  }

  body #tasks .task-plan-card h2 {
    font-size: var(--font-size-body-sm) !important;
    line-height: 1.18 !important;
  }

  body #tasks .task-plan-list {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  body #tasks .task-plan-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
    padding: 6px !important;
    border-left-width: 2px !important;
  }

  body #tasks .task-plan-card time {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  body #tasks .task-plan-card strong {
    font-size: 10px !important;
    line-height: 1.14 !important;
    -webkit-line-clamp: 2 !important;
  }

body #tasks .task-plan-card em,
  body #tasks .task-plan-card .ghost {
    font-size: 9px !important;
  }
}

/* Clients final alignment pass: compact Telegram/actions column and equal left cards. */
@media (min-width: 1024px) {
  body #clients {
    --clients-side-width: clamp(286px, 21vw, 312px);
    --clients-action-col: 72px;
  }

  body #clients .clients-layout {
    grid-template-columns: minmax(0, 1fr) var(--clients-side-width) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  body #clients .clients-left,
  body #clients .clients-table-card,
  body #clients .client-profile-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body #clients .clients-table-card,
  body #clients .client-profile-card {
    padding: 12px !important;
  }

  body #clients .clients-table-card {
    overflow: hidden !important;
  }

  body #clients .clients-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  body #clients .clients-table th,
  body #clients .clients-table td {
    padding: 7px 8px !important;
    vertical-align: middle !important;
  }

  body #clients .clients-table th:nth-child(1),
  body #clients .clients-table td:nth-child(1) {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
  }

  body #clients .clients-table th:nth-child(2),
  body #clients .clients-table td:nth-child(2) {
    width: 20% !important;
  }

  body #clients .clients-table th:nth-child(3),
  body #clients .clients-table td:nth-child(3) {
    width: 116px !important;
  }

  body #clients .clients-table th:nth-child(4),
  body #clients .clients-table td:nth-child(4) {
    width: 20% !important;
  }

  body #clients .clients-table th:nth-child(5),
  body #clients .clients-table td:nth-child(5) {
    width: 28% !important;
  }

  body #clients .clients-table th:nth-child(6),
  body #clients .clients-table td:nth-child(6) {
    width: 86px !important;
  }

  body #clients .clients-table th:nth-child(7),
  body #clients .clients-table td:nth-child(7) {
    width: var(--clients-action-col) !important;
    min-width: var(--clients-action-col) !important;
    max-width: var(--clients-action-col) !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    text-align: left !important;
  }

  body #clients .clients-table th:nth-child(7) {
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  body #clients .clients-table td.clients-telegram-actions {
    overflow: visible !important;
  }

  body #clients .clients-telegram-actions-inner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    margin: 0 !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon {
    display: inline-flex !important;
    flex: 0 0 16px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    color: var(--blue) !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon.telegram-icon-active {
    color: var(--semantic-green) !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon svg,
  body #clients .clients-telegram-actions-inner .telegram-icon .ui-icon {
    width: 15px !important;
    height: 15px !important;
  }

  body #clients .clients-telegram-actions-inner .row-action-menu-wrap,
  body #clients .clients-telegram-actions-inner .clients-actions-menu {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    justify-content: center !important;
  }

body #clients .clients-telegram-actions-inner .row-action-trigger {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    border-radius: 8px !important;
  }
}

/* Calendar final audit lock: month chips stay compact, full meta lives in the day popover/sidebar. */
body #calendar .calendar-grid.month-view .event-chip {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
  grid-template-rows: 16px !important;
  align-items: center !important;
  gap: 3px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  padding: 3px 5px !important;
  overflow: hidden !important;
}

body #calendar .calendar-grid.month-view .event-chip strong,
body #calendar .calendar-grid.month-view .event-chip .event-chip-title {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 9px !important;
  line-height: 1 !important;
}

body #calendar .calendar-grid.month-view .event-chip strong {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body #calendar .calendar-grid.month-view .event-chip .event-chip-title {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  font-weight: var(--font-weight-bold) !important;
}

body #calendar .calendar-grid.month-view .event-chip strong + .event-chip-title {
  grid-column: 2 !important;
}

body #calendar .calendar-grid.month-view .event-chip .event-chip-meta {
  display: none !important;
}

body #calendar .calendar-popover-event .event-chip-title,
body #calendar .calendar-popover-event .event-chip-meta {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Settings final audit lock: copy wraps naturally, data chips and audit messages never overflow. */
body #settings .settings-toggle-row em,
body #settings .settings-integration-copy em,
body #settings .settings-integration-config-title p,
body #settings .settings-section-head p {
  display: block !important;
  max-width: 100% !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  font-size: var(--font-size-caption) !important;
  line-height: 1.28 !important;
}

body #settings .settings-user-data-grid span {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

body #settings .settings-user-data-grid b {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #settings .settings-audit-list article {
  min-width: 0 !important;
}

body #settings .settings-audit-list strong,
body #settings .settings-audit-list span {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.28 !important;
}

/* OSINT mobile tabs: keep labels readable without forcing tiny columns. */
@media (max-width: 520px) {
  body #osint .osint-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  body #osint .osint-tabs::-webkit-scrollbar {
    display: none !important;
  }

  body #osint .osint-tabs button {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 28px !important;
    padding: 5px 0 7px !important;
    overflow: visible !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }
}

/* Visual audit closure: tasks popover/status chips and mini avatars must not collapse. */
body #tasks .task-subtasks-menu-row {
  grid-template-columns: minmax(0, 1fr) max-content 28px !important;
}

body #tasks .task-subtasks-popover:not([open]) .task-subtasks-menu {
  display: none !important;
}

body #tasks .task-subtasks-popover[open] .task-subtasks-menu {
  display: grid !important;
}

body #tasks .task-subtasks-menu-row .badge,
body #tasks .tasks-table .task-subtasks-menu-row .badge {
  display: inline-flex !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: 132px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #tasks .advocate-photo.mini,
body #tasks .task-assignee .advocate-photo.mini {
  display: inline-grid !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  place-items: center !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  flex: 0 0 24px !important;
}

body #tasks .advocate-photo.mini > span {
  display: inline-grid !important;
  width: 100% !important;
  height: 100% !important;
  place-items: center !important;
  overflow: hidden !important;
  line-height: 1 !important;
}

body #tasks .tasks-table .sr-only {
  position: absolute !important;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 767px) {
  body #tasks .tasks-table td:nth-child(6) {
    min-height: 28px !important;
    overflow: visible !important;
  }
}

/* Final audit containment: Tasks must not overflow on tablet/mobile after all legacy rules. */
@media (max-width: 1023px) {
  body #tasks.view,
  body #tasks .tasks-screen,
  body #tasks .tasks-workspace,
  body #tasks .tasks-main-column,
  body #tasks .tasks-kpi-grid,
  body #tasks .tasks-toolbar,
  body #tasks .tasks-list-card,
  body #tasks .tasks-bottom-grid,
  body #tasks .task-sync-card,
  body #tasks .task-priority-card,
  body #tasks .task-plan-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  body #tasks .tasks-kpi-grid,
  body #tasks .tasks-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body #tasks .tasks-toolbar > *,
  body #tasks .tasks-toolbar input,
  body #tasks .tasks-toolbar button,
  body #tasks .tasks-toolbar .custom-select,
  body #tasks .tasks-toolbar .custom-select-trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body #tasks .tasks-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  body #tasks .tasks-tabs button {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  body #tasks .tasks-bottom-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body #tasks .task-sync-flow {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body #tasks .task-sync-arrow {
    display: none !important;
  }

  body #tasks .task-sync-step {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body #tasks .task-sync-step strong,
  body #tasks .task-sync-step em,
  body #tasks .task-plan-card strong,
  body #tasks .task-plan-card em,
  body #tasks .task-plan-card .ghost {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body #tasks .tasks-list-card {
    padding: 8px !important;
  }

  body #tasks .tasks-table,
  body #tasks .tasks-table thead,
  body #tasks .tasks-table tbody,
  body #tasks .tasks-table tr,
  body #tasks .tasks-table th,
  body #tasks .tasks-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body #tasks .tasks-table thead {
    display: none !important;
  }

  body #tasks .tasks-table tbody {
    display: grid !important;
    gap: 8px !important;
  }

  body #tasks .tasks-table tbody tr {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 30px !important;
    gap: 6px 8px !important;
    padding: 10px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    background: #fff !important;
  }

  body #tasks .tasks-table tbody td {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
  }

  body #tasks .tasks-table tbody td:nth-child(1) {
    grid-column: 1 / -1 !important;
  }

  body #tasks .tasks-table tbody td:nth-child(2),
  body #tasks .tasks-table tbody td:nth-child(3),
  body #tasks .tasks-table tbody td:nth-child(4),
  body #tasks .tasks-table tbody td:nth-child(5),
  body #tasks .tasks-table tbody td:nth-child(6) {
    display: grid !important;
    grid-column: 1 !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: center !important;
  }

  body #tasks .tasks-table tbody td:nth-child(7) {
    grid-column: 2 !important;
    grid-row: 2 / span 5 !important;
    justify-self: end !important;
    align-self: start !important;
    width: 30px !important;
    max-width: 30px !important;
  }

  body #tasks .task-title-cell,
  body #tasks .tasks-table tbody td > *,
  body #tasks .tasks-table tbody a,
  body #tasks .tasks-table tbody strong,
  body #tasks .tasks-table tbody span:not(.sr-only) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 767px) {
  body #tasks .tasks-kpi-grid,
  body #tasks .tasks-toolbar,
  body #tasks .task-sync-flow {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  body #clients .clients-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body #clients .clients-left,
  body #clients .clients-table-card,
  body #clients .client-profile-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Clients true final override: this block must stay after all legacy mobile/table rules. */
@media (max-width: 768px) {
  body #clients .clients-table-card {
    padding: 10px !important;
    overflow: visible !important;
  }

  body #clients .clients-table,
  body #clients .clients-table thead,
  body #clients .clients-table tbody,
  body #clients .clients-table tr,
  body #clients .clients-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body #clients .clients-table thead {
    display: none !important;
  }

  body #clients .clients-table tbody {
    display: grid !important;
    gap: 8px !important;
  }

  body #clients .clients-table tbody tr {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) 54px !important;
    gap: 5px 8px !important;
    align-items: start !important;
    padding: 10px !important;
    min-height: 0 !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body #clients .clients-table td {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    font-size: var(--font-size-table-cell) !important;
    line-height: 1.25 !important;
  }

  body #clients .clients-table td::before {
    content: none !important;
    display: none !important;
  }

  body #clients .clients-table td:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 4 !important;
    align-self: start !important;
    padding-top: 1px !important;
    overflow: visible !important;
  }

  body #clients .clients-table td:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  body #clients .clients-table td:nth-child(3) {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  body #clients .clients-table td:nth-child(4) {
    grid-column: 2 / span 2 !important;
    grid-row: 2 !important;
  }

  body #clients .clients-table td:nth-child(5) {
    grid-column: 2 / span 2 !important;
    grid-row: 3 !important;
  }

  body #clients .clients-table td:nth-child(6) {
    grid-column: 2 !important;
    grid-row: 4 !important;
  }

  body #clients .clients-table td.clients-telegram-actions {
    grid-column: 4 !important;
    grid-row: 1 / span 4 !important;
    justify-self: end !important;
    align-self: start !important;
    width: 54px !important;
    max-width: 54px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body #clients .clients-telegram-actions-inner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon {
    display: inline-flex !important;
    flex: 0 0 16px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    color: var(--blue) !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon.telegram-icon-active {
    color: var(--semantic-green) !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon svg,
  body #clients .clients-telegram-actions-inner .telegram-icon .ui-icon {
    width: 15px !important;
    height: 15px !important;
  }

  body #clients .clients-telegram-actions-inner .row-action-trigger {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    border-radius: 8px !important;
  }

  body #clients .client-name-cell,
  body #clients .client-name-cell a,
  body #clients .clients-table td:nth-child(n + 2):nth-child(-n + 6) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  body #clients .client-name-cell a,
  body #clients .clients-table td:nth-child(3),
  body #clients .clients-table td:nth-child(4),
  body #clients .clients-table td:nth-child(5) {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 430px) {
  body #clients .clients-table tbody tr {
    grid-template-columns: 24px minmax(0, 1fr) 54px !important;
    gap: 5px 8px !important;
    padding: 9px !important;
  }

  body #clients .clients-table td:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 5 !important;
  }

  body #clients .clients-table td:nth-child(2),
  body #clients .clients-table td:nth-child(3),
  body #clients .clients-table td:nth-child(4),
  body #clients .clients-table td:nth-child(5),
  body #clients .clients-table td:nth-child(6) {
    grid-column: 2 !important;
  }

  body #clients .clients-table td:nth-child(2) { grid-row: 1 !important; }
  body #clients .clients-table td:nth-child(3) { grid-row: 2 !important; }
  body #clients .clients-table td:nth-child(4) { grid-row: 3 !important; }
  body #clients .clients-table td:nth-child(5) { grid-row: 4 !important; }
  body #clients .clients-table td:nth-child(6) { grid-row: 5 !important; }

  body #clients .clients-table td.clients-telegram-actions {
    grid-column: 3 !important;
    grid-row: 1 / span 5 !important;
  }
}

@media (max-width: 768px) {
  body #clients .clients-table td:not(:first-child):not(.clients-telegram-actions) {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body #clients .clients-table td:not(:first-child):not(.clients-telegram-actions)::before {
    content: none !important;
    display: none !important;
  }
}
/* Calendar true final lock: keep at EOF so legacy calendar layers cannot override it. */
body #calendar .calendar-toolbar {
  grid-template-columns: auto auto auto auto minmax(130px, 1fr) minmax(210px, 320px) !important;
  gap: 8px !important;
}

body #calendar .calendar-filter-panel {
  grid-template-columns: repeat(5, minmax(116px, 1fr)) minmax(128px, .85fr) auto auto !important;
  gap: 8px !important;
}

body #calendar .calendar-layout {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px) !important;
  gap: 10px !important;
}

body #calendar .calendar-side {
  gap: 10px !important;
}

body #calendar .calendar-toolbar .primary,
body #calendar .calendar-toolbar .secondary,
body #calendar .calendar-toolbar input,
body #calendar .calendar-title-button,
body #calendar .calendar-filter-panel input,
body #calendar .calendar-overdue-filter,
body #calendar .calendar-reset-filter,
body #calendar .calendar-filter-select .document-custom-select-button {
  min-height: 32px !important;
  height: 32px !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--font-size-button) !important;
  line-height: 1.1 !important;
}

body #calendar .calendar-grid.month-view .day {
  min-height: 82px !important;
  height: clamp(82px, 7vh, 98px) !important;
  padding: 6px !important;
}

body #calendar .calendar-day-more-wrap.is-open .calendar-day-popover,
body #calendar .calendar-day-more-wrap:hover .calendar-day-popover,
body #calendar .calendar-day-more-wrap:focus-within .calendar-day-popover {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

body #calendar #event-card,
body #calendar .calendar-reminders,
body #calendar .calendar-events-list {
  padding: 10px 12px !important;
  border-radius: var(--radius-md) !important;
}

body #calendar .event-card-head h2,
body #calendar #event-card > h2,
body #calendar .calendar-events-head h2,
body #calendar .calendar-reminders-head h2,
body #calendar .calendar-reminders h2 {
  font-size: var(--font-size-card-title) !important;
  line-height: 1.18 !important;
}

body #calendar .event-info-row {
  grid-template-columns: 16px minmax(0, 1fr) !important;
  gap: 7px !important;
}

body #calendar .event-info-row .ui-icon,
body #calendar .event-card-actions .ui-icon,
body #calendar .calendar-reminders-head .ghost .ui-icon {
  width: 14px !important;
  height: 14px !important;
}

body #calendar .event-card-title strong,
body #calendar .event-info-row strong,
body #calendar .reminder-row strong,
body #calendar .calendar-events-list strong,
body #calendar .upcoming-event-main strong {
  font-size: var(--font-size-body-sm) !important;
  line-height: 1.24 !important;
}

body #calendar .event-info-row em,
body #calendar .event-description,
body #calendar .event-reminder-log span,
body #calendar .calendar-reminders p,
body #calendar .reminder-row span,
body #calendar .reminder-row small,
body #calendar .reminder-status,
body #calendar .calendar-events-list em,
body #calendar .calendar-events-list time,
body #calendar .upcoming-event-time {
  font-size: var(--font-size-caption) !important;
  line-height: 1.28 !important;
}

body #calendar .calendar-events-list > button {
  grid-template-columns: 8px minmax(0, 1fr) 78px 48px 76px !important;
  gap: 8px !important;
  min-height: 38px !important;
  padding: 6px 0 !important;
}

@media (max-width: 1279px) and (min-width: 1024px) {
  body #calendar .calendar-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 2fr) auto auto !important;
  }

  body #calendar .calendar-toolbar .primary,
  body #calendar .calendar-mode-group,
  body #calendar .calendar-toolbar input,
  body #calendar .calendar-date-picker {
    width: 100% !important;
  }

  body #calendar .calendar-filter-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body #calendar .calendar-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #calendar .calendar-side {
    position: static !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1023px) {
  body #calendar .calendar-toolbar,
  body #calendar .calendar-layout,
  body #calendar .calendar-side {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #calendar .calendar-filter-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body #calendar .calendar-toolbar > *,
  body #calendar .calendar-toolbar input,
  body #calendar .calendar-date-picker,
  body #calendar .calendar-filter-panel > * {
    width: 100% !important;
    max-width: none !important;
  }

  body #calendar .calendar-mode-group {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body #calendar .calendar-arrows {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body #calendar .calendar-grid.month-view .day {
    min-height: 58px !important;
    height: auto !important;
    padding: 5px !important;
  }

  body #calendar .calendar-day-popover {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    margin-top: 4px !important;
  }

  body #calendar .calendar-events-list > button {
    grid-template-columns: 8px minmax(0, 1fr) auto auto !important;
    min-height: 36px !important;
  }

  body #calendar .calendar-events-list .badge {
    grid-column: 2 / -1 !important;
    justify-self: start !important;
  }
}

@media (max-width: 520px) {
  body #calendar .calendar-filter-panel {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #calendar .calendar-events-list > button {
    grid-template-columns: 7px minmax(0, 1fr) !important;
  }

  body #calendar .calendar-events-list time,
  body #calendar .calendar-events-list .upcoming-event-time,
  body #calendar .calendar-events-list .badge {
    grid-column: 2 !important;
    justify-self: start !important;
  }
}

/* Clients EOF lock: must stay after all calendar/client responsive rules. */
@media (min-width: 769px) and (max-width: 1279px) {
  body #clients .clients-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body #clients .clients-side {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (min-width: 1280px) {
  body #clients {
    --clients-side-width-final-audit: clamp(288px, 20vw, 316px);
    --clients-action-col-final-audit: 76px;
  }

  body #clients .clients-layout {
    grid-template-columns: minmax(0, 1fr) var(--clients-side-width-final-audit) !important;
    gap: 12px !important;
  }

  body #clients .clients-side {
    width: var(--clients-side-width-final-audit) !important;
    max-width: var(--clients-side-width-final-audit) !important;
  }
}

@media (min-width: 769px) {
  body #clients .clients-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  body #clients .clients-table th:nth-child(7),
  body #clients .clients-table td:nth-child(7) {
    width: var(--clients-action-col-final-audit, 76px) !important;
    min-width: var(--clients-action-col-final-audit, 76px) !important;
    max-width: var(--clients-action-col-final-audit, 76px) !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    text-align: left !important;
  }

  body #clients .clients-telegram-actions-inner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon {
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
  }

  body #clients .clients-telegram-actions-inner .telegram-icon svg,
  body #clients .clients-telegram-actions-inner .telegram-icon .ui-icon {
    width: 15px !important;
    height: 15px !important;
  }

  body #clients .clients-telegram-actions-inner .row-action-menu-wrap,
  body #clients .clients-telegram-actions-inner .clients-actions-menu {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
  }

  body #clients .clients-telegram-actions-inner .row-action-trigger {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    border-radius: 8px !important;
  }
}

/* ============================================================================
   Responsive list-table card mode — final override.
   On narrow screens (<=900px) Справи/Клієнти/Задачі tables stack into cards.
   Desktop column widths (e.g. body #cases .case-list-table td:nth-child(4)
   {width:13%!important}) otherwise leak in and crush each cell to ~40px,
   wrapping text one letter per line. Wrapper-class selectors below outrank
   those rules and force every cell to fill its grid track and wrap normally.
   ========================================================================== */
@media (max-width: 900px) {
  body #cases .case-list-card .case-list-table tbody td,
  body .clients-table-card .clients-table tbody td,
  body .tasks-workspace .tasks-table tbody td {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: left !important;
  }

  body #cases .case-list-card .case-list-table tbody td:first-child,
  body .clients-table-card .clients-table tbody td:first-child,
  body .tasks-workspace .tasks-table tbody td:first-child,
  body #cases .case-list-card .case-list-table tbody td.case-actions-cell,
  body .clients-table-card .clients-table tbody td.clients-row-actions,
  body .tasks-workspace .tasks-table tbody td:last-child {
    grid-column: 1 / -1 !important;
  }
}

/* ============================================================================
   Tasks list — tablet/mobile card mode, authoritative override.
   The desktop tasks table uses a multi-breakpoint CSS-grid row system that
   otherwise leaks into ≤900px and crushes cells (vertical letter-stacking).
   Wrapper-class ancestry (.tasks-list-card) + EOF source order guarantees this
   clean single-column card wins. Mirrors the ≤767 design for all of ≤900.
   ========================================================================== */
@media (max-width: 900px) {
  body #tasks .tasks-list-card .tasks-table,
  body #tasks .tasks-list-card .tasks-table tbody,
  body #tasks .tasks-list-card .tasks-table tr,
  body #tasks .tasks-list-card .tasks-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body #tasks .tasks-list-card .tasks-table thead { display: none !important; }

  body #tasks .tasks-list-card .tasks-table tbody {
    display: grid !important;
    gap: 8px !important;
  }

  body #tasks .tasks-list-card .tasks-table tbody tr {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 10px 42px 10px 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    background: #fff !important;
  }

  body #tasks .tasks-list-card .tasks-table tbody td {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    text-align: left !important;
  }

  body #tasks .tasks-list-card .tasks-table tbody td:nth-child(n+2):nth-child(-n+6) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 26px !important;
  }

  body #tasks .tasks-list-card .tasks-table tbody td:nth-child(2)::before { content: "Пріоритет"; }
  body #tasks .tasks-list-card .tasks-table tbody td:nth-child(3)::before { content: "Справа"; }
  body #tasks .tasks-list-card .tasks-table tbody td:nth-child(4)::before { content: "Відповідальний"; }
  body #tasks .tasks-list-card .tasks-table tbody td:nth-child(5)::before { content: "Дедлайн"; }
  body #tasks .tasks-list-card .tasks-table tbody td:nth-child(6)::before { content: "Статус"; }

  body #tasks .tasks-list-card .tasks-table tbody td:nth-child(n+2):nth-child(-n+6)::before {
    flex: 0 0 auto !important;
    color: var(--muted) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
  }

  body #tasks .tasks-list-card .tasks-table tbody td:last-child {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: auto !important;
    padding: 0 !important;
  }
}

/* ============================================================================
   Clients list — tablet/mobile card mode, authoritative override.
   Same rationale as the tasks block: legacy per-column widths leak into ≤900px
   and crush cells. Wrapper-class ancestry + EOF order force a clean card.
   Columns: 1 checkbox · 2 ПІБ · 3 Телефон · 4 Email · 5 Суть · 6 Дата · 7 Дії
   ========================================================================== */
@media (max-width: 900px) {
  body #clients .clients-table-card .clients-table,
  body #clients .clients-table-card .clients-table tbody,
  body #clients .clients-table-card .clients-table tr,
  body #clients .clients-table-card .clients-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body #clients .clients-table-card .clients-table thead { display: none !important; }

  body #clients .clients-table-card .clients-table tbody {
    display: grid !important;
    gap: 8px !important;
  }

  body #clients .clients-table-card .clients-table tbody tr {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 12px 44px 12px 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    background: #fff !important;
  }

  body #clients .clients-table-card .clients-table tbody td {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    text-align: left !important;
  }

  /* Checkbox pinned to the corner; name row prominent. */
  body #clients .clients-table-card .clients-table tbody td:first-child {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: auto !important;
  }

  body #clients .clients-table-card .clients-table tbody td:nth-child(2) {
    font-weight: var(--font-weight-bold) !important;
    padding-right: 28px !important;
  }

  body #clients .clients-table-card .clients-table tbody td:nth-child(n+3):nth-child(-n+6) {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 24px !important;
  }

  body #clients .clients-table-card .clients-table tbody td:nth-child(3)::before { content: "Телефон"; }
  body #clients .clients-table-card .clients-table tbody td:nth-child(4)::before { content: "Email"; }
  body #clients .clients-table-card .clients-table tbody td:nth-child(5)::before { content: "Суть"; }
  body #clients .clients-table-card .clients-table tbody td:nth-child(6)::before { content: "Дата"; }

  body #clients .clients-table-card .clients-table tbody td:nth-child(n+3):nth-child(-n+6)::before {
    flex: 0 0 auto !important;
    color: var(--muted) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
  }

  body #clients .clients-table-card .clients-table tbody td:nth-child(n+3):nth-child(-n+6) > * {
    text-align: right !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body #clients .clients-table-card .clients-table tbody td:last-child {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 4px !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--line) !important;
  }
}

/* Cases table: narrow icon-only columns (Пріоритет / Статус) — keep the header
   on a single line instead of breaking the word mid-way ("Пріорит / ет"). */
@media (min-width: 1024px) {
  body #cases .case-list-table th:nth-child(6),
  body #cases .case-list-table th:nth-child(7) {
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: 9.5px !important;
    letter-spacing: -0.01em !important;
  }
}

/* ============================================================================
   Cases table — "Фінанси" cell as a compact stacked pyramid:
   total (ink) · paid (green) · debt (red), numbers only with small icons.
   Selectors include .case-list-table to outrank legacy finance-cell rules.
   ========================================================================== */
body #cases .case-list-table .case-finance-stack {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body #cases .case-list-table .case-finance-stack span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

body #cases .case-list-table .case-finance-stack .ui-icon {
  flex: 0 0 12px !important;
  width: 12px !important;
  height: 12px !important;
}

body #cases .case-list-table .case-finance-stack .ui-icon svg {
  width: 12px !important;
  height: 12px !important;
  stroke-width: 2 !important;
}

body #cases .case-list-table .case-finance-stack .fin-total {
  font-size: var(--font-size-table-cell) !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--ink) !important;
}

body #cases .case-list-table .case-finance-stack .fin-total .ui-icon {
  color: #64748b !important;
}

body #cases .case-list-table .case-finance-stack .fin-paid {
  font-size: var(--font-size-caption) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: #1a8f57 !important;
}

body #cases .case-list-table .case-finance-stack .fin-debt {
  font-size: var(--font-size-caption) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: #d8434f !important;
}

/* ============================================================================
   Kebab (⋮) action triggers: the text glyph sits optically high in its box.
   Replace it with three CSS dots, absolutely centred, for any trigger that
   doesn't already contain an SVG icon. Crisp and perfectly centred everywhere.
   ========================================================================== */
body .row-action-menu-wrap > .row-action-trigger:not(:has(.ui-icon)) {
  position: relative !important;
  font-size: 0 !important;
  /* Hide the original "⋮" glyph robustly (survives any font-size override)
     so only the CSS dots below remain. */
  text-indent: -9999px !important;
  overflow: hidden !important;
}

body .row-action-menu-wrap > .row-action-trigger:not(:has(.ui-icon))::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 2px !important;
  height: 2px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 -3.6px 0 currentColor, 0 3.6px 0 currentColor !important;
}

/* Case detail: numbered cards use the shared CRM card-title token. */
body #cases .case-detail-grid .case-card > .case-card-title {
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
  color: #172033 !important;
  font-size: var(--font-size-card-title) !important;
  line-height: 1.22 !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
}

body #cases .case-detail-grid .case-card > .case-card-title > span {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

body #cases .case-detail-grid .case-card > .case-card-title .row-action-menu-wrap {
  flex: 0 0 auto !important;
}

body #cases .case-detail-grid .case-card > .case-card-title .row-action-trigger {
  width: 36px !important;
  height: 36px !important;
}

body #cases .case-detail-grid .case-card {
  padding: 16px 18px !important;
}

body #cases .case-detail-grid .case-side-column .case-card {
  padding: 16px 18px !important;
}

body #cases .case-detail-grid .case-tabs {
  margin-top: -2px !important;
}

body #cases .case-parties-list {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body #cases .case-party-card {
  min-width: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body #cases .case-party-card summary {
  min-height: 42px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 10px !important;
  cursor: pointer !important;
  list-style: none !important;
}

body #cases .case-party-card summary::-webkit-details-marker {
  display: none !important;
}

body #cases .case-party-main {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

body #cases .case-party-main strong,
body #cases .case-party-main em {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #cases .case-party-main strong {
  color: #172033 !important;
  font-size: var(--font-size-body-sm) !important;
  font-weight: 800 !important;
}

body #cases .case-party-main em {
  color: #536176 !important;
  font-size: var(--font-size-caption) !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

body #cases .case-party-toggle {
  min-height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--action-dark) !important;
  padding: 0 9px !important;
  font-size: var(--font-size-caption) !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

body #cases .case-party-card[open] .case-party-toggle {
  border-color: #d7e4f4 !important;
  background: #f8fbff !important;
}

body #cases .case-party-details {
  display: grid !important;
  gap: 0 !important;
  border-top: 1px solid var(--line) !important;
  background: #fff !important;
  padding: 2px 10px 7px !important;
}

body #cases .case-party-details div {
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid #eef2f7 !important;
}

body #cases .case-party-details div:last-child {
  border-bottom: 0 !important;
}

body #cases .case-party-details span {
  color: #7a8798 !important;
  font-size: var(--font-size-caption) !important;
  font-weight: 700 !important;
}

body #cases .case-party-details strong,
body #cases .case-party-details a {
  min-width: 0 !important;
  color: #172033 !important;
  font-size: var(--font-size-body-sm) !important;
  font-weight: 700 !important;
  overflow-wrap: anywhere !important;
}

/* Soft placeholder for empty values (less "technical" than plain "Не вказано"). */
.field-empty,
body #cases .field-empty,
body #cases .case-party-details .field-empty {
  color: #9aa3af !important;
  font-weight: 400 !important;
  font-style: italic;
}

body #cases .case-party-details a {
  color: var(--action-dark) !important;
  text-decoration: none !important;
}

body #cases .case-party-empty {
  min-height: 72px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px dashed #dfe8f4 !important;
  border-radius: 8px !important;
  background: #fbfcff !important;
  color: #7a8798 !important;
  font-size: var(--font-size-body-sm) !important;
  font-weight: 800 !important;
  text-align: center !important;
}

/* Cases list: the table now has 7 columns. Keep status as an icon-only column
   and give the released width back to title/finance so numbers are readable. */
@media (min-width: 1024px) {
  body #cases .case-list-table th:nth-child(1),
  body #cases .case-list-table td:nth-child(1) {
    width: 16% !important;
  }

  body #cases .case-list-table th:nth-child(2),
  body #cases .case-list-table td:nth-child(2) {
    width: 148px !important;
  }

  body #cases .case-list-table th:nth-child(3),
  body #cases .case-list-table td:nth-child(3) {
    width: auto !important;
  }

  body #cases .case-list-table th:nth-child(4),
  body #cases .case-list-table td:nth-child(4) {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    text-align: center !important;
    overflow: visible !important;
  }

  body #cases .case-list-table th:nth-child(4) {
    color: transparent !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
  }

  body #cases .case-list-table td:nth-child(4) .case-status-icon {
    margin-inline: auto !important;
  }

  body #cases .case-list-table th:nth-child(5),
  body #cases .case-list-table td:nth-child(5) {
    width: 130px !important;
  }

  body #cases .case-list-table th:nth-child(6),
  body #cases .case-list-table td:nth-child(6) {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    text-align: left !important;
    overflow: visible !important;
  }

  body #cases .case-list-table th:nth-child(7),
  body #cases .case-list-table td:nth-child(7) {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: right !important;
    overflow: visible !important;
  }

body #cases .case-list-table .case-finance-stack span {
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body #cases .case-list-table .case-material-badge {
    min-width: 30px !important;
    overflow: visible !important;
  }

  body #cases .case-list-table .case-material-badge strong {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* Cases bulk selection: keep the compact action strip readable inside the
   "Справа" header and show tooltips above the table, not under the first row. */
@media (min-width: 1024px) {
  body #cases .case-list-table th:nth-child(2),
  body #cases .case-list-table td:nth-child(2) {
    width: 174px !important;
    min-width: 174px !important;
    max-width: 174px !important;
    overflow: visible !important;
  }

  body #cases .case-list-table th:nth-child(3),
  body #cases .case-list-table td:nth-child(3) {
    width: auto !important;
  }

  body #cases .case-list-table th:nth-child(5),
  body #cases .case-list-table td:nth-child(5) {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }

  body #cases .case-list-table th:nth-child(7),
  body #cases .case-list-table td:nth-child(7) {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  body #cases .case-list-table th:nth-child(4) {
    color: var(--muted) !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  body #cases .case-list-table thead,
  body #cases .case-list-table thead tr,
  body #cases .case-list-table thead th,
  body #cases .case-title-head,
  body #cases .case-bulk-bar.active {
    overflow: visible !important;
  }

  body #cases .case-title-head {
    grid-template-columns: 14px minmax(0, auto) minmax(0, 1fr) !important;
    gap: 6px !important;
    position: relative !important;
    z-index: 20 !important;
  }

  body #cases .case-bulk-bar.active {
    display: inline-flex !important;
    align-items: center !important;
    width: max-content !important;
    max-width: none !important;
    gap: 2px !important;
    padding: 2px 3px !important;
    position: relative !important;
    z-index: 40 !important;
  }

  body #cases .case-bulk-bar.active .task-bulk-icon {
    flex: 0 0 18px !important;
  }

  body #cases .case-bulk-bar.active .task-bulk-icon::after {
    top: auto !important;
    bottom: calc(100% + 10px) !important;
    z-index: 1000 !important;
    transform: translate(-50%, 6px) !important;
    max-width: 190px !important;
    white-space: nowrap !important;
  }

  body #cases .case-bulk-bar.active .task-bulk-icon::before {
    top: auto !important;
    bottom: calc(100% + 5px) !important;
    z-index: 1001 !important;
    transform: translate(-50%, 6px) rotate(45deg) !important;
  }

  body #cases .case-bulk-bar.active .task-bulk-icon:hover::after,
  body #cases .case-bulk-bar.active .task-bulk-icon:focus-visible::after {
    transform: translate(-50%, 0) !important;
  }

  body #cases .case-bulk-bar.active .task-bulk-icon:hover::before,
  body #cases .case-bulk-bar.active .task-bulk-icon:focus-visible::before {
    transform: translate(-50%, 0) rotate(45deg) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1359px) {
  body #cases .case-list-table th:nth-child(1),
  body #cases .case-list-table td:nth-child(1) {
    width: 14% !important;
  }

  body #cases .case-list-table th:nth-child(2),
  body #cases .case-list-table td:nth-child(2) {
    width: 154px !important;
    min-width: 154px !important;
    max-width: 154px !important;
  }

  body #cases .case-list-table th:nth-child(3),
  body #cases .case-list-table td:nth-child(3) {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  body #cases .case-list-table th:nth-child(4),
  body #cases .case-list-table td:nth-child(4) {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }

  body #cases .case-list-table th:nth-child(5),
  body #cases .case-list-table td:nth-child(5) {
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
  }

  body #cases .case-list-table th:nth-child(6),
  body #cases .case-list-table td:nth-child(6) {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
  }

  body #cases .case-list-table th:nth-child(7),
  body #cases .case-list-table td:nth-child(7) {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
  }

  body #cases .case-list-table .case-materials {
    gap: 3px !important;
  }

  body #cases .case-list-table .case-material-badge {
    min-width: 28px !important;
    gap: 3px !important;
  }

  body #cases .case-list-table .case-client-text strong {
    display: flex !important;
    width: auto !important;
    max-width: 100% !important;
    gap: 4px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  body #cases .case-list-table .case-client-count-toggle {
    min-width: 0 !important;
    padding: 0 !important;
  }
}

@media (min-width: 1360px) and (max-width: 1799px) {
  body #cases .case-list-table th:nth-child(1),
  body #cases .case-list-table td:nth-child(1) {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
  }

  body #cases .case-list-table th:nth-child(2),
  body #cases .case-list-table td:nth-child(2) {
    width: 154px !important;
    min-width: 154px !important;
    max-width: 154px !important;
  }

  body #cases .case-list-table th:nth-child(3),
  body #cases .case-list-table td:nth-child(3) {
    width: auto !important;
  }

  body #cases .case-list-table th:nth-child(4),
  body #cases .case-list-table td:nth-child(4) {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
  }

  body #cases .case-list-table th:nth-child(5),
  body #cases .case-list-table td:nth-child(5) {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }

  body #cases .case-list-table th:nth-child(6),
  body #cases .case-list-table td:nth-child(6) {
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
  }

  body #cases .case-list-table th:nth-child(7),
  body #cases .case-list-table td:nth-child(7) {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
  }
}

@media (min-width: 1800px) {
  body #cases .case-list-table th:nth-child(1),
  body #cases .case-list-table td:nth-child(1) {
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
  }

  body #cases .case-list-table th:nth-child(2),
  body #cases .case-list-table td:nth-child(2) {
    width: 154px !important;
    min-width: 154px !important;
    max-width: 154px !important;
  }

  body #cases .case-list-table th:nth-child(3),
  body #cases .case-list-table td:nth-child(3) {
    width: auto !important;
  }

  body #cases .case-list-table th:nth-child(4),
  body #cases .case-list-table td:nth-child(4) {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
  }

  body #cases .case-list-table th:nth-child(5),
  body #cases .case-list-table td:nth-child(5) {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
  }

  body #cases .case-list-table th:nth-child(6),
  body #cases .case-list-table td:nth-child(6) {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }

  body #cases .case-list-table th:nth-child(7),
  body #cases .case-list-table td:nth-child(7) {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }
}