/*
  Intent: a dense office tool for quickly finding, understanding and mapping citizens.
  Palette: the InCaller ink/rail/blue system; status color is reserved for sentiment.
  Depth: borders-only, with shadows limited to modal elevation.
  Surfaces: white canvas, quiet gray inset controls, black navigation rail.
  Typography: Manrope for compact Greek labels and high-density data.
  Spacing: 4px base unit.
*/

.politics-brand {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
}
.politics-logo { display: block; width: 180px; height: auto; }
.account-chip { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 18px; border-top: 1px solid var(--rail-line); }
.account-chip .account-meta { display: grid; flex: 1; min-width: 0; }
.account-chip strong { overflow: hidden; color: white; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.account-chip small { color: var(--rail-muted); font-size: 11px; }
.side-bottom { padding-top: 0; }
.app-view {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}
.app-feedback { position: fixed; z-index: 80; top: 14px; right: 14px; max-width: 420px; margin: 0; box-shadow: 0 10px 24px rgb(20 30 45 / .16); }
.page-heading-actions { display: flex; }
.export-group { display: flex; gap: 1px; }
.export-group .btn:first-child { border-radius: 5px 0 0 5px; }
.export-group .btn:last-child { border-radius: 0 5px 5px 0; }

.citizen-filters { display: grid; grid-template-columns: minmax(280px,1fr) 180px 180px auto; align-items: start; gap: 8px; }
.filter-control { display: grid; min-width: 0; gap: 4px; }
.filter-control > span { color: var(--crm-muted); font-size: 11px; }
.filter-control :is(select,input) {
  width: 100%;
  height: 32px;
  padding: 4px 28px 4px 9px;
  border: 1px solid var(--crm-line);
  border-radius: 5px;
  background: var(--crm-inset);
  color: var(--crm-ink);
  font-size: 11px;
}
.filter-control input { padding-right: 9px; }
.filter-control :is(select,input):hover { border-color: #aeb7c3; }
.filter-reset { color: var(--crm-secondary); }
.citizen-filters .filter-reset { align-self: end; }
.status-tabs { border-radius: 5px 5px 0 0; }
.status-tabs > button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 0;
  border-right: 1px solid var(--crm-line);
  background: transparent;
  color: var(--crm-secondary);
  font-size: 11px;
}
.status-tabs > button:hover { background: white; }
.status-tabs > button.active { background: var(--crm-selected); color: var(--crm-blue); box-shadow: inset 0 -2px var(--crm-blue); }
.status-dot { display: inline-block; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.status-dot.positive { color: var(--crm-success); }
.status-dot.undecided { color: var(--crm-warning); }
.status-dot.negative { color: var(--crm-danger); }
.citizen-grid { height: clamp(420px, calc(100dvh - 194px), 900px); }
.citizen-table { min-width: 1230px; table-layout: auto; }
.citizen-table th:nth-child(n),.citizen-table td:nth-child(n),.archive-table th:nth-child(n),.archive-table td:nth-child(n) { width: auto; max-width: none; text-align: left; }
.citizen-table :is(th,td):nth-child(1) { min-width: 190px; }
.citizen-table :is(th,td):nth-child(2) { min-width: 130px; }
.citizen-table :is(th,td):nth-child(3) { min-width: 135px; }
.citizen-table :is(th,td):nth-child(4) { min-width: 190px; }
.citizen-table :is(th,td):nth-child(5) { min-width: 150px; }
.citizen-table :is(th,td):nth-child(6) { min-width: 220px; }
.citizen-table :is(th,td):nth-child(7) { min-width: 90px; }
.citizen-table :is(th,td):nth-child(8) { min-width: 100px; text-align: center; }
.citizen-table :is(th,td):nth-child(9) { min-width: 170px; }
.citizen-table tbody tr { cursor: pointer; }
.citizen-name { display: grid; gap: 1px; border: 0; background: transparent; color: var(--crm-blue); text-align: left; }
.citizen-name strong { font-size: 11px; }
.citizen-name small { color: var(--crm-muted); font-size: 11px; }
.citizen-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; }
.citizen-status::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ''; }
.citizen-status[data-state='Θετικός'] { color: var(--crm-success); }
.citizen-status[data-state='Αναποφάσιστος'] { color: var(--crm-warning); }
.citizen-status[data-state='Αρνητικός'] { color: var(--crm-danger); }
.cell-muted { color: var(--crm-muted); font-size: 11px; }
.tabular { font-variant-numeric: tabular-nums; }
.core-muted { color: var(--crm-muted); font-size: 11px; }

.table-tools {
  position: relative;
  z-index: 36;
  display: flex;
  min-height: 42px;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--crm-line-soft);
  background: #fff;
}
.table-tools-hint { color: var(--crm-muted); font-size: 11px; font-weight: 600; }
.table-column-menu { position: relative; margin-left: auto; }
.table-column-menu > summary {
  display: inline-flex;
  min-width: 104px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 26px 5px 9px;
  border: 1px solid var(--crm-line);
  border-radius: 5px;
  background: var(--crm-inset);
  color: var(--crm-secondary);
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  list-style: none;
}
.table-column-menu > summary::-webkit-details-marker { display: none; }
.table-column-menu > summary::after {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: '';
  transform: translateY(-65%) rotate(45deg);
  transition: transform 140ms ease;
}
.table-column-menu[open] > summary { border-color: var(--crm-blue); background: #fff; box-shadow: 0 0 0 3px rgb(0 112 204 / .1); color: var(--crm-blue); }
.table-column-menu[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
.table-column-menu > summary:hover { border-color: #aeb7c3; background: #fff; }
.table-column-menu > summary:focus-visible { outline: 2px solid var(--crm-blue); outline-offset: 2px; }
.table-column-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  width: min(260px,calc(100vw - 32px));
  max-height: min(420px,calc(100dvh - 150px));
  gap: 2px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--crm-line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 14px 34px rgb(24 34 48 / .14);
}
.table-column-panel > strong { padding: 5px 7px 7px; color: var(--crm-muted); font-size: 10px; letter-spacing: .055em; text-transform: uppercase; }
.table-column-panel label { display: flex; min-height: 34px; align-items: center; gap: 9px; padding: 6px 7px; border-radius: 4px; color: var(--crm-secondary); cursor: pointer; font-size: 11px; font-weight: 650; }
.table-column-panel label:hover { background: var(--crm-surface); color: var(--crm-ink); }
.table-column-panel input { width: 15px; height: 15px; flex: none; margin: 0; accent-color: var(--crm-blue); }
.table-column-panel label:has(input:focus-visible) { outline: 2px solid var(--crm-blue); outline-offset: -2px; }
.table-column-reset { min-height: 34px; margin-top: 4px; padding: 7px; border: 0; border-top: 1px solid var(--crm-line-soft); background: transparent; color: var(--crm-blue); cursor: pointer; font: 750 11px/1.25 Manrope,sans-serif; text-align: left; }
.table-column-reset:hover { background: var(--crm-surface); }
.table-column-reset:focus-visible { outline: 2px solid var(--crm-blue); outline-offset: -2px; }
.table-sort-button {
  display: flex;
  width: 100%;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
}
.table-sort-button i { display: inline-flex; width: 12px; flex: none; justify-content: center; color: #a5adb8; font-size: 12px; font-style: normal; line-height: 1; }
.table-sort-button i::before { content: '↕'; }
.table-sort-button[data-direction='asc'] i::before { color: var(--crm-blue); content: '↑'; }
.table-sort-button[data-direction='desc'] i::before { color: var(--crm-blue); content: '↓'; }
.table-sort-button:hover { color: var(--crm-blue); }
.table-sort-button:focus-visible { border-radius: 3px; outline: 2px solid var(--crm-blue); outline-offset: 2px; }
th[aria-sort='ascending'],th[aria-sort='descending'] { color: var(--crm-blue); }
th[hidden],td[hidden] { display: none !important; }
.permission-table thead th:not(:first-child) .table-sort-button { justify-content: center; }

@media (max-width: 640px) {
  .table-tools-hint { display: none; }
  .table-tools { justify-content: flex-end; }
}

.map-toolbar { display: grid; grid-template-columns: repeat(3,minmax(150px,210px)) auto; align-items: end; gap: 8px; padding: 10px; border: 1px solid var(--crm-line); border-bottom: 0; border-radius: 5px 5px 0 0; background: var(--crm-surface); }
.map-layout { display: grid; min-height: 0; flex: 1; grid-template-columns: minmax(0,1fr) 248px; border: 1px solid var(--crm-line); }
.map-panel { position: relative; min-height: 480px; }
#citizen-map { position: absolute; inset: 0; background: #eef0f2; }
.leaflet-container { font-family: Manrope,Arial,sans-serif; }
.leaflet-control-attribution { font-size: 11px; }
.citizen-map-popup { display: grid; min-width: 170px; gap: 4px; }
.citizen-map-popup strong { font-size: 12px; }
.citizen-map-popup span { color: var(--crm-secondary); font-size: 11px; }
.map-summary { display: flex; flex-direction: column; border-left: 1px solid var(--crm-line); background: white; }
.map-summary-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 18px 16px; border-bottom: 1px solid var(--crm-line-soft); }
.map-summary-head span,.map-insight span { color: var(--crm-muted); font-size: 11px; letter-spacing: .055em; }
.map-summary-head strong { font-size: 28px; font-variant-numeric: tabular-nums; line-height: 1; }
.map-status-list { padding: 8px 16px; border-bottom: 1px solid var(--crm-line-soft); }
.map-status-list > div { display: flex; min-height: 34px; align-items: center; justify-content: space-between; }
.map-status-list span { display: flex; align-items: center; gap: 8px; color: var(--crm-secondary); font-size: 11px; }
.map-status-list strong { font-size: 12px; font-variant-numeric: tabular-nums; }
.map-insight { display: grid; gap: 4px; padding: 18px 16px; }
.map-insight strong { font-size: 18px; }
.map-insight small { color: var(--crm-muted); font-size: 11px; }
.map-privacy { margin: auto 16px 16px; padding-top: 14px; border-top: 1px solid var(--crm-line-soft); color: var(--crm-muted); font-size: 11px; line-height: 1.6; }
.map-mode-switch .btn:not(.primary) { border-color: var(--crm-line); }

.archive-grid { height: clamp(360px, calc(100dvh - 168px), 780px); }
.archive-table { min-width: 880px; }
.archive-table :is(th,td):nth-child(1) { min-width: 190px; }
.archive-table :is(th,td):nth-child(2) { min-width: 125px; }
.archive-table :is(th,td):nth-child(3) { min-width: 135px; }
.archive-table :is(th,td):nth-child(4) { min-width: 190px; }
.archive-table :is(th,td):nth-child(5) { min-width: 160px; }
.archive-table :is(th,td):nth-child(6) { min-width: 110px; }

.settings-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(320px,.75fr); align-items: start; gap: 12px; }
.settings-panel { overflow: hidden; border: 1px solid var(--crm-line); border-radius: 5px; background: white; }
.settings-panel > header { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--crm-line-soft); }
.settings-panel h3 { margin: 0; font-size: 14px; }
.settings-panel p { margin: 3px 0 0; color: var(--crm-muted); font-size: 11px; }
.settings-user-list > div { display: grid; grid-template-columns: 34px minmax(0,1fr) auto auto; align-items: center; gap: 10px; min-height: 58px; padding: 9px 14px; border-bottom: 1px solid var(--crm-line-soft); }
.settings-user-list > div:last-child { border-bottom: 0; }
.settings-user-list > div > span:nth-child(2) { display: grid; }
.settings-user-list strong { font-size: 11px; }
.settings-user-list small { color: var(--crm-muted); font-size: 11px; }
.avatar.pale { background: var(--crm-selected); color: var(--crm-blue); }
.role-badge,.account-state { padding: 3px 6px; border: 1px solid var(--crm-blue); border-radius: 3px; color: var(--crm-blue); font-size: 11px; }
.role-badge.neutral { border-color: var(--crm-line); color: var(--crm-secondary); }
.account-state { border-color: var(--crm-success); color: var(--crm-success); }
.policy-list { display: grid; }
.policy-list label { display: grid; grid-template-columns: 16px minmax(0,1fr); align-items: start; gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--crm-line-soft); cursor: pointer; }
.policy-list label:last-child { border-bottom: 0; }
.policy-list input { width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--crm-blue); }
.policy-list span { display: grid; gap: 2px; }
.policy-list strong { font-size: 11px; }
.policy-list small { color: var(--crm-muted); font-size: 11px; line-height: 1.5; }

.record-drawer { width: min(760px,72vw); }
.drawer-tabs { grid-template-columns: repeat(4,minmax(0,1fr)); }
.section-heading { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--crm-line-soft); }
.section-heading strong { font-size: 12px; }
.section-heading span { color: var(--crm-muted); font-size: 11px; }
.comment-composer { margin-bottom: 12px; padding: 12px; border: 1px solid var(--crm-line); border-radius: 5px; }
.comment-composer > label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 800; }
.comment-composer textarea { width: 100%; min-height: 110px; padding: 9px 10px; resize: vertical; border: 1px solid var(--crm-line); border-radius: 5px; background: var(--crm-inset); color: var(--crm-ink); font: inherit; font-size: 11px; }
.comment-composer > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.comment-composer small { color: var(--crm-muted); font-size: 11px; }
.comment-log { display: grid; gap: 8px; }
.comment-entry { padding: 12px; border: 1px solid var(--crm-line); border-radius: 5px; background: white; }
.comment-entry header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.comment-entry strong { font-size: 11px; }
.comment-entry time { color: var(--crm-muted); font-size: 11px; }
.comment-entry p { margin: 8px 0 0; color: var(--crm-secondary); font-size: 11px; line-height: 1.65; white-space: pre-wrap; }
.relations-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.relations-toolbar h3 { margin: 0; font-size: 14px; }
.relations-toolbar p { margin: 3px 0 0; color: var(--crm-muted); font-size: 11px; }
.relation-list { overflow: hidden; border: 1px solid var(--crm-line); border-radius: 5px; }
.relation-entry { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--crm-line-soft); }
.relation-entry:last-child { border-bottom: 0; }
.relation-entry > span:nth-child(2) { display: grid; }
.relation-entry strong { font-size: 11px; }
.relation-entry small { color: var(--crm-muted); font-size: 11px; }
.relation-type { padding: 3px 7px; border: 1px solid var(--crm-line); border-radius: 3px; color: var(--crm-secondary); font-size: 11px; }
.empty-inline { padding: 28px; color: var(--crm-muted); text-align: center; }
.history-entry[data-outcome='edit'] { --history-accent: var(--crm-blue); }
.history-entry[data-outcome='relation'] { --history-accent: var(--crm-warning); }

.core-dialog { width: min(620px,calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--crm-line); border-radius: 6px; background: white; color: var(--crm-ink); }
.core-dialog::backdrop { background: rgb(12 16 22 / .34); }
.core-dialog > header,.core-dialog > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.core-dialog > header { border-bottom: 1px solid var(--crm-line); }
.core-dialog > footer { justify-content: flex-end; border-top: 1px solid var(--crm-line); }
.core-dialog h2 { margin: 1px 0 0; font-size: 16px; }
.import-body { padding: 14px; }
.drop-zone { display: grid; min-height: 190px; place-items: center; align-content: center; gap: 8px; padding: 24px; border: 1px dashed #aeb7c3; border-radius: 5px; background: var(--crm-surface); text-align: center; cursor: pointer; }
.drop-zone:hover { border-color: var(--crm-blue); background: var(--crm-selected); }
.drop-zone .icon { width: 24px; height: 24px; color: var(--crm-blue); }
.drop-zone strong { font-size: 12px; }
.drop-zone span { max-width: 480px; color: var(--crm-muted); font-size: 11px; line-height: 1.6; }
.drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.import-preview { margin-top: 12px; padding: 10px; border: 1px solid var(--crm-line); border-radius: 5px; background: white; font-size: 11px; }
.relation-dialog { width: min(680px,calc(100vw - 24px)); overflow: hidden; }
.relation-dialog form { max-height: calc(100dvh - 82px); overflow-y: auto; }
.relation-dialog-body { display: grid; gap: 16px; padding: 18px; }
.relation-source { display: flex; align-items: center; gap: 11px; padding-bottom: 15px; border-bottom: 1px solid var(--crm-line-soft); }
.relation-source > span:last-child { display: grid; min-width: 0; gap: 2px; }
.relation-source small { color: var(--crm-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.relation-source strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.relation-source > span:last-child > span { color: var(--crm-muted); font-size: 11px; }
.relation-picker { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
.relation-picker label,.relation-details label { display: grid; min-width: 0; gap: 5px; }
.relation-picker label > span,.relation-details label > span { color: var(--crm-secondary); font-size: 11px; font-weight: 700; }
.relation-picker :is(input,select),.relation-details :is(input,select) { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--crm-line); border-radius: var(--radius-md); background: var(--crm-inset); color: var(--crm-ink); font: inherit; font-size: 12px; outline: none; }
.relation-picker :is(input,select):focus-visible,.relation-details :is(input,select):focus-visible { border-color: var(--crm-blue); background: white; box-shadow: 0 0 0 3px oklch(52% .165 250 / .12); }
.relation-picker label > small { min-height: 14px; color: var(--crm-muted); font-size: 11px; line-height: 1.45; }
.relation-details { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 12px; }
.relation-direction { margin: 0; padding: 10px 12px; border: 1px solid var(--crm-line-soft); border-radius: var(--radius-md); background: var(--crm-selected); color: var(--crm-secondary); font-size: 11px; line-height: 1.55; }
.relation-dialog form > footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--crm-line); background: oklch(99.4% .002 255); }

@media (max-width: 640px) {
  .relation-dialog form { max-height: calc(100dvh - 72px); }
  .relation-dialog-body { gap: 13px; padding: 14px; }
  .relation-picker,.relation-details { grid-template-columns: minmax(0,1fr); }
  .relation-dialog form > footer { padding: 12px 14px; }
}

@media (max-width: 1023px) {
  .citizen-filters { grid-template-columns: minmax(240px,1fr) repeat(2,minmax(150px,.5fr)) auto; }
  .settings-layout { grid-template-columns: minmax(0,1fr); }
  .map-layout { grid-template-columns: minmax(0,1fr); }
  .map-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--crm-line); border-left: 0; }
  .map-summary-head,.map-status-list { border-right: 1px solid var(--crm-line-soft); border-bottom: 0; }
  .map-privacy { display: none; }
}

@media (max-width: 760px) {
  .politics-brand { height: 58px; }
  .page-heading { align-items: flex-start; }
  .page-heading-actions { flex-wrap: wrap; justify-content: flex-end; }
  .citizen-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .citizen-filters .inline-search { grid-column: 1 / -1; }
  .map-toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .map-toolbar .filter-control:first-child { grid-column: 1 / -1; }
  .map-panel { min-height: 56dvh; }
  .map-summary { grid-template-columns: minmax(0,1fr); }
  .map-summary-head,.map-status-list { border-right: 0; border-bottom: 1px solid var(--crm-line-soft); }
  .record-drawer { width: 100vw; }
  .drawer-tabs { grid-template-columns: repeat(4,minmax(44px,1fr)); }
  .drawer-tabs button { font-size: 0; }
  .drawer-tabs .tab-count { font-size: 11px; }
  .drawer-tabs .icon { width: 17px; height: 17px; }
  .settings-user-list > div { grid-template-columns: 34px minmax(0,1fr) auto; }
  .settings-user-list .account-state { display: none; }
}

@media (max-width: 480px) {
  .page-heading { gap: 8px; }
  .page-heading-actions { gap: 4px; }
  .citizen-filters { grid-template-columns: minmax(0,1fr); }
  .citizen-filters .inline-search { grid-column: auto; }
  .status-tabs > button { padding-inline: 9px; }
  .status-tabs > button > span:not(.count):not(.status-dot) { display: none; }
  .map-toolbar { grid-template-columns: minmax(0,1fr); }
  .map-toolbar .filter-control:first-child { grid-column: auto; }
  .comment-composer > div,.relations-toolbar { align-items: stretch; flex-direction: column; }
}

/* 2026 refinement: calmer density, clearer hierarchy and consistent geometry. */
:root {
  --crm-ink: oklch(23% .018 255);
  --crm-secondary: oklch(42% .018 255);
  --crm-muted: oklch(56% .015 255);
  --crm-line: oklch(87% .012 255);
  --crm-line-soft: oklch(92.5% .009 255);
  --crm-surface: oklch(97.2% .007 255);
  --crm-inset: oklch(98.7% .004 255);
  --crm-blue: oklch(52% .165 250);
  --crm-blue-hover: oklch(46% .16 250);
  --crm-selected: oklch(95.5% .025 250);
  --rail: oklch(20.5% 0 0);
  --rail-hover: oklch(27% .012 255);
  --rail-text: oklch(84% .012 255);
  --rail-muted: oklch(65% .014 255);
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 12px;
}

body { background: var(--crm-surface); }

.side {
  width: 252px;
  flex-basis: 252px;
  padding-block: 8px;
}
.politics-brand {
  height: 64px;
  padding-inline: 12px;
}
.politics-logo { width: 184px; }
.nav-label {
  margin: 18px 16px 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}
.side nav > .nav-label:not(:first-child) { margin-top: 22px; }
.nav-item {
  width: calc(100% - 20px);
  height: 42px;
  min-height: 42px;
  gap: 11px;
  margin: 3px 10px;
  padding: 8px 11px;
  border-radius: var(--radius-md);
  font-size: 12px;
  transition: background-color 160ms ease, color 160ms ease;
}
.nav-item .icon { width: 17px; height: 17px; }
.nav-item.active { background: oklch(98.5% .004 255); }
.nav-item.active::before {
  top: 11px;
  bottom: 11px;
  left: -1px;
  border-radius: 2px;
}
.nav-count { border-radius: 999px; }
.side-bottom { border-top-color: oklch(100% 0 0 / .09); }
.account-chip {
  min-height: 66px;
  padding: 12px 16px 6px;
  border-top: 0;
}
.account-chip .avatar { width: 34px; height: 34px; border-radius: var(--radius-md); }
.account-chip strong { font-size: 11px; }
.account-chip small { margin-top: 1px; font-size: 11px; }
.workspace { background: var(--crm-surface); }
main#content { padding: 20px 22px 22px; }
.page-heading {
  min-height: 66px;
  gap: 20px;
  padding: 4px 2px 16px;
}
.page-heading h2 {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.record-total { font-size: 11px; }
.page-heading-actions { gap: 7px; }

.btn,
.circle {
  min-height: 38px;
  border-radius: var(--radius-md);
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.btn {
  padding: 7px 12px;
  font-size: 11px;
}
.circle { width: 38px; height: 38px; }
.btn:not(.primary, .secondary, .outline, .info, .success, .warning, .danger, .danger-outline) {
  border-color: var(--crm-line);
  background: oklch(99.2% .003 255);
}
.btn:not(.primary, .secondary, .outline, .info, .success, .warning, .danger, .danger-outline):hover {
  border-color: oklch(78% .018 255);
  background: var(--crm-inset);
}
.btn.secondary {
  border-color: oklch(25% .018 255);
  background: oklch(25% .018 255);
}
.btn.secondary:hover {
  border-color: oklch(19% .016 255);
  background: oklch(19% .016 255);
}
.btn.outline {
  border-color: oklch(39% .028 255);
  background: oklch(39% .028 255);
}
.export-group { gap: 0; }
.export-group .btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.export-group .btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.contacts-erp {
  overflow: hidden;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-lg);
  background: oklch(99.4% .002 255);
}
.erp-commandbar {
  padding: 14px;
  border-bottom: 1px solid var(--crm-line-soft);
  background: oklch(99.4% .002 255);
}
.citizen-filters {
  position: relative;
  z-index: 70;
  align-items: end;
  gap: 10px;
}
.inline-search input,
.filter-control :is(select,input) {
  height: 38px;
  min-height: 38px;
  border-radius: var(--radius-md);
  background: var(--crm-inset);
  font-size: 11px;
}
.inline-search input { padding-left: 36px; }
.inline-search .icon { left: 11px; }
.filter-control { gap: 5px; }
.filter-control > span {
  color: var(--crm-secondary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}
.inline-search input:focus,
.filter-control :is(select,input):focus,
.record-grid :is(input, select, textarea):focus,
.comment-composer textarea:focus {
  border-color: var(--crm-blue);
  outline: none;
  box-shadow: 0 0 0 3px oklch(52% .165 250 / .12);
}
.erp-phase-tabs {
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid var(--crm-line);
  border-radius: 0;
  background: var(--crm-surface);
}
.status-tabs > button {
  min-height: 43px;
  padding-inline: 14px;
  border-right-color: var(--crm-line-soft);
  font-size: 11px;
}
.status-tabs > button:hover { background: var(--crm-inset); }
.status-tabs > button.active { background: oklch(99.4% .002 255); }
.count { border-radius: 999px; }
.erp-grid-toolbar {
  min-height: 40px;
  padding: 7px 14px;
  border: 0;
  border-bottom: 1px solid var(--crm-line);
  background: oklch(98% .006 255);
}
.table-wrap {
  border: 0;
  scrollbar-color: oklch(74% .015 255) var(--crm-surface);
}
.register th,
.register td {
  height: 46px;
  padding: 7px 14px;
  border-right-color: var(--crm-line-soft);
  font-size: 11px;
}
.register th {
  height: 38px;
  background: oklch(97.8% .007 255);
  color: var(--crm-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .055em;
}
.register tbody tr:nth-child(even) td { background: oklch(99% .003 255); }
.register tbody tr:is(:hover, :focus-within) td { background: var(--crm-selected); }
.citizen-name { gap: 2px; }
.citizen-name strong { font-size: 11px; }
.citizen-name small,.cell-muted { font-size: 11px; }
.citizen-grid { height: clamp(420px, calc(100dvh - 244px), 900px); }
.archive-grid { height: clamp(400px, calc(100dvh - 186px), 820px); }
.empty-state { inset: 39px 0 0; background: oklch(99.4% .002 255); }

.map-toolbar {
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: oklch(99.4% .002 255);
}
.map-layout {
  overflow: hidden;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: oklch(99.4% .002 255);
}
.map-summary { background: oklch(99.4% .002 255); }
.map-summary-head,.map-insight { padding: 20px 18px; }
.map-status-list { padding: 10px 18px; }
.map-status-list > div { min-height: 38px; }
.map-privacy { margin: auto 18px 18px; }
.leaflet-bar a { border-radius: var(--radius-sm); }

.settings-layout { gap: 16px; }
.settings-panel {
  border-radius: var(--radius-lg);
  background: oklch(99.4% .002 255);
}
.settings-panel > header { min-height: 72px; padding: 16px 18px; }
.settings-panel h3 { font-size: 14px; }
.settings-panel p { font-size: 11px; }
.settings-user-list > div {
  min-height: 68px;
  gap: 12px;
  padding: 12px 18px;
}
.settings-user-list strong { font-size: 11px; }
.policy-list label { gap: 11px; padding: 15px 18px; }
.policy-list strong { font-size: 11px; }
.role-badge,.account-state,.relation-type { border-radius: 999px; }

.record-drawer { width: 65vw; max-width: 65vw; }
.drawer-header {
  min-height: 72px;
  padding: 10px 16px 10px 20px;
}
.drawer-title-group h2 { font-size: 19px; letter-spacing: -.02em; }
.drawer-tabs { min-height: 50px; padding: 6px 16px 0; }
.drawer-tabs button { min-height: 43px; font-size: 11px; }
.drawer-scroll { padding: 18px 18px calc(24px + env(safe-area-inset-bottom)); }
.record-section,
.comment-composer,
.comment-entry,
.relation-list {
  border-radius: var(--radius-md);
  background: oklch(99.4% .002 255);
}
details.record-section > summary,.section-heading { min-height: 48px; padding: 10px 14px; }
.record-grid { gap: 13px 14px; padding: 16px; }
.record-grid :is(input, select, textarea),
.note-form > textarea,
.comment-composer textarea {
  min-height: 42px;
  border-radius: var(--radius-md);
  background: var(--crm-inset);
}
.meta-grid { gap: 10px; padding: 16px; }
.meta-grid > div { padding: 12px; border-radius: var(--radius-sm); }
.comment-composer { padding: 15px; }
.comment-entry { padding: 14px; }
.relation-entry { padding: 12px 14px; }
.drawer-more-menu { padding: 6px; border-radius: var(--radius-md); }
.drawer-more-menu :is(button, a) { min-height: 36px; border-radius: var(--radius-sm); }
.drawer-form-footer {
  bottom: -18px;
  margin: 0 -18px -24px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
}

.core-dialog {
  border-radius: 14px;
  background: oklch(99.4% .002 255);
  box-shadow: 0 24px 70px oklch(20% .02 255 / .22);
}
.core-dialog > header,.core-dialog > footer { padding: 15px 18px; }
.import-body { padding: 18px; }
.drop-zone { min-height: 210px; border-radius: var(--radius-md); }
.import-preview { border-radius: var(--radius-md); }
.app-feedback {
  top: 18px;
  right: 18px;
  border-radius: var(--radius-md);
  box-shadow: 0 14px 34px oklch(20% .02 255 / .16);
}

@media (max-width: 1023px) {
  .side,.sidebar-collapsed .side {
    width: 264px;
    flex-basis: 264px;
    padding-top: 6px;
  }
  .topbar {
    height: 60px;
    padding-inline: 14px;
    border-bottom-color: var(--crm-line-soft);
    background: oklch(99.4% .002 255);
  }
  main#content { padding: 16px; }
  .citizen-grid { height: clamp(400px, 62dvh, 760px); }
  .record-drawer { width: 100vw; max-width: 100vw; }
}

@media (max-width: 760px) {
  main#content { padding: 14px; }
  .page-heading { min-height: 62px; padding-bottom: 12px; }
  .page-heading h2 { font-size: 20px; }
  .page-heading-actions { gap: 6px; }
  .citizen-filters,.map-toolbar { padding: 12px; }
  .record-drawer { width: 100vw; max-width: 100vw; }
  .drawer-header { padding: 10px 12px; }
  .drawer-scroll { padding: 12px 12px calc(18px + env(safe-area-inset-bottom)); }
  .drawer-form-footer {
    bottom: -12px;
    margin: 0 -12px -18px;
    padding-inline: 12px;
  }
}

@media (max-width: 480px) {
  main#content { padding: 10px; }
  .page-heading {
    display: grid;
    min-height: 0;
    gap: 10px;
    padding: 2px 2px 12px;
  }
  .page-heading > div:first-child { justify-content: space-between; }
  .page-heading .page-heading-actions {
    width: 100%;
    gap: 5px;
    justify-content: flex-start;
  }
  .page-heading .btn { min-height: 38px; padding-inline: 10px; }
  .page-heading .btn > span { display: inline; }
  .page-heading [data-new-citizen] { margin-left: auto; }
  .page-heading [data-new-citizen] span { display: none; }
  .export-group { flex: none; }
  .citizen-filters { gap: 9px; }
  .inline-search input,.filter-control :is(select,input) { font-size: 16px; }
  .status-tabs > button { padding-inline: 11px; }
  .erp-grid-toolbar { align-items: flex-start; flex-direction: column; padding: 9px 12px; }
  .erp-grid-toolbar .core-muted { display: none; }
  .contacts-erp { border-radius: var(--radius-md); }
  .register th,.register td { padding-inline: 12px; }
  .map-toolbar { border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .map-layout { border-radius: 0 0 var(--radius-md) var(--radius-md); }
  .settings-panel { border-radius: var(--radius-md); }
}

/* Workflow expansion: overview, tasks, segments, command search and bulk actions. */
.side-search {
  display: flex;
  width: calc(100% - 20px);
  min-height: 38px;
  flex: none;
  align-items: center;
  gap: 9px;
  margin: 2px 10px 4px;
  padding: 7px 10px;
  border: 1px solid oklch(100% 0 0 / .12);
  border-radius: var(--radius-md);
  background: oklch(100% 0 0 / .055);
  color: var(--rail-muted);
  font-size: 11px;
  text-align: left;
}
.side-search:hover { border-color: oklch(100% 0 0 / .2); background: oklch(100% 0 0 / .09); color: var(--rail-text); }
.side-search .icon { width: 15px; height: 15px; }
.side-search span { min-width: 0; flex: 1; }
.side-search kbd,.overview-heading kbd {
  padding: 1px 5px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font: 600 8px/16px Manrope,sans-serif;
  opacity: .65;
}

.app-view[data-view='overview'],
.app-view[data-view='campaigns'] {
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.overview-shell {
  display: grid;
  min-height: min-content;
  flex: 0 0 auto;
  gap: 16px;
  padding-bottom: 2px;
}
.overview-summary {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  overflow: hidden;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-lg);
  background: oklch(99.4% .002 255);
}
.overview-summary > div { display: grid; min-height: 112px; align-content: center; gap: 3px; padding: 18px 20px; border-right: 1px solid var(--crm-line-soft); }
.overview-summary > div:last-child { border-right: 0; }
.overview-summary span,.eyebrow { color: var(--crm-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.overview-summary strong { font-size: 26px; line-height: 1.1; letter-spacing: -.035em; }
.overview-summary small { color: var(--crm-muted); font-size: 11px; }
.overview-columns { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 16px; }
.work-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-lg);
  background: oklch(99.4% .002 255);
}
.work-panel > header { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border-bottom: 1px solid var(--crm-line-soft); }
.work-panel h3 { margin: 2px 0 0; font-size: 14px; }
.task-brief-list { display: grid; }
.task-brief {
  display: grid;
  min-width: 0;
  min-height: 58px;
  grid-template-columns: 18px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--crm-line-soft);
  background: transparent;
  text-align: left;
}
.task-brief:last-child { border-bottom: 0; }
.task-brief:hover,.activity-feed button:hover { background: var(--crm-surface); }
.task-check { width: 14px; height: 14px; border: 1px solid var(--crm-line); border-radius: 50%; }
.task-brief.overdue .task-check { border-color: var(--crm-danger); background: oklch(96% .025 25); }
.task-brief > span:nth-child(2) { display: grid; min-width: 0; }
.task-brief strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.task-brief small { overflow: hidden; color: var(--crm-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.task-brief time { color: var(--crm-secondary); font-size: 11px; }
.task-brief.overdue time { color: var(--crm-danger); font-weight: 800; }
.activity-feed { margin: 0; padding: 0; list-style: none; }
.activity-feed li { border-bottom: 1px solid var(--crm-line-soft); }
.activity-feed li:last-child { border-bottom: 0; }
.activity-feed button { display: grid; width: 100%; min-height: 58px; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 16px; border: 0; background: transparent; text-align: left; }
.activity-feed button > span:nth-child(2) { display: grid; min-width: 0; }
.activity-feed strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.activity-feed small,.activity-feed time { color: var(--crm-muted); font-size: 11px; }
.activity-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--crm-blue); }
.activity-mark[data-kind='comment'] { background: var(--crm-success); }
.activity-mark[data-kind='relation'] { background: var(--crm-warning); }
.overview-segments > header { min-height: 78px; padding: 16px 18px; }
.overview-segments > header h3 { font-size: 15px; }
.overview-segments > header p { margin: 4px 0 0; color: var(--crm-muted); font-size: 11px; }
.overview-segments .text-button { display: inline-flex; min-height: 34px; align-items: center; gap: 5px; padding: 6px 8px; border-radius: var(--radius-sm); font-weight: 800; }
.overview-segments .text-button:hover { background: var(--crm-selected); }
.overview-segments .text-button .icon { width: 13px; height: 13px; transition: transform 180ms cubic-bezier(.22,1,.36,1); }
.overview-segments .text-button:hover .icon { transform: translateX(2px); }
.segment-strip { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
.segment-strip button { display: grid; min-width: 0; min-height: 86px; grid-template-columns: minmax(0,1fr) auto 16px; align-items: center; gap: 14px; padding: 14px 18px; border: 0; border-right: 1px solid var(--crm-line-soft); background: transparent; color: var(--crm-secondary); text-align: left; transition: background-color 180ms cubic-bezier(.22,1,.36,1),color 180ms cubic-bezier(.22,1,.36,1); }
.segment-strip button:last-child { border-right: 0; }
.segment-strip button:hover,.segment-strip button:focus-visible { background: var(--crm-selected); color: var(--crm-blue); }
.segment-strip button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--crm-blue); outline-offset: -2px; }
.segment-strip-copy { display: grid; min-width: 0; gap: 6px; }
.segment-strip-name { display: flex; min-width: 0; align-items: center; gap: 8px; overflow: hidden; color: var(--crm-ink); font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.segment-strip-name i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--crm-blue); }
.segment-strip-name i[data-state='Θετικός'] { background: var(--crm-success); }
.segment-strip-name i[data-state='Αναποφάσιστος'] { background: var(--crm-warning); }
.segment-strip-name i[data-state='Αρνητικός'] { background: var(--crm-danger); }
.segment-strip-copy small { overflow: hidden; color: var(--crm-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.segment-strip-count { display: grid; min-width: 44px; justify-items: end; gap: 1px; }
.segment-strip-count strong { color: var(--crm-ink); font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: -.035em; line-height: 1; }
.segment-strip-count small { color: var(--crm-muted); font-size: 11px; text-transform: uppercase; }
.segment-strip-arrow { color: var(--crm-muted); font-size: 20px; line-height: 1; transition: transform 180ms cubic-bezier(.22,1,.36,1); }
.segment-strip button:hover .segment-strip-arrow { transform: translateX(2px); color: var(--crm-blue); }
.segment-strip button[data-empty='true'] .segment-strip-count { opacity: .55; }

.citizen-filters { grid-template-columns: minmax(260px,1fr) repeat(5,minmax(125px,165px)) auto; }
.saved-viewbar {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--crm-line-soft);
  background: oklch(99.4% .002 255);
}
.saved-viewbar select,.bulk-toolbar select {
  height: 34px;
  min-width: 190px;
  padding: 4px 28px 4px 9px;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-sm);
  background: var(--crm-inset);
  color: var(--crm-ink);
  font-size: 11px;
}
.saved-viewbar .btn { min-height: 34px; }
.spatial-filter-chip {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 5px 9px;
  border: 1px solid oklch(72% .07 250);
  border-radius: 999px;
  background: var(--crm-selected);
  color: var(--crm-blue);
  font-size: 11px;
}
.bulk-toolbar {
  display: flex;
  min-height: 48px;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-bottom: 1px solid oklch(78% .055 250);
  background: var(--crm-selected);
}
.bulk-toolbar > strong { min-width: 100px; margin-right: auto; color: var(--crm-blue); font-size: 11px; }
.bulk-toolbar .btn { min-height: 34px; }
.citizen-table { min-width: 1490px; }
.citizen-table :is(th,td):nth-child(1) { width: 44px; min-width: 44px; max-width: 44px; padding-inline: 10px; text-align: center; }
.citizen-table :is(th,td):nth-child(2) { min-width: 190px; }
.citizen-table :is(th,td):nth-child(3) { min-width: 130px; }
.citizen-table :is(th,td):nth-child(4) { min-width: 135px; }
.citizen-table :is(th,td):nth-child(5) { min-width: 190px; }
.citizen-table :is(th,td):nth-child(6) { min-width: 150px; }
.citizen-table :is(th,td):nth-child(7) { min-width: 145px; }
.citizen-table :is(th,td):nth-child(8) { min-width: 220px; }
.citizen-table :is(th,td):nth-child(9) { min-width: 90px; }
.citizen-table :is(th,td):nth-child(10) { min-width: 100px; text-align: center; }
.citizen-table :is(th,td):nth-child(11) { min-width: 170px; }

.task-register,.segment-register { position: relative; }
.view-switch { display: inline-flex; overflow: hidden; padding: 3px; border: 1px solid var(--crm-line); border-radius: var(--radius-md); background: oklch(96.5% .005 255); }
.view-switch button { display: inline-flex; min-height: 34px; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--crm-muted); font: inherit; font-size: 11px; font-weight: 800; }
.view-switch button:hover { color: var(--crm-ink); }
.view-switch button.active { background: white; color: var(--crm-blue); box-shadow: 0 1px 2px rgb(20 30 45 / .09); }
.view-switch .icon { width: 14px; height: 14px; }
.task-filters { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--crm-line); }
.compact-tabs { display: flex; align-self: stretch; }
.compact-tabs button { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; padding: 7px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--crm-secondary); font-size: 11px; }
.compact-tabs button.active { border-bottom-color: var(--crm-blue); color: var(--crm-blue); }
.task-filters .filter-control { min-width: 190px; }
.task-list { display: grid; min-height: 360px; align-content: start; }
.task-row {
  display: grid;
  min-height: 64px;
  grid-template-columns: 28px minmax(260px,1fr) 88px 180px 82px;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--crm-line-soft);
}
.task-row:hover { background: var(--crm-surface); }
.task-complete { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--crm-line); border-radius: 50%; background: oklch(99.4% .002 255); color: oklch(99.4% .002 255); font-size: 11px; }
.task-complete:hover { border-color: var(--crm-success); }
.task-complete[aria-pressed='true'] { border-color: var(--crm-success); background: var(--crm-success); color: oklch(98% .004 255); }
.task-main { display: grid; min-width: 0; gap: 2px; border: 0; background: transparent; text-align: left; }
.task-main strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.task-main span { overflow: hidden; color: var(--crm-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.task-row.done .task-main { opacity: .58; }
.task-row.done .task-main strong { text-decoration: line-through; }
.priority-badge { justify-self: start; padding: 3px 7px; border: 1px solid var(--crm-line); border-radius: 999px; color: var(--crm-secondary); font-size: 11px; }
.priority-badge[data-priority='high'] { border-color: oklch(70% .08 25); color: var(--crm-danger); }
.priority-badge[data-priority='low'] { color: var(--crm-muted); }
.task-assignee,.task-row time { color: var(--crm-secondary); font-size: 11px; }
.task-row time.overdue { color: var(--crm-danger); font-weight: 800; }
.task-empty,.segment-empty { top: 63px; }
.task-kanban { display: grid; min-height: 430px; grid-template-columns: repeat(3,minmax(240px,1fr)); gap: 12px; padding: 12px; overflow-x: auto; background: oklch(97.8% .004 255); }
.kanban-column { min-width: 240px; overflow: hidden; border: 1px solid var(--crm-line); border-radius: var(--radius-md); background: oklch(99.4% .002 255); }
.kanban-column > header { display: grid; min-height: 52px; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--crm-line-soft); }
.kanban-column > header h3 { margin: 0; font-size: 11px; }
.kanban-column > header strong { display: grid; min-width: 24px; height: 24px; place-items: center; border-radius: 12px; background: var(--crm-surface); color: var(--crm-secondary); font-size: 11px; }
.kanban-state { width: 7px; height: 7px; border-radius: 50%; background: var(--crm-muted); }
.kanban-state.danger { background: var(--crm-danger); }
.kanban-state.primary { background: var(--crm-blue); }
.kanban-state.success { background: var(--crm-success); }
.kanban-column > div { display: grid; align-content: start; gap: 8px; padding: 8px; }
.kanban-task { display: grid; gap: 11px; padding: 12px; border: 1px solid var(--crm-line-soft); border-radius: var(--radius-md); background: white; }
.kanban-task:hover { border-color: var(--crm-line); }
.kanban-task > header,.kanban-task > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kanban-task > header time,.kanban-task footer small { overflow: hidden; color: var(--crm-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.kanban-task > button { display: grid; min-width: 0; gap: 4px; padding: 0; border: 0; background: transparent; color: var(--crm-ink); text-align: left; }
.kanban-task > button strong { overflow: hidden; font-size: 11px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.kanban-task > button span { overflow: hidden; color: var(--crm-secondary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.kanban-task.done > button { opacity: .55; }
.kanban-task.done > button strong { text-decoration: line-through; }
.kanban-empty { display: grid; min-height: 90px; place-items: center; color: var(--crm-muted); font-size: 11px; }

.segment-intro { display: flex; min-height: 84px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--crm-line); }
.segment-intro h3 { margin: 3px 0 1px; font-size: 14px; }
.segment-intro p { margin: 0; color: var(--crm-muted); font-size: 11px; }
.segment-list { display: grid; min-height: 360px; align-content: start; }
.segment-row { display: grid; min-height: 72px; grid-template-columns: 38px minmax(220px,1fr) 90px 150px auto; align-items: center; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--crm-line-soft); }
.segment-row:hover { background: var(--crm-surface); }
.segment-symbol { display: grid; width: 34px; height: 34px; place-items: center; border-radius: var(--radius-md); background: var(--crm-selected); color: var(--crm-blue); font-size: 11px; font-weight: 800; }
.segment-row > span:nth-child(2),.segment-count,.segment-updated { display: grid; min-width: 0; }
.segment-row > span:nth-child(2) strong { font-size: 11px; }
.segment-row > span:nth-child(2) small,.segment-count small,.segment-updated small { overflow: hidden; color: var(--crm-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.segment-count strong { font-size: 17px; }
.segment-updated { color: var(--crm-secondary); font-size: 11px; }
.segment-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.segment-actions .circle { width: 34px; height: 34px; font-size: 16px; }

.map-to-list { margin: 0 18px 12px; }
.retention-setting { display: grid; gap: 7px; padding: 18px; }
.retention-setting label { font-size: 11px; font-weight: 800; }
.retention-setting select { min-height: 40px; padding: 7px 10px; border: 1px solid var(--crm-line); border-radius: var(--radius-md); background: var(--crm-inset); color: var(--crm-ink); }
.retention-setting small { max-width: 60ch; color: var(--crm-muted); font-size: 11px; line-height: 1.5; }
.archive-table { min-width: 1120px; }
.archive-table :is(th,td):nth-child(1) { min-width: 190px; }
.archive-table :is(th,td):nth-child(2) { min-width: 125px; }
.archive-table :is(th,td):nth-child(3) { min-width: 135px; }
.archive-table :is(th,td):nth-child(4) { min-width: 190px; }
.archive-table :is(th,td):nth-child(5) { min-width: 160px; }
.archive-table :is(th,td):nth-child(6) { min-width: 160px; }
.archive-table :is(th,td):nth-child(7) { min-width: 110px; }
.archive-dialog-copy { padding: 16px 18px 2px; }
.archive-dialog-copy strong { font-size: 12px; }
.archive-dialog-copy p { margin: 3px 0 0; color: var(--crm-muted); font-size: 11px; }
.core-dialog form > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--crm-line); }
.dialog-linked-record { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 18px; border-bottom: 1px solid var(--crm-line-soft); background: var(--crm-selected); }
.dialog-linked-record > span { color: var(--crm-muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.dialog-linked-record > button { padding: 5px 0; border: 0; background: transparent; color: var(--crm-blue); font: inherit; font-size: 11px; font-weight: 800; text-align: right; }
.dialog-linked-record > button:hover { text-decoration: underline; text-underline-offset: 3px; }

.command-dialog {
  width: min(660px,calc(100vw - 24px));
  max-height: min(620px,calc(100dvh - 24px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--crm-line);
  border-radius: 14px;
  background: oklch(99.4% .002 255);
  color: var(--crm-ink);
  box-shadow: 0 28px 80px oklch(20% .02 255 / .24);
}
.command-dialog::backdrop { background: oklch(18% .01 255 / .38); }
.command-shell { display: flex; max-height: min(620px,calc(100dvh - 24px)); flex-direction: column; }
.command-shell > header { display: flex; min-height: 62px; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--crm-line); }
.command-shell > header > .icon { color: var(--crm-muted); }
.command-shell input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--crm-ink); font-size: 14px; }
.command-shell kbd { padding: 2px 6px; border: 1px solid var(--crm-line); border-radius: 4px; color: var(--crm-muted); font: 600 8px/16px Manrope,sans-serif; }
.command-close { width: 34px; height: 34px; min-height: 34px; }
.command-meta { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px 7px; }
.command-meta h2 { margin: 0; color: var(--crm-muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.command-meta span { color: var(--crm-muted); font-size: 11px; }
.command-results { min-height: 250px; overflow-y: auto; padding: 0 8px 8px; }
.command-result { display: grid; width: 100%; min-height: 58px; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: var(--radius-md); background: transparent; text-align: left; }
.command-result:hover,.command-result.active { background: var(--crm-selected); }
.command-result > span:nth-child(2) { display: grid; min-width: 0; }
.command-result strong { font-size: 11px; }
.command-result small { color: var(--crm-muted); font-size: 11px; }
.command-result .citizen-status { font-size: 11px; }
.command-empty { padding: 56px 16px; color: var(--crm-muted); text-align: center; }
.command-hint { margin: 0; padding: 9px 16px; border-top: 1px solid var(--crm-line-soft); color: var(--crm-muted); font-size: 11px; }

@media (max-width: 1440px) {
  .citizen-filters { grid-template-columns: minmax(220px,1fr) repeat(2,minmax(145px,.5fr)); }
  .citizen-filters .inline-search { grid-column: 1 / -1; }
}

@media (max-width: 1180px) {
  .overview-columns { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 1023px) {
  .side-search { margin-top: 0; }
  .overview-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .overview-summary > div:nth-child(even) { border-right: 0; }
  .overview-summary > div:nth-child(-n+4) { border-bottom: 1px solid var(--crm-line-soft); }
  .overview-summary > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  .segment-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .segment-strip button:nth-child(2) { border-right: 0; }
  .segment-strip button:nth-child(-n+2) { border-bottom: 1px solid var(--crm-line-soft); }
  .segment-strip button:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  .task-row { grid-template-columns: 28px minmax(220px,1fr) 82px 130px 72px; }
  .segment-row { grid-template-columns: 38px minmax(190px,1fr) 72px auto; }
  .segment-updated { display: none; }
}

@media (max-width: 760px) {
  .citizen-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .citizen-filters .inline-search { grid-column: 1 / -1; }
  .overview-shell { gap: 12px; }
  .overview-summary > div { min-height: 92px; padding: 14px; }
  .overview-summary strong { font-size: 22px; }
  .work-panel > header { min-height: 60px; padding-inline: 14px; }
  .saved-viewbar { align-items: stretch; flex-wrap: wrap; padding: 10px 12px; }
  .saved-viewbar label { flex: 1 1 180px; }
  .saved-viewbar select { width: 100%; min-width: 0; }
  .spatial-filter-chip { margin-left: 0; }
  .bulk-toolbar { align-items: stretch; flex-wrap: wrap; }
  .bulk-toolbar > strong { width: 100%; }
  .bulk-toolbar select { min-width: 0; }
  .task-filters { align-items: stretch; flex-direction: column; }
  .compact-tabs { overflow-x: auto; }
  .task-filters .filter-control { min-width: 0; }
  .task-row { grid-template-columns: 28px minmax(0,1fr) auto; gap: 8px; }
  .task-row .priority-badge { grid-column: 2; }
  .task-assignee { display: none; }
  .task-row time { grid-column: 3; grid-row: 1 / span 2; }
  .segment-intro { min-height: 76px; }
  .segment-row { grid-template-columns: 34px minmax(0,1fr) 58px; gap: 10px; padding: 11px 12px; }
  .segment-actions { grid-column: 2 / -1; justify-content: flex-start; }
  .segment-actions .btn { flex: 1; }
  .command-shell input { font-size: 16px; }
}

@media (max-width: 480px) {
  .overview-heading kbd { display: none; }
  .overview-summary { grid-template-columns: minmax(0,1fr); }
  .overview-summary > div { min-height: 78px; border-right: 0; border-bottom: 1px solid var(--crm-line-soft); }
  .overview-summary > div:last-child { border-bottom: 0; }
  .segment-strip { grid-template-columns: minmax(0,1fr); }
  .segment-strip button,.segment-strip button:last-child:nth-child(odd) { min-height: 76px; grid-column: auto; border-right: 0; border-bottom: 1px solid var(--crm-line-soft); }
  .segment-strip button:last-child { border-bottom: 0; }
  .activity-feed time { display: none; }
  .citizen-filters { grid-template-columns: minmax(0,1fr); }
  .citizen-filters .inline-search { grid-column: auto; }
  .saved-viewbar .btn { width: 100%; }
  .bulk-toolbar label { flex: 1 1 130px; }
  .bulk-toolbar select { width: 100%; }
  .task-row { padding-inline: 10px; }
  .segment-row { grid-template-columns: 34px minmax(0,1fr) 48px; }
  .segment-count strong { font-size: 15px; }
  .command-result { grid-template-columns: 32px minmax(0,1fr); }
  .command-result .citizen-status { display: none; }
}

/* Calendar: full-width operational planning, with citizen context inside every event. */
.app-view[data-view='calendar'] { overflow-y: auto; scrollbar-gutter: stable; }
.calendar-layout { display: block; min-height: 0; flex: 0 0 auto; }
.calendar-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-lg);
  background: oklch(99.4% .002 255);
}
.calendar-toolbar {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--crm-line);
}
.calendar-period { min-width: 0; }
.calendar-toolbar .eyebrow { font-size: 11px; }
.calendar-toolbar h3 { margin: 3px 0 0; font-size: 19px; line-height: 1.25; text-transform: capitalize; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 0; color: var(--crm-muted); font-size: 11px; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.calendar-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--crm-blue); }
.calendar-legend i.campaign { background: oklch(55% .14 295); }
.calendar-legend i.priority { background: var(--crm-danger); }
.calendar-toolbar-actions { display: flex; flex: none; align-items: center; gap: 10px; }
.calendar-mode-switch button { min-width: 92px; justify-content: center; }
.calendar-controls { display: flex; align-items: center; gap: 6px; }
.calendar-controls .previous .icon { transform: rotate(180deg); }
.calendar-controls .circle { width: 36px; height: 36px; min-height: 36px; }
.calendar-controls .btn { min-height: 36px; }
.calendar-scroll { min-width: 0; overflow: auto; background: var(--crm-inset); }
.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  border-bottom: 1px solid var(--crm-line);
  background: var(--crm-surface);
}
.calendar-weekdays span { padding: 11px 10px; border-right: 1px solid var(--crm-line-soft); color: var(--crm-secondary); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-align: center; }
.calendar-weekdays span:last-child { border-right: 0; }
.calendar-grid { min-width: 0; }
.calendar-grid-month {
  display: grid;
  min-height: 820px;
  grid-template-columns: repeat(7,minmax(0,1fr));
  grid-template-rows: repeat(6,minmax(136px,auto));
}
.calendar-row { display: contents; }
.calendar-day {
  min-width: 0;
  padding: 9px;
  overflow: hidden;
  border-right: 1px solid var(--crm-line-soft);
  border-bottom: 1px solid var(--crm-line-soft);
  background: oklch(99.4% .002 255);
}
.calendar-row .calendar-day:last-child { border-right: 0; }
.calendar-row:last-child .calendar-day { border-bottom: 0; }
.calendar-day:hover { background: oklch(98.2% .008 250); }
.calendar-day.outside { background: var(--crm-surface); }
.calendar-day.outside .calendar-events { opacity: .65; }
.calendar-day.selected { background: var(--crm-selected); box-shadow: inset 0 0 0 1px oklch(70% .09 250); }
.calendar-day-head { display: flex; min-height: 30px; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.calendar-date {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--crm-secondary);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.calendar-date:hover { background: oklch(91% .018 250); color: var(--crm-blue); }
.calendar-day.outside .calendar-date { color: oklch(67% .012 255); }
.calendar-day.today .calendar-date { background: var(--crm-blue); color: oklch(98% .004 255); }
.calendar-day.selected:not(.today) .calendar-date { color: var(--crm-blue); }
.calendar-day-count { display: grid; min-width: 21px; height: 21px; place-items: center; border-radius: 11px; background: oklch(94% .012 250); color: var(--crm-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
.calendar-events { display: grid; gap: 5px; }
.calendar-event {
  display: grid;
  width: 100%;
  min-height: 46px;
  grid-template-columns: 7px minmax(0,1fr);
  align-items: start;
  gap: 7px;
  padding: 7px;
  overflow: hidden;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-sm);
  background: oklch(99.2% .003 255);
  color: var(--crm-ink);
  text-align: left;
}
.calendar-event:hover { border-color: oklch(72% .08 250); background: oklch(96.5% .018 250); color: var(--crm-blue); }
.calendar-event:focus-within { position: relative; z-index: 1; border-color: var(--crm-blue); box-shadow: inset 0 0 0 1px var(--crm-blue); }
.calendar-event-copy { display: grid; min-width: 0; gap: 2px; }
.calendar-event-title,.calendar-event-context { min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.calendar-event-title { display: block; }
.calendar-event-title:focus-visible,.calendar-event-context:focus-visible { border-radius: 2px; outline: 2px solid var(--crm-blue); outline-offset: 1px; }
.calendar-event-copy strong {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 11px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.calendar-event-context { display: block; overflow: hidden; color: var(--crm-muted); font-size: 11px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event-context:hover { color: var(--crm-blue); text-decoration: underline; text-underline-offset: 2px; }
.calendar-event.done { background: var(--crm-surface); color: var(--crm-secondary); }
.calendar-event.done .calendar-event-copy strong { text-decoration: line-through; text-decoration-thickness: 1px; }
.event-dot { width: 7px; height: 7px; margin-top: 3px; flex: none; border-radius: 50%; background: var(--crm-blue); }
.event-dot[data-priority='high'] { background: var(--crm-danger); }
.event-dot[data-priority='low'] { background: var(--crm-muted); }
.calendar-more { padding: 2px 6px 0; color: var(--crm-secondary); font-size: 11px; font-weight: 800; }

.calendar-grid-week { display: grid; background: oklch(99.4% .002 255); }
.calendar-week-row {
  display: grid;
  min-height: 112px;
  grid-template-columns: 122px minmax(0,1fr) 112px;
  align-items: stretch;
  border-bottom: 1px solid var(--crm-line-soft);
}
.calendar-week-row:last-child { border-bottom: 0; }
.calendar-week-row:hover { background: oklch(98.2% .008 250); }
.calendar-week-row.selected { background: var(--crm-selected); }
.calendar-week-row.today { box-shadow: inset 3px 0 var(--crm-blue); }
.calendar-week-date { display: grid; align-items: center; padding: 12px 14px; border-right: 1px solid var(--crm-line-soft); }
.calendar-week-date button { display: grid; grid-template-columns: 38px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; gap: 0 10px; border: 0; background: transparent; color: var(--crm-secondary); text-align: left; }
.calendar-week-date span { grid-column: 2; color: var(--crm-ink); font-size: 12px; font-weight: 800; text-transform: capitalize; }
.calendar-week-date strong { grid-column: 1; grid-row: 1 / span 2; color: var(--crm-ink); font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1; }
.calendar-week-date small { grid-column: 2; color: var(--crm-muted); font-size: 11px; text-transform: capitalize; }
.calendar-week-row.today .calendar-week-date strong { color: var(--crm-blue); }
.calendar-week-stream { display: grid; min-width: 0; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); align-content: center; gap: 8px; padding: 12px; }
.calendar-event-expanded { min-height: 68px; align-content: center; padding: 9px 10px; }
.calendar-event-expanded .calendar-event-copy strong { font-size: 12px; -webkit-line-clamp: 2; }
.calendar-event-expanded .calendar-event-context { white-space: normal; }
.calendar-week-empty { align-self: center; color: var(--crm-muted); font-size: 11px; }
.calendar-week-action { display: grid; place-items: center; padding: 12px; border-left: 1px solid var(--crm-line-soft); }
.calendar-week-action .btn { width: 100%; min-height: 36px; }

@media (max-width: 900px) {
  .calendar-toolbar { align-items: flex-start; flex-direction: column; gap: 12px; }
  .calendar-toolbar-actions { width: 100%; justify-content: space-between; }
  .calendar-grid-month,.calendar-weekdays { width: 840px; }
  .calendar-week-row { grid-template-columns: 106px minmax(0,1fr); }
  .calendar-week-action { grid-column: 2; padding-top: 0; border-left: 0; }
  .calendar-week-action .btn { width: auto; justify-self: start; }
}

@media (max-width: 600px) {
  .calendar-toolbar { padding: 14px; }
  .calendar-legend span:last-child { display: none; }
  .calendar-toolbar-actions { align-items: stretch; flex-direction: column; }
  .calendar-mode-switch { width: 100%; }
  .calendar-mode-switch button { min-width: 0; flex: 1; justify-content: center; }
  .calendar-controls { width: 100%; }
  .calendar-controls .btn { flex: 1; }
  .calendar-week-row { grid-template-columns: 88px minmax(0,1fr); }
  .calendar-week-date { padding: 10px; }
  .calendar-week-date button { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto; gap: 2px; text-align: center; }
  .calendar-week-date span,.calendar-week-date strong,.calendar-week-date small { grid-column: 1; grid-row: auto; }
  .calendar-week-stream { grid-template-columns: minmax(0,1fr); padding: 10px; }
  .calendar-week-action { padding: 0 10px 10px; }
  .calendar-week-action .btn { width: 100%; }
}

/* Settings center: one operational workspace with section navigation. */
.settings-page-heading { align-items: center; }
.settings-save-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--crm-muted);
  font-size: 11px;
}
.settings-save-state::before { width: 6px; height: 6px; border-radius: 50%; background: var(--crm-success); content: ''; }
.settings-center {
  display: grid;
  min-height: 660px;
  grid-template-columns: 210px minmax(0,1fr);
  align-items: start;
  gap: 16px;
}
.settings-nav {
  position: sticky;
  top: 0;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-md);
  background: oklch(99.4% .002 255);
}
.settings-nav p { margin: 0; padding: 15px 14px 6px; color: var(--crm-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.settings-nav button {
  display: grid;
  min-height: 42px;
  grid-template-columns: 18px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--crm-secondary);
  font-size: 11px;
  font-weight: 600;
  text-align: left;
}
.settings-nav button:hover { background: var(--crm-surface); color: var(--crm-ink); }
.settings-nav button[aria-selected='true'] { background: var(--crm-selected); color: var(--crm-blue); }
.settings-nav button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--crm-blue); outline-offset: -2px; }
.settings-nav .icon { width: 15px; height: 15px; }
.settings-nav small { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 10px; background: var(--crm-surface); color: var(--crm-muted); font-size: 11px; }
.settings-nav button[aria-selected='true'] small { background: oklch(88% .045 250); color: var(--crm-blue); }
.settings-workspace { min-width: 0; }
.settings-section {
  overflow: hidden;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-md);
  background: oklch(99.4% .002 255);
}
.settings-section-head {
  display: flex;
  min-height: 84px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--crm-line-soft);
}
.settings-section-head h3 { margin: 3px 0 0; color: var(--crm-ink); font-size: 17px; letter-spacing: -.025em; }
.settings-section-head p { max-width: 70ch; margin: 5px 0 0; color: var(--crm-muted); font-size: 11px; line-height: 1.5; }
.settings-status-dot,.settings-warning,.security-score {
  display: inline-flex;
  min-height: 28px;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--crm-line);
  border-radius: 14px;
  color: var(--crm-secondary);
  font-size: 11px;
  font-weight: 800;
}
.settings-status-dot::before { width: 6px; height: 6px; border-radius: 50%; background: var(--crm-success); content: ''; }
.settings-warning { border-color: oklch(80% .08 75); background: oklch(97% .025 80); color: oklch(47% .11 65); }
.security-score { border-color: oklch(80% .055 245); background: var(--crm-selected); color: var(--crm-blue); }
.settings-form { display: grid; }
.settings-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px 18px; padding: 22px 20px; }
.settings-form-grid .span-2 { grid-column: span 2; }
.settings-form-grid label { display: grid; min-width: 0; gap: 6px; }
.settings-form-grid label > span { color: var(--crm-secondary); font-size: 11px; font-weight: 800; }
.settings-form-grid :is(input,select) {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-md);
  background: var(--crm-inset);
  color: var(--crm-ink);
  font: inherit;
  font-size: 11px;
}
.settings-form-grid :is(input,select):hover { border-color: oklch(70% .018 255); }
.settings-form-grid :is(input,select):focus-visible { border-color: var(--crm-blue); outline: 2px solid oklch(70% .12 250 / .28); outline-offset: 1px; }
.compact-grid { grid-template-columns: repeat(2,minmax(200px,360px)); }
.settings-form-footer {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-top: 1px solid var(--crm-line-soft);
  background: var(--crm-surface);
}
.settings-form-footer > span { color: var(--crm-muted); font-size: 11px; }
.settings-switch-list { display: grid; border-top: 1px solid var(--crm-line-soft); }
.compact-grid + .settings-switch-list { border-top: 1px solid var(--crm-line-soft); }
.settings-switch-list label {
  display: grid;
  grid-template-columns: 18px minmax(0,1fr);
  align-items: start;
  gap: 11px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--crm-line-soft);
  cursor: pointer;
}
.settings-switch-list label:hover { background: var(--crm-surface); }
.settings-switch-list input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--crm-blue); }
.settings-switch-list span { display: grid; gap: 3px; }
.settings-switch-list strong { color: var(--crm-ink); font-size: 11px; }
.settings-switch-list small { max-width: 70ch; color: var(--crm-muted); font-size: 11px; line-height: 1.45; }
.settings-notice { display: flex; align-items: center; gap: 12px; padding: 13px 20px; background: oklch(96.5% .013 245); color: var(--crm-secondary); }
.settings-notice strong { flex: none; color: var(--crm-ink); font-size: 11px; }
.settings-notice span { font-size: 11px; }
.role-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-bottom: 1px solid var(--crm-line-soft); background: var(--crm-surface); }
.role-summary > div { display: grid; gap: 2px; padding: 12px 16px; border-right: 1px solid var(--crm-line-soft); }
.role-summary > div:last-child { border-right: 0; }
.role-summary strong { color: var(--crm-ink); font-size: 11px; }
.role-summary span { color: var(--crm-muted); font-size: 11px; }
.settings-user-list { display: grid; }
.settings-user-row {
  display: grid;
  min-height: 70px;
  grid-template-columns: 36px minmax(180px,1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--crm-line-soft);
}
.settings-user-row:last-child { border-bottom: 0; }
.settings-user-row.inactive { background: var(--crm-surface); }
.settings-user-row.inactive > :not(.settings-user-actions) { opacity: .58; }
.settings-user-meta { display: grid; min-width: 0; gap: 3px; }
.settings-user-meta strong,.settings-user-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-user-meta strong { color: var(--crm-ink); font-size: 11px; }
.settings-user-meta small { color: var(--crm-muted); font-size: 11px; }
.role-badge[data-role] { border-color: var(--crm-line); background: transparent; color: var(--crm-secondary); }
.role-badge[data-role='admin'] { border-color: oklch(65% .12 250); color: var(--crm-blue); }
.role-badge[data-role='lead'] { border-color: oklch(72% .08 75); color: oklch(48% .11 65); }
.account-state { display: inline-flex; align-items: center; gap: 5px; color: var(--crm-secondary); font-size: 11px; font-weight: 800; }
.account-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--crm-success); }
.account-state[data-state='inactive'] i { background: var(--crm-muted); }
.settings-user-actions { display: flex; justify-content: flex-end; gap: 6px; }
.settings-user-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.permission-table-wrap { overflow: auto; }
.permission-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.permission-table :is(th,td) { min-height: 56px; padding: 13px 16px; border-bottom: 1px solid var(--crm-line-soft); text-align: center; }
.permission-table thead th { background: var(--crm-surface); color: var(--crm-muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.permission-table thead th:first-child,.permission-table tbody th { text-align: left; }
.permission-table tbody tr:last-child :is(th,td) { border-bottom: 0; }
.permission-table tbody th { display: grid; gap: 3px; font-weight: 600; }
.permission-table tbody th strong { color: var(--crm-ink); font-size: 11px; }
.permission-table tbody th small { color: var(--crm-muted); font-size: 11px; font-weight: 600; }
.permission-check { display: inline-grid; place-items: center; cursor: pointer; }
.permission-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--crm-blue); }
.permission-check input:disabled { opacity: .6; cursor: not-allowed; }
.settings-audit-list { display: grid; }
.settings-audit-entry { display: grid; min-height: 66px; grid-template-columns: 10px minmax(0,1fr) minmax(150px,auto); align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--crm-line-soft); }
.settings-audit-entry:last-child { border-bottom: 0; }
.audit-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--crm-blue); box-shadow: 0 0 0 3px var(--crm-selected); }
.settings-audit-entry > span { display: grid; gap: 3px; }
.settings-audit-entry > span:last-child { justify-items: end; }
.settings-audit-entry strong { color: var(--crm-ink); font-size: 11px; }
.settings-audit-entry small,.settings-audit-entry time { color: var(--crm-muted); font-size: 11px; }
.user-dialog { width: min(560px,calc(100vw - 28px)); }
.form-error { margin: 0 18px 12px; padding: 9px 11px; border: 1px solid oklch(72% .1 25); border-radius: var(--radius-md); background: oklch(96% .025 25); color: var(--crm-danger); font-size: 11px; }

/* Operational workflow: requests, communications, campaigns, reports and field teams. */
.flow-summary,.communication-overview {
  display: grid;
  flex: none;
  grid-template-columns: repeat(4,minmax(0,1fr));
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-lg);
  background: white;
}
.flow-summary > button,.communication-overview > div {
  display: grid;
  min-height: 78px;
  align-content: center;
  gap: 2px;
  padding: 14px 18px;
  border: 0;
  border-right: 1px solid var(--crm-line-soft);
  background: transparent;
  color: var(--crm-ink);
  font: inherit;
  text-align: left;
}
.flow-summary > button:last-child,.communication-overview > div:last-child { border-right: 0; }
.flow-summary > button:hover,.flow-summary > button[aria-pressed='true'] { background: var(--crm-selected); color: var(--crm-blue); }
.flow-summary span,.communication-overview span { color: var(--crm-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.flow-summary strong,.communication-overview strong { font-size: 22px; line-height: 1.15; letter-spacing: -.035em; }
.communication-overview small { color: var(--crm-muted); font-size: 11px; }
.flow-register,.communication-register { overflow: hidden; border: 1px solid var(--crm-line); border-radius: var(--radius-lg); background: white; }
.flow-filters { display: grid; grid-template-columns: minmax(260px,1fr) repeat(3,minmax(130px,180px)) auto; align-items: end; gap: 8px; padding: 10px; }
.flow-filters .inline-search { align-self: end; }
.flow-table-wrap { min-height: 340px; border-top: 1px solid var(--crm-line-soft); }
.flow-table { width: 100%; min-width: 1120px; table-layout: auto; }
.flow-table :is(th,td) { padding: 11px 12px; }
.flow-table :is(th,td):nth-child(n) { width: auto; max-width: none; text-align: left; }
.flow-table :is(th,td):nth-child(1) { min-width: 240px; }
.flow-table :is(th,td):nth-child(2) { min-width: 150px; }
.flow-table :is(th,td):nth-child(3) { min-width: 120px; }
.flow-table :is(th,td):nth-child(4) { min-width: 115px; }
.flow-table :is(th,td):nth-child(5) { min-width: 120px; }
.flow-table :is(th,td):nth-child(6) { min-width: 160px; }
.flow-table :is(th,td):nth-child(7),.flow-table :is(th,td):nth-child(8) { min-width: 105px; }
.flow-primary { display: grid; min-width: 180px; gap: 3px; border: 0; background: transparent; color: var(--crm-ink); font: inherit; text-align: left; }
.flow-primary strong,.table-link { font-size: 11px; }
.flow-primary small { max-width: 280px; overflow: hidden; color: var(--crm-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.table-link { padding: 0; border: 0; background: transparent; color: var(--crm-blue); font-weight: 800; }
.workflow-state { display: inline-flex; min-height: 22px; align-items: center; padding: 3px 7px; border: 1px solid var(--crm-line); border-radius: 999px; background: var(--crm-surface); color: var(--crm-secondary); font-size: 11px; font-weight: 800; white-space: nowrap; }
.workflow-state[data-state='new'],.workflow-state[data-state='planned'] { border-color: oklch(76% .08 250); background: oklch(97% .018 250); color: var(--crm-blue); }
.workflow-state[data-state='active'],.workflow-state[data-state='running'] { border-color: oklch(72% .09 155); background: oklch(97% .02 155); color: var(--crm-success); }
.workflow-state[data-state='waiting'] { border-color: oklch(78% .1 80); background: oklch(97% .025 80); color: var(--crm-warning); }
.workflow-state[data-state='done'],.workflow-state[data-state='cancelled'] { color: var(--crm-muted); }
.overdue { color: var(--crm-danger) !important; font-weight: 800; }

.interaction-stream { margin: 0; padding: 0; list-style: none; }
.interaction-entry { display: grid; min-height: 76px; grid-template-columns: 34px minmax(0,1fr) minmax(135px,auto); align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--crm-line-soft); }
.interaction-entry:hover { background: var(--crm-surface); }
.interaction-channel { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--crm-line); border-radius: 50%; color: var(--crm-blue); font-size: 11px; font-weight: 800; }
.interaction-body,.interaction-meta { display: grid; min-width: 0; gap: 3px; }
.interaction-body button { width: max-content; max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--crm-ink); text-align: left; }
.interaction-body strong { font-size: 11px; }
.interaction-body > span { overflow: hidden; color: var(--crm-secondary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.interaction-body small,.interaction-meta { color: var(--crm-muted); font-size: 11px; }
.interaction-meta { justify-items: end; }
.interaction-meta button { padding: 3px 0; border: 0; background: transparent; color: var(--crm-blue); font-size: 11px; font-weight: 800; }

.campaign-workspace { display: grid; min-height: 0; flex: none; gap: 12px; overflow: visible; background: transparent; }
.campaign-index,.campaign-detail { min-width: 0; overflow: hidden; border: 1px solid var(--crm-line); border-radius: var(--radius-lg); background: white; }
.campaign-index-head { display: flex; min-height: 72px; align-items: center; gap: 12px; padding: 14px 18px; }
.campaign-index-head > span { display: grid; width: 30px; height: 30px; flex: none; place-items: center; border-radius: 50%; background: var(--crm-ink); color: white; font-size: 11px; font-weight: 800; }
.campaign-index-head > div { display: grid; gap: 3px; }
.campaign-index-head h3 { margin: 0; font-size: 14px; }
.campaign-index-head p { margin: 0; color: var(--crm-muted); font-size: 11px; }
.campaign-filterbar { display: grid; grid-template-columns: auto minmax(360px,520px); align-items: center; gap: 16px; padding: 10px 18px; border-block: 1px solid var(--crm-line-soft); background: oklch(98.7% .004 255); }
.campaign-filterbar > span { color: var(--crm-muted); font-size: 11px; font-weight: 800; letter-spacing: .09em; }
.campaign-filterbar .status-tabs { display: grid; min-width: 0; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; padding: 3px; border: 1px solid var(--crm-line-soft); border-radius: var(--radius-md); background: oklch(95.8% .006 255); }
.campaign-filterbar .status-tabs > button { min-height: 34px; justify-content: center; padding: 6px 10px; border: 0; border-radius: 4px; font-size: 11px; }
.campaign-filterbar .status-tabs > button.active { background: white; color: var(--crm-ink); box-shadow: 0 1px 2px rgb(20 30 45 / .08); }
.campaign-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 12px; }
.campaign-card { display: grid; min-height: 118px; gap: 10px; padding: 14px; border: 1px solid var(--crm-line-soft); border-radius: var(--radius-md); background: oklch(99.2% .003 255); color: var(--crm-ink); font: inherit; text-align: left; transition: border-color 180ms cubic-bezier(.22,1,.36,1),background-color 180ms cubic-bezier(.22,1,.36,1); }
.campaign-card:hover { border-color: var(--crm-line); background: white; }
.campaign-card.active { border-color: var(--crm-blue); background: var(--crm-selected); box-shadow: inset 0 0 0 1px var(--crm-blue); }
.campaign-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.campaign-card time,.campaign-card small { color: var(--crm-muted); font-size: 11px; }
.campaign-card-copy { display: grid; min-width: 0; gap: 4px; }
.campaign-card-copy strong { overflow: hidden; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.campaign-card-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-card-progress { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; }
.campaign-card-progress > span { color: var(--crm-muted); font-size: 11px; }
.campaign-card-progress > span:nth-child(2) { text-align: right; }
.campaign-card-progress > span b { color: var(--crm-secondary); }
.campaign-card-progress i { height: 4px; grid-column: 1 / -1; overflow: hidden; border-radius: 4px; background: var(--crm-line-soft); }
.campaign-card-progress i b { display: block; height: 100%; border-radius: inherit; background: var(--crm-blue); }
.campaign-detail-empty { display: grid; height: 100%; place-content: center; justify-items: center; gap: 5px; padding: 28px; color: var(--crm-muted); text-align: center; }
.campaign-detail-empty strong { color: var(--crm-ink); font-size: 12px; }
.campaign-detail-empty span { font-size: 11px; }
.campaign-detail-head { display: flex; min-height: 146px; align-items: flex-start; justify-content: space-between; gap: 28px; padding: 24px 26px 22px; border-bottom: 1px solid var(--crm-line-soft); }
.campaign-title-block { min-width: 0; }
.campaign-detail-label { display: block; margin-bottom: 10px; color: var(--crm-blue); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.campaign-title-meta { display: flex; align-items: center; gap: 10px; }
.campaign-period { color: var(--crm-muted); font-size: 11px; font-weight: 800; }
.campaign-detail-head h3 { margin: 15px 0 7px; font-size: 22px; line-height: 1.18; letter-spacing: -.04em; }
.campaign-detail-head p { max-width: 66ch; margin: 0; color: var(--crm-secondary); font-size: 11px; line-height: 1.65; }
.campaign-detail-actions { display: flex; flex: none; gap: 6px; }
.campaign-facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 12px 14px; border-bottom: 1px solid var(--crm-line-soft); background: oklch(98.8% .003 255); }
.campaign-facts > div { display: flex; min-width: 0; min-height: 48px; align-items: center; gap: 9px; padding: 6px 10px; }
.campaign-facts > div + div { border-left: 1px solid var(--crm-line-soft); }
.campaign-facts > div > span:last-child { display: grid; min-width: 0; gap: 3px; }
.campaign-facts small { color: var(--crm-muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.campaign-facts strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.campaign-fact-mark { display: grid; width: 28px; height: 28px; flex: none; place-items: center; border-radius: 50%; background: var(--crm-selected); color: var(--crm-blue); font-size: 11px; font-weight: 800; }
.campaign-outcomes { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 16px 18px; border-bottom: 1px solid var(--crm-line-soft); background: white; }
.campaign-outcomes > * { display: grid; min-height: 70px; align-content: center; gap: 4px; padding: 8px 14px; border: 0; border-right: 1px solid var(--crm-line-soft); background: transparent; color: var(--crm-ink); text-align: left; }
.campaign-outcomes > *:last-child { border-right: 0; }
.campaign-outcomes span { color: var(--crm-muted); font-size: 11px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.campaign-outcomes button:hover { border-radius: var(--radius-md); background: var(--crm-selected); }
.campaign-outcomes strong { font-size: 22px; line-height: 1; letter-spacing: -.035em; }
.campaign-outcomes small { color: var(--crm-muted); font-size: 11px; }
.campaign-action-section { background: oklch(99.2% .003 255); }
.campaign-action-section > header { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 24px; border-bottom: 1px solid var(--crm-line-soft); }
.campaign-action-section h4 { margin: 4px 0 0; font-size: 14px; }
.campaign-action-progress { display: grid; width: min(210px,32%); gap: 6px; }
.campaign-action-progress span { color: var(--crm-muted); font-size: 11px; text-align: right; }
.campaign-action-progress i { height: 4px; overflow: hidden; border-radius: 4px; background: var(--crm-line-soft); }
.campaign-action-progress b { display: block; height: 100%; border-radius: inherit; background: var(--crm-success); }
.campaign-action-list { display: grid; padding: 0 16px 16px; }
.campaign-action-row { display: grid; min-height: 70px; grid-template-columns: 44px minmax(0,1fr) 22px; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--crm-line-soft); }
.campaign-action-row > time { display: grid; width: 42px; height: 44px; place-content: center; justify-items: center; border: 1px solid var(--crm-line); border-radius: var(--radius-md); background: white; color: var(--crm-secondary); }
.campaign-action-row > time strong { font-size: 13px; line-height: 1; }
.campaign-action-row > time span { margin-top: 3px; color: var(--crm-muted); font-size: 11px; text-transform: uppercase; }
.campaign-action-row > span { display: grid; gap: 5px; }
.campaign-action-row > span > strong { font-size: 11px; }
.campaign-action-row small { display: flex; align-items: center; gap: 7px; color: var(--crm-muted); font-size: 11px; }
.campaign-action-row small b { padding: 2px 5px; border-radius: 3px; background: var(--crm-selected); color: var(--crm-blue); font-size: 11px; }
.campaign-action-row.done > span { opacity: .52; }
.campaign-action-row.done > span > strong { text-decoration: line-through; }
.campaign-action-row.done > time { opacity: .55; }
.campaign-action-empty { display: grid; min-height: 150px; place-content: center; justify-items: center; gap: 8px; color: var(--crm-muted); }
.campaign-action-empty strong { font-size: 11px; }
.campaign-event { background: oklch(96% .022 295); color: oklch(45% .11 295); }
.event-dot[data-priority='campaign'] { background: oklch(55% .14 295); }
.campaign-label { border-color: oklch(72% .08 295); color: oklch(45% .11 295); }

.report-filterbar { display: grid; flex: none; grid-template-columns: repeat(3,minmax(150px,220px)) minmax(220px,1fr); align-items: end; gap: 10px; margin-bottom: 12px; padding: 10px; border: 1px solid var(--crm-line); border-radius: var(--radius-lg); background: white; }
.report-filter-note { align-self: center; color: var(--crm-muted); font-size: 11px; text-align: right; }
.report-kpis { display: grid; flex: none; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; margin-bottom: 12px; border: 1px solid var(--crm-line); border-radius: var(--radius-lg); background: white; }
.report-kpis > button { display: grid; min-height: 88px; align-content: center; gap: 3px; padding: 14px 16px; border: 0; border-right: 1px solid var(--crm-line-soft); background: white; color: var(--crm-ink); text-align: left; }
.report-kpis > button:last-child { border-right: 0; }
.report-kpis > button:hover { background: var(--crm-selected); }
.report-kpis span,.report-kpis small { color: var(--crm-muted); font-size: 11px; }
.report-kpis strong { font-size: 22px; letter-spacing: -.035em; }
.report-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.report-bars { display: grid; padding: 10px 16px 14px; }
.report-bar-row { display: grid; min-height: 38px; grid-template-columns: 130px minmax(80px,1fr) 28px; align-items: center; gap: 10px; }
.report-bar-row span { overflow: hidden; color: var(--crm-secondary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.report-bar-row i { height: 5px; overflow: hidden; border-radius: 4px; background: var(--crm-line-soft); }
.report-bar-row b { display: block; height: 100%; border-radius: inherit; background: var(--crm-blue); }
.report-bar-row strong { text-align: right; font-size: 11px; }
.report-table { display: grid; }
.report-table button { display: grid; min-height: 52px; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 16px; padding: 9px 16px; border: 0; border-bottom: 1px solid var(--crm-line-soft); background: white; color: var(--crm-secondary); font-size: 11px; text-align: right; }
.report-table button:last-child { border-bottom: 0; }
.report-table button:hover { background: var(--crm-selected); }
.report-table button > span:first-child { display: grid; gap: 2px; color: var(--crm-ink); text-align: left; }
.report-table small { color: var(--crm-muted); }

.team-register { overflow: hidden; border: 1px solid var(--crm-line); border-radius: var(--radius-lg); background: white; }
.team-register-head { padding: 18px 20px; border-bottom: 1px solid var(--crm-line-soft); }
.team-register-head h3 { margin: 4px 0; font-size: 15px; }
.team-register-head p { margin: 0; color: var(--crm-muted); font-size: 11px; }
.team-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.team-card { min-width: 0; padding: 18px; border-right: 1px solid var(--crm-line-soft); border-bottom: 1px solid var(--crm-line-soft); }
.team-card:nth-child(2n) { border-right: 0; }
.team-card header { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.team-card header > span:nth-child(2) { display: grid; gap: 2px; }
.team-card header strong { font-size: 11px; }
.team-card header small,.team-card p { color: var(--crm-muted); font-size: 11px; }
.team-monogram { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: var(--crm-selected); color: var(--crm-blue); font-size: 11px; font-weight: 800; }
.team-lead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-block: 9px; border-block: 1px solid var(--crm-line-soft); }
.team-lead span { color: var(--crm-muted); font-size: 11px; }
.team-lead strong { font-size: 11px; }
.team-members { display: flex; min-height: 48px; align-items: center; padding-top: 10px; }
.team-members > span { display: grid; width: 28px; height: 28px; margin-right: -5px; place-items: center; border: 2px solid white; border-radius: 50%; background: var(--crm-ink); color: white; font-size: 11px; font-weight: 800; }
.team-members small { margin-left: 12px; color: var(--crm-muted); font-size: 11px; }
.team-workload { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: hidden; border: 1px solid var(--crm-line-soft); border-radius: var(--radius-md); }
.team-workload button { display: grid; min-height: 54px; align-content: center; gap: 2px; border: 0; border-right: 1px solid var(--crm-line-soft); background: var(--crm-surface); color: var(--crm-ink); }
.team-workload button:last-child { border-right: 0; }
.team-workload button:hover { background: var(--crm-selected); }
.team-workload strong { font-size: 14px; }
.team-workload span { color: var(--crm-muted); font-size: 11px; }
.team-card p { margin: 12px 0 0; line-height: 1.55; }

.citizen-flow-list { display: grid; gap: 8px; }
.citizen-flow-entry { display: grid; min-height: 62px; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--crm-line); border-radius: var(--radius-md); background: white; }
.citizen-flow-entry > span { display: grid; min-width: 0; gap: 3px; }
.citizen-flow-entry > span:nth-child(2) { justify-items: end; }
.citizen-flow-entry strong { font-size: 11px; }
.citizen-flow-entry small,.citizen-flow-entry time { overflow: hidden; color: var(--crm-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.inline-check { display: flex !important; min-height: 34px; align-items: center; flex-direction: row !important; gap: 8px !important; }
.inline-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--crm-blue); }
.team-member-fieldset { margin: 0; padding: 10px; border: 1px solid var(--crm-line); border-radius: var(--radius-md); }
.team-member-fieldset legend { padding: 0 5px; color: var(--crm-secondary); font-size: 11px; font-weight: 800; }
.team-member-fieldset > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.team-member-fieldset label { display: flex; min-height: 32px; align-items: center; flex-direction: row; gap: 7px; padding: 5px 7px; border-radius: 4px; background: var(--crm-surface); }
.team-member-fieldset input { width: 14px; height: 14px; margin: 0; accent-color: var(--crm-blue); }
.record-drawer .drawer-tabs { grid-template-columns: repeat(6,minmax(88px,1fr)); overflow-x: auto; }
.record-drawer .drawer-tabs button { min-width: 88px; }

@media (max-width: 1180px) {
  .flow-filters { grid-template-columns: minmax(240px,1fr) repeat(2,minmax(130px,1fr)); }
  .flow-filters > :nth-child(4) { grid-column: 2; }
  .flow-filters > :last-child { justify-self: end; }
  .campaign-workspace { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 900px) {
  .flow-summary,.communication-overview,.report-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .flow-summary > button:nth-child(2),.communication-overview > div:nth-child(2),.report-kpis > button:nth-child(2) { border-right: 0; }
  .flow-summary > button:nth-child(-n+2),.communication-overview > div:nth-child(-n+2),.report-kpis > button:nth-child(-n+2) { border-bottom: 1px solid var(--crm-line-soft); }
  .campaign-workspace { grid-template-columns: minmax(0,1fr); }
  .campaign-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .report-filterbar { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .report-filter-note { grid-column: 1 / -1; text-align: left; }
  .report-grid,.team-grid { grid-template-columns: minmax(0,1fr); }
  .team-card { border-right: 0; }
}

@media (max-width: 640px) {
  .flow-filters { grid-template-columns: minmax(0,1fr); }
  .flow-filters > :nth-child(n) { grid-column: auto; }
  .flow-filters > :last-child { width: 100%; justify-self: stretch; }
  .interaction-entry { grid-template-columns: 30px minmax(0,1fr); }
  .interaction-meta { grid-column: 2; justify-items: start; }
  .campaign-list { grid-template-columns: minmax(0,1fr); }
  .campaign-filterbar { grid-template-columns: minmax(0,1fr); gap: 7px; }
  .campaign-detail-head { flex-direction: column; padding: 16px; }
  .campaign-detail-actions { width: 100%; }
  .campaign-detail-actions .btn { flex: 1; }
  .campaign-facts,.campaign-outcomes,.report-filterbar,.report-kpis { grid-template-columns: minmax(0,1fr); }
  .campaign-facts > div { border-left: 0; border-bottom: 1px solid var(--crm-line-soft); }
  .campaign-outcomes > *,.report-kpis > button { border-right: 0; border-bottom: 1px solid var(--crm-line-soft); }
  .campaign-facts > div:last-child,.campaign-outcomes > *:last-child,.report-kpis > button:last-child { border-bottom: 0; }
  .campaign-action-section > header { align-items: flex-start; flex-direction: column; }
  .campaign-action-progress { width: 100%; }
  .campaign-action-progress span { text-align: left; }
  .report-filter-note { grid-column: auto; }
  .report-bar-row { grid-template-columns: 100px minmax(60px,1fr) 24px; }
  .team-card { padding: 14px; }
  .team-card header { grid-template-columns: 36px minmax(0,1fr); }
  .team-card header .btn { grid-column: 1 / -1; width: 100%; }
  .citizen-flow-entry { grid-template-columns: minmax(0,1fr) auto; }
  .citizen-flow-entry .btn { grid-column: 1 / -1; width: 100%; }
}

/* Notification center: actionable operational alerts, kept separate from page navigation. */
.notification-nav { position: relative; }
.notification-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(440px,100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--crm-line);
  border-radius: 0;
  background: white;
  color: var(--crm-ink);
  box-shadow: -18px 0 40px rgb(20 30 45 / .12);
}
.notification-drawer::backdrop { background: rgb(15 20 28 / .32); }
.notification-shell { display: flex; height: 100%; flex-direction: column; }
.notification-head {
  display: flex;
  min-height: 92px;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid var(--crm-line-soft);
}
.notification-head h2 { margin: 4px 0 0; font-size: 20px; letter-spacing: -.035em; }
.notification-head p { margin: 5px 0 0; color: var(--crm-muted); font-size: 11px; }
.notification-toolbar {
  display: flex;
  min-height: 52px;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--crm-line-soft);
  background: var(--crm-surface);
}
.notification-filters { display: flex; gap: 3px; }
.notification-filters button {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--crm-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}
.notification-filters button:hover { color: var(--crm-ink); }
.notification-filters button.active { border-color: var(--crm-line); background: white; color: var(--crm-blue); }
.notification-toolbar .text-button { max-width: 160px; font-size: 11px; line-height: 1.35; text-align: right; }
.notification-toolbar .text-button:disabled { color: var(--crm-muted); cursor: default; opacity: .52; }
.notification-list { min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.notification-item { border-bottom: 1px solid var(--crm-line-soft); }
.notification-item > button {
  display: grid;
  width: 100%;
  min-height: 88px;
  grid-template-columns: 9px minmax(0,1fr) 14px;
  align-items: start;
  gap: 11px;
  padding: 15px 18px;
  border: 0;
  background: white;
  color: var(--crm-ink);
  font: inherit;
  text-align: left;
}
.notification-item > button:hover { background: var(--crm-surface); }
.notification-item.unread > button { background: oklch(98% .009 250); }
.notification-item.unread > button:hover { background: var(--crm-selected); }
.notification-mark { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--crm-muted); }
.notification-item[data-kind='urgent'] .notification-mark { background: var(--crm-danger); box-shadow: 0 0 0 3px oklch(95% .025 25); }
.notification-item[data-kind='attention'] .notification-mark { background: var(--crm-warning); box-shadow: 0 0 0 3px oklch(96% .03 80); }
.notification-item[data-kind='info'] .notification-mark { background: var(--crm-blue); box-shadow: 0 0 0 3px var(--crm-selected); }
.notification-item[data-kind='security'] .notification-mark { background: oklch(52% .12 295); box-shadow: 0 0 0 3px oklch(95% .025 295); }
.notification-copy { display: grid; min-width: 0; gap: 4px; }
.notification-title { display: flex; min-width: 0; align-items: center; gap: 7px; }
.notification-title strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.notification-title i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--crm-blue); }
.notification-copy small { overflow: hidden; color: var(--crm-secondary); font-size: 11px; line-height: 1.45; text-overflow: ellipsis; }
.notification-copy time { color: var(--crm-muted); font-size: 11px; }
.notification-arrow { align-self: center; color: var(--crm-muted); font-size: 20px; line-height: 1; }
.notification-empty { display: grid; flex: 1; place-content: center; justify-items: center; gap: 7px; padding: 32px; color: var(--crm-muted); text-align: center; }
.notification-empty .icon { width: 22px; height: 22px; margin-bottom: 3px; }
.notification-empty strong { color: var(--crm-ink); font-size: 11px; }
.notification-empty span { max-width: 250px; font-size: 11px; line-height: 1.5; }
.notification-item > button:focus-visible,.notification-filters button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--crm-blue); outline-offset: -2px; }
.notification-button i {
  top: -5px;
  right: -5px;
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 2px solid white;
  border-radius: 9px;
  background: var(--crm-danger);
  color: white;
  font: 800 7px/1 Manrope,sans-serif;
  font-style: normal;
}
.notification-button i[hidden] { display: none; }

@media (max-width: 1180px) {
  .settings-center { grid-template-columns: 190px minmax(0,1fr); gap: 12px; }
  .settings-user-row { grid-template-columns: 36px minmax(160px,1fr) auto auto; }
  .settings-user-actions { grid-column: 2 / -1; justify-content: flex-start; }
}

@media (max-width: 900px) {
  html,body.crm-erp { max-width: 100%; overflow-x: hidden; }
  .settings-save-state { display: none; }
  .settings-center { grid-template-columns: minmax(0,1fr); }
  .settings-nav { position: static; display: flex; overflow-x: auto; padding: 5px; }
  .settings-nav p { display: none; }
  .settings-nav button { min-width: max-content; grid-template-columns: 16px auto auto; border-radius: 4px; }
  .settings-workspace { width: 100%; }
}

@media (max-width: 640px) {
  .notification-drawer { width: 100vw; }
  .notification-head { min-height: 84px; padding: 16px 14px; }
  .notification-toolbar { align-items: flex-start; flex-direction: column; padding: 9px 14px; }
  .notification-toolbar .text-button { max-width: none; text-align: left; }
  .notification-item > button { padding-inline: 14px; }
  .topbar-tools .notification-button { display: inline-flex; }
  .settings-section-head { min-height: 76px; align-items: flex-start; flex-direction: column; padding: 14px; }
  .settings-section-head .btn { width: 100%; }
  .settings-form-grid,.compact-grid { grid-template-columns: minmax(0,1fr); padding: 16px 14px; }
  .settings-form-grid .span-2 { grid-column: auto; }
  .settings-form-footer { align-items: stretch; flex-direction: column; padding: 12px 14px; }
  .settings-form-footer .btn { width: 100%; }
  .settings-switch-list label { padding-inline: 14px; }
  .settings-notice { align-items: flex-start; flex-direction: column; padding-inline: 14px; }
  .role-summary { grid-template-columns: minmax(0,1fr); }
  .role-summary > div { border-right: 0; border-bottom: 1px solid var(--crm-line-soft); }
  .role-summary > div:last-child { border-bottom: 0; }
  .settings-user-row { grid-template-columns: 36px minmax(0,1fr) auto; padding-inline: 12px; }
  .settings-user-row .role-badge { grid-column: 2; width: max-content; }
  .settings-user-row .account-state { grid-column: 3; grid-row: 1; }
  .settings-user-actions { grid-column: 2 / -1; }
  .settings-audit-entry { grid-template-columns: 10px minmax(0,1fr); padding-inline: 14px; }
  .settings-audit-entry > span:last-child { grid-column: 2; justify-items: start; }
}

/* Signed-in account actions in the rail */
.account-chip form { margin: 0; }
.account-action { display: inline-flex; width: 30px; height: 30px; flex: none; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--rail-muted); }
.account-action:hover { background: var(--rail-hover); color: white; }
.account-action .icon { width: 16px; height: 16px; }

/* Users: server-backed accounts */
.settings-user-meta small + small { color: var(--crm-muted); }
.user-dialog-note { margin: 0 18px 12px; padding: 9px 11px; border: 1px solid var(--crm-line-soft); border-radius: var(--radius-md); background: var(--crm-selected); color: var(--crm-secondary); font-size: 11px; }
.user-dialog footer .dialog-actions { display: flex; gap: 8px; margin-left: auto; }
.password-reveal { display: grid; gap: 14px; padding: 16px 18px; }
.password-reveal > p { margin: 0; color: var(--crm-secondary); font-size: 12px; }
.password-value { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--crm-line); border-radius: var(--radius-md); background: var(--crm-inset); }
.password-value code { flex: 1; min-width: 0; color: var(--crm-ink); font: 800 16px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; overflow-wrap: anywhere; user-select: all; }
.password-meta { display: grid; gap: 6px; margin: 0; font-size: 11px; }
.password-meta div { display: flex; flex-wrap: wrap; gap: 6px; }
.password-meta dt { color: var(--crm-muted); }
.password-meta dd { margin: 0; color: var(--crm-ink); overflow-wrap: anywhere; }

/* Authentication pages: login, password change, errors */
.auth-page { display: grid; min-height: 100dvh; align-items: center; justify-items: center; padding: 24px; background: var(--crm-surface); }
.auth-card { width: min(100%, 440px); overflow: hidden; border: 1px solid var(--crm-line); border-radius: var(--radius-md); background: white; }
.auth-brand { padding: 22px 28px; background: var(--rail); }
.auth-brand img { display: block; width: 170px; height: auto; }
.auth-content { padding: 26px 28px 24px; }
.auth-content h1 { margin: 6px 0 8px; font-size: 20px; font-weight: 800; line-height: 1.35; }
.auth-intro { margin: 0; color: var(--crm-secondary); font-size: 12px; }
.auth-alert { margin: 16px 0 0; padding: 9px 11px; border: 1px solid oklch(72% .1 25); border-radius: var(--radius-md); background: oklch(96% .025 25); color: var(--crm-danger); font-size: 11px; }
.auth-alert.success { border-color: oklch(78% .08 155); background: oklch(96.5% .03 155); color: var(--crm-success); }
.auth-content form > .btn:disabled { cursor: not-allowed; opacity: .55; }
.auth-content .record-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px 0 20px; }
.auth-content .record-grid small { color: var(--crm-muted); font-size: 10px; }
.auth-content form > .btn { width: 100%; min-height: 42px; font-size: 12px; }
.auth-footer { margin: 18px 0 0; color: var(--crm-muted); font-size: 10px; }
.auth-footer form { margin: 0; }
.auth-footer a, .auth-footer button { padding: 0; border: 0; background: none; color: var(--crm-blue); font-size: inherit; font-weight: 700; }
.auth-footer a:hover, .auth-footer button:hover { text-decoration: underline; }
.auth-footer-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.auth-footer-actions > span:last-child { display: flex; align-items: center; gap: 14px; }
.auth-page .record-kicker { display: block; }
@media (max-width: 420px) {
  .auth-page { padding: 12px; }
  .auth-brand, .auth-content { padding: 20px; }
}

/* Settings → Ειδοποιήσεις: server email (Resend) status */
.mail-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 18px 4px; padding: 12px 14px; border: 1px solid var(--crm-line); border-radius: var(--radius-md); background: var(--crm-inset); }
.mail-status-meta { display: grid; gap: 2px; min-width: 0; }
.mail-status-meta strong { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.mail-status-meta strong i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--crm-muted); }
.mail-status[data-ready="true"] .mail-status-meta strong i { background: var(--crm-success); }
.mail-status-meta small { color: var(--crm-secondary); font-size: 11px; overflow-wrap: anywhere; }